chrome-devtools-frontend 1.0.1555174 → 1.0.1556696

package/front_end/panels/application/preloading/components/PreloadingGrid.ts

@@ -1,7 +1,6 @@
 // Copyright 2022 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../../ui/legacy/components/data_grid/data_grid.js';
 import '../../../../ui/kit/kit.js';
@@ -11,8 +10,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
-import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import type * as UI from '../../../../ui/legacy/legacy.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import preloadingGridStyles from './preloadingGrid.css.js';
@@ -41,11 +39,12 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/preloading/components/PreloadingGrid.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const {render, html, Directives: {styleMap}} = Lit;
+const {render, html, nothing, Directives: {styleMap}} = Lit;
 
-export interface PreloadingGridData {
-  rows: PreloadingGridRow[];
-  pageURL: Platform.DevToolsPath.UrlString;
+// Shorten URL if a preloading attempt is same-origin.
+function urlShort(row: PreloadingGridRow, securityOrigin: string|null): string {
+  const url = row.pipeline.getOriginallyTriggered().key.url;
+  return securityOrigin && url.startsWith(securityOrigin) ? url.slice(securityOrigin.length) : url;
 }
 
 export interface PreloadingGridRow {
@@ -54,87 +53,105 @@ export interface PreloadingGridRow {
   ruleSets: Protocol.Preload.RuleSet[];
 }
 
-/** Grid component to show prerendering attempts. **/
-export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #data: PreloadingGridData|null = null;
+export interface ViewInput {
+  rows?: PreloadingGridRow[];
+  pageURL?: Platform.DevToolsPath.UrlString;
+  onSelect?: ({rowId}: {rowId: string}) => void;
+}
 
-  connectedCallback(): void {
-    this.#render();
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const PRELOADING_GRID_DEFAULT_VIEW: View = (input, _output, target): void => {
+  if (!input.rows || input.pageURL === undefined) {
+    render(nothing, target);
+    return;
   }
 
-  update(data: PreloadingGridData): void {
-    this.#data = data;
-    this.#render();
+  const {rows, pageURL} = input;
+  const securityOrigin = pageURL === '' ? null : (new Common.ParsedURL.ParsedURL(pageURL)).securityOrigin();
+
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
+  render(html`
+    <style>${preloadingGridStyles}</style>
+    <div class="preloading-container">
+      <devtools-data-grid striped>
+        <table>
+          <tr>
+            <th id="url" weight="40" sortable>${i18n.i18n.lockedString('URL')}</th>
+            <th id="action" weight="15" sortable>${i18nString(UIStrings.action)}</th>
+            <th id="rule-set" weight="20" sortable>${i18nString(UIStrings.ruleSet)}</th>
+            <th id="status" weight="40" sortable>${i18nString(UIStrings.status)}</th>
+          </tr>
+          ${rows.map(row => {
+            const attempt = row.pipeline.getOriginallyTriggered();
+            const prefetchStatus = row.pipeline.getPrefetch()?.status;
+            const prerenderStatus = row.pipeline.getPrerender()?.status;
+            const hasWarning =
+                (prerenderStatus === PreloadingStatus.FAILURE &&
+                (prefetchStatus === PreloadingStatus.READY || prefetchStatus === PreloadingStatus.SUCCESS));
+            const hasError = row.pipeline.getOriginallyTriggered().status === PreloadingStatus.FAILURE;
+            return html`<tr @select=${() => input.onSelect?.({rowId: row.id})}>
+              <td title=${attempt.key.url}>${urlShort(row, securityOrigin)}</td>
+              <td>${capitalizedAction(attempt.action)}</td>
+              <td>${row.ruleSets.length === 0 ? '' : ruleSetTagOrLocationShort(row.ruleSets[0], pageURL)}</td>
+              <td data-value=${sortOrder(attempt)}>
+                <div style=${styleMap({color: hasWarning ? 'var(--sys-color-orange-bright)'
+                                              : hasError   ? 'var(--sys-color-error)'
+                                                            : 'var(--sys-color-on-surface)'})}>
+                  ${(hasError || hasWarning) ?  html`
+                    <devtools-icon
+                      name=${hasWarning ? 'warning-filled' : 'cross-circle-filled'}
+                      class='medium'
+                      style=${styleMap({
+                        'vertical-align': 'sub',
+                      })}
+                    ></devtools-icon>` : ''}
+                  ${hasWarning ? i18nString(UIStrings.prefetchFallbackReady) : composedStatus(attempt)}
+                </div>
+              </td>
+            </tr>`;
+          })}
+        </table>
+      </devtools-data-grid>
+    </div>
+  `, target);
+};  // clang-format on
+
+/** Grid component to show prerendering attempts. **/
+export class PreloadingGrid extends UI.Widget.VBox {
+  #view: View;
+  #rows?: PreloadingGridRow[];
+  #pageURL?: Platform.DevToolsPath.UrlString;
+  #onSelect?: ({rowId}: {rowId: string}) => void;
+
+  constructor(view?: View) {
+    super();
+    this.#view = view ?? PRELOADING_GRID_DEFAULT_VIEW;
+    this.requestUpdate();
   }
 
-  #render(): void {
-    if (!this.#data) {
-      return;
-    }
-    const {rows, pageURL} = this.#data;
-    const securityOrigin = pageURL === '' ? null : (new Common.ParsedURL.ParsedURL(pageURL)).securityOrigin();
-
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    render(html`
-      <style>${preloadingGridStyles}</style>
-      <div class="preloading-container">
-        <devtools-data-grid striped>
-          <table>
-            <tr>
-              <th id="url" weight="40" sortable>${i18n.i18n.lockedString('URL')}</th>
-              <th id="action" weight="15" sortable>${i18nString(UIStrings.action)}</th>
-              <th id="rule-set" weight="20" sortable>${i18nString(UIStrings.ruleSet)}</th>
-              <th id="status" weight="40" sortable>${i18nString(UIStrings.status)}</th>
-            </tr>
-            ${rows.map(row => {
-              const attempt = row.pipeline.getOriginallyTriggered();
-              const prefetchStatus = row.pipeline.getPrefetch()?.status;
-              const prerenderStatus = row.pipeline.getPrerender()?.status;
-              const hasWarning =
-                  (prerenderStatus === PreloadingStatus.FAILURE &&
-                  (prefetchStatus === PreloadingStatus.READY || prefetchStatus === PreloadingStatus.SUCCESS));
-              const hasError = row.pipeline.getOriginallyTriggered().status === PreloadingStatus.FAILURE;
-              return html`<tr @select=${() => this.dispatchEvent(new CustomEvent('select', {detail: row.id}))}>
-                <td title=${attempt.key.url}>${this.#urlShort(row, securityOrigin)}</td>
-                <td>${capitalizedAction(attempt.action)}</td>
-                <td>${row.ruleSets.length === 0 ? '' : ruleSetTagOrLocationShort(row.ruleSets[0], pageURL)}</td>
-                <td data-value=${sortOrder(attempt)}>
-                  <div style=${styleMap({color: hasWarning ? 'var(--sys-color-orange-bright)'
-                                                : hasError   ? 'var(--sys-color-error)'
-                                                             : 'var(--sys-color-on-surface)'})}>
-                    ${(hasError || hasWarning) ?  html`
-                      <devtools-icon
-                        name=${hasWarning ? 'warning-filled' : 'cross-circle-filled'}
-                        class='medium'
-                        style=${styleMap({
-                          'vertical-align': 'sub',
-                        })}
-                      ></devtools-icon>` : ''}
-                    ${hasWarning ? i18nString(UIStrings.prefetchFallbackReady) : composedStatus(attempt)}
-                  </div>
-                </td>
-              </tr>`;
-            })}
-          </table>
-        </devtools-data-grid>
-      </div>
-    `, this.#shadow, {host: this});
-    // clang-format on
+  set rows(rows: PreloadingGridRow[]) {
+    this.#rows = rows;
+    this.requestUpdate();
   }
 
-  // Shorten URL if a preloading attempt is same-origin.
-  #urlShort(row: PreloadingGridRow, securityOrigin: string|null): string {
-    const url = row.pipeline.getOriginallyTriggered().key.url;
-    return securityOrigin && url.startsWith(securityOrigin) ? url.slice(securityOrigin.length) : url;
+  set pageURL(pageURL: Platform.DevToolsPath.UrlString) {
+    this.#pageURL = pageURL;
+    this.requestUpdate();
   }
-}
 
-customElements.define('devtools-resources-preloading-grid', PreloadingGrid);
+  set onSelect(onSelect: ({rowId}: {rowId: string}) => void) {
+    this.#onSelect = onSelect;
+    this.requestUpdate();
+  }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-preloading-grid': PreloadingGrid;
+  override performUpdate(): void {
+    const viewInput: ViewInput = {
+      rows: this.#rows,
+      pageURL: this.#pageURL,
+      onSelect: this.#onSelect?.bind(this),
+    };
+    this.#view(viewInput, undefined, this.contentElement);
   }
 }

package/front_end/panels/application/preloading/components/preloadingGrid.css

@@ -3,37 +3,34 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
+@scope to (devtools-widget > *){
+  .preloading-container {
+    overflow: auto;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 
-:host {
-  overflow: auto;
-  height: 100%;
-}
-
-.preloading-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
+    devtools-data-grid {
+      flex: auto;
+    }
 
-.preloading-header {
-  font-size: 15px;
-  background-color: var(--sys-color-cdt-base-container);
-  padding: 1px 4px;
-}
+    .inline-icon {
+      vertical-align: text-bottom;
+    }
+  }
 
-.preloading-placeholder {
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 13px;
-  color: var(--sys-color-token-subtle);
-}
-
-devtools-data-grid {
-  flex: auto;
-}
+  .preloading-header {
+    font-size: 15px;
+    background-color: var(--sys-color-cdt-base-container);
+    padding: 1px 4px;
+  }
 
-.inline-icon {
-  vertical-align: text-bottom;
+  .preloading-placeholder {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    color: var(--sys-color-token-subtle);
+  }
 }

package/front_end/panels/application/preloading/preloadingView.css

@@ -26,3 +26,9 @@
     margin: var(--sys-size-2) 0;
   }
 }
+
+devtools-split-view {
+  .preloading-grid-widget-container > .vbox {
+    height: 100%;
+  }
+}

package/front_end/panels/common/Annotation.ts

@@ -4,7 +4,7 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import * as Annotations from '../../ui/components/annotations/annotations.js';
+import * as Annotations from '../../models/annotations/annotations.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import {html, nothing, render} from '../../ui/lit/lit.js';

package/front_end/panels/common/AnnotationManager.ts

@@ -4,7 +4,7 @@
 
 import type * as Common from '../../core/common/common.js';
 import type * as SDK from '../../core/sdk/sdk.js';
-import * as Annotations from '../../ui/components/annotations/annotations.js';
+import * as Annotations from '../../models/annotations/annotations.js';
 
 import {Annotation} from './Annotation.js';
 

package/front_end/panels/common/ExtensionView.ts

@@ -25,6 +25,7 @@ const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement)
   render(html`<iframe
     ${ref(element => {output.iframe = element as HTMLIFrameElement; })}
     src=${input.src}
+    allow="language-model; summarizer; translator; language-detector; writer; rewriter; proofreader; clipboard-write; autoplay"
     class=${input.className}
     @load=${input.onLoad}></iframe>`, target);
   // clang-format on

package/front_end/panels/console/ConsoleContextSelector.ts

@@ -1,16 +1,17 @@
 // Copyright 2015 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 
 import consoleContextSelectorStyles from './consoleContextSelector.css.js';
 
+const {render, nothing, html} = Lit;
 const UIStrings = {
   /**
    * @description Title of toolbar item in console context selector of the console panel
@@ -211,14 +212,12 @@ export class ConsoleContextSelector implements SDK.TargetManager.SDKModelObserve
   }
 
   createElementForItem(item: SDK.RuntimeModel.ExecutionContext): Element {
-    const element = document.createElement('div');
-    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(element, {cssFile: consoleContextSelectorStyles});
-    const title = shadowRoot.createChild('div', 'title');
-    UI.UIUtils.createTextChild(title, Platform.StringUtilities.trimEndWithMaxLength(this.titleFor(item), 100));
-    const subTitle = shadowRoot.createChild('div', 'subtitle');
-    UI.UIUtils.createTextChild(subTitle, this.subtitleFor(item));
-    element.style.paddingLeft = (8 + this.depthFor(item) * 15) + 'px';
-    return element;
+    const consoleContextSelectorElement = new ConsoleContextSelectorElement();
+    consoleContextSelectorElement.title = this.titleFor(item);
+    consoleContextSelectorElement.subtitle = this.subtitleFor(item);
+    consoleContextSelectorElement.itemDepth = this.depthFor(item);
+    consoleContextSelectorElement.markAsRoot();
+    return consoleContextSelectorElement.contentElement;
   }
 
   private subtitleFor(executionContext: SDK.RuntimeModel.ExecutionContext): string {
@@ -293,3 +292,69 @@ export class ConsoleContextSelector implements SDK.TargetManager.SDKModelObserve
     }
   }
 }
+
+interface ViewInput {
+  title?: string;
+  subtitle?: string;
+  itemDepth?: number;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+const DEFAULT_VIEW: View = (input, _output, target): void => {
+  if (!input.title || !input.subtitle) {
+    render(nothing, target);
+    return;
+  }
+
+  const paddingLeft = input.itemDepth ? (8 + input.itemDepth * 15) + 'px' : undefined;
+
+  // clang-format off
+  render(
+    html`
+      <style>${consoleContextSelectorStyles}</style>
+      <div class="console-context-selector-element" style="padding-left: ${paddingLeft};">
+        <div class="title">${Platform.StringUtilities.trimEndWithMaxLength(input.title, 100)}</div>
+        <div class="subtitle">${input.subtitle}</div>
+      </div>
+    `,
+    target);
+  // clang-format on
+};
+
+export class ConsoleContextSelectorElement extends UI.Widget.Widget {
+  #view: View;
+  #title?: string;
+  #subtitle?: string;
+  #itemDepth?: number;
+
+  constructor(element?: HTMLElement, view?: View) {
+    super(element, {useShadowDom: true});
+    this.#view = view ?? DEFAULT_VIEW;
+    this.requestUpdate();
+  }
+
+  set title(title: string) {
+    this.#title = title;
+    this.requestUpdate();
+  }
+
+  set subtitle(subtitle: string) {
+    this.#subtitle = subtitle;
+    this.requestUpdate();
+  }
+
+  set itemDepth(itemDepth: number) {
+    this.#itemDepth = itemDepth;
+    this.requestUpdate();
+  }
+
+  override async performUpdate(): Promise<void> {
+    const viewInput: ViewInput = {
+      title: this.#title,
+      subtitle: this.#subtitle,
+      itemDepth: this.#itemDepth,
+    };
+    this.#view(viewInput, undefined, this.contentElement);
+  }
+}

package/front_end/panels/console/consoleContextSelector.css

@@ -4,37 +4,39 @@
  * found in the LICENSE file.
  */
 
-:host {
-  padding: 2px 1px 2px 2px;
-  white-space: nowrap;
-  display: flex;
-  flex-direction: column;
-  height: 36px;
-  justify-content: center;
-  overflow-y: auto;
-}
+.widget {
+  .console-context-selector-element{
+    padding: 2px 1px 2px 2px;
+    white-space: nowrap;
+    display: flex;
+    flex-direction: column;
+    height: 36px;
+    justify-content: center;
+    overflow-y: auto;
 
-.title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex-grow: 0;
-}
+    .title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex-grow: 0;
+    }
 
-.badge {
-  pointer-events: none;
-  margin-right: 4px;
-  display: inline-block;
-  height: 15px;
-}
+    .subtitle {
+      color: var(--sys-color-token-subtle);
+      margin-right: 3px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex-grow: 0;
+    }
 
-.subtitle {
-  color: var(--sys-color-token-subtle);
-  margin-right: 3px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex-grow: 0;
-}
+    .badge {
+      pointer-events: none;
+      margin-right: 4px;
+      display: inline-block;
+      height: 15px;
+    }
+  }
 
-:host(.highlighted) .subtitle {
-  color: inherit;
+  &.highlighted .console-context-selector-element .subtitle {
+    color: inherit;
+  }
 }

package/front_end/panels/coverage/coverageListView.css

@@ -4,80 +4,82 @@
  * found in the LICENSE file.
  */
 
-.data-grid {
-  border: none;
-}
-
-.data-grid td .url-outer {
-  width: 100%;
-  display: inline-flex;
-  justify-content: flex-start;
-}
-
-.data-grid td .url-outer .filter-highlight {
-  font-weight: bold;
-}
-
-.data-grid td .url-prefix {
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-}
-
-.data-grid td .url-suffix {
-  flex: none;
-}
+ @scope to (devtools-widget > *) {
+  .data-grid {
+    border: none;
+  }
 
-.data-grid td .bar {
-  display: inline-block;
-  height: 8px;
-  border: 1px solid transparent;
-}
+  .data-grid td .url-outer {
+    width: 100%;
+    display: inline-flex;
+    justify-content: flex-start;
+  }
 
-.data-grid td .bar-unused-size {
-  background-color: var(--app-color-coverage-unused);
-}
+  .data-grid td .url-outer .filter-highlight {
+    font-weight: bold;
+  }
 
-.data-grid td .bar-used-size {
-  background-color: var(--app-color-coverage-used);
-}
+  .data-grid td .url-prefix {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
 
-.data-grid td .percent-value {
-  width: 7ex;
-  display: inline-block;
-  color: var(--sys-color-on-surface-subtle);
-}
+  .data-grid td .url-suffix {
+    flex: none;
+  }
 
-@media (forced-colors: active) {
-  .data-grid td .bar-container {
-    forced-color-adjust: none;
+  .data-grid td .bar {
+    display: inline-block;
+    height: 8px;
+    border: 1px solid transparent;
   }
 
   .data-grid td .bar-unused-size {
-    background-color: ButtonText;
+    background-color: var(--app-color-coverage-unused);
   }
 
   .data-grid td .bar-used-size {
-    background-color: ButtonFace;
+    background-color: var(--app-color-coverage-used);
   }
 
-  .data-grid td .bar {
-    border-color: ButtonText;
+  .data-grid td .percent-value {
+    width: 7ex;
+    display: inline-block;
+    color: var(--sys-color-on-surface-subtle);
   }
 
-  .data-grid .selected td .bar {
-    border-top-color: HighlightText;
-    border-bottom-color: HighlightText;
-  }
+  @media (forced-colors: active) {
+    .data-grid td .bar-container {
+      forced-color-adjust: none;
+    }
 
-  .data-grid .selected td .bar:last-child {
-    border-right-color: HighlightText;
-  }
+    .data-grid td .bar-unused-size {
+      background-color: ButtonText;
+    }
 
-  .data-grid .selected td .bar:first-child {
-    border-left-color: HighlightText;
-  }
+    .data-grid td .bar-used-size {
+      background-color: ButtonFace;
+    }
+
+    .data-grid td .bar {
+      border-color: ButtonText;
+    }
+
+    .data-grid .selected td .bar {
+      border-top-color: HighlightText;
+      border-bottom-color: HighlightText;
+    }
+
+    .data-grid .selected td .bar:last-child {
+      border-right-color: HighlightText;
+    }
+
+    .data-grid .selected td .bar:first-child {
+      border-left-color: HighlightText;
+    }
 
-  .data-grid:focus tr.selected span.percent-value {
-    color: HighlightText;
+    .data-grid:focus tr.selected span.percent-value {
+      color: HighlightText;
+    }
   }
 }

package/front_end/panels/elements/ElementsPanel.ts

@@ -40,9 +40,9 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as Annotations from '../../models/annotations/annotations.js';
 import * as PanelCommon from '../../panels/common/common.js';
 import type * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as UI from '../../ui/legacy/legacy.js';