chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/front_end/panels/lighthouse/LighthouseStatusView.ts

@@ -1,18 +1,20 @@
 // Copyright 2018 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 Geometry from '../../models/geometry/geometry.js';
-import type * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 
 import {RuntimeSettings} from './LighthouseController.js';
 import lighthouseDialogStyles from './lighthouseDialog.css.js';
 import type {LighthousePanel} from './LighthousePanel.js';
 
+const {html} = Lit;
+
 const UIStrings = {
   /**
    * @description Text to cancel something
@@ -151,27 +153,110 @@ const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseStatusView
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
+export interface ViewInput {
+  statusHeader: string;
+  statusText: string;
+  progressBarClass: string;
+  progressBarValue: number;
+  progressBarTotal: number;
+  cancelButtonVisible: boolean;
+  onCancel: () => void;
+  bugReport?: {
+    error: Error,
+    auditURL: string,
+    knownBugPattern?: boolean,
+  };
+}
+
+export const DEFAULT_VIEW = (input: ViewInput, _output: object, target: HTMLElement|DocumentFragment): void => {
+  const {
+    statusHeader,
+    statusText,
+    progressBarClass,
+    progressBarValue,
+    progressBarTotal,
+    cancelButtonVisible,
+    onCancel,
+    bugReport,
+  } = input;
+
+  const renderBugReportBody = (err: Error, auditURL: string): Lit.TemplateResult => {
+    const chromeVersion = navigator.userAgent.match(/Chrome\/(\S+)/) || ['', 'Unknown'];
+    // @ts-expect-error Lighthouse sets `friendlyMessage` on certain
+    // important errors such as PROTOCOL_TIMEOUT.
+    const errorMessage = err.friendlyMessage || err.message;
+    const issueBody = `
+${errorMessage}
+\`\`\`
+Channel: DevTools
+Initial URL: ${auditURL}
+Chrome Version: ${chromeVersion[1]}
+Stack Trace: ${err.stack}
+\`\`\`
+`;
+    return html`
+      <p>${i18nString(UIStrings.ifThisIssueIsReproduciblePlease)}</p>
+      <code class="monospace">${issueBody.trim()}</code>
+    `;
+  };
+
+  // clang-format off
+  Lit.render(html`
+    <div class="lighthouse-view vbox">
+      <span class="header">${statusHeader}</span>
+      <div class="lighthouse-status vbox">
+        <div class="lighthouse-progress-wrapper">
+          <div
+            class="lighthouse-progress-bar ${progressBarClass}"
+            role="progressbar"
+            aria-valuemin="0"
+            aria-valuemax=${progressBarTotal}
+            aria-valuenow=${progressBarValue}
+            aria-valuetext=${statusText}
+          ></div>
+        </div>
+        <div class="lighthouse-status-text" role="status">
+          ${bugReport ? html`
+            <p>${i18nString(UIStrings.ahSorryWeRanIntoAnError)}</p>
+            ${bugReport.knownBugPattern ? html`
+              <p>${i18nString(UIStrings.tryToNavigateToTheUrlInAFresh)}</p>
+            ` : renderBugReportBody(bugReport.error, bugReport.auditURL)}
+          ` : statusText}
+        </div>
+      </div>
+      <div class="lighthouse-action-buttons">
+        <devtools-button
+          .variant=${Buttons.Button.Variant.TONAL}
+          .jslogContext=${'lighthouse.cancel'}
+          @click=${onCancel}
+          style=${Lit.Directives.styleMap({visibility: cancelButtonVisible ? 'visible' : 'hidden'})}
+        >${i18nString(UIStrings.cancel)}</devtools-button>
+      </div>
+    </div>
+  `, target);
+  // clang-format on
+};
+
 export class StatusView {
   private readonly panel: LighthousePanel;
-  private statusHeader: Element|null;
-  private progressBar: Element|null;
-  private statusText: Element|null;
-  private cancelButton: Buttons.Button.Button|null;
   private inspectedURL: string;
   private textChangedAt: number;
   private fastFactsQueued: Common.UIString.LocalizedString[];
   private currentPhase: StatusPhase|null;
   private scheduledFastFactTimeout: number|null;
+  private dialogRoot: ShadowRoot|null = null;
   private readonly dialog: UI.Dialog.Dialog;
 
+  private statusHeader: string;
+  private statusText: string;
+  private progressBarClass: string;
+  private progressBarValue: number;
+  private cancelButtonVisible: boolean;
+  private bugReport: {error: Error, auditURL: string, knownBugPattern?: boolean}|null;
+
   constructor(panel: LighthousePanel) {
     this.panel = panel;
 
-    this.statusHeader = null;
-    this.progressBar = null;
-    this.statusText = null;
-    this.cancelButton = null;
-
     this.inspectedURL = '';
     this.textChangedAt = 0;
     this.fastFactsQueued = FastFacts.map(lazyString => lazyString());
@@ -182,43 +267,36 @@ export class StatusView {
     this.dialog.setDimmed(true);
     this.dialog.setCloseOnEscape(false);
     this.dialog.setOutsideClickCallback(event => event.consume(true));
+
+    this.statusHeader = '';
+    this.statusText = '';
+    this.progressBarClass = '';
+    this.progressBarValue = 0;
+    this.cancelButtonVisible = true;
+    this.bugReport = null;
+
     this.render();
   }
 
   private render(): void {
-    const dialogRoot =
-        UI.UIUtils.createShadowRootWithCoreStyles(this.dialog.contentElement, {cssFile: lighthouseDialogStyles});
-    const lighthouseViewElement = dialogRoot.createChild('div', 'lighthouse-view vbox');
-
-    const cancelButton = UI.UIUtils.createTextButton(i18nString(UIStrings.cancel), this.cancel.bind(this), {
-      jslogContext: 'lighthouse.cancel',
-    });
-    const fragment = UI.Fragment.Fragment.build`
-  <span $="status-header" class="header">Auditing your web page…</span>
-  <div class="lighthouse-status vbox" $="status-view">
-  <div class="lighthouse-progress-wrapper" $="progress-wrapper">
-  <div class="lighthouse-progress-bar" $="progress-bar"></div>
-  </div>
-  <div class="lighthouse-status-text" $="status-text"></div>
-  </div>
-  <div class="lighthouse-action-buttons">
-  ${cancelButton}
-  </div>
-  `;
-
-    lighthouseViewElement.appendChild(fragment.element());
-
-    this.statusHeader = fragment.$('status-header');
-    this.progressBar = fragment.$('progress-bar');
-    this.statusText = fragment.$('status-text');
-    // Use StatusPhases array index as progress bar value
-    UI.ARIAUtils.markAsProgressBar(this.progressBar, 0, StatusPhases.length - 1);
-    this.cancelButton = cancelButton;
-    UI.ARIAUtils.markAsStatus(this.statusText);
-
-    this.dialog.setDefaultFocusedElement(cancelButton);
-    this.dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_WIDTH_MAX_HEIGHT);
-    this.dialog.setMaxContentSize(new Geometry.Size(500, 400));
+    if (!this.dialogRoot) {
+      this.dialogRoot =
+          UI.UIUtils.createShadowRootWithCoreStyles(this.dialog.contentElement, {cssFile: lighthouseDialogStyles});
+      this.dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_WIDTH_MAX_HEIGHT);
+      this.dialog.setMaxContentSize(new Geometry.Size(500, 400));
+    }
+    DEFAULT_VIEW(
+        {
+          statusHeader: this.statusHeader,
+          statusText: this.statusText,
+          progressBarClass: this.progressBarClass,
+          progressBarValue: this.progressBarValue,
+          progressBarTotal: StatusPhases.length - 1,
+          cancelButtonVisible: this.cancelButtonVisible,
+          onCancel: this.cancel.bind(this),
+          bugReport: this.bugReport || undefined,
+        },
+        {}, this.dialogRoot);
   }
 
   private reset(): void {
@@ -229,6 +307,10 @@ export class StatusView {
     this.fastFactsQueued = FastFacts.map(lazyString => lazyString());
     this.currentPhase = null;
     this.scheduledFastFactTimeout = null;
+    this.bugReport = null;
+    this.statusText = '';
+    this.progressBarValue = 0;
+    this.cancelButtonVisible = true;
   }
 
   show(dialogRenderElement: Element): void {
@@ -241,12 +323,12 @@ export class StatusView {
         pageHost ? i18nString(UIStrings.auditingS, {PH1: pageHost}) : i18nString(UIStrings.auditingYourWebPage);
     this.renderStatusHeader(statusHeader);
     this.dialog.show(dialogRenderElement);
+    this.render();
   }
 
   private renderStatusHeader(statusHeader?: string): void {
-    if (this.statusHeader) {
-      this.statusHeader.textContent = `${statusHeader}…`;
-    }
+    this.statusHeader = `${statusHeader}…`;
+    this.render();
   }
 
   hide(): void {
@@ -260,7 +342,7 @@ export class StatusView {
   }
 
   updateStatus(message: string|null): void {
-    if (!message || !this.statusText) {
+    if (!message) {
       return;
     }
 
@@ -281,11 +363,9 @@ export class StatusView {
       this.scheduleFastFactCheck();
       this.resetProgressBarClasses();
 
-      if (this.progressBar) {
-        this.progressBar.classList.add(nextPhase.progressBarClass);
-        const nextPhaseIndex = StatusPhases.indexOf(nextPhase);
-        UI.ARIAUtils.setProgressBarValue(this.progressBar, nextPhaseIndex, text);
-      }
+      this.progressBarClass = nextPhase.progressBarClass;
+      this.progressBarValue = StatusPhases.indexOf(nextPhase);
+      this.render();
     }
   }
 
@@ -314,9 +394,8 @@ export class StatusView {
   }
 
   private resetProgressBarClasses(): void {
-    if (this.progressBar) {
-      this.progressBar.className = 'lighthouse-progress-bar';
-    }
+    this.progressBarClass = '';
+    this.render();
   }
 
   private scheduleFastFactCheck(): void {
@@ -348,11 +427,9 @@ export class StatusView {
   }
 
   private commitTextChange(text: string): void {
-    if (!this.statusText) {
-      return;
-    }
     this.textChangedAt = performance.now();
-    this.statusText.textContent = text;
+    this.statusText = text;
+    this.render();
   }
 
   renderBugReport(err: Error): void {
@@ -362,53 +439,25 @@ export class StatusView {
     }
 
     this.resetProgressBarClasses();
-
-    if (this.progressBar) {
-      this.progressBar.classList.add('errored');
-    }
-
-    if (this.statusText) {
-      this.commitTextChange('');
-      UI.UIUtils.createTextChild(this.statusText.createChild('p'), i18nString(UIStrings.ahSorryWeRanIntoAnError));
-      if (KnownBugPatterns.some(pattern => pattern.test(err.message))) {
-        const message = i18nString(UIStrings.tryToNavigateToTheUrlInAFresh);
-        UI.UIUtils.createTextChild(this.statusText.createChild('p'), message);
-      } else {
-        this.renderBugReportBody(err, this.inspectedURL);
-      }
-    }
+    this.progressBarClass = 'errored';
+    this.statusText = '';
+
+    this.bugReport = {
+      error: err,
+      auditURL: this.inspectedURL,
+      knownBugPattern: KnownBugPatterns.some(pattern => pattern.test(err.message)),
+    };
+    this.render();
   }
 
   renderText(statusHeader: string, text: string): void {
-    this.renderStatusHeader(statusHeader);
+    this.statusHeader = `${statusHeader}…`;
     this.commitTextChange(text);
   }
 
   toggleCancelButton(show: boolean): void {
-    if (this.cancelButton) {
-      this.cancelButton.style.visibility = show ? 'visible' : 'hidden';
-    }
-  }
-
-  private renderBugReportBody(err: Error, auditURL: string): void {
-    const chromeVersion = navigator.userAgent.match(/Chrome\/(\S+)/) || ['', 'Unknown'];
-    // @ts-expect-error Lighthouse sets `friendlyMessage` on certain
-    // important errors such as PROTOCOL_TIMEOUT.
-    const errorMessage = err.friendlyMessage || err.message;
-    const issueBody = `
-${errorMessage}
-\`\`\`
-Channel: DevTools
-Initial URL: ${auditURL}
-Chrome Version: ${chromeVersion[1]}
-Stack Trace: ${err.stack}
-\`\`\`
-`;
-    if (this.statusText) {
-      UI.UIUtils.createTextChild(
-          this.statusText.createChild('p'), i18nString(UIStrings.ifThisIssueIsReproduciblePlease));
-      UI.UIUtils.createTextChild(this.statusText.createChild('code', 'monospace'), issueBody.trim());
-    }
+    this.cancelButtonVisible = show;
+    this.render();
   }
 }
 

package/front_end/panels/linear_memory_inspector/components/LinearMemoryHighlightChipList.ts

@@ -1,11 +1,11 @@
 // 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/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 import {Directives, html, render, type TemplateResult} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -30,86 +30,112 @@ const str_ = i18n.i18n.registerUIStrings(
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {classMap} = Directives;
 
-export interface LinearMemoryHighlightChipListData {
+interface ViewInput {
   highlightInfos: HighlightInfo[];
   focusedMemoryHighlight?: HighlightInfo;
-  jumpToAddress?: (address: number) => void;
-  deleteHighlight?: (highlightInfo: HighlightInfo) => void;
+  onJumpToAddress: (address: number) => void;
+  onDeleteHighlight: (highlightInfo: HighlightInfo) => void;
 }
 
-export class LinearMemoryHighlightChipList extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+const DEFAULT_VIEW: View = (input, output, target) => {
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
+  render(html`
+    <style>${linearMemoryHighlightChipListStyles}</style>
+    <div class="highlight-chip-list">
+      ${input.highlightInfos.map(highlightInfo => renderChip(highlightInfo, input))}
+    </div>`, target);
+  // clang-format on
+};
+
+function renderChip(highlightInfo: HighlightInfo, input: ViewInput): TemplateResult {
+  const expressionName = highlightInfo.name || '<anonymous>';
+  const expressionType = highlightInfo.type;
+  const isFocused = highlightInfo === input.focusedMemoryHighlight;
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
+  return html`
+    <div class=${classMap({focused: isFocused, 'highlight-chip': true})}>
+      <button class="jump-to-highlight-button"
+              title=${i18nString(UIStrings.jumpToAddress)}
+              jslog=${VisualLogging.action('linear-memory-inspector.jump-to-highlight')
+                         .track({click:true})}
+              @click=${() => input.onJumpToAddress(highlightInfo.startAddress)}>
+        <span class="source-code">
+          <span class="value">${expressionName}</span>
+          <span class="separator">: </span>
+          <span>${expressionType}</span>
+        </span>
+      </button>
+      <div class="delete-highlight-container">
+        <button class="delete-highlight-button" title=${i18nString(UIStrings.deleteHighlight)}
+            jslog=${VisualLogging.action('linear-memory-inspector.delete-highlight')
+                       .track({click:true})}
+            @click=${() => input.onDeleteHighlight(highlightInfo)}>
+          <devtools-icon name="cross" class="medium">
+          </devtools-icon>
+        </button>
+      </div>
+    </div>`;
+    // clang-format off
+  }
+
+export class LinearMemoryHighlightChipList extends UI.Widget.Widget {
   #highlightedAreas: HighlightInfo[] = [];
   #focusedMemoryHighlight?: HighlightInfo;
-  #jumpToAddress?: (address: number) => void;
-  #deleteHighlight?: (highlightInfo: HighlightInfo) => void;
-
-  set data(data: LinearMemoryHighlightChipListData) {
-    this.#highlightedAreas = data.highlightInfos;
-    this.#focusedMemoryHighlight = data.focusedMemoryHighlight;
-    this.#jumpToAddress = data.jumpToAddress;
-    this.#deleteHighlight = data.deleteHighlight;
-    this.#render();
+  #jumpToAddress = (_: number): void => {};
+  #deleteHighlight = (_: HighlightInfo): void => {};
+  #view: View;
+
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
   }
 
-  #render(): void {
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    render(html`
-      <style>${linearMemoryHighlightChipListStyles}</style>
-      <div class="highlight-chip-list">
-        ${this.#highlightedAreas.map(highlightInfo => this.#createChip(highlightInfo))}
-      </div>`, this.#shadow);
-    // clang-format on
+  set highlightInfos(highlightInfos: HighlightInfo[]) {
+    this.#highlightedAreas = highlightInfos;
+    this.requestUpdate();
   }
 
-  #createChip(highlightInfo: HighlightInfo): TemplateResult {
-    const expressionName = highlightInfo.name || '<anonymous>';
-    const expressionType = highlightInfo.type;
-    const isFocused = highlightInfo === this.#focusedMemoryHighlight;
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <div class=${classMap({focused: isFocused, 'highlight-chip': true})}>
-        <button class="jump-to-highlight-button"
-                title=${i18nString(UIStrings.jumpToAddress)}
-                jslog=${VisualLogging.action('linear-memory-inspector.jump-to-highlight')
-                          .track({click:true})}
-                @click=${() => this.#onJumpToHighlightClick(highlightInfo.startAddress)}>
-          <span class="source-code">
-            <span class="value">${expressionName}</span>
-            <span class="separator">: </span>
-            <span>${expressionType}</span>
-          </span>
-        </button>
-        <div class="delete-highlight-container">
-          <button class="delete-highlight-button" title=${i18nString(UIStrings.deleteHighlight)}
-              jslog=${VisualLogging.action('linear-memory-inspector.delete-highlight')
-                          .track({click:true})}
-              @click=${() => this.#onDeleteHighlightClick(highlightInfo)}>
-            <devtools-icon name="cross" class="medium">
-            </devtools-icon>
-          </button>
-        </div>
-      </div>`;
-    // clang-format off
+  get highlightInfos(): HighlightInfo[] {
+    return this.#highlightedAreas;
   }
 
-  #onJumpToHighlightClick(startAddress: number): void {
-    this.#jumpToAddress?.(startAddress);
+  set focusedMemoryHighlight(focusedMemoryHighlight: HighlightInfo|undefined) {
+    this.#focusedMemoryHighlight = focusedMemoryHighlight;
+    this.requestUpdate();
   }
 
-  #onDeleteHighlightClick(highlight: HighlightInfo): void {
-    this.#deleteHighlight?.(highlight);
+  get focusedMemoryHighlight(): HighlightInfo|undefined {
+    return this.#focusedMemoryHighlight;
   }
-}
 
-customElements.define(
-    'devtools-linear-memory-highlight-chip-list', LinearMemoryHighlightChipList);
+  set jumpToAddress(jumpToAddress: (address: number) => void) {
+    this.#jumpToAddress = jumpToAddress;
+    this.requestUpdate();
+  }
 
-declare global {
+  get jumpToAddress(): (address: number) => void {
+    return this.#jumpToAddress;
+  }
+
+  set deleteHighlight(deleteHighlight: (highlightInfo: HighlightInfo) => void) {
+    this.#deleteHighlight = deleteHighlight;
+    this.requestUpdate();
+  }
+
+  get deleteHighlight(): (highlightInfo: HighlightInfo) => void {
+    return this.#deleteHighlight;
+  }
 
-  interface HTMLElementTagNameMap {
-    'devtools-linear-memory-highlight-chip-list': LinearMemoryHighlightChipList;
+  override performUpdate(): void {
+    this.#view({
+      highlightInfos: this.#highlightedAreas,
+      focusedMemoryHighlight: this.#focusedMemoryHighlight,
+      onJumpToAddress: this.#jumpToAddress,
+      onDeleteHighlight: this.#deleteHighlight,
+    }, undefined, this.contentElement);
   }
 }