chrome-devtools-frontend 1.0.930109 → 1.0.930993

package/front_end/panels/css_overview/CSSOverviewPanel.ts

@@ -22,22 +22,22 @@ import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
 let CSSOverviewPanelInstance: CSSOverviewPanel;
 
 export class CSSOverviewPanel extends UI.Panel.Panel {
-  private readonly model: CSSOverviewModel;
-  private readonly controller: OverviewController;
-  private readonly startView: CSSOverviewComponents.CSSOverviewStartView.CSSOverviewStartView;
-  private readonly processingView: CSSOverviewProcessingView;
-  private readonly completedView: CSSOverviewCompletedView;
-  private backgroundColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
-  private textColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
-  private fillColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
-  private borderColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
-  private fontInfo!: Map<string, Map<string, Map<string, Protocol.DOM.BackendNodeId[]>>>;
-  private mediaQueries!: Map<string, Protocol.CSS.CSSMedia[]>;
-  private unusedDeclarations!: Map<string, UnusedDeclaration[]>;
-  private elementCount!: number;
-  private cancelled?: boolean;
-  private globalStyleStats!: GlobalStyleStats;
-  private textColorContrastIssues!: Map<string, ContrastIssue[]>;
+  readonly #model: CSSOverviewModel;
+  readonly #controller: OverviewController;
+  readonly #startView: CSSOverviewComponents.CSSOverviewStartView.CSSOverviewStartView;
+  readonly #processingView: CSSOverviewProcessingView;
+  readonly #completedView: CSSOverviewCompletedView;
+  #backgroundColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  #textColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  #fillColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  #borderColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  #fontInfo!: Map<string, Map<string, Map<string, Protocol.DOM.BackendNodeId[]>>>;
+  #mediaQueries!: Map<string, Protocol.CSS.CSSMedia[]>;
+  #unusedDeclarations!: Map<string, UnusedDeclaration[]>;
+  #elementCount!: number;
+  #cancelled?: boolean;
+  #globalStyleStats!: GlobalStyleStats;
+  #textColorContrastIssues!: Map<string, ContrastIssue[]>;
 
   private constructor() {
     super('css_overview');
@@ -45,23 +45,23 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
     this.element.classList.add('css-overview-panel');
 
     const [model] = SDK.TargetManager.TargetManager.instance().models(CSSOverviewModel);
-    this.model = (model as CSSOverviewModel);
+    this.#model = (model as CSSOverviewModel);
 
-    this.controller = new OverviewController();
-    this.startView = new CSSOverviewComponents.CSSOverviewStartView.CSSOverviewStartView();
-    this.startView.addEventListener(
-        'overviewstartrequested', () => this.controller.dispatchEventToListeners(Events.RequestOverviewStart));
-    this.processingView = new CSSOverviewProcessingView(this.controller);
-    this.completedView = new CSSOverviewCompletedView(this.controller, model.target());
+    this.#controller = new OverviewController();
+    this.#startView = new CSSOverviewComponents.CSSOverviewStartView.CSSOverviewStartView();
+    this.#startView.addEventListener(
+        'overviewstartrequested', () => this.#controller.dispatchEventToListeners(Events.RequestOverviewStart));
+    this.#processingView = new CSSOverviewProcessingView(this.#controller);
+    this.#completedView = new CSSOverviewCompletedView(this.#controller, model.target());
 
-    this.controller.addEventListener(Events.RequestOverviewStart, _event => {
+    this.#controller.addEventListener(Events.RequestOverviewStart, _event => {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.CaptureCssOverviewClicked);
       this.startOverview();
     }, this);
-    this.controller.addEventListener(Events.RequestOverviewCancel, this.cancelOverview, this);
-    this.controller.addEventListener(Events.OverviewCompleted, this.overviewCompleted, this);
-    this.controller.addEventListener(Events.Reset, this.reset, this);
-    this.controller.addEventListener(Events.RequestNodeHighlight, this.requestNodeHighlight, this);
+    this.#controller.addEventListener(Events.RequestOverviewCancel, this.cancelOverview, this);
+    this.#controller.addEventListener(Events.OverviewCompleted, this.overviewCompleted, this);
+    this.#controller.addEventListener(Events.Reset, this.reset, this);
+    this.#controller.addEventListener(Events.RequestNodeHighlight, this.requestNodeHighlight, this);
 
     this.reset();
   }
@@ -74,16 +74,16 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
   }
 
   private reset(): void {
-    this.backgroundColors = new Map();
-    this.textColors = new Map();
-    this.fillColors = new Map();
-    this.borderColors = new Map();
-    this.fontInfo = new Map();
-    this.mediaQueries = new Map();
-    this.unusedDeclarations = new Map();
-    this.elementCount = 0;
-    this.cancelled = false;
-    this.globalStyleStats = {
+    this.#backgroundColors = new Map();
+    this.#textColors = new Map();
+    this.#fillColors = new Map();
+    this.#borderColors = new Map();
+    this.#fontInfo = new Map();
+    this.#mediaQueries = new Map();
+    this.#unusedDeclarations = new Map();
+    this.#elementCount = 0;
+    this.#cancelled = false;
+    this.#globalStyleStats = {
       styleRules: 0,
       inlineStyles: 0,
       externalSheets: 0,
@@ -99,45 +99,45 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
         nonSimple: 0,
       },
     };
-    this.textColorContrastIssues = new Map();
+    this.#textColorContrastIssues = new Map();
     this.renderInitialView();
   }
 
   private requestNodeHighlight(evt: Common.EventTarget.EventTargetEvent<number>): void {
-    this.model.highlightNode((evt.data as Protocol.DOM.BackendNodeId));
+    this.#model.highlightNode((evt.data as Protocol.DOM.BackendNodeId));
   }
 
   private renderInitialView(): void {
-    this.processingView.hideWidget();
-    this.completedView.hideWidget();
+    this.#processingView.hideWidget();
+    this.#completedView.hideWidget();
 
-    this.contentElement.append(this.startView);
-    this.startView.show();
+    this.contentElement.append(this.#startView);
+    this.#startView.show();
   }
 
   private renderOverviewStartedView(): void {
-    this.startView.hide();
-    this.completedView.hideWidget();
+    this.#startView.hide();
+    this.#completedView.hideWidget();
 
-    this.processingView.show(this.contentElement);
+    this.#processingView.show(this.contentElement);
   }
 
   private renderOverviewCompletedView(): void {
-    this.startView.hide();
-    this.processingView.hideWidget();
-
-    this.completedView.show(this.contentElement);
-    this.completedView.setOverviewData({
-      backgroundColors: this.backgroundColors,
-      textColors: this.textColors,
-      textColorContrastIssues: this.textColorContrastIssues,
-      fillColors: this.fillColors,
-      borderColors: this.borderColors,
-      globalStyleStats: this.globalStyleStats,
-      fontInfo: this.fontInfo,
-      elementCount: this.elementCount,
-      mediaQueries: this.mediaQueries,
-      unusedDeclarations: this.unusedDeclarations,
+    this.#startView.hide();
+    this.#processingView.hideWidget();
+
+    this.#completedView.show(this.contentElement);
+    this.#completedView.setOverviewData({
+      backgroundColors: this.#backgroundColors,
+      textColors: this.#textColors,
+      textColorContrastIssues: this.#textColorContrastIssues,
+      fillColors: this.#fillColors,
+      borderColors: this.#borderColors,
+      globalStyleStats: this.#globalStyleStats,
+      fontInfo: this.#fontInfo,
+      elementCount: this.#elementCount,
+      mediaQueries: this.#mediaQueries,
+      unusedDeclarations: this.#unusedDeclarations,
     });
   }
 
@@ -145,52 +145,52 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
     this.renderOverviewStartedView();
 
     const [globalStyleStats, { elementCount, backgroundColors, textColors, textColorContrastIssues, fillColors, borderColors, fontInfo, unusedDeclarations }, mediaQueries] = await Promise.all([
-      this.model.getGlobalStylesheetStats(),
-      this.model.getNodeStyleStats(),
-      this.model.getMediaQueries(),
+      this.#model.getGlobalStylesheetStats(),
+      this.#model.getNodeStyleStats(),
+      this.#model.getMediaQueries(),
     ]);
 
     if (elementCount) {
-      this.elementCount = elementCount;
+      this.#elementCount = elementCount;
     }
 
     if (globalStyleStats) {
-      this.globalStyleStats = globalStyleStats;
+      this.#globalStyleStats = globalStyleStats;
     }
 
     if (mediaQueries) {
-      this.mediaQueries = mediaQueries;
+      this.#mediaQueries = mediaQueries;
     }
 
     if (backgroundColors) {
-      this.backgroundColors = backgroundColors;
+      this.#backgroundColors = backgroundColors;
     }
 
     if (textColors) {
-      this.textColors = textColors;
+      this.#textColors = textColors;
     }
 
     if (textColorContrastIssues) {
-      this.textColorContrastIssues = textColorContrastIssues;
+      this.#textColorContrastIssues = textColorContrastIssues;
     }
 
     if (fillColors) {
-      this.fillColors = fillColors;
+      this.#fillColors = fillColors;
     }
 
     if (borderColors) {
-      this.borderColors = borderColors;
+      this.#borderColors = borderColors;
     }
 
     if (fontInfo) {
-      this.fontInfo = fontInfo;
+      this.#fontInfo = fontInfo;
     }
 
     if (unusedDeclarations) {
-      this.unusedDeclarations = unusedDeclarations;
+      this.#unusedDeclarations = unusedDeclarations;
     }
 
-    this.controller.dispatchEventToListeners(Events.OverviewCompleted);
+    this.#controller.dispatchEventToListeners(Events.OverviewCompleted);
   }
 
   private getStyleValue(styles: Protocol.CSS.CSSComputedStyleProperty[], name: string): string|undefined {
@@ -203,7 +203,7 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
   }
 
   private cancelOverview(): void {
-    this.cancelled = true;
+    this.#cancelled = true;
   }
 
   private overviewCompleted(): void {

package/front_end/panels/css_overview/CSSOverviewProcessingView.ts

@@ -19,20 +19,20 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/css_overview/CSSOverviewProcessingView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class CSSOverviewProcessingView extends UI.Widget.Widget {
-  private readonly formatter: Intl.NumberFormat;
-  private readonly controller: OverviewController;
+  readonly #formatter: Intl.NumberFormat;
+  readonly #controller: OverviewController;
   fragment?: UI.Fragment.Fragment;
   constructor(controller: OverviewController) {
     super();
 
-    this.formatter = new Intl.NumberFormat('en-US');
-    this.controller = controller;
+    this.#formatter = new Intl.NumberFormat('en-US');
+    this.#controller = controller;
     this.render();
   }
 
   private render(): void {
     const cancelButton = UI.UIUtils.createTextButton(
-        i18nString(UIStrings.cancel), () => this.controller.dispatchEventToListeners(Events.RequestOverviewCancel), '',
+        i18nString(UIStrings.cancel), () => this.#controller.dispatchEventToListeners(Events.RequestOverviewCancel), '',
         true /* primary */);
     this.setDefaultFocusedElement(cancelButton);
 

package/front_end/panels/css_overview/components/CSSOverviewStartView.ts

@@ -75,7 +75,7 @@ export class OverviewStartRequestedEvent extends Event {
 
 export class CSSOverviewStartView extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-css-overview-start-view`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
   #feedbackLink: HTMLAnchorElement;
 
   constructor() {
@@ -87,7 +87,7 @@ export class CSSOverviewStartView extends HTMLElement {
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [cssOverviewStartViewStyles];
+    this.#shadow.adoptedStyleSheets = [cssOverviewStartViewStyles];
     this.render();
   }
 
@@ -149,12 +149,12 @@ export class CSSOverviewStartView extends HTMLElement {
         </section>
         <a class="feedback-standalone" href=${FEEDBACK_LINK} target="_blank">${i18nString(UIStrings.feedbackStandalone)}</a>
       </div>
-    `, this.shadow, {
+    `, this.#shadow, {
       host: this,
     });
     // clang-format on
 
-    const startButton = this.shadow.querySelector<HTMLElement>('.start-capture');
+    const startButton = this.#shadow.querySelector<HTMLElement>('.start-capture');
     if (startButton) {
       startButton.focus();
     }

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -39,8 +39,9 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
+import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
+
 import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
-import * as TextEditorLegacy from '../../ui/legacy/components/text_editor/text_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Emulation from '../emulation/emulation.js';
@@ -1730,18 +1731,13 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         if (node.parentNode && node.parentNode.nodeName().toLowerCase() === 'script') {
           const newNode = titleDOM.createChild('span', 'webkit-html-text-node webkit-html-js-node');
           const text = node.nodeValue();
-          newNode.textContent = text.startsWith('\n') ? text.substring(1) : text;
-
-          const javascriptSyntaxHighlighter =
-              new TextEditorLegacy.SyntaxHighlighter.SyntaxHighlighter('text/javascript', true);
-          javascriptSyntaxHighlighter.syntaxHighlightNode(newNode).then(updateSearchHighlight);
+          newNode.textContent = text.replace(/^[\n\r]+|\s+$/g, '');
+          CodeHighlighter.CodeHighlighter.highlightNode(newNode, 'text/javascript').then(updateSearchHighlight);
         } else if (node.parentNode && node.parentNode.nodeName().toLowerCase() === 'style') {
           const newNode = titleDOM.createChild('span', 'webkit-html-text-node webkit-html-css-node');
           const text = node.nodeValue();
-          newNode.textContent = text.startsWith('\n') ? text.substring(1) : text;
-
-          const cssSyntaxHighlighter = new TextEditorLegacy.SyntaxHighlighter.SyntaxHighlighter('text/css', true);
-          cssSyntaxHighlighter.syntaxHighlightNode(newNode).then(updateSearchHighlight);
+          newNode.textContent = text.replace(/^[\n\r]+|\s+$/g, '');
+          CodeHighlighter.CodeHighlighter.highlightNode(newNode, 'text/css').then(updateSearchHighlight);
         } else {
           UI.UIUtils.createTextChild(titleDOM, '"');
           const textNodeElement = titleDOM.createChild('span', 'webkit-html-text-node');

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -35,6 +35,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {linkifyDeferredNodeReference} from './DOMLinkifier.js';
@@ -105,7 +106,8 @@ export class ElementsTreeOutline extends
     this.treeElementByNode = new WeakMap();
     const shadowContainer = document.createElement('div');
     this.shadowRoot = UI.Utils.createShadowRootWithCoreStyles(
-        shadowContainer, {cssFile: [elementsTreeOutlineStyles], delegatesFocus: undefined});
+        shadowContainer,
+        {cssFile: [elementsTreeOutlineStyles, CodeHighlighter.Style.default], delegatesFocus: undefined});
     const outlineDisclosureElement = this.shadowRoot.createChild('div', 'elements-disclosure');
 
     this.elementInternal = this.element;

package/front_end/panels/elements/components/LayoutPane.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../../core/common/common.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import type {BooleanSetting, EnumSetting, Setting} from './LayoutPaneUtils.js';
@@ -53,6 +54,10 @@ const UIStrings = {
   *@description Text in the Layout panel, when no flexbox elements are found
   */
   noFlexboxLayoutsFoundOnThisPage: 'No flexbox layouts found on this page',
+  /**
+  *@description Screen reader announcement when opening color picker tool.
+  */
+  colorPickerOpened: 'Color picker opened.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/elements/components/LayoutPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -240,6 +245,7 @@ export class LayoutPane extends HTMLElement {
       const target = event.target as HTMLLabelElement;
       const input = target.querySelector('input') as HTMLInputElement;
       input.click();
+      UI.ARIAUtils.alert(i18nString(UIStrings.colorPickerOpened));
       event.preventDefault();
     };
     const onColorLabelKeyDown = (event: KeyboardEvent): void => {

package/front_end/panels/elements/elementsPanel.css

@@ -31,7 +31,6 @@
   flex: 1 1;
   overflow: auto;
   padding: 2px 0 0 0;
-  background-color: var(--color-background);
 }
 
 .style-panes-wrapper {

package/front_end/panels/elements/elementsTreeOutline.css

@@ -314,10 +314,6 @@ select {
 }
 /** Guide line */
 
-li.selected {
-  z-index: 0;
-}
-
 li.hovered:not(.always-parent) + ol.children,
 .elements-tree-outline ol.shadow-root,
 li.selected:not(.always-parent) + ol.children {

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -90,8 +90,13 @@ export class ProtocolService {
 
   private initWorker(): Promise<Worker> {
     this.lighthouseWorkerPromise = new Promise<Worker>(resolve => {
-      const worker = new Worker(
-          new URL('../../entrypoints/lighthouse_worker/lighthouse_worker.js', import.meta.url), {type: 'module'});
+      const workerUrl = new URL('../../entrypoints/lighthouse_worker/lighthouse_worker.js', import.meta.url);
+      const remoteBaseSearchParam = new URL(self.location.href).searchParams.get('remoteBase');
+      if (remoteBaseSearchParam) {
+        // Allows Lighthouse worker to fetch remote locale files.
+        workerUrl.searchParams.set('remoteBase', remoteBaseSearchParam);
+      }
+      const worker = new Worker(workerUrl, {type: 'module'});
 
       worker.addEventListener('message', event => {
         if (event.data === 'workerReady') {

package/front_end/panels/network/BlockedURLsPane.ts

@@ -135,18 +135,20 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
     this.list.addNewItem(0, {url: '', enabled: true});
   }
 
-  renderItem(pattern: SDK.NetworkManager.BlockedPattern, _editable: boolean): Element {
+  renderItem(pattern: SDK.NetworkManager.BlockedPattern, editable: boolean): Element {
     const count = this.blockedRequestsCount(pattern.url);
     const element = document.createElement('div');
     element.classList.add('blocked-url');
     const checkbox = (element.createChild('input', 'blocked-url-checkbox') as HTMLInputElement);
     checkbox.type = 'checkbox';
     checkbox.checked = pattern.enabled;
-    checkbox.disabled = !this.manager.blockingEnabled();
+    checkbox.disabled = !editable;
     element.createChild('div', 'blocked-url-label').textContent = pattern.url;
     element.createChild('div', 'blocked-url-count').textContent = i18nString(UIStrings.dBlocked, {PH1: count});
-    element.addEventListener('click', event => this.togglePattern(pattern, event));
-    checkbox.addEventListener('click', event => this.togglePattern(pattern, event));
+    if (editable) {
+      element.addEventListener('click', event => this.togglePattern(pattern, event));
+      checkbox.addEventListener('click', event => this.togglePattern(pattern, event));
+    }
     return element;
   }
 
@@ -226,10 +228,11 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
   private update(): Promise<void> {
     const enabled = this.manager.blockingEnabled();
     this.list.element.classList.toggle('blocking-disabled', !enabled && Boolean(this.manager.blockedPatterns().length));
+
     this.enabledCheckbox.setChecked(enabled);
     this.list.clear();
     for (const pattern of this.manager.blockedPatterns()) {
-      this.list.appendItem(pattern, true);
+      this.list.appendItem(pattern, enabled);
     }
     return Promise.resolve();
   }

package/front_end/panels/network/blockedURLsPane.css

@@ -10,7 +10,6 @@
 }
 
 .blocking-disabled {
-  pointer-events: none;
   opacity: 80%;
 }
 

package/front_end/panels/search/SearchView.ts

@@ -440,8 +440,6 @@ export class SearchView extends UI.Widget.VBox {
   }
 
   private onAction(): void {
-    // Resetting alert variable to prime for next search query result.
-    UI.ARIAUtils.alert(' ');
     const searchConfig = this.buildSearchConfig();
     if (!searchConfig.query() || !searchConfig.query().length) {
       return;