@quick-game/cli
Version:
Command line interface for rapid qg development
257 lines • 10.1 kB
JavaScript
// Copyright 2023 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import * as Common from '../../../../core/common/common.js';
import * as i18n from '../../../../core/i18n/i18n.js';
import { assertNotNullOrUndefined } from '../../../../core/platform/platform.js';
import * as SDK from '../../../../core/sdk/sdk.js';
import * as DataGrid from '../../../../ui/components/data_grid/data_grid.js';
import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
import * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
import * as NetworkForward from '../../../network/forward/forward.js';
import * as PreloadingHelper from '../helper/helper.js';
import ruleSetGridStyles from './ruleSetGrid.css.js';
import * as PreloadingString from './PreloadingString.js';
const UIStrings = {
/**
*@description Column header: Short URL of rule set.
*/
ruleSet: 'Rule set',
/**
*@description Column header: Show how many preloads are associated if valid, error counts if invalid.
*/
status: 'Status',
/**
*@description button: Title of button to reveal the corresponding request of rule set in Elements panel
*/
buttonClickToRevealInElementsPanel: 'Click to reveal in Elements panel',
/**
*@description button: Title of button to reveal the corresponding request of rule set in Network panel
*/
buttonClickToRevealInNetworkPanel: 'Click to reveal in Network panel',
/**
*@description Value of status, specifying rule set contains how many errors.
*/
errors: '{errorCount, plural, =1 {# error} other {# errors}}',
/**
*@description button: Title of button to reveal preloading attempts with filter by selected rule set
*/
buttonRevealPreloadsAssociatedWithRuleSet: 'Reveal preloads associated with this rule set',
};
const str_ = i18n.i18n.registerUIStrings('panels/application/preloading/components/RuleSetGrid.ts', UIStrings);
export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
// Grid component to show SpeculationRules rule sets.
export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent {
static litTagName = LitHtml.literal `devtools-resources-ruleset-grid`;
#shadow = this.attachShadow({ mode: 'open' });
#data = null;
connectedCallback() {
this.#shadow.adoptedStyleSheets = [ruleSetGridStyles];
this.#render();
}
update(data) {
this.#data = data;
this.#render();
}
#render() {
if (this.#data === null) {
return;
}
const reportsGridData = {
columns: [
{
id: 'ruleSet',
title: i18nString(UIStrings.ruleSet),
widthWeighting: 20,
hideable: false,
visible: true,
sortable: true,
},
{
id: 'status',
title: i18nString(UIStrings.status),
widthWeighting: 80,
hideable: false,
visible: true,
sortable: true,
},
],
rows: this.#buildReportRows(),
striped: true,
};
// Disabled until https://crbug.com/1079231 is fixed.
// clang-format off
LitHtml.render(LitHtml.html `
<div class="ruleset-container">
<${DataGrid.DataGridController.DataGridController.litTagName} .data=${reportsGridData}>
</${DataGrid.DataGridController.DataGridController.litTagName}>
</div>
`, this.#shadow, { host: this });
// clang-format on
}
#buildReportRows() {
assertNotNullOrUndefined(this.#data);
const pageURL = this.#data.pageURL;
return this.#data.rows.map(row => ({
cells: [
{ columnId: 'id', value: row.ruleSet.id },
{
columnId: 'ruleSet',
value: '',
renderer: () => ruleSetRenderer(row.ruleSet, pageURL),
},
{
columnId: 'status',
value: row.preloadsStatusSummary,
renderer: preloadsStatusSummary => statusRenderer(preloadsStatusSummary, row.ruleSet),
},
],
}));
}
}
ComponentHelpers.CustomElements.defineComponent('devtools-resources-ruleset-grid', RuleSetGrid);
function ruleSetRenderer(ruleSet, pageURL) {
function ruleSetRendererInnerDocument(ruleSet, location) {
assertNotNullOrUndefined(ruleSet.backendNodeId);
const revealSpeculationRulesInElements = async () => {
assertNotNullOrUndefined(ruleSet.backendNodeId);
const target = SDK.TargetManager.TargetManager.instance().scopeTarget();
if (target === null) {
return;
}
await Common.Revealer.reveal(new SDK.DOMModel.DeferredDOMNode(target, ruleSet.backendNodeId));
};
// Disabled until https://crbug.com/1079231 is fixed.
// clang-format off
return LitHtml.html `
<button class="link" role="link"
@click=${revealSpeculationRulesInElements}
title=${i18nString(UIStrings.buttonClickToRevealInElementsPanel)}
style=${LitHtml.Directives.styleMap({
border: 'none',
background: 'none',
'padding-inline-start': '0',
'padding-inline-end': '0',
})}
>
<${IconButton.Icon.Icon.litTagName}
.data=${{
iconName: 'code-circle',
color: 'var(--icon-link)',
width: '16px',
height: '16px',
}}
style=${LitHtml.Directives.styleMap({
'vertical-align': 'sub',
})}
>
</${IconButton.Icon.Icon.litTagName}>
${location}
</button>
`;
// clang-format on
}
function ruleSetRendererOutOfDocument(ruleSet, location) {
assertNotNullOrUndefined(ruleSet.url);
assertNotNullOrUndefined(ruleSet.requestId);
const revealSpeculationRulesInNetwork = async () => {
assertNotNullOrUndefined(ruleSet.requestId);
const request = SDK.TargetManager.TargetManager.instance()
.scopeTarget()
?.model(SDK.NetworkManager.NetworkManager)
?.requestForId(ruleSet.requestId) ||
null;
if (request === null) {
return;
}
const requestLocation = NetworkForward.UIRequestLocation.UIRequestLocation.tab(request, NetworkForward.UIRequestLocation.UIRequestTabs.Preview, { clearFilter: false });
await Common.Revealer.reveal(requestLocation);
};
// Disabled until https://crbug.com/1079231 is fixed.
// clang-format off
return LitHtml.html `
<button class="link" role="link"
@click=${revealSpeculationRulesInNetwork}
title=${i18nString(UIStrings.buttonClickToRevealInNetworkPanel)}
style=${LitHtml.Directives.styleMap({
border: 'none',
background: 'none',
'padding-inline-start': '0',
'padding-inline-end': '0',
})}
>
<${IconButton.Icon.Icon.litTagName}
.data=${{
iconName: 'arrow-up-down-circle',
color: 'var(--icon-link)',
width: '16px',
height: '16px',
}}
style=${LitHtml.Directives.styleMap({
'vertical-align': 'sub',
})}
>
</${IconButton.Icon.Icon.litTagName}>
${location}
</button>
`;
// clang-format on
}
const location = PreloadingString.ruleSetLocationShort(ruleSet, pageURL);
if (ruleSet.backendNodeId !== undefined) {
return ruleSetRendererInnerDocument(ruleSet, location);
}
if (ruleSet.url !== undefined && ruleSet.requestId) {
return ruleSetRendererOutOfDocument(ruleSet, location);
}
return LitHtml.html `${location}`;
}
function statusRenderer(preloadsStatusSummary, ruleSet) {
function counts(preloadsStatusSummary, ruleSet) {
const revealAttemptViewWithFilter = async () => {
await Common.Revealer.reveal(new PreloadingHelper.PreloadingForward.AttemptViewWithFilter(ruleSet.id));
};
// Disabled until https://crbug.com/1079231 is fixed.
// clang-format off
return LitHtml.html `
<button class="link" role="link"
@click=${revealAttemptViewWithFilter}
title=${i18nString(UIStrings.buttonRevealPreloadsAssociatedWithRuleSet)}
style=${LitHtml.Directives.styleMap({
color: 'var(--color-link)',
'text-decoration': 'underline',
border: 'none',
background: 'none',
'padding-inline-start': '0',
'padding-inline-end': '0',
})}
>
${preloadsStatusSummary}
</button>
`;
// clang-format on
}
function errors() {
const nErrors = i18nString(UIStrings.errors, { errorCount: 1 });
return LitHtml.html `
<span
style=${LitHtml.Directives.styleMap({
color: 'var(--color-error)',
})}
>
${nErrors}
</span>
`;
}
switch (ruleSet.errorType) {
case undefined:
return counts(preloadsStatusSummary, ruleSet);
case "SourceIsNotJsonObject" /* Protocol.Preload.RuleSetErrorType.SourceIsNotJsonObject */:
return errors();
case "InvalidRulesSkipped" /* Protocol.Preload.RuleSetErrorType.InvalidRulesSkipped */:
return LitHtml.html `${errors()} ${counts(preloadsStatusSummary, ruleSet)}`;
}
}
//# sourceMappingURL=RuleSetGrid.js.map