chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -28,9 +28,9 @@ const UIStrings = {
    */
   consoleMessage: 'Console message',
   /**
-   * @description The title of the insight source "Stacktrace".
+   * @description Title of the insight source 'Stack trace'.
    */
-  stackTrace: 'Stacktrace',
+  stackTrace: 'Stack trace',
   /**
    * @description The title of the insight source "Network request".
    */
@@ -49,7 +49,7 @@ const UIStrings = {
    */
   insight: 'Explanation',
   /**
-   * @description The title of the a button that closes the insight pane.
+   * @description Title of a button that closes the explanation.
    */
   closeInsight: 'Close explanation',
   /**
@@ -72,9 +72,9 @@ const UIStrings = {
    */
   report: 'Report legal issue',
   /**
-   * @description The text of the header inside the console insight pane when there was an error generating an insight.
+   * @description Header text shown when there was an error generating an insight.
    */
-  error: 'DevTools has encountered an error',
+  error: 'DevTools encountered an error',
   /**
    * @description The message shown when an error has been encountered.
    */
@@ -94,7 +94,7 @@ const UIStrings = {
    */
   notLoggedIn: 'This feature is only available when you sign in to Chrome with your Google account.',
   /**
-   * @description The title of a button which opens the Chrome SignIn page.
+   * @description Title of a button which opens the Chrome sign-in page.
    */
   signIn: 'Sign in',
   /**
@@ -120,13 +120,12 @@ const UIStrings = {
    * available and a page reload might populate it.
    */
   reloadRecommendation:
-      'Reload the page to capture related network request data for this message in order to create a better insight.',
+      'Reload the page to capture related network request data for this message to get a better insight.',
   /**
    * @description Shown to the user when they need to enable the console insights feature in settings in order to use it.
    * @example {Console insights in Settings} PH1
    */
-  turnOnInSettings:
-      'Turn on {PH1} to receive AI assistance for understanding and addressing console warnings and errors.',
+  turnOnInSettings: 'Turn on {PH1} to use AI assistance for understanding and addressing console warnings and errors.',
   /**
    * @description Text for a link to Chrome DevTools Settings.
    */

package/front_end/panels/explain/explain-meta.ts

@@ -11,15 +11,15 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 const UIStrings = {
   /**
-   * @description Message to offer insights for a console error message
+   * @description Message to offer insights for a console error message.
    */
   explainThisError: 'Understand this error',
   /**
-   * @description Message to offer insights for a console warning message
+   * @description Message to offer insights for a console warning message.
    */
   explainThisWarning: 'Understand this warning',
   /**
-   * @description Message to offer insights for a console message
+   * @description Message to offer insights for a console message.
    */
   explainThisMessage: 'Understand this message',
   /**

package/front_end/panels/layer_viewer/LayerTreeOutline.ts

@@ -6,7 +6,8 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, render} from '../../ui/lit/lit.js';
+import {Directives, html, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import layerTreeOutlineStyles from './layerTreeOutline.css.js';
 import {
@@ -41,57 +42,118 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/layer_viewer/LayerTreeOutline.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+const {ref, repeat} = Directives;
+export interface LayerTreeNode {
+  layer: SDK.LayerTreeBase.Layer;
+  isExpanded: boolean;
+  children: LayerTreeNode[];
+}
+
 export interface ViewInput {
-  treeOutlineElement: HTMLElement;
+  treeData: LayerTreeNode[];
+  selectedLayer: SDK.LayerTreeBase.Layer|null;
+  hoveredLayer: SDK.LayerTreeBase.Layer|null;
   layerCount: number;
   totalLayerMemory: number;
+  onSelect: (layer: SDK.LayerTreeBase.Layer) => void;
+  onHover: (layer: SDK.LayerTreeBase.Layer|null) => void;
+  onContextMenu: (event: MouseEvent, layer: SDK.LayerTreeBase.Layer|null) => void;
+}
+
+export interface ViewOutput {
+  focusTree?: () => void;
+  revealLayer?: (layer: SDK.LayerTreeBase.Layer) => void;
 }
-export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
-const DEFAULT_VIEW: View = (input, _output, target) => {
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const renderNode = (node: LayerTreeNode): TemplateResult => {
+    const layer = node.layer;
+    const domNode = layer.nodeForSelfOrAncestor();
+    const titleText = domNode ? domNode.simpleSelector() : '#' + layer.id();
+    const detailsText = i18nString(UIStrings.updateChildDimension, {PH1: layer.width(), PH2: layer.height()});
+    const isSelected = layer === input.selectedLayer;
+    const isHovered = layer === input.hoveredLayer;
+
+    // clang-format off
+    return html`
+      <li role="treeitem"
+          data-layer-id=${layer.id()}
+          class=${isHovered ? 'hovered' : ''}
+          ?selected=${isSelected}
+          aria-expanded=${node.isExpanded ? 'true' : 'false'}
+          @select=${() => input.onSelect(layer)}
+          @mouseenter=${() => input.onHover(layer)}
+          @mouseleave=${() => input.onHover(null)}>
+        <span class="tree-node-title" @contextmenu=${(event: MouseEvent) => {
+          input.onContextMenu(event, layer);
+          event.stopPropagation();
+        }}>
+          ${titleText} <span class="dimmed">${detailsText}</span>
+        </span>
+        ${node.children.length > 0 ? html`<ul role="group">${repeat(node.children, n => n.layer.id(), renderNode)}</ul>` : nothing}
+      </li>
+    `;
+    // clang-format on
+  };
+
+  // clang-format off
   render(html`
     <style>${layerTreeOutlineStyles}</style>
-    <div class="vbox layer-tree-wrapper">
-      <div style="flex-grow: 1; overflow: auto; display: flex;">
-        ${input.treeOutlineElement}
-      </div>
+    <div class="vbox layer-tree-wrapper" jslog=${VisualLogging.pane('layers-tree')}>
+      <devtools-tree class="layer-tree overflow-auto"
+        @contextmenu=${(event: MouseEvent) => input.onContextMenu(event, null)}
+        ${ref((el: Element | undefined) => {
+          if (el) {
+            output.focusTree = () => {
+              (el as UI.TreeOutline.TreeViewElement).focus();
+            };
+            output.revealLayer = (layer: SDK.LayerTreeBase.Layer) => {
+              const li = el.querySelector(`li[data-layer-id="${layer.id()}"]`);
+              if (li) {
+                // Toggling the selected attribute forces TreeViewElement to scroll the node into view.
+                li.removeAttribute('selected');
+                li.setAttribute('selected', '');
+              }
+            };
+          }
+        })}
+        .template=${html`
+          <style>${layerTreeOutlineStyles}</style>
+          <ul role="tree" aria-label=${i18nString(UIStrings.layersTreePane)}>
+            ${input.treeData.map(renderNode)}
+          </ul>
+        `}>
+      </devtools-tree>
       <div class="hbox layer-summary">
         <span class="layer-count">${i18nString(UIStrings.layerCount, {
-           PH1: input.layerCount
+           PH1: input.layerCount,
          })}</span>
         <span>${i18n.ByteUtilities.bytesToString(input.totalLayerMemory)}</span>
       </div>
     </div>
-  `,
-         target);
+  `, target);
+  // clang-format on
 };
 
 export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
     UI.Widget.Widget) implements Common.EventTarget.EventTarget<EventTypes>, LayerView {
   private layerViewHost: LayerViewHost;
-  private treeOutline: UI.TreeOutline.TreeOutlineInShadow;
-  private lastHoveredNode: LayerTreeElement|null;
   private layerTree?: SDK.LayerTreeBase.LayerTreeBase|null;
   private layerSnapshotMap?: Map<SDK.LayerTreeBase.Layer, SnapshotSelection>;
-
-  #view: View;
   #layerCount = 0;
   #totalLayerMemory = 0;
+  #treeData: LayerTreeNode[] = [];
+  #viewOutput: ViewOutput = {};
+  #view: View;
+  #hoveredLayer: SDK.LayerTreeBase.Layer|null = null;
 
   constructor(layerViewHost: LayerViewHost, view: View = DEFAULT_VIEW) {
     super();
+    this.#view = view;
     this.layerViewHost = layerViewHost;
     this.layerViewHost.registerView(this);
-    this.#view = view;
-
-    this.treeOutline = new UI.TreeOutline.TreeOutlineInShadow();
-    this.treeOutline.element.classList.add('layer-tree', 'overflow-auto');
-    this.treeOutline.element.addEventListener('mousemove', this.onMouseMove.bind(this) as EventListener, false);
-    this.treeOutline.element.addEventListener('mouseout', this.onMouseMove.bind(this) as EventListener, false);
-    this.treeOutline.element.addEventListener('contextmenu', this.onContextMenu.bind(this) as EventListener, true);
-    UI.ARIAUtils.setLabel(this.treeOutline.contentElement, i18nString(UIStrings.layersTreePane));
-
-    this.lastHoveredNode = null;
 
     this.layerViewHost.showInternalLayersSetting().addChangeListener(this.update, this);
   }
@@ -103,41 +165,36 @@ export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes
 
   override performUpdate(): void {
     this.#view({
-      treeOutlineElement: this.treeOutline.element,
+      treeData: this.#treeData,
+      selectedLayer: this.layerViewHost.selection()?.layer() || null,
+      hoveredLayer: this.#hoveredLayer,
       layerCount: this.#layerCount,
       totalLayerMemory: this.#totalLayerMemory,
+      onSelect: this.onSelect.bind(this),
+      onHover: this.onHover.bind(this),
+      onContextMenu: this.onContextMenu.bind(this),
     },
-               {}, this.contentElement);
+               this.#viewOutput, this.contentElement);
   }
 
   override focus(): void {
-    this.treeOutline.focus();
+    this.#viewOutput.focusTree?.();
   }
 
   selectObject(selection: Selection|null): void {
     this.hoverObject(null);
-    const layer = selection?.layer();
-    const node = layer && layerToTreeElement.get(layer);
-    if (node) {
-      node.revealAndSelect(true);
-    } else if (this.treeOutline.selectedTreeElement) {
-      this.treeOutline.selectedTreeElement.deselect();
+    this.requestUpdate();
+    if (selection) {
+      // Defer revealLayer to ensure Lit has finished rendering DOM updates
+      queueMicrotask(() => {
+        this.#viewOutput.revealLayer?.(selection.layer());
+      });
     }
   }
 
   hoverObject(selection: Selection|null): void {
-    const layer = selection?.layer();
-    const node = layer && layerToTreeElement.get(layer);
-    if (node === this.lastHoveredNode) {
-      return;
-    }
-    if (this.lastHoveredNode) {
-      this.lastHoveredNode.setHovered(false);
-    }
-    if (node) {
-      node.setHovered(true);
-    }
-    this.lastHoveredNode = node as LayerTreeElement;
+    this.#hoveredLayer = selection?.layer() || null;
+    this.requestUpdate();
   }
 
   setLayerTree(layerTree: SDK.LayerTreeBase.LayerTreeBase|null): void {
@@ -146,9 +203,11 @@ export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes
   }
 
   private update(): void {
+    let layerCount = 0;
+    let totalLayerMemory = 0;
+
     const showInternalLayers = this.layerViewHost.showInternalLayersSetting().get();
-    const seenLayers = new Set<SDK.LayerTreeBase.Layer>();
-    let root: (SDK.LayerTreeBase.Layer|null)|null = null;
+    let root: SDK.LayerTreeBase.Layer|null = null;
     if (this.layerTree) {
       if (!showInternalLayers) {
         root = this.layerTree.contentRoot();
@@ -158,9 +217,6 @@ export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes
       }
     }
 
-    let layerCount = 0;
-    let totalLayerMemory = 0;
-
     const childrenMap = new Map<SDK.LayerTreeBase.Layer, SDK.LayerTreeBase.Layer[]>();
 
     if (this.layerTree && root) {
@@ -197,103 +253,51 @@ export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes
       this.layerTree.forEachLayer(buildTree, root);
     }
 
-    const syncNode =
-        (layer: SDK.LayerTreeBase.Layer, parent: UI.TreeOutline.TreeOutline|UI.TreeOutline.TreeElement): void => {
-          seenLayers.add(layer);
-          let node: LayerTreeElement|null = layerToTreeElement.get(layer) || null;
-          if (!node) {
-            node = new LayerTreeElement(this, layer);
-            parent.appendChild(node);
-            // Expand all new non-content layers to expose content layers better.
-            if (!layer.drawsContent()) {
-              node.expand();
-            }
-          } else {
-            if (node.parent !== parent) {
-              const oldSelection = this.treeOutline.selectedTreeElement;
-              if (node.parent) {
-                node.parent.removeChild(node);
-              }
-              parent.appendChild(node);
-              if (oldSelection && oldSelection !== this.treeOutline.selectedTreeElement) {
-                oldSelection.select();
-              }
-            }
-            node.update();
-          }
-
-          const children = childrenMap.get(layer) || [];
-          for (const child of children) {
-            syncNode(child, node);
-          }
-        };
+    const makeTreeNode = (layer: SDK.LayerTreeBase.Layer): LayerTreeNode => {
+      const children = childrenMap.get(layer) || [];
+      return {
+        layer,
+        isExpanded: !layer.drawsContent(),
+        children: children.map(makeTreeNode),
+      };
+    };
 
-    if (root && (root.drawsContent() || showInternalLayers)) {
-      syncNode(root, this.treeOutline.rootElement());
-    }
+    this.#treeData = root && (root.drawsContent() || showInternalLayers) ? [makeTreeNode(root)] : [];
+    this.#layerCount = layerCount;
+    this.#totalLayerMemory = totalLayerMemory;
+    this.requestUpdate();
 
-    // Clean up layers that don't exist anymore from tree.
-    const rootElement = this.treeOutline.rootElement();
-    for (let node = rootElement.firstChild(); node instanceof LayerTreeElement && !node.root;) {
-      if (seenLayers.has(node.layer)) {
-        node = node.traverseNextTreeElement(false);
-      } else {
-        const nextNode = node.nextSibling || node.parent;
-        if (node.parent) {
-          node.parent.removeChild(node);
-        }
-        if (node === this.lastHoveredNode) {
-          this.lastHoveredNode = null;
-        }
-        node = nextNode;
-      }
-    }
-    if (!this.treeOutline.selectedTreeElement && this.layerTree) {
+    if (!this.layerViewHost.selection() && this.layerTree && this.#treeData.length > 0) {
       const elementToSelect = this.layerTree.contentRoot() || this.layerTree.root();
       if (elementToSelect) {
-        const layer = layerToTreeElement.get(elementToSelect);
-        if (layer) {
-          layer.revealAndSelect(true);
-        }
+        this.layerViewHost.selectObject(new LayerSelection(elementToSelect));
       }
     }
+  }
 
-    this.#layerCount = layerCount;
-    this.#totalLayerMemory = totalLayerMemory;
-    this.requestUpdate();
+  private onHover(layer: SDK.LayerTreeBase.Layer|null): void {
+    this.layerViewHost.hoverObject(layer ? new LayerSelection(layer) : null);
   }
 
-  private onMouseMove(event: MouseEvent): void {
-    const node = this.treeOutline.treeElementFromEvent(event) as LayerTreeElement | null;
-    if (node === this.lastHoveredNode) {
+  private onSelect(layer: SDK.LayerTreeBase.Layer): void {
+    if (this.layerViewHost.selection()?.layer() === layer) {
       return;
     }
-    this.layerViewHost.hoverObject(this.selectionForNode(node));
-  }
-
-  selectedNodeChanged(node: LayerTreeElement): void {
-    this.layerViewHost.selectObject(this.selectionForNode(node));
+    this.layerViewHost.selectObject(new LayerSelection(layer));
   }
 
-  private onContextMenu(event: MouseEvent): void {
-    const selection = this.selectionForNode(this.treeOutline.treeElementFromEvent(event) as LayerTreeElement | null);
+  private onContextMenu(event: MouseEvent, layer: SDK.LayerTreeBase.Layer|null): void {
+    const selection = layer ? new LayerSelection(layer) : null;
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
-    const layer = selection?.layer();
-    if (selection && layer) {
-      this.layerSnapshotMap = this.layerViewHost.getLayerSnapshotMap();
-      if (this.layerSnapshotMap.has(layer)) {
-        contextMenu.defaultSection().appendItem(
-            i18nString(UIStrings.showPaintProfiler),
-            () => this.dispatchEventToListeners(Events.PAINT_PROFILER_REQUESTED, selection),
-            {jslogContext: 'layers.paint-profiler'});
-      }
+    this.layerSnapshotMap = this.layerViewHost.getLayerSnapshotMap();
+    if (layer && this.layerSnapshotMap.has(layer) && selection) {
+      contextMenu.defaultSection().appendItem(
+          i18nString(UIStrings.showPaintProfiler),
+          () => this.dispatchEventToListeners(Events.PAINT_PROFILER_REQUESTED, selection),
+          {jslogContext: 'layers.paint-profiler'});
     }
     this.layerViewHost.showContextMenu(contextMenu, selection);
   }
-
-  private selectionForNode(node: LayerTreeElement|null): Selection|null {
-    return node?.layer ? new LayerSelection(node.layer) : null;
-  }
 }
 
 export const enum Events {
@@ -303,39 +307,3 @@ export const enum Events {
 export interface EventTypes {
   [Events.PAINT_PROFILER_REQUESTED]: Selection;
 }
-
-export class LayerTreeElement extends UI.TreeOutline.TreeElement {
-  // Watch out: This is different from treeOutline that
-  // LayerTreeElement inherits from UI.TreeOutline.TreeElement.
-  #treeOutline: LayerTreeOutline;
-  layer: SDK.LayerTreeBase.Layer;
-
-  constructor(tree: LayerTreeOutline, layer: SDK.LayerTreeBase.Layer) {
-    super();
-    this.#treeOutline = tree;
-    this.layer = layer;
-    layerToTreeElement.set(layer, this);
-    this.update();
-  }
-
-  update(): void {
-    const node = this.layer.nodeForSelfOrAncestor();
-    const title = document.createDocumentFragment();
-    UI.UIUtils.createTextChild(title, node ? node.simpleSelector() : '#' + this.layer.id());
-    const details = title.createChild('span', 'dimmed');
-    details.textContent =
-        i18nString(UIStrings.updateChildDimension, {PH1: this.layer.width(), PH2: this.layer.height()});
-    this.title = title;
-  }
-
-  override onselect(): boolean {
-    this.#treeOutline.selectedNodeChanged(this);
-    return false;
-  }
-
-  setHovered(hovered: boolean): void {
-    this.listItemElement.classList.toggle('hovered', hovered);
-  }
-}
-
-export const layerToTreeElement = new WeakMap<SDK.LayerTreeBase.Layer, LayerTreeElement>();

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -55,16 +55,6 @@ const UIStrings = {
    * @example {about:gpu} PH1
    */
   checkSForPossibleReasons: 'Check {PH1} for possible reasons.',
-  /**
-   * @description Text for a checkbox in the toolbar of the Layers panel to show the area of slow scroll rect
-   */
-  slowScrollRects: 'Slow scroll rects',
-  /**
-   * @description Text for a checkbox in the toolbar of the Layers panel. This is a noun, for a
-   * setting meaning 'display paints in the layers viewer'. 'Paints' here means 'paint events' i.e.
-   * when the browser draws pixels to the screen.
-   */
-  paints: 'Paints',
   /**
    * @description A context menu item in the DView of the Layers panel
    */
@@ -111,7 +101,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
     ${input.panelToolbar}
     ${input.error === 'missing-root' ? html`<div>${widget(UI.EmptyWidget.EmptyWidget, {
       header: i18nString(UIStrings.noLayerInformation),
-      text: i18nString(UIStrings.layerExplanation)
+      text: i18nString(UIStrings.layerExplanation),
     })}</div>` : Lit.nothing}
     ${input.error === 'webgl-disabled' ? html`<div>${widget(UI.EmptyWidget.EmptyWidget, {
       header: i18nString(UIStrings.cantDisplayLayers),
@@ -120,16 +110,16 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         uiI18n.getFormatLocalizedString(
           str_, UIStrings.checkSForPossibleReasons,
           {
-            PH1: Link.create('chrome://gpu', undefined, undefined, 'about-gpu', 0, true)
-          }
-        )
+            PH1: Link.create('chrome://gpu', undefined, undefined, 'about-gpu', 0, true),
+          },
+        ),
       ],
     })}</div>` : Lit.nothing}
     <canvas
       tabindex="0"
       jslog=${VisualLogging.canvas('layers').track({
         click: true,
-        drag: true
+        drag: true,
       })}
       aria-label=${i18nString(UIStrings.dLayersView)}
       @dblclick=${input.onDoubleClick}
@@ -194,10 +184,9 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
 
     this.transformController.addEventListener(TransformControllerEvents.TRANSFORM_CHANGED, this.updateData, this);
     this.panelToolbar = this.transformController.toolbar();
-    this.showPaintsSetting = this.createVisibilitySetting(
-        i18nString(UIStrings.paints), 'frame-viewer-show-paints', false, this.panelToolbar);
-    this.showSlowScrollRectsSetting = this.createVisibilitySetting(
-        i18nString(UIStrings.slowScrollRects), 'frame-viewer-show-slow-scroll-rects', true, this.panelToolbar);
+    this.showPaintsSetting = this.createVisibilitySetting('frame-viewer-show-paints', this.panelToolbar);
+    this.showSlowScrollRectsSetting =
+        this.createVisibilitySetting('frame-viewer-show-slow-scroll-rects', this.panelToolbar);
     this.showPaintsSetting.addChangeListener(this.updatePaints, this);
     Common.Settings.Settings.instance()
       .moduleSetting('frame-viewer-chrome-window')
@@ -875,10 +864,8 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
   }
 
   private createVisibilitySetting(
-      caption: Common.UIString.LocalizedString, name: string, value: boolean,
-      toolbar: UI.Toolbar.Toolbar): Common.Settings.Setting<boolean> {
-    const setting = Common.Settings.Settings.instance().createSetting(name, value);
-    setting.setTitle(caption);
+      name: string, toolbar: UI.Toolbar.Toolbar): Common.Settings.Setting<boolean> {
+    const setting = Common.Settings.Settings.instance().moduleSetting<boolean>(name);
     setting.addChangeListener(this.updateData, this);
     toolbar.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(setting));
     return setting;

package/front_end/panels/layer_viewer/layer_viewer-meta.ts

@@ -2,10 +2,19 @@
 // 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 * as UI from '../../ui/legacy/legacy.js';
 
 const UIStrings = {
+  /**
+   * @description Title of a setting in Layer Viewer.
+   */
+  paints: 'Paints',
+  /**
+   * @description Title of a setting in Layer Viewer.
+   */
+  slowScrollRects: 'Slow scroll rects',
   /**
    * @description Text in the Shortcuts page to explain a keyboard shortcut (reset view in Layers Panel)
    */
@@ -162,3 +171,21 @@ UI.ActionRegistration.registerActionExtension({
     },
   ],
 });
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.GLOBAL,
+  title: i18nLazyString(UIStrings.paints),
+  settingName: 'frame-viewer-show-paints',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.GLOBAL,
+  title: i18nLazyString(UIStrings.slowScrollRects),
+  settingName: 'frame-viewer-show-slow-scroll-rects',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});