chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -266,6 +266,7 @@ export const knownContextValues = new Set([
   'ad-status',
   'add',
   'add-3p-scripts-to-ignorelist',
+  'add-anonymous-scripts-to-ignorelist',
   'add-asserted-events',
   'add-assertion',
   'add-attribute',
@@ -318,6 +319,7 @@ export const knownContextValues = new Set([
   'affected-raw-cookies',
   'affected-requests',
   'affected-sources',
+  'ai-assistance-enabled',
   'align-content',
   'align-content-center',
   'align-content-flex-end',
@@ -594,6 +596,7 @@ export const knownContextValues = new Set([
   'canvas-context-created',
   'caption-side',
   'capture-node-creation-stacks',
+  'caret-animation',
   'caret-color',
   'category',
   'change',
@@ -1082,6 +1085,8 @@ export const knownContextValues = new Set([
   'drawer',
   'drawer-view-closeableTabs',
   'drjones.network-panel-context',
+  'drjones.performance-panel-context',
+  'drjones.sources-panel-context',
   'drop',
   'duration',
   'durationchange',
@@ -1254,6 +1259,7 @@ export const knownContextValues = new Set([
   'expression',
   'extend-grid-lines',
   'extension-storage',
+  'extension-storage-data',
   'extension-storage-for-domain',
   'extension-storage-viewer',
   'extension-view',
@@ -1312,6 +1318,7 @@ export const knownContextValues = new Set([
   'float',
   'float-32-bit',
   'float-64-bit',
+  'floating-entry-points-for-ai-assistance',
   'flood-color',
   'flood-opacity',
   'focus',
@@ -1373,14 +1380,16 @@ export const knownContextValues = new Set([
   'frames',
   'frames-per-issue',
   'freestyler',
-  'freestyler-enabled',
   'freestyler.accordion',
   'freestyler.clear',
   'freestyler.dogfood-info',
   'freestyler.element-panel-context',
+  'freestyler.elements-floating-button',
   'freestyler.feedback',
   'freestyler.help',
   'freestyler.new-chat',
+  'freestyler.send-feedback',
+  'freestyler.settings',
   'freestyler.style-tab-context',
   'full-accessibility',
   'full-accessibility-tree',
@@ -1588,6 +1597,7 @@ export const knownContextValues = new Set([
   'integer-32-bit',
   'integer-64-bit',
   'integer-8-bit',
+  'interactions',
   'interest-groups',
   'internal',
   'internet-explorer-10',
@@ -1745,6 +1755,7 @@ export const knownContextValues = new Set([
   'layers.zoom-out',
   'layout',
   'layout-count',
+  'layout-shifts',
   'learn-more',
   'learn-more.ai-assistance',
   'learn-more.console-insights',
@@ -2262,6 +2273,7 @@ export const knownContextValues = new Set([
   'preloading-rules',
   'preloading-speculations',
   'preloading-status-panel',
+  'preloading-status-panel-pretty-print',
   'presentation',
   'preserve-console-log',
   'preserve-console-log-true',
@@ -2626,7 +2638,7 @@ export const knownContextValues = new Set([
   'set-to-browser-language',
   'set-to-specific-language',
   'setting',
-  'setting-disabled',
+  'setting-is-not-true',
   'setting1',
   'setting2',
   'settings',
@@ -2724,6 +2736,7 @@ export const knownContextValues = new Set([
   'size-adjust',
   'size-delta',
   'sk',
+  'skip-anonymous-scripts',
   'skip-content-scripts',
   'skip-stack-frames-pattern',
   'skip-waiting',
@@ -2963,6 +2976,7 @@ export const knownContextValues = new Set([
   'timeline-debug-mode',
   'timeline-disable-js-sampling',
   'timeline-enhanced-traces',
+  'timeline-experimental-insights',
   'timeline-flamechart-main-view-group-expansion',
   'timeline-flamechart-network-view-group-expansion',
   'timeline-invalidation-tracking',
@@ -2985,13 +2999,20 @@ export const knownContextValues = new Set([
   'timeline-tree-group-by',
   'timeline-user-has-opened-siderbar-once',
   'timeline-v8-runtime-call-stats',
-  'timeline.',
   'timeline.animations',
   'timeline.annotation-sidebar.annotation-entries-link',
   'timeline.annotation-sidebar.annotation-entry-label',
   'timeline.annotation-sidebar.annotation-time-range',
   'timeline.annotation-sidebar.delete',
   'timeline.annotations-tab',
+  'timeline.annotations.',
+  'timeline.annotations.create-entries-link',
+  'timeline.annotations.create-entry-label',
+  'timeline.annotations.create-entry-link',
+  'timeline.annotations.delete-entry-annotations',
+  'timeline.annotations.entry-annotation-create',
+  'timeline.annotations.entry-label-input',
+  'timeline.annotations.time-range-label-input',
   'timeline.breadcrumb-select',
   'timeline.clear',
   'timeline.configure',
@@ -3006,6 +3027,7 @@ export const knownContextValues = new Set([
   'timeline.field-data.settings',
   'timeline.field-data.setup',
   'timeline.field-metric-value',
+  'timeline.flame-chart-view',
   'timeline.gpu',
   'timeline.history-item',
   'timeline.insights-tab',
@@ -3022,13 +3044,19 @@ export const knownContextValues = new Set([
   'timeline.interactions',
   'timeline.jump-to-next-frame',
   'timeline.jump-to-previous-frame',
+  'timeline.landing.clear-log',
   'timeline.landing.field-cls',
   'timeline.landing.field-inp',
   'timeline.landing.field-lcp',
   'timeline.landing.interaction-event-timing',
+  'timeline.landing.interactions-log',
+  'timeline.landing.layout-shift-event-score',
+  'timeline.landing.layout-shifts-log',
   'timeline.landing.local-cls',
   'timeline.landing.local-inp',
   'timeline.landing.local-lcp',
+  'timeline.landing.show-cls-cluster',
+  'timeline.landing.show-inp-interaction',
   'timeline.layout-shifts',
   'timeline.load-from-file',
   'timeline.network',
@@ -3053,6 +3081,7 @@ export const knownContextValues = new Set([
   'timeline.sidebar-insights-category-select',
   'timeline.sidebar-open',
   'timeline.stop-recording',
+  'timeline.thread.auction-worklet',
   'timeline.thread.cpu-profile',
   'timeline.thread.frame',
   'timeline.thread.main',

package/front_end/ui/visual_logging/LoggingDriver.ts

@@ -8,7 +8,7 @@ import * as Coordinator from '../components/render_coordinator/render_coordinato
 
 import {processForDebugging, processStartLoggingForDebugging} from './Debugging.js';
 import {getDomState, visibleOverlap} from './DomState.js';
-import {type Loggable} from './Loggable.js';
+import type {Loggable} from './Loggable.js';
 import {getLoggingConfig} from './LoggingConfig.js';
 import {logChange, logClick, logDrag, logHover, logImpressions, logKeyDown, logResize} from './LoggingEvents.js';
 import {getLoggingState, getOrCreateLoggingState, type LoggingState} from './LoggingState.js';

package/front_end/ui/visual_logging/LoggingEvents.ts

@@ -7,7 +7,7 @@ import * as Host from '../../core/host/host.js';
 import {assertNotNullOrUndefined} from '../../core/platform/platform.js';
 
 import {processEventForDebugging, processImpressionsForDebugging} from './Debugging.js';
-import {type Loggable} from './Loggable.js';
+import type {Loggable} from './Loggable.js';
 import {getLoggingState, type LoggingState} from './LoggingState.js';
 
 export async function logImpressions(loggables: Loggable[]): Promise<void> {
@@ -98,36 +98,36 @@ export async function logChange(loggable: Loggable): Promise<void> {
 
 let pendingKeyDownContext: string|null = null;
 
-export const logKeyDown =
-    (throttler: Common.Throttler.Throttler) => async (loggable: Loggable|null, event: Event|null, context?: string) => {
-      if (!(event instanceof KeyboardEvent)) {
-        return;
-      }
-      const loggingState = loggable ? getLoggingState(loggable) : null;
-      const codes = (typeof loggingState?.config.track?.keydown === 'string') ? loggingState.config.track.keydown : '';
-      if (codes.length && !codes.split('|').includes(event.code) && !codes.split('|').includes(event.key)) {
-        return;
-      }
-      const keyDownEvent: Host.InspectorFrontendHostAPI.KeyDownEvent = {veid: loggingState?.veid};
-      if (!context && codes?.length) {
-        context = contextFromKeyCodes(event);
-      }
+export const logKeyDown = (throttler: Common.Throttler.Throttler) =>
+    async (loggable: Loggable|null, event: Event|null, context?: string) => {
+  if (!(event instanceof KeyboardEvent)) {
+    return;
+  }
+  const loggingState = loggable ? getLoggingState(loggable) : null;
+  const codes = (typeof loggingState?.config.track?.keydown === 'string') ? loggingState.config.track.keydown : '';
+  if (codes.length && !codes.split('|').includes(event.code) && !codes.split('|').includes(event.key)) {
+    return;
+  }
+  const keyDownEvent: Host.InspectorFrontendHostAPI.KeyDownEvent = {veid: loggingState?.veid};
+  if (!context && codes?.length) {
+    context = contextFromKeyCodes(event);
+  }
 
-      if (pendingKeyDownContext && context && pendingKeyDownContext !== context) {
-        void throttler.process?.();
-      }
+  if (pendingKeyDownContext && context && pendingKeyDownContext !== context) {
+    void throttler.process?.();
+  }
 
-      pendingKeyDownContext = context || null;
-      void throttler.schedule(async () => {
-        if (context) {
-          keyDownEvent.context = await contextAsNumber(context);
-        }
+  pendingKeyDownContext = context || null;
+  void throttler.schedule(async () => {
+    if (context) {
+      keyDownEvent.context = await contextAsNumber(context);
+    }
 
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.recordKeyDown(keyDownEvent);
-        processEventForDebugging('KeyDown', loggingState, {context});
-        pendingKeyDownContext = null;
-      });
-    };
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.recordKeyDown(keyDownEvent);
+    processEventForDebugging('KeyDown', loggingState, {context});
+    pendingKeyDownContext = null;
+  });
+};
 
 function contextFromKeyCodes(event: Event): string|undefined {
   if (!(event instanceof KeyboardEvent)) {

package/front_end/ui/visual_logging/LoggingState.ts

@@ -1,7 +1,7 @@
 // Copyright 2023 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import {type Loggable} from './Loggable.js';
+import type {Loggable} from './Loggable.js';
 import {type LoggingConfig, needsLogging} from './LoggingConfig.js';
 
 export interface LoggingState {

package/front_end/ui/visual_logging/NonDomState.ts

@@ -1,8 +1,8 @@
 // Copyright 2023 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import {type Loggable} from './Loggable.js';
-import {type LoggingConfig} from './LoggingConfig.js';
+import type {Loggable} from './Loggable.js';
+import type {LoggingConfig} from './LoggingConfig.js';
 
 interface LoggableRegistration {
   loggable: Loggable;

package/front_end/ui/visual_logging/visual_logging.ts

@@ -12,7 +12,9 @@ export type Loggable = LoggableModule.Loggable;
 export {setVeDebugLoggingEnabled, DebugLoggingFormat} from './Debugging.js';
 export {startLogging, stopLogging, addDocument} from './LoggingDriver.js';
 export {logImpressions} from './LoggingEvents.js';
-export const logClick = (l: Loggable, e: Event): void => LoggingEvents.logClick(LoggingDriver.clickLogThrottler)(l, e);
+export const logClick = (loggable: Loggable, event: Event, options: {doubleClick?: boolean} = {}): void =>
+    LoggingEvents.logClick(LoggingDriver.clickLogThrottler)(loggable, event, options);
+
 export const logResize = (l: Loggable, s: DOMRect): void => LoggingEvents.logResize(l, s);
 export const logKeyDown = async(l: Loggable|null, e: Event, context?: string): Promise<void> =>
     LoggingEvents.logKeyDown(LoggingDriver.keyboardLogThrottler)(l, e, context);

package/inspector_overlay/css_grid_label_helpers.test.ts

@@ -383,6 +383,7 @@ describe('drawGridLineNumbers label placement with vertical writing mode', () =>
         {className: 'left-mid', count: 4},
       ],
     },
+
     {
       description: 'vertical-rl positive row labels should be displayed at the top of the grid',
       config: {
@@ -427,6 +428,96 @@ describe('drawGridLineNumbers label placement with vertical writing mode', () =>
         {className: 'right-mid', count: 4},
       ],
     },
+
+    {
+      description: 'sideways-lr positive row labels should be displayed at the bottom of the grid',
+      config: {
+        writingMode: 'sideways-lr',
+        positiveRowLineNumberPositions: [{x: 100, y: 140}, {x: 100, y: 180}, {x: 100, y: 220}, {x: 100, y: 260}],
+      },
+      bounds,
+      expectedLabels: [
+        {className: 'top-mid', count: 4},
+      ],
+    },
+    {
+      description: 'sideways-lr positive column labels should be displayed left of the grid',
+      config: {
+        writingMode: 'sideways-lr',
+        positiveColumnLineNumberPositions: [{x: 140, y: 100}, {x: 180, y: 100}, {x: 220, y: 100}, {x: 260, y: 100}],
+      },
+      bounds,
+      expectedLabels: [
+        {className: 'right-mid', count: 4},
+      ],
+    },
+    {
+      description: 'sideways-lr negative row labels should be displayed at the top of the grid',
+      config: {
+        writingMode: 'sideways-lr',
+        negativeRowLineNumberPositions: [{x: 300, y: 140}, {x: 300, y: 180}, {x: 300, y: 220}, {x: 300, y: 260}],
+      },
+      bounds,
+      expectedLabels: [
+        {className: 'bottom-mid', count: 4},
+      ],
+    },
+    {
+      description: 'sideways-lr negative column labels should be displayed right of the grid',
+      config: {
+        writingMode: 'sideways-lr',
+        negativeColumnLineNumberPositions: [{x: 140, y: 300}, {x: 180, y: 300}, {x: 220, y: 300}, {x: 260, y: 300}],
+      },
+      bounds,
+      expectedLabels: [
+        {className: 'left-mid', count: 4},
+      ],
+    },
+
+    {
+      description: 'sideways-rl positive row labels should be displayed at the top of the grid',
+      config: {
+        writingMode: 'sideways-rl',
+        positiveRowLineNumberPositions: [{x: 100, y: 140}, {x: 100, y: 180}, {x: 100, y: 220}, {x: 100, y: 260}],
+      },
+      bounds,
+      expectedLabels: [
+        {className: 'bottom-mid', count: 4},
+      ],
+    },
+    {
+      description: 'sideways-rl positive column labels should be displayed right of the grid',
+      config: {
+        writingMode: 'sideways-rl',
+        positiveColumnLineNumberPositions: [{x: 140, y: 100}, {x: 180, y: 100}, {x: 220, y: 100}, {x: 260, y: 100}],
+      },
+      bounds,
+      expectedLabels: [
+        {className: 'left-mid', count: 4},
+      ],
+    },
+    {
+      description: 'sideways-rl negative row labels should be displayed at the bottom of the grid',
+      config: {
+        writingMode: 'sideways-rl',
+        negativeRowLineNumberPositions: [{x: 300, y: 140}, {x: 300, y: 180}, {x: 300, y: 220}, {x: 300, y: 260}],
+      },
+      bounds,
+      expectedLabels: [
+        {className: 'top-mid', count: 4},
+      ],
+    },
+    {
+      description: 'sideways-rl negative column labels should be displayed left of the grid',
+      config: {
+        writingMode: 'sideways-rl',
+        negativeColumnLineNumberPositions: [{x: 140, y: 300}, {x: 180, y: 300}, {x: 220, y: 300}, {x: 260, y: 300}],
+      },
+      bounds,
+      expectedLabels: [
+        {className: 'right-mid', count: 4},
+      ],
+    },
   ];
 
   for (const {description, config, bounds, expectedLabels} of TESTS) {
@@ -654,6 +745,18 @@ describe('drawGridAreaNames  label placement with vertical writing mode', () =>
       areaBounds,
       expectedLabels: [{textContent: 'foo', top: '50px', left: '20px'}],
     },
+    {
+      description: 'positions area labels correctly in sideways-lr writing-mode',
+      writingMode: 'sideways-lr',
+      areaBounds,
+      expectedLabels: [{textContent: 'foo', top: '30px', left: '100px'}],
+    },
+    {
+      description: 'positions area labels correctly in sideways-rl writing-mode',
+      writingMode: 'sideways-rl',
+      areaBounds,
+      expectedLabels: [{textContent: 'foo', top: '50px', left: '20px'}],
+    },
   ];
 
   for (const {description, writingMode, areaBounds, expectedLabels} of TESTS) {

package/inspector_overlay/css_grid_label_helpers.ts

@@ -497,8 +497,12 @@ export function drawGridAreaNames(
     const {width, height} = getLabelSize(element, writingMode);
 
     // The list of all points comes from the path created by the backend. This path is a rectangle with its starting point being
-    // the top left corner, which is where we want to place the label (except for vertical-rl writing-mode).
-    const point = writingMode === 'vertical-rl' ? bounds.allPoints[3] : bounds.allPoints[0];
+    // the top left corner, which is where we want to place the label.
+    // Exception: the bottom-left corner for vertical-rl or sideways-rl writing-modes
+    //            the top-right corner for sideways-lr writing-mode
+    const point = (writingMode === 'vertical-rl' || writingMode === 'sideways-rl') ? bounds.allPoints[3] :
+        writingMode === 'sideways-lr'                                              ? bounds.allPoints[1] :
+                                                                                     bounds.allPoints[0];
     const corner = applyMatrixToPoint(point, writingModeMatrix);
 
     const flipX = bounds.allPoints[1].x < bounds.allPoints[0].x;
@@ -554,7 +558,7 @@ function getLabelSideEdgePoints(
  * In vertical writing modes, the axes are swapped.
  */
 function getAxes(writingMode: string): {main: 'x'|'y', cross: 'x'|'y'} {
-  return writingMode.startsWith('vertical') ? {main: 'y', cross: 'x'} : {main: 'x', cross: 'y'};
+  return isHorizontalWritingMode(writingMode) ? {main: 'x', cross: 'y'} : {main: 'y', cross: 'x'};
 }
 
 /**
@@ -564,8 +568,8 @@ function getAxes(writingMode: string): {main: 'x'|'y', cross: 'x'|'y'} {
  * In vertical writing modes, those sizes are swapped.
  */
 function getCanvasSizes(writingMode: string, canvasSize: CanvasSize): {mainSize: number, crossSize: number} {
-  return writingMode.startsWith('vertical') ? {mainSize: canvasSize.canvasHeight, crossSize: canvasSize.canvasWidth} :
-                                              {mainSize: canvasSize.canvasWidth, crossSize: canvasSize.canvasHeight};
+  return isHorizontalWritingMode(writingMode) ? {mainSize: canvasSize.canvasWidth, crossSize: canvasSize.canvasHeight} :
+                                                {mainSize: canvasSize.canvasHeight, crossSize: canvasSize.canvasWidth};
 }
 
 /**
@@ -647,8 +651,9 @@ function placePositiveColumnLabel(
   const isAtSharedEndCorner = pos[main] === end[main] && data.rows && data.rows.negative.hasFirst;
   const isTooCloseToViewportStart = pos[main] < gridPageMargin;
   const isTooCloseToViewportEnd = mainSize - pos[main] < gridPageMargin;
-  const flipIn = writingMode === 'vertical-rl' ? crossSize - pos[cross] - labelSize.crossSize < gridPageMargin :
-                                                 pos[cross] - labelSize.crossSize < gridPageMargin;
+  const flipIn = isFlippedBlocksWritingMode(writingMode) ?
+      crossSize - pos[cross] - labelSize.crossSize < gridPageMargin :
+      pos[cross] - labelSize.crossSize < gridPageMargin;
 
   if (flipIn && (isAtSharedStartCorner || isAtSharedEndCorner)) {
     element.classList.add('inner-shared-corner');
@@ -681,8 +686,9 @@ function placeNegativeColumnLabel(
   const isAtSharedEndCorner = pos[main] === end[main] && data.rows && data.rows.negative.hasLast;
   const isTooCloseToViewportStart = pos[main] < gridPageMargin;
   const isTooCloseToViewportEnd = mainSize - pos[main] < gridPageMargin;
-  const flipIn = writingMode === 'vertical-rl' ? pos[cross] - labelSize.crossSize < gridPageMargin :
-                                                 crossSize - pos[cross] - labelSize.crossSize < gridPageMargin;
+  const flipIn = isFlippedBlocksWritingMode(writingMode) ?
+      pos[cross] - labelSize.crossSize < gridPageMargin :
+      crossSize - pos[cross] - labelSize.crossSize < gridPageMargin;
 
   if (flipIn && (isAtSharedStartCorner || isAtSharedEndCorner)) {
     element.classList.add('inner-shared-corner');
@@ -723,8 +729,9 @@ function placeLineLabel(
 function getLabelSize(element: HTMLElement, writingMode: string): LabelSize {
   const width = getAdjustedLabelWidth(element);
   const height = element.getBoundingClientRect().height;
-  const mainSize = writingMode.startsWith('vertical') ? height : width;
-  const crossSize = writingMode.startsWith('vertical') ? width : height;
+  const isHorizontal = isHorizontalWritingMode(writingMode);
+  const mainSize = isHorizontal ? width : height;
+  const crossSize = isHorizontal ? height : width;
 
   return {width, height, mainSize, crossSize};
 }
@@ -835,7 +842,7 @@ function adaptArrowTypeForWritingMode(arrowType: GridArrowType, writingMode: str
     }
   }
 
-  if (writingMode === 'vertical-rl') {
+  if (writingMode === 'vertical-rl' || writingMode === 'sideways-rl') {
     switch (arrowType) {
       case GridArrowType.LEFT_TOP:
         return GridArrowType.TOP_RIGHT;
@@ -864,6 +871,35 @@ function adaptArrowTypeForWritingMode(arrowType: GridArrowType, writingMode: str
     }
   }
 
+  if (writingMode === 'sideways-lr') {
+    switch (arrowType) {
+      case GridArrowType.LEFT_TOP:
+        return GridArrowType.BOTTOM_LEFT;
+      case GridArrowType.LEFT_MID:
+        return GridArrowType.BOTTOM_MID;
+      case GridArrowType.LEFT_BOTTOM:
+        return GridArrowType.BOTTOM_RIGHT;
+      case GridArrowType.TOP_LEFT:
+        return GridArrowType.LEFT_BOTTOM;
+      case GridArrowType.TOP_MID:
+        return GridArrowType.LEFT_MID;
+      case GridArrowType.TOP_RIGHT:
+        return GridArrowType.LEFT_TOP;
+      case GridArrowType.RIGHT_TOP:
+        return GridArrowType.TOP_LEFT;
+      case GridArrowType.RIGHT_MID:
+        return GridArrowType.TOP_MID;
+      case GridArrowType.RIGHT_BOTTOM:
+        return GridArrowType.TOP_RIGHT;
+      case GridArrowType.BOTTOM_LEFT:
+        return GridArrowType.RIGHT_BOTTOM;
+      case GridArrowType.BOTTOM_MID:
+        return GridArrowType.RIGHT_MID;
+      case GridArrowType.BOTTOM_RIGHT:
+        return GridArrowType.RIGHT_TOP;
+    }
+  }
+
   return arrowType;
 }
 
@@ -970,3 +1006,18 @@ export function generateLegibleTextColor(backgroundColor: string) {
 
   return luminance(rgb) > 0.2 ? defaultLabelTextColor : 'white';
 }
+
+/**
+ * Returns true if the specified string starts with 'horizontal'.
+ */
+export function isHorizontalWritingMode(writingMode: string): boolean {
+  return writingMode.startsWith('horizontal');
+}
+
+/**
+ * Returns true if the block axis of the specified writing-mode increases in the
+ * opposite direction to normal.
+ */
+function isFlippedBlocksWritingMode(writingMode: string): boolean {
+  return writingMode === 'vertical-rl' || writingMode === 'sideways-rl';
+}

package/inspector_overlay/highlight_common.ts

@@ -30,12 +30,12 @@
 
 // eslint-disable-next-line rulesdir/es_modules_import
 import {
+  type Color4D,
   rgbaToHsla,
   rgbaToHwba,
-  type Color4D,
 } from '../front_end/core/common/ColorUtils.js';
 
-import {type Bounds, type PathCommands, type Quad} from './common.js';
+import type {Bounds, PathCommands, Quad} from './common.js';
 
 export type PathBounds = Bounds&{
   leftmostXForY: {[key: string]: number},

package/inspector_overlay/highlight_container_query.ts

@@ -2,8 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type PathCommands} from './common.js';
-
+import type {PathCommands} from './common.js';
 import {buildPath, drawPathWithLineStyle, emptyBounds, type LineStyle} from './highlight_common.js';
 
 interface QueryingDescendantData {

package/inspector_overlay/highlight_flex_common.test.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type PathCommands, type Position, type Quad} from './common.js';
+import type {PathCommands, Position, Quad} from './common.js';
 import {
   distance,
   getColinearPointAtDistance,

package/inspector_overlay/highlight_flex_common.ts

@@ -2,16 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type PathCommands, type Position, type Quad} from './common.js';
-
+import type {PathCommands, Position, Quad} from './common.js';
 import {
+  type BoxStyle,
   buildPath,
   createPathForQuad,
   drawPathWithLineStyle,
   emptyBounds,
   fillPathWithBoxStyle,
   hatchFillPath,
-  type BoxStyle,
   type LineStyle,
 } from './highlight_common.js';
 

package/inspector_overlay/highlight_grid_common.ts

@@ -28,8 +28,8 @@
 //  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
 //  THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import {type AreaBounds, type Bounds} from './common.js';
-import {drawGridLabels, type GridLabelState} from './css_grid_label_helpers.js';
+import type {AreaBounds, Bounds} from './common.js';
+import {drawGridLabels, type GridLabelState, isHorizontalWritingMode} from './css_grid_label_helpers.js';
 import {applyMatrixToPoint, buildPath, emptyBounds, hatchFillPath} from './highlight_common.js';
 
 // TODO(alexrudenko): Grid label unit tests depend on this style so it cannot be extracted yet.
@@ -312,17 +312,18 @@ export function drawLayoutGridHighlight(
 }
 
 function applyWritingModeTransformation(writingMode: string, gridBounds: Bounds, context: CanvasRenderingContext2D) {
-  if (writingMode !== 'vertical-rl' && writingMode !== 'vertical-lr') {
+  if (isHorizontalWritingMode(writingMode)) {
     return;
   }
 
   const topLeft = gridBounds.allPoints[0];
+  const topRight = gridBounds.allPoints[1];
   const bottomLeft = gridBounds.allPoints[3];
 
   // Move to the top-left corner to do all transformations there.
   context.translate(topLeft.x, topLeft.y);
 
-  if (writingMode === 'vertical-rl') {
+  if (writingMode === 'vertical-rl' || writingMode === 'sideways-rl') {
     context.rotate(90 * Math.PI / 180);
     context.translate(0, -1 * (bottomLeft.y - topLeft.y));
   }
@@ -332,6 +333,11 @@ function applyWritingModeTransformation(writingMode: string, gridBounds: Bounds,
     context.scale(1, -1);
   }
 
+  if (writingMode === 'sideways-lr') {
+    context.rotate(-90 * Math.PI / 180);
+    context.translate(-1 * (topRight.x - topLeft.x), 0);
+  }
+
   // Move back to the original point.
   context.translate(topLeft.x * -1, topLeft.y * -1);
 }

package/inspector_overlay/highlight_isolated_element.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type PathCommands} from './common.js';
+import type {PathCommands} from './common.js';
 import {buildPath, emptyBounds, fillPathWithBoxStyle} from './highlight_common.js';
 
 export interface IsolatedElementHighlight {

package/inspector_overlay/highlight_scroll_snap.ts

@@ -3,8 +3,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type Bounds, type PathCommands, type Position} from './common.js';
-
+import type {Bounds, PathCommands, Position} from './common.js';
 import {drawPath, emptyBounds, type LineStyle, type PathBounds} from './highlight_common.js';
 
 type SnapAlignment = 'none'|'start'|'end'|'center';