chrome-devtools-frontend 1.0.1567721 → 1.0.1568864

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

@@ -4,8 +4,10 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/kit/kit.js';
+import '../../../ui/legacy/legacy.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
+import * as Input from '../../../ui/components/input/input.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -25,6 +27,10 @@ const UIStrings = {
    * @example {row} propertyValue
    */
   deselectButton: 'Remove {propertyName}: {propertyValue}',
+  /**
+   * @description Label for the dense checkbox in the grid-auto-flow editor.
+   */
+  denseLabel: 'Dense',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/components/StylePropertyEditor.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -89,6 +95,7 @@ export class StylePropertyEditor extends HTMLElement {
     // clang-format off
     render(html`
       <style>${stylePropertyEditorStyles}</style>
+      <style>${Input.checkboxStyles}</style>
       <div class="container">
         ${this.editableProperties.map(prop => this.#renderProperty(prop))}
       </div>
@@ -106,6 +113,12 @@ export class StylePropertyEditor extends HTMLElement {
       'property-value': true,
       'not-authored': notAuthored,
     });
+
+    // Special handling for grid-auto-flow with dense checkbox
+    if (prop.propertyName === 'grid-auto-flow') {
+      return this.#renderGridAutoFlowProperty(prop, shownValue, classes);
+    }
+
     return html`<div class="row">
       <div class="property">
         <span class="property-name">${prop.propertyName}</span>: <span class=${classes}>${shownValue}</span>
@@ -116,6 +129,55 @@ export class StylePropertyEditor extends HTMLElement {
     </div>`;
   }
 
+  #renderGridAutoFlowProperty(
+      prop: EditableProperty, shownValue: string|undefined,
+      classes: ReturnType<typeof Directives.classMap>): Lit.TemplateResult {
+    const authoredValue = this.#authoredProperties.get(prop.propertyName);
+
+    const isDense = authoredValue === 'dense' || authoredValue === 'row dense' || authoredValue === 'column dense';
+    const isRow = authoredValue === 'row' || authoredValue === 'row dense';
+    const isColumn = authoredValue === 'column' || authoredValue === 'column dense';
+
+    return html`<div class="row">
+      <div class="property">
+        <span class="property-name">${prop.propertyName}</span>: <span class=${classes}>${shownValue}</span>
+      </div>
+      <div class="buttons">
+        ${this.#renderButton('row', prop.propertyName, isRow)}
+        ${this.#renderButton('column', prop.propertyName, isColumn)}
+        <devtools-checkbox
+          .checked=${isDense}
+          @change=${(e: Event) => this.#onDenseCheckboxChange(e, isRow, isColumn)}
+        >
+          ${i18nString(UIStrings.denseLabel)}
+        </devtools-checkbox>
+      </div>
+    </div>`;
+  }
+
+  #onDenseCheckboxChange(e: Event, isRow: boolean, isColumn: boolean): void {
+    const checked = (e.target as HTMLInputElement).checked;
+    const propertyName = 'grid-auto-flow';
+    const currentValue = this.#authoredProperties.get(propertyName);
+
+    let newValue = '';
+    if (isRow) {
+      newValue = checked ? 'row dense' : 'row';
+    } else if (isColumn) {
+      newValue = checked ? 'column dense' : 'column';
+    } else {
+      newValue = checked ? 'dense' : '';
+    }
+
+    if (currentValue) {
+      this.dispatchEvent(new PropertyDeselectedEvent(propertyName, currentValue));
+    }
+
+    if (newValue) {
+      this.dispatchEvent(new PropertySelectedEvent(propertyName, newValue));
+    }
+  }
+
   #renderButton(propertyValue: string, propertyName: string, selected = false): Lit.TemplateResult {
     const query = `${propertyName}: ${propertyValue}`;
     const iconInfo = this.findIcon(query, this.#computedProperties);
@@ -141,7 +203,30 @@ export class StylePropertyEditor extends HTMLElement {
   }
 
   #onButtonClick(propertyName: string, propertyValue: string, selected: boolean): void {
-    if (selected) {
+    if (propertyName === 'grid-auto-flow') {
+      const currentValue = this.#authoredProperties.get(propertyName);
+      const isDense = currentValue?.includes('dense') || false;
+
+      if (selected) {
+        const newValue = isDense ? 'dense' : '';
+
+        if (currentValue) {
+          this.dispatchEvent(new PropertyDeselectedEvent(propertyName, currentValue));
+        }
+
+        if (newValue) {
+          this.dispatchEvent(new PropertySelectedEvent(propertyName, newValue));
+        }
+      } else {
+        const newValue = isDense ? `${propertyValue} dense` : propertyValue;
+
+        if (currentValue) {
+          this.dispatchEvent(new PropertyDeselectedEvent(propertyName, currentValue));
+        }
+
+        this.dispatchEvent(new PropertySelectedEvent(propertyName, newValue));
+      }
+    } else if (selected) {
       this.dispatchEvent(new PropertyDeselectedEvent(propertyName, propertyValue));
     } else {
       this.dispatchEvent(new PropertySelectedEvent(propertyName, propertyValue));
@@ -256,6 +341,13 @@ export const FlexboxEditableProperties = [
 ];
 
 export const GridEditableProperties = [
+  {
+    propertyName: 'grid-auto-flow',
+    propertyValues: [
+      'row',
+      'column',
+    ],
+  },
   {
     propertyName: 'align-content',
     propertyValues: [

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://chromium.googlesource.com/chromium/src
 Version: N/A
-Revision: 5dd7406e2cf875f110274e22c3bd287d32086055
+Revision: cd78b67fa4902cc7cdd3a0aa6dfedf054e4b43d1
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/menus/Menu.ts

@@ -422,7 +422,8 @@ export class MenuItem extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
     this.tabIndex = 0;
-    this.setAttribute('role', 'menuitem');
+    this.setAttribute('role', 'option');
+    this.setAttribute('aria-selected', String(this.#props.selected));
   }
   #props: MenuItemData = {
     value: '',
@@ -455,6 +456,7 @@ export class MenuItem extends HTMLElement {
 
   set selected(selected: boolean) {
     this.#props.selected = selected;
+    this.setAttribute('aria-selected', String(selected));
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
 

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -1766,6 +1766,8 @@ export const knownContextValues = new Set([
   'grid-area',
   'grid-auto-columns',
   'grid-auto-flow',
+  'grid-auto-flow-column',
+  'grid-auto-flow-row',
   'grid-auto-rows',
   'grid-column',
   'grid-column-end',

package/mcp/mcp.ts

@@ -35,6 +35,7 @@ export {
 export {AgentFocus} from '../front_end/models/ai_assistance/performance/AIContext.js';
 export {DebuggerWorkspaceBinding} from '../front_end/models/bindings/DebuggerWorkspaceBinding.js';
 export {CrUXManager} from '../front_end/models/crux-manager/CrUXManager.js';
+export * as Formatter from '../front_end/models/formatter/formatter.js';
 export {Issue} from '../front_end/models/issues_manager/Issue.js';
 export {
   AggregatedIssue,

package/package.json

@@ -104,5 +104,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1567721"
+  "version": "1.0.1568864"
 }