chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/ui/visual_logging/LoggingDriver.test.ts

@@ -506,6 +506,54 @@ describe('LoggingDriver', () => {
     assert.isFalse(recordChange.calledOnce);
   });
 
+  it('logs state with change of a checkbox', async () => {
+    const recordChange = sinon.stub(
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance,
+        'recordChange',
+    );
+
+    const element = document.createElement('input');
+    element.setAttribute('jslog', 'TreeItem; track: change');
+    element.type = 'checkbox';
+    element.checked = true;
+    renderElementIntoDOM(element);
+    await VisualLoggingTesting.LoggingDriver.startLogging();
+    let logging = expectCall(recordChange);
+    element.dispatchEvent(new Event('change'));
+    let [event] = await logging;
+    assert.strictEqual(event.context, 1530936795);
+
+    element.checked = false;
+    logging = expectCall(recordChange);
+    element.dispatchEvent(new Event('change'));
+    [event] = await logging;
+    assert.strictEqual(event.context, 1936227034);
+  });
+
+  it('logs state with change of a radio', async () => {
+    const recordChange = sinon.stub(
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance,
+        'recordChange',
+    );
+
+    const element = document.createElement('input');
+    element.setAttribute('jslog', 'TreeItem; track: change');
+    element.type = 'radio';
+    element.checked = true;
+    renderElementIntoDOM(element);
+    await VisualLoggingTesting.LoggingDriver.startLogging();
+    let logging = expectCall(recordChange);
+    element.dispatchEvent(new Event('change'));
+    let [event] = await logging;
+    assert.strictEqual(event.context, 1530936795);
+
+    element.checked = false;
+    logging = expectCall(recordChange);
+    element.dispatchEvent(new Event('change'));
+    [event] = await logging;
+    assert.strictEqual(event.context, 1936227034);
+  });
+
   it('logs hover', async () => {
     addLoggableElements();
     await VisualLoggingTesting.LoggingDriver.startLogging({hoverLogThrottler: throttler});
@@ -678,8 +726,7 @@ describe('LoggingDriver', () => {
     assert.deepStrictEqual(recordResize.firstCall.firstArg, {veid: getVeId(element), width: 300, height: 300});
   });
 
-  // Flaky, to be rewritten
-  it.skip('[crbug.com/347520196] throttles resize per element', async () => {
+  it('throttles resize per element', async () => {
     addLoggableElements();
     const element1 = document.getElementById('element') as HTMLElement;
     const element2 = element1.cloneNode() as HTMLElement;
@@ -694,16 +741,16 @@ describe('LoggingDriver', () => {
     await expectCall(throttle, {callCount: 2});
     element2.style.height = '200px';
     await expectCall(throttle, {callCount: 2});
-    element1.style.height = '100px';
+    element1.style.height = '10px';
     await expectCall(throttle, {callCount: 2});
-    element2.style.height = '100px';
+    element2.style.height = '10px';
     const [work] = await expectCall(throttle, {callCount: 2});
 
     assert.isFalse(recordResize.called);
     await work();
     assert.isTrue(recordResize.calledTwice);
-    assert.strictEqual(recordResize.firstCall.firstArg.height, 100);
-    assert.strictEqual(recordResize.lastCall.firstArg.height, 100);
+    assert.strictEqual(recordResize.firstCall.firstArg.height, 10);
+    assert.strictEqual(recordResize.lastCall.firstArg.height, 10);
     assert.notStrictEqual(recordResize.firstCall.firstArg.veid, recordResize.lastCall.firstArg.veid);
   });
 

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';
@@ -83,7 +83,7 @@ export async function addDocument(document: Document): Promise<void> {
 }
 
 export async function stopLogging(): Promise<void> {
-  await keyboardLogThrottler.process?.();
+  await keyboardLogThrottler.schedule(async () => {}, Common.Throttler.Scheduling.AS_SOON_AS_POSSIBLE);
   logging = false;
   unregisterAllLoggables();
   for (const document of documents) {
@@ -215,15 +215,15 @@ async function process(): Promise<void> {
           if (!(event instanceof InputEvent)) {
             return;
           }
-          if (loggingState.lastInputEventType && loggingState.lastInputEventType !== event.inputType) {
+          if (loggingState.pendingChangeContext && loggingState.pendingChangeContext !== event.inputType) {
             void logPendingChange(element);
           }
-          loggingState.lastInputEventType = event.inputType;
+          loggingState.pendingChangeContext = event.inputType;
           pendingChange.add(element);
         }, {capture: true});
         element.addEventListener('change', () => logPendingChange(element), {capture: true});
         element.addEventListener('focusout', () => {
-          if (loggingState.lastInputEventType) {
+          if (loggingState.pendingChangeContext) {
             void logPendingChange(element);
           }
         }, {capture: true});
@@ -301,8 +301,11 @@ function logPendingChange(element: Element): void {
   if (!loggingState) {
     return;
   }
+  if (['checkbox', 'radio'].includes((element as HTMLInputElement).type)) {
+    loggingState.pendingChangeContext = (element as HTMLInputElement).checked ? 'on' : 'off';
+  }
   void logChange(element);
-  delete loggingState.lastInputEventType;
+  delete loggingState.pendingChangeContext;
   pendingChange.delete(element);
 }
 

package/front_end/ui/visual_logging/LoggingEvents.test.ts

@@ -24,6 +24,10 @@ describe('LoggingEvents', () => {
     throttler = new Common.Throttler.Throttler(1000000);
   });
 
+  afterEach(async () => {
+    await throttler.schedule(async () => {}, Common.Throttler.Scheduling.AS_SOON_AS_POSSIBLE);
+  });
+
   async function assertThrottled(stub: sinon.SinonStub) {
     await new Promise(resolve => setTimeout(resolve, 0));
     assert.isFalse(stub.called);
@@ -93,7 +97,7 @@ describe('LoggingEvents', () => {
         Host.InspectorFrontendHost.InspectorFrontendHostInstance,
         'recordChange',
     );
-    VisualLogging.LoggingState.getLoggingState(element)!.lastInputEventType = 'instertText';
+    VisualLogging.LoggingState.getLoggingState(element)!.pendingChangeContext = 'instertText';
     await VisualLogging.LoggingEvents.logChange(element);
     assert.isTrue(recordChange.calledOnce);
     assert.deepStrictEqual(recordChange.firstCall.firstArg, {veid, context: 296063892});

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> {
@@ -88,7 +88,7 @@ export async function logChange(loggable: Loggable): Promise<void> {
   const loggingState = getLoggingState(loggable);
   assertNotNullOrUndefined(loggingState);
   const changeEvent: Host.InspectorFrontendHostAPI.ChangeEvent = {veid: loggingState.veid};
-  const context = loggingState.lastInputEventType;
+  const context = loggingState.pendingChangeContext;
   if (context) {
     changeEvent.context = await contextAsNumber(context);
   }
@@ -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 {
@@ -13,7 +13,7 @@ export interface LoggingState {
   processedForDebugging?: boolean;
   size: DOMRect;
   selectOpen?: boolean;
-  lastInputEventType?: string;
+  pendingChangeContext?: string;
 }
 
 const state = new WeakMap<Loggable, 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';