chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

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

@@ -9,27 +9,27 @@ import type * as Timeline from '../timeline/timeline.js';
 
 const UIStrings = {
   /**
-   *@description Text for the performance of something
+   * @description Text for the performance of something
    */
   performance: 'Performance',
   /**
-   *@description Command for showing the 'Performance' tool
+   * @description Command for showing the 'Performance' tool
    */
   showPerformance: 'Show Performance',
   /**
-   *@description Title of an action in the timeline tool to show history
+   * @description Title of an action in the timeline tool to show history
    */
   showRecentTimelineSessions: 'Show recent timeline sessions',
   /**
-   *@description Text to record a series of actions for analysis
+   * @description Text to record a series of actions for analysis
    */
   record: 'Record',
   /**
-   *@description Text of an item that stops the running task
+   * @description Text of an item that stops the running task
    */
   stop: 'Stop',
   /**
-   *@description Title of an action in the timeline tool to record a reload of the current page
+   * @description Title of an action in the timeline tool to record a reload of the current page
    */
   recordAndReload: 'Record and reload',
 } as const;

package/front_end/panels/layer_viewer/LayerDetailsView.ts

@@ -49,20 +49,20 @@ import {
 
 const UIStrings = {
   /**
-   *@description Text in Layer Details View of the Layers panel
+   * @description Text in Layer Details View of the Layers panel
    */
   selectALayerToSeeItsDetails: 'Select a layer to see its details',
   /**
-   *@description Text in Layer Details View of the Layers panel if no layer is selected for viewing its content
+   * @description Text in Layer Details View of the Layers panel if no layer is selected for viewing its content
    */
   noLayerSelected: 'No layer selected',
   /**
-   *@description Element text content in Layer Details View of the Layers panel
-   *@example {Touch event handler} PH1
-   *@example {10} PH2
-   *@example {10} PH3
-   *@example {10} PH4
-   *@example {10} PH5
+   * @description Element text content in Layer Details View of the Layers panel
+   * @example {Touch event handler} PH1
+   * @example {10} PH2
+   * @example {10} PH3
+   * @example {10} PH4
+   * @example {10} PH5
    */
   scrollRectangleDimensions: '{PH1} {PH2} × {PH3} (at {PH4}, {PH5})',
   /**
@@ -71,27 +71,27 @@ const UIStrings = {
    */
   unnamed: '<unnamed>',
   /**
-   *@description Text in Layer Details View of the Layers panel
-   *@example {Nearest Layer Shifting Sticky Box} PH1
-   *@example {&lt;unnamed&gt;} PH2
-   *@example {5} PH3
+   * @description Text in Layer Details View of the Layers panel
+   * @example {Nearest Layer Shifting Sticky Box} PH1
+   * @example {&lt;unnamed&gt;} PH2
+   * @example {5} PH3
    */
-  stickyAncenstorLayersS: '{PH1}: {PH2} ({PH3})',
+  stickyAncestorLayersS: '{PH1}: {PH2} ({PH3})',
   /**
-   *@description Sticky box rect element text content in Layer Details View of the Layers panel
-   *@example {10} PH1
-   *@example {10} PH2
-   *@example {10} PH3
-   *@example {10} PH4
+   * @description Sticky box rect element text content in Layer Details View of the Layers panel
+   * @example {10} PH1
+   * @example {10} PH2
+   * @example {10} PH3
+   * @example {10} PH4
    */
   stickyBoxRectangleDimensions: 'Sticky Box {PH1} × {PH2} (at {PH3}, {PH4})',
   /**
    * @description Containing block rect element text content in Layer Details View of the Layers panel.
    * The placeholder are width, height, x position, and y position respectively.
-   *@example {10} PH1
-   *@example {10} PH2
-   *@example {10} PH3
-   *@example {10} PH4
+   * @example {10} PH1
+   * @example {10} PH2
+   * @example {10} PH3
+   * @example {10} PH4
    */
   containingBlocRectangleDimensions: 'Containing Block {PH1} × {PH2} (at {PH3}, {PH4})',
   /**
@@ -105,51 +105,51 @@ const UIStrings = {
    */
   nearestLayerShiftingContaining: 'Nearest Layer Shifting Containing Block',
   /**
-   *@description Size cell text content in Layer Details View of the Layers panel
-   *@example {10} PH1
-   *@example {10} PH2
-   *@example {10} PH3
-   *@example {10} PH4
+   * @description Size cell text content in Layer Details View of the Layers panel
+   * @example {10} PH1
+   * @example {10} PH2
+   * @example {10} PH3
+   * @example {10} PH4
    */
   updateRectangleDimensions: '{PH1} × {PH2} (at {PH3}, {PH4})',
   /**
-   *@description Text for the size of something
+   * @description Text for the size of something
    */
   size: 'Size',
   /**
-   *@description Text in Layer Details View of the Layers panel
+   * @description Text in Layer Details View of the Layers panel
    */
   compositingReasons: 'Compositing Reasons',
   /**
-   *@description Text in Layer Details View of the Layers panel
+   * @description Text in Layer Details View of the Layers panel
    */
   memoryEstimate: 'Memory estimate',
   /**
-   *@description Text in Layer Details View of the Layers panel
+   * @description Text in Layer Details View of the Layers panel
    */
   paintCount: 'Paint count',
   /**
-   *@description Text in Layer Details View of the Layers panel
+   * @description Text in Layer Details View of the Layers panel
    */
   slowScrollRegions: 'Slow scroll regions',
   /**
-   *@description Text in Layer Details View of the Layers panel
+   * @description Text in Layer Details View of the Layers panel
    */
   stickyPositionConstraint: 'Sticky position constraint',
   /**
-   *@description Title of the paint profiler, old name of the performance pane
+   * @description Title of the paint profiler, old name of the performance pane
    */
   paintProfiler: 'Paint Profiler',
   /**
-   *@description Text in Layer Details View of the Layers panel
+   * @description Text in Layer Details View of the Layers panel
    */
   nonFastScrollable: 'Non fast scrollable',
   /**
-   *@description Text in Layer Details View of the Layers panel
+   * @description Text in Layer Details View of the Layers panel
    */
   touchEventHandler: 'Touch event handler',
   /**
-   *@description Text in Layer Details View of the Layers panel
+   * @description Text in Layer Details View of the Layers panel
    */
   wheelEventHandler: 'Wheel event handler',
   /**
@@ -159,7 +159,7 @@ const UIStrings = {
    */
   repaintsOnScroll: 'Repaints on scroll',
   /**
-   *@description Text in Layer Details View of the Layers panel
+   * @description Text in Layer Details View of the Layers panel
    */
   mainThreadScrollingReason: 'Main thread scrolling reason',
 } as const;
@@ -183,9 +183,11 @@ export class LayerDetailsView extends Common.ObjectWrapper.eventMixin<EventTypes
   private selection: Selection|null;
 
   constructor(layerViewHost: LayerViewHost) {
-    super(true);
+    super({
+      jslog: `${VisualLogging.pane('layers-details')}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(layerDetailsViewStyles);
-    this.element.setAttribute('jslog', `${VisualLogging.pane('layers-details')}`);
     this.contentElement.classList.add('layer-details-container');
 
     this.layerViewHost = layerViewHost;
@@ -263,7 +265,7 @@ export class LayerDetailsView extends Common.ObjectWrapper.eventMixin<EventTypes
 
     const node = layer.nodeForSelfOrAncestor();
     const name = node ? node.simpleSelector() : i18nString(UIStrings.unnamed);
-    return i18nString(UIStrings.stickyAncenstorLayersS, {PH1: title, PH2: name, PH3: layer.id()});
+    return i18nString(UIStrings.stickyAncestorLayersS, {PH1: title, PH2: name, PH3: layer.id()});
   }
 
   private createStickyAncestorChild(title: string, layer: SDK.LayerTreeBase.Layer|null): void {

package/front_end/panels/layer_viewer/LayerTreeOutline.ts

@@ -47,22 +47,22 @@ import {
 
 const UIStrings = {
   /**
-   *@description A count of the number of rendering layers in Layer Tree Outline of the Layers panel
-   *@example {10} PH1
+   * @description A count of the number of rendering layers in Layer Tree Outline of the Layers panel
+   * @example {10} PH1
    */
   layerCount: '{PH1} layers',
   /**
-   *@description Label for layers sidepanel tree
+   * @description Label for layers sidepanel tree
    */
   layersTreePane: 'Layers Tree Pane',
   /**
-   *@description A context menu item in the DView of the Layers panel
+   * @description A context menu item in the DView of the Layers panel
    */
   showPaintProfiler: 'Show Paint Profiler',
   /**
-   *@description Details text content in Layer Tree Outline of the Layers panel
-   *@example {10} PH1
-   *@example {10} PH2
+   * @description Details text content in Layer Tree Outline of the Layers panel
+   * @example {10} PH1
+   * @example {10} PH2
    */
   updateChildDimension: ' ({PH1} × {PH2})',
 } as const;

package/front_end/panels/layer_viewer/LayerViewHost.ts

@@ -9,7 +9,7 @@ import type * as UI from '../../ui/legacy/legacy.js';
 
 const UIStrings = {
   /**
-   *@description Text in Layer View Host of the Layers panel
+   * @description Text in Layer View Host of the Layers panel
    */
   showInternalLayers: 'Show internal layers',
 } as const;

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -52,32 +52,32 @@ import {Events as TransformControllerEvents, TransformController} from './Transf
 
 const UIStrings = {
   /**
-   *@description Text of a DOM element in DView of the Layers panel
+   * @description Text of a DOM element in DView of the Layers panel
    */
   noLayerInformation: 'No layers detected yet',
   /**
-   *@description Text of a DOM element in DView of the Layers panel that explains the panel
+   * @description Text of a DOM element in DView of the Layers panel that explains the panel
    */
   layerExplanation: 'On this page you will be able to view and inspect document layers.',
   /**
-   *@description Accessibility label for canvas view in Layers tool
+   * @description Accessibility label for canvas view in Layers tool
    */
   dLayersView: '3D Layers View',
   /**
-   *@description Text in DView of the Layers panel
+   * @description Text in DView of the Layers panel
    */
   cantDisplayLayers: 'Can\'t display layers',
   /**
-   *@description Text in DView of the Layers panel
+   * @description Text in DView of the Layers panel
    */
   webglSupportIsDisabledInYour: 'WebGL support is disabled in your browser.',
   /**
-   *@description Text in DView of the Layers panel
-   *@example {about:gpu} PH1
+   * @description Text in DView of the Layers panel
+   * @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
+   * @description Text for a checkbox in the toolbar of the Layers panel to show the area of slow scroll rect
    */
   slowScrollRects: 'Slow scroll rects',
   /**
@@ -87,11 +87,11 @@ const UIStrings = {
    */
   paints: 'Paints',
   /**
-   *@description A context menu item in the DView of the Layers panel
+   * @description A context menu item in the DView of the Layers panel
    */
   resetView: 'Reset View',
   /**
-   *@description A context menu item in the DView of the Layers panel
+   * @description A context menu item in the DView of the Layers panel
    */
   showPaintProfiler: 'Show Paint Profiler',
 } as const;
@@ -142,9 +142,11 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
   private mouseDownY?: number;
 
   constructor(layerViewHost: LayerViewHost) {
-    super(true);
+    super({
+      jslog: `${VisualLogging.pane('layers-3d-view')}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(layers3DViewStyles);
-    this.element.setAttribute('jslog', `${VisualLogging.pane('layers-3d-view')}`);
 
     this.contentElement.classList.add('layers-3d-view');
     this.failBanner = new UI.EmptyWidget.EmptyWidget(
@@ -152,7 +154,11 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
 
     this.layerViewHost = layerViewHost;
     this.layerViewHost.registerView(this);
-    this.transformController = new TransformController(this.contentElement);
+    // Install transform controller, but still allow drag events to set focus on the element, which is needed
+    // to correctly listen for keyboard shortcuts.
+    this.transformController =
+        new TransformController(this.contentElement, false, false /* preventDefaultOnMouseDown */);
+
     this.transformController.addEventListener(TransformControllerEvents.TRANSFORM_CHANGED, this.update, this);
 
     this.initToolbar();

package/front_end/panels/layer_viewer/PaintProfilerView.ts

@@ -42,31 +42,31 @@ import paintProfilerStyles from './paintProfiler.css.js';
 
 const UIStrings = {
   /**
-   *@description Text to indicate the progress of a profile
+   * @description Text to indicate the progress of a profile
    */
   profiling: 'Profiling…',
   /**
-   *@description Text in Paint Profiler View of the Layers panel
+   * @description Text in Paint Profiler View of the Layers panel
    */
   shapes: 'Shapes',
   /**
-   *@description Text in Paint Profiler View of the Layers panel
+   * @description Text in Paint Profiler View of the Layers panel
    */
   bitmap: 'Bitmap',
   /**
-   *@description Generic label for any text
+   * @description Generic label for any text
    */
   text: 'Text',
   /**
-   *@description Text in Paint Profiler View of the Layers panel
+   * @description Text in Paint Profiler View of the Layers panel
    */
   misc: 'Misc',
   /**
-   *@description ARIA label for a pie chart that shows the results of the paint profiler
+   * @description ARIA label for a pie chart that shows the results of the paint profiler
    */
   profilingResults: 'Profiling results',
   /**
-   *@description Label for command log tree in the Profiler tab
+   * @description Label for command log tree in the Profiler tab
    */
   commandLog: 'Command Log',
 } as const;
@@ -99,12 +99,12 @@ export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventType
   private updateImageTimer?: number;
 
   constructor(showImageCallback: (arg0?: string|undefined) => void) {
-    super(true);
+    super({useShadowDom: true});
     this.registerRequiredCSS(paintProfilerStyles);
 
     this.contentElement.classList.add('paint-profiler-overview');
     this.canvasContainer = this.contentElement.createChild('div', 'paint-profiler-canvas-container');
-    this.progressBanner = this.contentElement.createChild('div', 'full-widget-dimmed-banner hidden');
+    this.progressBanner = this.contentElement.createChild('div', 'empty-state hidden');
     this.progressBanner.textContent = i18nString(UIStrings.profiling);
     this.pieChart = new PerfUI.PieChart.PieChart();
     this.populatePieChart(0, []);

package/front_end/panels/layer_viewer/TransformController.ts

@@ -13,15 +13,15 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 const UIStrings = {
   /**
-   *@description Tooltip text that appears when hovering over largeicon pan button in Transform Controller of the Layers panel
+   * @description Tooltip text that appears when hovering over largeicon pan button in Transform Controller of the Layers panel
    */
   panModeX: 'Pan mode (X)',
   /**
-   *@description Tooltip text that appears when hovering over largeicon rotate button in Transform Controller of the Layers panel
+   * @description Tooltip text that appears when hovering over largeicon rotate button in Transform Controller of the Layers panel
    */
   rotateModeV: 'Rotate mode (V)',
   /**
-   *@description Tooltip text that appears when hovering over the largeicon center button in the Transform Controller of the Layers panel
+   * @description Tooltip text that appears when hovering over the largeicon center button in the Transform Controller of the Layers panel
    */
   resetTransform: 'Reset transform (0)',
 } as const;
@@ -43,7 +43,12 @@ export class TransformController extends Common.ObjectWrapper.ObjectWrapper<Even
   private maxScale: number;
   private readonly controlPanelToolbar: UI.Toolbar.Toolbar;
   private readonly modeButtons: Record<string, UI.Toolbar.ToolbarToggle>;
-  constructor(element: HTMLElement, disableRotate?: boolean) {
+  /**
+   * @param element The HTML element to apply transformations to.
+   * @param disableRotate Optional. If true, pan and rotate will be disabled. Defaults to false.
+   * @param preventDefaultOnMousedown Optional. If true, mousedown events will be prevented from their default behavior (including focus). Defaults to true.
+   */
+  constructor(element: HTMLElement, disableRotate?: boolean, preventDefaultOnMouseDown = true) {
     super();
     this.scaleInternal = 1;
     this.offsetXInternal = 0;
@@ -57,7 +62,8 @@ export class TransformController extends Common.ObjectWrapper.ObjectWrapper<Even
     this.element = element;
     this.registerShortcuts();
     UI.UIUtils.installDragHandle(
-        element, this.onDragStart.bind(this), this.onDrag.bind(this), this.onDragEnd.bind(this), 'move', null);
+        element, this.onDragStart.bind(this), this.onDrag.bind(this), this.onDragEnd.bind(this), 'move', null, 0,
+        preventDefaultOnMouseDown);
     element.addEventListener('wheel', this.onMouseWheel.bind(this), false);
     this.minScale = 0;
     this.maxScale = Infinity;
@@ -214,7 +220,7 @@ export class TransformController extends Common.ObjectWrapper.ObjectWrapper<Even
     const rotateStepInDegrees = 5;
 
     if (this.mode === Modes.ROTATE) {
-      // Sic! onRotate treats X and Y as "rotate around X" and "rotate around Y", so swap X/Y multiplers.
+      // Sic! onRotate treats X and Y as "rotate around X" and "rotate around Y", so swap X/Y multipliers.
       this.onRotate(
           this.rotateXInternal + yMultiplier * rotateStepInDegrees,
           this.rotateYInternal + xMultiplier * rotateStepInDegrees);
@@ -225,9 +231,9 @@ export class TransformController extends Common.ObjectWrapper.ObjectWrapper<Even
   }
 
   private onMouseWheel(event: Event): void {
-    /** @const */
+    /** @constant */
     const zoomFactor = 1.1;
-    /** @const */
+    /** @constant */
     const wheelZoomSpeed = 1 / 53;
     const mouseEvent = event as WheelEvent;
     const scaleFactor = Math.pow(zoomFactor, -mouseEvent.deltaY * wheelZoomSpeed);

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

@@ -7,39 +7,39 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 const UIStrings = {
   /**
-   *@description Text in the Shortcuts page to explain a keyboard shortcut (reset view in Layers Panel)
+   * @description Text in the Shortcuts page to explain a keyboard shortcut (reset view in Layers Panel)
    */
   resetView: 'Reset view',
   /**
-   *@description Text in the Shortcuts page to explain a keyboard shortcut (switch to pan in Layers Panel)
+   * @description Text in the Shortcuts page to explain a keyboard shortcut (switch to pan in Layers Panel)
    */
   switchToPanMode: 'Switch to pan mode',
   /**
-   *@description Text in the Shortcuts page to explain a keyboard shortcut (switch to rotate mode in Layers Panel)
+   * @description Text in the Shortcuts page to explain a keyboard shortcut (switch to rotate mode in Layers Panel)
    */
   switchToRotateMode: 'Switch to rotate mode',
   /**
-   *@description Text in the Shortcuts page to explain a keyboard shortcut (zoom in)
+   * @description Text in the Shortcuts page to explain a keyboard shortcut (zoom in)
    */
   zoomIn: 'Zoom in',
   /**
-   *@description Text in the Shortcuts page to explain a keyboard shortcut (zoom out)
+   * @description Text in the Shortcuts page to explain a keyboard shortcut (zoom out)
    */
   zoomOut: 'Zoom out',
   /**
-   *@description Description of a shortcut that pans or rotates the layer viewer up
+   * @description Description of a shortcut that pans or rotates the layer viewer up
    */
   panOrRotateUp: 'Pan or rotate up',
   /**
-   *@description Description of a shortcut that pans or rotates the layer viewer down
+   * @description Description of a shortcut that pans or rotates the layer viewer down
    */
   panOrRotateDown: 'Pan or rotate down',
   /**
-   *@description Description of a shortcut that pans or rotates the layer viewer left
+   * @description Description of a shortcut that pans or rotates the layer viewer left
    */
   panOrRotateLeft: 'Pan or rotate left',
   /**
-   *@description Description of a shortcut that pans or rotates the layer viewer right
+   * @description Description of a shortcut that pans or rotates the layer viewer right
    */
   panOrRotateRight: 'Pan or rotate right',
 } as const;

package/front_end/panels/layers/LayersPanel.ts

@@ -40,11 +40,11 @@ import {Events, LayerTreeModel} from './LayerTreeModel.js';
 
 const UIStrings = {
   /**
-   *@description Text for the details of something
+   * @description Text for the details of something
    */
   details: 'Details',
   /**
-   *@description Title of the Profiler tool
+   * @description Title of the Profiler tool
    */
   profiler: 'Profiler',
 } as const;
@@ -166,7 +166,7 @@ export class LayersPanel extends UI.Panel.PanelWithSidebar implements SDK.Target
         const mainFrame = resourceModel.mainFrame;
         if (mainFrame) {
           const url = mainFrame.url;
-          // Add the currently visualized url as an attribute to make it accessibles to e2e tests
+          // Add the currently visualized url as an attribute to make it accessible to e2e tests
           this.element.setAttribute('test-current-url', url);
         }
       }

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

@@ -9,11 +9,11 @@ import type * as Layers from './layers.js';
 
 const UIStrings = {
   /**
-   *@description Title of the Layers tool
+   * @description Title of the Layers tool
    */
   layers: 'Layers',
   /**
-   *@description Command for showing the Layers tool
+   * @description Command for showing the Layers tool
    */
   showLayers: 'Show Layers',
 } as const;