chrome-devtools-frontend 1.0.1568864 → 1.0.1569477

package/front_end/panels/elements/MetricsSidebarPane.ts

@@ -1,8 +1,6 @@
 // Copyright 2021 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 */
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
@@ -45,6 +43,144 @@ import metricsSidebarPaneStyles from './metricsSidebarPane.css.js';
 
 const {live} = Directives;
 
+interface ViewInput {
+  style: Map<string, string>;
+  highlightedMode: string;
+  node: SDK.DOMModel.DOMNode|null;
+  contentWidth: string;
+  contentHeight: string;
+  onHighlightNode: (showHighlight: boolean, mode: string) => void;
+  onStartEditing: (target: Element, box: string, styleProperty: string, computedStyle: Map<string, string>) => void;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+const DEFAULT_VIEW: View = (input, output, target) => {
+  const {style, highlightedMode, node, contentWidth, contentHeight, onHighlightNode, onStartEditing} = input;
+
+  function createBoxPartElement(style: Map<string, string>, name: string, side: string, suffix: string): LitTemplate {
+    const propertyName = (name !== 'position' ? name + '-' : '') + side + suffix;
+    let value = style.get(propertyName);
+
+    if (value === '' || (name !== 'position' && value === 'unset')) {
+      value = '\u2012';
+    } else if (name === 'position' && value === 'auto') {
+      value = '\u2012';
+    }
+    value = value?.replace(/px$/, '');
+    value = value ? Platform.NumberUtilities.toFixedIfFloating(value) : value;
+    // clang-format off
+    return html`<div class=${side} jslog=${VisualLogging.value(propertyName).track({
+        dblclick: true, keydown: 'Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown', change: true,
+        })}
+        @dblclick=${(e: Event) => onStartEditing(e.currentTarget as Element, name, propertyName, style)}
+        .innerText=${live(value ?? '')}>
+    </div>`;
+    // clang-format on
+  }
+
+  // Display types for which margin is ignored.
+  const noMarginDisplayType = new Set<string>([
+    'table-cell',
+    'table-column',
+    'table-column-group',
+    'table-footer-group',
+    'table-header-group',
+    'table-row',
+    'table-row-group',
+  ]);
+
+  // Display types for which padding is ignored.
+  const noPaddingDisplayType = new Set<string>([
+    'table-column',
+    'table-column-group',
+    'table-footer-group',
+    'table-header-group',
+    'table-row',
+    'table-row-group',
+  ]);
+
+  // Position types for which top, left, bottom and right are ignored.
+  const noPositionType = new Set<string>(['static']);
+
+  const boxes = ['content', 'padding', 'border', 'margin', 'position'];
+  const boxColors = [
+    Common.Color.PageHighlight.Content,
+    Common.Color.PageHighlight.Padding,
+    Common.Color.PageHighlight.Border,
+    Common.Color.PageHighlight.Margin,
+    Common.Color.Legacy.fromRGBA([0, 0, 0, 0]),
+  ];
+  const boxLabels = ['content', 'padding', 'border', 'margin', 'position'];
+  let previousBox: LitTemplate = nothing;
+  for (let i = 0; i < boxes.length; ++i) {
+    const name = boxes[i];
+    const display = style.get('display');
+    const position = style.get('position');
+    if (!display || !position) {
+      continue;
+    }
+    if (name === 'margin' && noMarginDisplayType.has(display)) {
+      continue;
+    }
+    if (name === 'padding' && noPaddingDisplayType.has(display)) {
+      continue;
+    }
+    if (name === 'position' && noPositionType.has(position)) {
+      continue;
+    }
+
+    const shouldHighlight = !node || highlightedMode === 'all' || name === highlightedMode;
+    const backgroundColor = boxColors[i].asString(Common.Color.Format.RGBA) || '';
+
+    const suffix = (name === 'border' ? '-width' : '');
+    // clang-format off
+    const box: LitTemplate = html`
+      <div
+          class="${name} ${shouldHighlight ? 'highlighted' : ''}"
+          style="background-color: ${shouldHighlight ? backgroundColor : ''}"
+          jslog=${VisualLogging.metricsBox().context(name).track({hover: true})}
+          @mouseover=${(e: Event) => {e.consume(); onHighlightNode(true, name === 'position' ? 'all' : name);}}>
+      ${name === 'content' ? html`
+        <span jslog=${VisualLogging.value('width').track({
+              dblclick: true,
+              keydown: 'Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown',
+              change: true,
+            })}
+            @dblclick=${(e: Event) => onStartEditing(e.currentTarget as Element, 'width', 'width', style)}
+            .innerText=${live(contentWidth)}>
+        </span>
+        <span> × </span>
+        <span jslog=${VisualLogging.value('height').track({
+              dblclick: true,
+              keydown: 'Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown',
+              change: true,
+            })}
+            @dblclick=${(e: Event) => onStartEditing(e.currentTarget as Element, 'height', 'height', style)}
+            .innerText=${live(contentHeight)}>
+        </span>` : html`
+        <div class="label">${boxLabels[i]}</div>
+          ${createBoxPartElement(style, name, 'top', suffix)}
+          <br>
+          ${createBoxPartElement(style, name, 'left', suffix)}
+          ${previousBox}
+          ${createBoxPartElement(style, name, 'right', suffix)}
+          <br>
+          ${createBoxPartElement(style, name, 'bottom', suffix)}`}
+        </div>`;
+    // clang-format on
+
+    previousBox = box;
+  }
+  // clang-format off
+  render(html`
+    <div class="metrics ${!node ? 'collapsed' : ''}" @mouseover=${(e: Event) => { e.consume(); onHighlightNode(true, 'all'); }}
+        @mouseleave=${(e: Event) => { e.consume(); onHighlightNode(false, 'all'); }}>
+      ${previousBox}
+    </div>`, target);
+  // clang-format on
+};
+
 export class MetricsSidebarPane extends ElementsSidebarPane {
   originalPropertyData: SDK.CSSProperty.CSSProperty|null;
   previousPropertyDataCandidate: SDK.CSSProperty.CSSProperty|null;
@@ -52,9 +188,10 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
   private highlightMode: string;
   private computedStyle: Map<string, string>|null;
   private isEditingMetrics?: boolean;
+  private view: View;
 
-  constructor(computedStyleModel: ComputedStyleModel) {
-    super(computedStyleModel);
+  constructor(computedStyleModel: ComputedStyleModel, view = DEFAULT_VIEW) {
+    super(computedStyleModel, {jslog: `${VisualLogging.pane('styles-metrics')}`});
     this.registerRequiredCSS(metricsSidebarPaneStyles);
 
     this.originalPropertyData = null;
@@ -62,7 +199,7 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
     this.inlineStyle = null;
     this.highlightMode = '';
     this.computedStyle = null;
-    this.contentElement.setAttribute('jslog', `${VisualLogging.pane('styles-metrics')}`);
+    this.view = view;
   }
 
   override async performUpdate(): Promise<void> {
@@ -76,8 +213,17 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
     const node = this.node();
     const cssModel = this.cssModel();
     if (!node || node.nodeType() !== Node.ELEMENT_NODE || !cssModel) {
-      this.contentElement.removeChildren();
-      this.element.classList.add('collapsed');
+      this.view(
+          {
+            style: new Map(),
+            highlightedMode: '',
+            node: null,
+            contentWidth: '',
+            contentHeight: '',
+            onHighlightNode: () => {},
+            onStartEditing: () => {},
+          },
+          undefined, this.contentElement);
       return await Promise.resolve();
     }
 
@@ -109,16 +255,6 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
     this.requestUpdate();
   }
 
-  /**
-   * Toggle the visibility of the Metrics pane. This toggle allows external
-   * callers to control the visibility of this pane, but toggling this on does
-   * not guarantee the pane will always show up, because the pane's visibility
-   * is also controlled by the internal condition that style cannot be empty.
-   */
-  toggleVisibility(isVisible: boolean): void {
-    this.element.classList.toggle('invisible', !isVisible);
-  }
-
   private getPropertyValueAsPx(style: Map<string, string>, propertyName: string): number {
     const propertyValue = style.get(propertyName);
     if (!propertyValue) {
@@ -141,8 +277,7 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
     return {left, top, right, bottom};
   }
 
-  private highlightDOMNode(showHighlight: boolean, mode: string, event: Event): void {
-    event.consume();
+  private highlightDOMNode(showHighlight: boolean, mode: string): void {
     const node = this.node();
     if (showHighlight && node) {
       if (this.highlightMode === mode) {
@@ -160,175 +295,55 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
     }
   }
 
-  private updateMetrics(style: Map<string, string>, highlightedMode = 'all'): void {
-    // Updating with computed style.
-    const self = this;
-
-    function createBoxPartElement(
-        this: MetricsSidebarPane, style: Map<string, string>, name: string, side: string, suffix: string): LitTemplate {
-      const propertyName = (name !== 'position' ? name + '-' : '') + side + suffix;
-      let value = style.get(propertyName);
-
-      if (value === '' || (name !== 'position' && value === 'unset')) {
-        value = '\u2012';
-      } else if (name === 'position' && value === 'auto') {
-        value = '\u2012';
-      }
-      value = value?.replace(/px$/, '');
-      value = value ? Platform.NumberUtilities.toFixedIfFloating(value) : value;
-      // clang-format off
-      return html`<div class=${side} jslog=${VisualLogging.value(propertyName).track({
-          dblclick: true, keydown: 'Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown', change: true,
-          })}
-          @dblclick=${(e: Event) => this.startEditing(e.currentTarget, name, propertyName, style)}
-          .innerText=${live(value ?? '')}>
-      </div>`;
-      // clang-format on
+  private getContentAreaWidthPx(style: Map<string, string>): string {
+    let width = style.get('width');
+    if (!width) {
+      return '';
     }
+    width = width.replace(/px$/, '');
+    const widthValue = Number(width);
+    if (!isNaN(widthValue) && style.get('box-sizing') === 'border-box') {
+      const borderBox = this.getBox(style, 'border');
+      const paddingBox = this.getBox(style, 'padding');
 
-    function getContentAreaWidthPx(style: Map<string, string>): string {
-      let width = style.get('width');
-      if (!width) {
-        return '';
-      }
-      width = width.replace(/px$/, '');
-      const widthValue = Number(width);
-      if (!isNaN(widthValue) && style.get('box-sizing') === 'border-box') {
-        const borderBox = self.getBox(style, 'border');
-        const paddingBox = self.getBox(style, 'padding');
-
-        width = (widthValue - borderBox.left - borderBox.right - paddingBox.left - paddingBox.right).toString();
-      }
-
-      return Platform.NumberUtilities.toFixedIfFloating(width);
+      width = (widthValue - borderBox.left - borderBox.right - paddingBox.left - paddingBox.right).toString();
     }
 
-    function getContentAreaHeightPx(style: Map<string, string>): string {
-      let height = style.get('height');
-      if (!height) {
-        return '';
-      }
-      height = height.replace(/px$/, '');
-      const heightValue = Number(height);
-      if (!isNaN(heightValue) && style.get('box-sizing') === 'border-box') {
-        const borderBox = self.getBox(style, 'border');
-        const paddingBox = self.getBox(style, 'padding');
+    return Platform.NumberUtilities.toFixedIfFloating(width);
+  }
 
-        height = (heightValue - borderBox.top - borderBox.bottom - paddingBox.top - paddingBox.bottom).toString();
-      }
+  private getContentAreaHeightPx(style: Map<string, string>): string {
+    let height = style.get('height');
+    if (!height) {
+      return '';
+    }
+    height = height.replace(/px$/, '');
+    const heightValue = Number(height);
+    if (!isNaN(heightValue) && style.get('box-sizing') === 'border-box') {
+      const borderBox = this.getBox(style, 'border');
+      const paddingBox = this.getBox(style, 'padding');
 
-      return Platform.NumberUtilities.toFixedIfFloating(height);
+      height = (heightValue - borderBox.top - borderBox.bottom - paddingBox.top - paddingBox.bottom).toString();
     }
 
-    // Display types for which margin is ignored.
-    const noMarginDisplayType = new Set<string>([
-      'table-cell',
-      'table-column',
-      'table-column-group',
-      'table-footer-group',
-      'table-header-group',
-      'table-row',
-      'table-row-group',
-    ]);
-
-    // Display types for which padding is ignored.
-    const noPaddingDisplayType = new Set<string>([
-      'table-column',
-      'table-column-group',
-      'table-footer-group',
-      'table-header-group',
-      'table-row',
-      'table-row-group',
-    ]);
-
-    // Position types for which top, left, bottom and right are ignored.
-    const noPositionType = new Set<string>(['static']);
-
-    const boxes = ['content', 'padding', 'border', 'margin', 'position'];
-    const boxColors = [
-      Common.Color.PageHighlight.Content,
-      Common.Color.PageHighlight.Padding,
-      Common.Color.PageHighlight.Border,
-      Common.Color.PageHighlight.Margin,
-      Common.Color.Legacy.fromRGBA([0, 0, 0, 0]),
-    ];
-    const boxLabels = ['content', 'padding', 'border', 'margin', 'position'];
-    let previousBox: LitTemplate = nothing;
-    for (let i = 0; i < boxes.length; ++i) {
-      const name = boxes[i];
-      const display = style.get('display');
-      const position = style.get('position');
-      if (!display || !position) {
-        continue;
-      }
-      if (name === 'margin' && noMarginDisplayType.has(display)) {
-        continue;
-      }
-      if (name === 'padding' && noPaddingDisplayType.has(display)) {
-        continue;
-      }
-      if (name === 'position' && noPositionType.has(position)) {
-        continue;
-      }
+    return Platform.NumberUtilities.toFixedIfFloating(height);
+  }
 
-      const node = this.node();
-      const shouldHighlight = !node || highlightedMode === 'all' || name === highlightedMode;
-      const backgroundColor = boxColors[i].asString(Common.Color.Format.RGBA) || '';
-
-      const suffix = (name === 'border' ? '-width' : '');
-      // clang-format off
-      const box: LitTemplate = html`
-        <div
-            class="${name} ${shouldHighlight ? 'highlighted' : ''}"
-            style="background-color: ${shouldHighlight ? backgroundColor : ''}"
-            jslog=${VisualLogging.metricsBox().context(name).track({hover: true})}
-            @mouseover=${this.highlightDOMNode.bind(this, true, name === 'position' ? 'all' : name)}>
-        ${name === 'content' ? html`
-          <span jslog=${VisualLogging.value('width').track({
-                dblclick: true,
-                keydown: 'Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown',
-                change: true,
-              })}
-              @dblclick=${(e: Event) => this.startEditing(e.currentTarget, 'width', 'width', style)}
-              .innerText=${live(getContentAreaWidthPx(style))}>
-          </span>
-          <span> × </span>
-          <span jslog=${VisualLogging.value('height').track({
-                dblclick: true,
-                keydown: 'Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown',
-                change: true,
-              })}
-              @dblclick=${(e: Event) => this.startEditing(e.currentTarget, 'height', 'height', style)}
-              .innerText=${live(getContentAreaHeightPx(style))}>
-          </span>` : html`
-          <div class="label">${boxLabels[i]}</div>
-            ${createBoxPartElement.call(this, style, name, 'top', suffix)}
-            <br>
-            ${createBoxPartElement.call(this, style, name, 'left', suffix)}
-            ${previousBox}
-            ${createBoxPartElement.call(this, style, name, 'right', suffix)}
-            <br>
-            ${createBoxPartElement.call(this, style, name, 'bottom', suffix)}`}
-          </div>`;
-      // clang-format on
-
-      previousBox = box;
-    }
-    // clang-format off
-    render(html`
-      <div class="metrics" @mouseover=${this.highlightDOMNode.bind(this, false, 'all')}
-          @mouseleave=${this.highlightDOMNode.bind(this, false, 'all')}>
-        ${previousBox}
-      </div>`, this.contentElement);
-    // clang-format on
-    this.element.classList.remove('collapsed');
+  private updateMetrics(style: Map<string, string>, highlightedMode = 'all'): void {
+    this.view(
+        {
+          style,
+          highlightedMode,
+          node: this.node(),
+          contentWidth: this.getContentAreaWidthPx(style),
+          contentHeight: this.getContentAreaHeightPx(style),
+          onHighlightNode: this.highlightDOMNode.bind(this),
+          onStartEditing: this.startEditing.bind(this),
+        },
+        undefined, this.contentElement);
   }
 
-  startEditing(target: EventTarget|null, box: string, styleProperty: string, computedStyle: Map<string, string>): void {
-    if (!(target instanceof Element)) {
-      return;
-    }
-    const targetElement = target as Element;
+  startEditing(targetElement: Element, box: string, styleProperty: string, computedStyle: Map<string, string>): void {
     if (UI.UIUtils.isBeingEdited(targetElement)) {
       return;
     }

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -205,7 +205,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   #updateComputedStylesAbortController?: AbortController;
 
   constructor(computedStyleModel: ComputedStyleModel) {
-    super(computedStyleModel, true /* delegatesFocus */);
+    super(computedStyleModel, {delegatesFocus: true});
     this.setMinimumSize(96, 26);
     this.registerRequiredCSS(stylesSidebarPaneStyles);
     Common.Settings.Settings.instance().moduleSetting('text-editor-indent').addChangeListener(this.requestUpdate, this);

package/front_end/panels/elements/metricsSidebarPane.css

@@ -8,7 +8,7 @@
   font-size: 10px;
   text-align: center;
   white-space: nowrap;
-  min-height: var(--metrics-height);
+  height: var(--metrics-height);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -26,19 +26,11 @@
 
 :host {
   --metrics-height: 190px;
-
-  height: var(--metrics-height);
-  contain: strict;
-}
-
-:host(.invisible) {
-  visibility: hidden;
-  height: 0;
 }
 
-:host(.collapsed) {
-  visibility: collapse;
+.metrics.collapsed {
   height: 0;
+  padding: 0;
 }
 /* The font we use on Windows takes up more vertical space, so adjust
  * the height of the metrics sidebar pane accordingly.

package/front_end/panels/settings/SettingsScreen.ts

@@ -27,11 +27,6 @@ import type {KeybindsSettingsTab} from './KeybindsSettingsTab.js';
 import settingsScreenStyles from './settingsScreen.css.js';
 
 const UIStrings = {
-
-  /**
-   * @description Card header in Experiments settings tab that list all available unstable experiments that can be turned on or off.
-   */
-  unstableExperiments: 'Unstable experiments',
   /**
    * @description Name of the Settings view
    */
@@ -61,10 +56,6 @@ const UIStrings = {
    */
   greenDevUnstable:
       'Warning: All these features are prototype and very unstable. They exist for user testing and are not designed to be relied on.',
-  /**
-   * @description Message text content in Settings Screen of the Settings
-   */
-  theseExperimentsAreParticularly: 'Warning: These experiments are particularly unstable. Enable at your own risk.',
   /**
    * @description Message to display if a setting change requires a reload of DevTools
    */
@@ -392,7 +383,6 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
 
 export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTab {
   #experimentsSection: Card|undefined;
-  #unstableExperimentsSection: Card|undefined;
   private readonly experimentToControl = new Map<Root.Runtime.Experiment, HTMLElement>();
   private readonly containerElement: HTMLElement;
 
@@ -427,45 +417,28 @@ export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTa
     if (this.#experimentsSection) {
       this.#experimentsSection.remove();
     }
-    if (this.#unstableExperimentsSection) {
-      this.#unstableExperimentsSection.remove();
-    }
-    const experiments = Root.Runtime.experiments.allConfigurableExperiments().sort();
-    const unstableExperiments = experiments.filter(e => e.unstable && e.title.toLowerCase().includes(filterText));
-    const stableExperiments = experiments.filter(e => !e.unstable && e.title.toLowerCase().includes(filterText));
-    if (stableExperiments.length) {
+    const experiments = Root.Runtime.experiments.allConfigurableExperiments().sort((a, b) => {
+      return a.title.localeCompare(b.title);
+    });
+    const filteredExperiments = experiments.filter(e => e.title.toLowerCase().includes(filterText));
+    if (filteredExperiments.length) {
       const experimentsBlock = document.createElement('div');
       experimentsBlock.classList.add('settings-experiments-block');
       const warningMessage = i18nString(UIStrings.theseExperimentsCouldBeUnstable);
       const warningSection = this.createExperimentsWarningSubsection(warningMessage);
-      for (const experiment of stableExperiments) {
+      for (const experiment of filteredExperiments) {
         experimentsBlock.appendChild(this.createExperimentCheckbox(experiment));
       }
       this.#experimentsSection =
           createSettingsCard(i18nString(UIStrings.experiments), warningSection, experimentsBlock);
       this.containerElement.appendChild(this.#experimentsSection);
-    }
-    if (unstableExperiments.length) {
-      const experimentsBlock = document.createElement('div');
-      experimentsBlock.classList.add('settings-experiments-block');
-      const warningMessage = i18nString(UIStrings.theseExperimentsAreParticularly);
-      for (const experiment of unstableExperiments) {
-        experimentsBlock.appendChild(this.createExperimentCheckbox(experiment));
-      }
-      this.#unstableExperimentsSection = createSettingsCard(
-          i18nString(UIStrings.unstableExperiments), this.createExperimentsWarningSubsection(warningMessage),
-          experimentsBlock);
-      this.containerElement.appendChild(this.#unstableExperimentsSection);
-    }
-    if (!stableExperiments.length && !unstableExperiments.length) {
+      UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.experimentsFound, {n: filteredExperiments.length}));
+    } else {
       const warning = document.createElement('span');
       warning.textContent = i18nString(UIStrings.noResults);
       UI.ARIAUtils.LiveAnnouncer.alert(warning.textContent);
       this.#experimentsSection = createSettingsCard(i18nString(UIStrings.experiments), warning);
       this.containerElement.appendChild(this.#experimentsSection);
-    } else {
-      UI.ARIAUtils.LiveAnnouncer.alert(
-          i18nString(UIStrings.experimentsFound, {n: stableExperiments.length + unstableExperiments.length}));
     }
   }
 
@@ -495,9 +468,6 @@ export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTa
     const p = document.createElement('p');
     this.experimentToControl.set(experiment, p);
     p.classList.add('settings-experiment');
-    if (experiment.unstable && !experiment.isEnabled()) {
-      p.classList.add('settings-experiment-unstable');
-    }
     p.appendChild(checkbox);
 
     const experimentLink = experiment.docLink;

package/front_end/panels/settings/settingsScreen.css

@@ -146,10 +146,6 @@ devtools-button.link-icon {
   white-space: normal;
 }
 
-.settings-experiment-unstable {
-  color: var(--sys-color-token-subtle);
-}
-
 .settings-experiment .feedback-link {
   color: var(--sys-color-primary);
   text-decoration-line: underline;