chrome-devtools-frontend 1.0.1567721 → 1.0.1568864

package/front_end/panels/common/AiCodeCompletionTeaser.ts

@@ -6,9 +6,10 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
+import * as AiCodeGeneration from '../../models/ai_code_generation/ai_code_generation.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, nothing, render} from '../../ui/lit/lit.js';
+import {html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import styles from './aiCodeCompletionTeaser.css.js';
@@ -61,17 +62,32 @@ const UIStringsNotTranslate = {
    */
   freDisclaimerTextAiWontAlwaysGetItRight: 'This feature uses AI and won’t always get it right',
   /**
-   * @description Second disclaimer item text for the fre dialog.
+   * @description Code completion disclaimer item text for the fre dialog.
+   */
+  freDisclaimerTextAsYouType:
+      'As you type, relevant data is being send to Google to generate code suggestions. Press Tab to accept.',
+  /**
+   * @description Code generation disclaimer item text for the fre dialog.
+   */
+  freDisclaimerDescribeCodeInComment:
+      'In Console or Sources, describe the code you need in a comment, then press Ctrl+I to generate it.',
+  /**
+   * @description Code generation disclaimer item text for the fre dialog.
+   */
+  freDisclaimerDescribeCodeInCommentForMacOs:
+      'In Console or Sources, describe the code you need in a comment, then press Cmd+I to generate it.',
+  /**
+   * @description Privacy disclaimer item text for the fre dialog.
    */
   freDisclaimerTextPrivacy:
       'To generate code suggestions, your console input, the history of your current console session, the currently inspected CSS, and the contents of the currently open file are shared with Google. This data may be seen by human reviewers to improve this feature.',
   /**
-   * @description Second disclaimer item text for the fre dialog when enterprise logging is off.
+   * @description Privacy disclaimer item text for the fre dialog when enterprise logging is off.
    */
   freDisclaimerTextPrivacyNoLogging:
       'To generate code suggestions, your console input, the history of your current console session, the currently inspected CSS, and the contents of the currently open file are shared with Google. This data will not be used to improve Google’s AI models. Your organization may change these settings at any time.',
   /**
-   * @description Third disclaimer item text for the fre dialog.
+   * @description Last disclaimer item text for the fre dialog.
    */
   freDisclaimerTextUseWithCaution: 'Use generated code snippets with caution',
   /**
@@ -192,15 +208,34 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
     }
   }
 
-  onAction = async(event: Event): Promise<void> => {
-    event.preventDefault();
-    const result = await FreDialog.show({
-      header: {iconName: 'smart-assistant', text: lockedString(UIStringsNotTranslate.freDisclaimerHeader)},
-      reminderItems: [
-        {
-          iconName: 'psychiatry',
-          content: lockedString(UIStringsNotTranslate.freDisclaimerTextAiWontAlwaysGetItRight),
-        },
+  #createReminderItems(): Array<{
+    iconName: string,
+    content: Common.UIString.LocalizedString|LitTemplate,
+  }> {
+    const reminderItems: Array<{
+      iconName: string,
+      content: Common.UIString.LocalizedString | LitTemplate,
+    }> = [{
+      iconName: 'psychiatry',
+      content: lockedString(UIStringsNotTranslate.freDisclaimerTextAiWontAlwaysGetItRight),
+    }];
+
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+    if (AiCodeGeneration.AiCodeGeneration.AiCodeGeneration.isAiCodeGenerationEnabled(devtoolsLocale.locale)) {
+      reminderItems.push(
+          {
+            iconName: 'code',
+            content: lockedString(UIStringsNotTranslate.freDisclaimerTextAsYouType),
+          },
+          {
+            iconName: 'text-analysis',
+            content: Host.Platform.isMac() ?
+                lockedString(UIStringsNotTranslate.freDisclaimerDescribeCodeInCommentForMacOs) :
+                lockedString(UIStringsNotTranslate.freDisclaimerDescribeCodeInComment),
+          });
+    }
+
+    reminderItems.push(
         {
           iconName: 'google',
           content: this.#noLogging ? lockedString(UIStringsNotTranslate.freDisclaimerTextPrivacyNoLogging) :
@@ -217,8 +252,16 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
             })}
           >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</x-link>`,
           // clang-format on
-        }
-      ],
+        });
+    return reminderItems;
+  }
+
+  onAction = async(event: Event): Promise<void> => {
+    event.preventDefault();
+
+    const result = await FreDialog.show({
+      header: {iconName: 'smart-assistant', text: lockedString(UIStringsNotTranslate.freDisclaimerHeader)},
+      reminderItems: this.#createReminderItems(),
       onLearnMoreClick: () => {
         void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
       },

package/front_end/panels/elements/ElementsSidebarPane.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 * as Common from '../../core/common/common.js';
+import type * as Common from '../../core/common/common.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -10,16 +10,11 @@ import {type ComputedStyleModel, type CSSModelChangedEvent, Events} from './Comp
 
 export class ElementsSidebarPane extends UI.Widget.VBox {
   protected computedStyleModelInternal: ComputedStyleModel;
-  private readonly updateThrottler: Common.Throttler.Throttler;
-  private updateWhenVisible: boolean;
   constructor(computedStyleModel: ComputedStyleModel, delegatesFocus?: boolean) {
     super({useShadowDom: true, delegatesFocus, classes: ['flex-none']});
     this.computedStyleModelInternal = computedStyleModel;
     this.computedStyleModelInternal.addEventListener(Events.CSS_MODEL_CHANGED, this.onCSSModelChanged, this);
     this.computedStyleModelInternal.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.onComputedStyleChanged, this);
-
-    this.updateThrottler = new Common.Throttler.Throttler(100);
-    this.updateWhenVisible = false;
   }
 
   node(): SDK.DOMModel.DOMNode|null {
@@ -34,29 +29,10 @@ export class ElementsSidebarPane extends UI.Widget.VBox {
     return this.computedStyleModelInternal;
   }
 
-  async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     return;
   }
 
-  update(): void {
-    this.updateWhenVisible = !this.isShowing();
-    if (this.updateWhenVisible) {
-      return;
-    }
-    void this.updateThrottler.schedule(innerUpdate.bind(this));
-
-    function innerUpdate(this: ElementsSidebarPane): Promise<void> {
-      return this.isShowing() ? this.doUpdate() : Promise.resolve();
-    }
-  }
-
-  override wasShown(): void {
-    super.wasShown();
-    if (this.updateWhenVisible) {
-      this.update();
-    }
-  }
-
   onCSSModelChanged(_event: Common.EventTarget.EventTargetEvent<CSSModelChangedEvent|null>): void {
   }
 

package/front_end/panels/elements/MetricsSidebarPane.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
+/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
@@ -35,22 +36,21 @@ import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import type {ComputedStyleModel} from './ComputedStyleModel.js';
 import {ElementsSidebarPane} from './ElementsSidebarPane.js';
 import metricsSidebarPaneStyles from './metricsSidebarPane.css.js';
 
+const {live} = Directives;
+
 export class MetricsSidebarPane extends ElementsSidebarPane {
   originalPropertyData: SDK.CSSProperty.CSSProperty|null;
   previousPropertyDataCandidate: SDK.CSSProperty.CSSProperty|null;
   private inlineStyle: SDK.CSSStyleDeclaration.CSSStyleDeclaration|null;
   private highlightMode: string;
-  private boxElements: Array<{
-    element: HTMLElement,
-    name: string,
-    backgroundColor: string,
-  }>;
+  private computedStyle: Map<string, string>|null;
   private isEditingMetrics?: boolean;
 
   constructor(computedStyleModel: ComputedStyleModel) {
@@ -61,15 +61,15 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
     this.previousPropertyDataCandidate = null;
     this.inlineStyle = null;
     this.highlightMode = '';
-    this.boxElements = [];
+    this.computedStyle = null;
     this.contentElement.setAttribute('jslog', `${VisualLogging.pane('styles-metrics')}`);
   }
 
-  override doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     // "style" attribute might have changed. Update metrics unless they are being edited
     // (if a CSS property is added, a StyleSheetChanged event is dispatched).
     if (this.isEditingMetrics) {
-      return Promise.resolve();
+      return await Promise.resolve();
     }
 
     // FIXME: avoid updates of a collapsed pane.
@@ -78,18 +78,20 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
     if (!node || node.nodeType() !== Node.ELEMENT_NODE || !cssModel) {
       this.contentElement.removeChildren();
       this.element.classList.add('collapsed');
-      return Promise.resolve();
+      return await Promise.resolve();
     }
 
     function callback(this: MetricsSidebarPane, style: Map<string, string>|null): void {
       if (!style || this.node() !== node) {
+        this.computedStyle = null;
         return;
       }
+      this.computedStyle = style;
       this.updateMetrics(style);
     }
 
     if (!node.id) {
-      return Promise.resolve();
+      return await Promise.resolve();
     }
 
     const promises = [
@@ -100,11 +102,11 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
         }
       }),
     ];
-    return Promise.all(promises) as unknown as Promise<void>;
+    return await (Promise.all(promises) as unknown as Promise<void>);
   }
 
   override onCSSModelChanged(): void {
-    this.update();
+    this.requestUpdate();
   }
 
   /**
@@ -153,47 +155,35 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
       SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
     }
 
-    for (const {element, name, backgroundColor} of this.boxElements) {
-      const shouldHighlight = !node || mode === 'all' || name === mode;
-      element.style.backgroundColor = shouldHighlight ? backgroundColor : '';
-      element.classList.toggle('highlighted', shouldHighlight);
+    if (this.computedStyle) {
+      this.updateMetrics(this.computedStyle, mode);
     }
   }
 
-  private updateMetrics(style: Map<string, string>): void {
+  private updateMetrics(style: Map<string, string>, highlightedMode = 'all'): void {
     // Updating with computed style.
-    const metricsElement = document.createElement('div');
-    metricsElement.className = 'metrics';
     const self = this;
 
     function createBoxPartElement(
-        this: MetricsSidebarPane, style: Map<string, string>, name: string, side: string,
-        suffix: string): HTMLDivElement {
-      const element = document.createElement('div');
-      element.className = side;
-
+        this: MetricsSidebarPane, style: Map<string, string>, name: string, side: string, suffix: string): LitTemplate {
       const propertyName = (name !== 'position' ? name + '-' : '') + side + suffix;
       let value = style.get(propertyName);
-      if (value === undefined) {
-        return element;
-      }
 
       if (value === '' || (name !== 'position' && value === 'unset')) {
         value = '\u2012';
       } else if (name === 'position' && value === 'auto') {
         value = '\u2012';
       }
-      value = value.replace(/px$/, '');
-      value = Platform.NumberUtilities.toFixedIfFloating(value);
-
-      element.textContent = value;
-      element.setAttribute('jslog', `${VisualLogging.value(propertyName).track({
-                             dblclick: true,
-                             keydown: 'Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown',
-                             change: true,
-                           })}`);
-      element.addEventListener('dblclick', this.startEditing.bind(this, element, name, propertyName, style), false);
-      return element;
+      value = value?.replace(/px$/, '');
+      value = value ? Platform.NumberUtilities.toFixedIfFloating(value) : value;
+      // clang-format off
+      return html`<div class=${side} jslog=${VisualLogging.value(propertyName).track({
+          dblclick: true, keydown: 'Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown', change: true,
+          })}
+          @dblclick=${(e: Event) => this.startEditing(e.currentTarget, name, propertyName, style)}
+          .innerText=${live(value ?? '')}>
+      </div>`;
+      // clang-format on
     }
 
     function getContentAreaWidthPx(style: Map<string, string>): string {
@@ -263,8 +253,7 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
       Common.Color.Legacy.fromRGBA([0, 0, 0, 0]),
     ];
     const boxLabels = ['content', 'padding', 'border', 'margin', 'position'];
-    let previousBox: HTMLDivElement|null = null;
-    this.boxElements = [];
+    let previousBox: LitTemplate = nothing;
     for (let i = 0; i < boxes.length; ++i) {
       const name = boxes[i];
       const display = style.get('display');
@@ -282,76 +271,64 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
         continue;
       }
 
-      const boxElement = document.createElement('div');
-      boxElement.className = `${name} highlighted`;
+      const node = this.node();
+      const shouldHighlight = !node || highlightedMode === 'all' || name === highlightedMode;
       const backgroundColor = boxColors[i].asString(Common.Color.Format.RGBA) || '';
-      boxElement.style.backgroundColor = backgroundColor;
-      boxElement.setAttribute('jslog', `${VisualLogging.metricsBox().context(name).track({hover: true})}`);
-      boxElement.addEventListener(
-          'mouseover', this.highlightDOMNode.bind(this, true, name === 'position' ? 'all' : name), false);
-      this.boxElements.push({element: boxElement, name, backgroundColor});
-
-      if (name === 'content') {
-        const widthElement = document.createElement('span');
-        widthElement.textContent = getContentAreaWidthPx(style);
-        widthElement.addEventListener(
-            'dblclick', this.startEditing.bind(this, widthElement, 'width', 'width', style), false);
-        widthElement.setAttribute('jslog', `${VisualLogging.value('width').track({
-                                    dblclick: true,
-                                    keydown: 'Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown',
-                                    change: true,
-                                  })}`);
-
-        const heightElement = document.createElement('span');
-        heightElement.textContent = getContentAreaHeightPx(style);
-        heightElement.addEventListener(
-            'dblclick', this.startEditing.bind(this, heightElement, 'height', 'height', style), false);
-        heightElement.setAttribute('jslog', `${VisualLogging.value('height').track({
-                                     dblclick: true,
-                                     keydown: 'Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown',
-                                     change: true,
-                                   })}`);
-
-        const timesElement = document.createElement('span');
-        timesElement.textContent = ' × ';
-
-        boxElement.appendChild(widthElement);
-        boxElement.appendChild(timesElement);
-        boxElement.appendChild(heightElement);
-      } else {
-        const suffix = (name === 'border' ? '-width' : '');
 
-        const labelElement = document.createElement('div');
-        labelElement.className = 'label';
-        labelElement.textContent = boxLabels[i];
-        boxElement.appendChild(labelElement);
-
-        boxElement.appendChild(createBoxPartElement.call(this, style, name, 'top', suffix));
-        boxElement.appendChild(document.createElement('br'));
-        boxElement.appendChild(createBoxPartElement.call(this, style, name, 'left', suffix));
-
-        if (previousBox) {
-          boxElement.appendChild(previousBox);
-        }
-
-        boxElement.appendChild(createBoxPartElement.call(this, style, name, 'right', suffix));
-        boxElement.appendChild(document.createElement('br'));
-        boxElement.appendChild(createBoxPartElement.call(this, style, name, 'bottom', suffix));
-      }
-
-      previousBox = boxElement;
+      const suffix = (name === 'border' ? '-width' : '');
+      // clang-format off
+      const box: LitTemplate = html`
+        <div
+            class="${name} ${shouldHighlight ? 'highlighted' : ''}"
+            style="background-color: ${shouldHighlight ? backgroundColor : ''}"
+            jslog=${VisualLogging.metricsBox().context(name).track({hover: true})}
+            @mouseover=${this.highlightDOMNode.bind(this, true, name === 'position' ? 'all' : name)}>
+        ${name === 'content' ? html`
+          <span jslog=${VisualLogging.value('width').track({
+                dblclick: true,
+                keydown: 'Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown',
+                change: true,
+              })}
+              @dblclick=${(e: Event) => this.startEditing(e.currentTarget, 'width', 'width', style)}
+              .innerText=${live(getContentAreaWidthPx(style))}>
+          </span>
+          <span> × </span>
+          <span jslog=${VisualLogging.value('height').track({
+                dblclick: true,
+                keydown: 'Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown',
+                change: true,
+              })}
+              @dblclick=${(e: Event) => this.startEditing(e.currentTarget, 'height', 'height', style)}
+              .innerText=${live(getContentAreaHeightPx(style))}>
+          </span>` : html`
+          <div class="label">${boxLabels[i]}</div>
+            ${createBoxPartElement.call(this, style, name, 'top', suffix)}
+            <br>
+            ${createBoxPartElement.call(this, style, name, 'left', suffix)}
+            ${previousBox}
+            ${createBoxPartElement.call(this, style, name, 'right', suffix)}
+            <br>
+            ${createBoxPartElement.call(this, style, name, 'bottom', suffix)}`}
+          </div>`;
+      // clang-format on
+
+      previousBox = box;
     }
-    if (previousBox) {
-      metricsElement.appendChild(previousBox);
-    }
-    metricsElement.addEventListener('mouseover', this.highlightDOMNode.bind(this, false, 'all'), false);
-    metricsElement.addEventListener('mouseleave', this.highlightDOMNode.bind(this, false, 'all'), false);
-    this.contentElement.removeChildren();
-    this.contentElement.appendChild(metricsElement);
+    // clang-format off
+    render(html`
+      <div class="metrics" @mouseover=${this.highlightDOMNode.bind(this, false, 'all')}
+          @mouseleave=${this.highlightDOMNode.bind(this, false, 'all')}>
+        ${previousBox}
+      </div>`, this.contentElement);
+    // clang-format on
     this.element.classList.remove('collapsed');
   }
 
-  startEditing(targetElement: Element, box: string, styleProperty: string, computedStyle: Map<string, string>): void {
+  startEditing(target: EventTarget|null, box: string, styleProperty: string, computedStyle: Map<string, string>): void {
+    if (!(target instanceof Element)) {
+      return;
+    }
+    const targetElement = target as Element;
     if (UI.UIUtils.isBeingEdited(targetElement)) {
       return;
     }
@@ -429,7 +406,7 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
       }
     }
     this.editingEnded(element, context);
-    this.update();
+    this.requestUpdate();
   }
 
   private applyUserInput(
@@ -519,7 +496,7 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
       }
 
       if (commitEditor) {
-        this.update();
+        this.requestUpdate();
       }
     }
   }

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -208,7 +208,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     super(computedStyleModel, true /* delegatesFocus */);
     this.setMinimumSize(96, 26);
     this.registerRequiredCSS(stylesSidebarPaneStyles);
-    Common.Settings.Settings.instance().moduleSetting('text-editor-indent').addChangeListener(this.update.bind(this));
+    Common.Settings.Settings.instance().moduleSetting('text-editor-indent').addChangeListener(this.requestUpdate, this);
     this.toolbarPaneElement = this.createStylesSidebarToolbar();
     this.noMatchesElement = this.contentElement.createChild('div', 'gray-info-message hidden');
     this.noMatchesElement.textContent = i18nString(UIStrings.noMatchingSelectorOrStyle);
@@ -330,7 +330,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   revealProperty(cssProperty: SDK.CSSProperty.CSSProperty): void {
     void this.decorator.highlightProperty(cssProperty);
     this.lastRevealedProperty = cssProperty;
-    this.update();
+    this.requestUpdate();
   }
 
   jumpToProperty(propertyName: string, sectionName?: string, blockName?: string): boolean {
@@ -366,7 +366,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.#swatchPopoverHelper.hide();
     this.#updateAbortController?.abort();
     this.resetCache();
-    this.update();
+    this.requestUpdate();
   }
 
   private sectionsContainerKeyDown(event: Event): void {
@@ -534,7 +534,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.nodeStylesUpdatedForTest(node, false);
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     this.#updateAbortController?.abort();
     this.#updateAbortController = new AbortController();
     await this.#innerDoUpdate(this.#updateAbortController.signal);
@@ -745,7 +745,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
 
     this.resetCache();
-    this.update();
+    this.requestUpdate();
   }
 
   #scheduleResetUpdateIfNotEditing(): void {

package/front_end/panels/elements/components/CSSPropertyIconResolver.ts

@@ -108,6 +108,41 @@ export function rotateFlexDirectionIcon(direction: PhysicalDirection): IconInfo
   };
 }
 
+/**
+ * Rotates the grid direction icon in such way that it indicates
+ * the desired `direction` and the arrow in the icon is always at the bottom
+ * or at the right.
+ *
+ * By default, the icon is pointing top-down with the arrow on the right-hand side.
+ */
+export function rotateGridDirectionIcon(direction: PhysicalDirection): IconInfo {
+  // Default to LTR.
+  let flipX = true;
+  let flipY = false;
+  let rotate = -90;
+
+  if (direction === PhysicalDirection.RIGHT_TO_LEFT) {
+    rotate = 90;
+    flipY = false;
+    flipX = false;
+  } else if (direction === PhysicalDirection.TOP_TO_BOTTOM) {
+    rotate = 0;
+    flipX = false;
+    flipY = false;
+  } else if (direction === PhysicalDirection.BOTTOM_TO_TOP) {
+    rotate = 0;
+    flipX = false;
+    flipY = true;
+  }
+
+  return {
+    iconName: 'grid-direction',
+    rotate,
+    scaleX: flipX ? -1 : 1,
+    scaleY: flipY ? -1 : 1,
+  };
+}
+
 export function rotateAlignContentIcon(iconName: string, direction: PhysicalDirection): IconInfo {
   return {
     iconName,
@@ -156,6 +191,14 @@ function flexDirectionIcon(value: string): (styles: ComputedStyles) => IconInfo
   return getIcon;
 }
 
+function gridDirectionIcon(value: string): (styles: ComputedStyles) => IconInfo {
+  function getIcon(computedStyles: ComputedStyles): IconInfo {
+    const directions = getPhysicalDirections(computedStyles);
+    return rotateGridDirectionIcon(directions[value]);
+  }
+  return getIcon;
+}
+
 function flexAlignContentIcon(iconName: string): (styles: ComputedStyles) => IconInfo {
   function getIcon(computedStyles: ComputedStyles): IconInfo {
     const directions = getPhysicalDirections(computedStyles);
@@ -178,7 +221,9 @@ function flexAlignContentIcon(iconName: string): (styles: ComputedStyles) => Ico
 function gridAlignContentIcon(iconName: string): (styles: ComputedStyles) => IconInfo {
   function getIcon(computedStyles: ComputedStyles): IconInfo {
     const directions = getPhysicalDirections(computedStyles);
-    return rotateAlignContentIcon(iconName, directions.column);
+    const gridAutoFlow = computedStyles.get('grid-auto-flow') || 'row';
+    const direction = gridAutoFlow.includes('column') ? directions.row : directions.column;
+    return rotateAlignContentIcon(iconName, direction);
   }
   return getIcon;
 }
@@ -194,7 +239,9 @@ function flexJustifyContentIcon(iconName: string): (styles: ComputedStyles) => I
 function gridJustifyContentIcon(iconName: string): (styles: ComputedStyles) => IconInfo {
   function getIcon(computedStyles: ComputedStyles): IconInfo {
     const directions = getPhysicalDirections(computedStyles);
-    return rotateJustifyContentIcon(iconName, directions.row);
+    const gridAutoFlow = computedStyles.get('grid-auto-flow') || 'row';
+    const direction = gridAutoFlow.includes('column') ? directions.column : directions.row;
+    return rotateJustifyContentIcon(iconName, direction);
   }
   return getIcon;
 }
@@ -202,7 +249,9 @@ function gridJustifyContentIcon(iconName: string): (styles: ComputedStyles) => I
 function gridJustifyItemsIcon(iconName: string): (styles: ComputedStyles) => IconInfo {
   function getIcon(computedStyles: ComputedStyles): IconInfo {
     const directions = getPhysicalDirections(computedStyles);
-    return rotateJustifyItemsIcon(iconName, directions.row);
+    const gridAutoFlow = computedStyles.get('grid-auto-flow') || 'row';
+    const direction = gridAutoFlow.includes('column') ? directions.column : directions.row;
+    return rotateJustifyItemsIcon(iconName, direction);
   }
   return getIcon;
 }
@@ -229,7 +278,9 @@ function flexAlignItemsIcon(iconName: string): (styles: ComputedStyles) => IconI
 function gridAlignItemsIcon(iconName: string): (styles: ComputedStyles) => IconInfo {
   function getIcon(computedStyles: ComputedStyles): IconInfo {
     const directions = getPhysicalDirections(computedStyles);
-    return rotateAlignItemsIcon(iconName, directions.column);
+    const gridAutoFlow = computedStyles.get('grid-auto-flow') || 'row';
+    const direction = gridAutoFlow.includes('column') ? directions.row : directions.column;
+    return rotateAlignItemsIcon(iconName, direction);
   }
   return getIcon;
 }
@@ -338,6 +389,8 @@ const flexItemIcons = new Map([
 ]);
 
 const gridContainerIcons = new Map([
+  ['grid-auto-flow: row', gridDirectionIcon('row')],
+  ['grid-auto-flow: column', gridDirectionIcon('column')],
   ['align-content: center', gridAlignContentIcon('align-content-center')],
   ['align-content: space-around', gridAlignContentIcon('align-content-space-around')],
   ['align-content: space-between', gridAlignContentIcon('align-content-space-between')],