chrome-devtools-frontend 1.0.1526203 → 1.0.1526630

package/front_end/ui/legacy/Toolbar.ts

@@ -94,7 +94,7 @@ export class Toolbar extends HTMLElement {
         if (element instanceof Buttons.Button.Button) {
           item = new ToolbarButton('', undefined, undefined, undefined, element);
         } else if (element instanceof ToolbarInputElement) {
-          item = element.item;
+          item = element.item as ToolbarItem;
         } else if (element instanceof HTMLSelectElement) {
           item = new ToolbarComboBox(null, element.title, undefined, undefined, element);
         } else {
@@ -833,11 +833,12 @@ export class ToolbarFilter extends ToolbarInput {
 }
 
 export class ToolbarInputElement extends HTMLElement {
-  static observedAttributes = ['value'];
+  static observedAttributes = ['value', 'disabled'];
 
-  item!: ToolbarInput;
+  item?: ToolbarInput;
   datalist: HTMLDataListElement|null = null;
   value: string|undefined = undefined;
+  #disabled = false;
 
   connectedCallback(): void {
     if (this.item) {
@@ -866,6 +867,9 @@ export class ToolbarInputElement extends HTMLElement {
     if (this.value) {
       this.item.setValue(this.value);
     }
+    if (this.#disabled) {
+      this.item.setEnabled(false);
+    }
     this.item.addEventListener(ToolbarInput.Event.TEXT_CHANGED, event => {
       this.dispatchEvent(new CustomEvent('change', {detail: event.data}));
     });
@@ -875,7 +879,7 @@ export class ToolbarInputElement extends HTMLElement {
   }
 
   override focus(): void {
-    this.item.focus();
+    this.item?.focus();
   }
 
   async #onAutocomplete(expression: string, prefix: string, force?: boolean): Promise<Suggestion[]> {
@@ -894,8 +898,25 @@ export class ToolbarInputElement extends HTMLElement {
       } else {
         this.value = newValue;
       }
+    } else if (name === 'disabled') {
+      this.#disabled = typeof newValue === 'string';
+      if (this.item) {
+        this.item.setEnabled(!this.#disabled);
+      }
+    }
+  }
+
+  set disabled(disabled: boolean) {
+    if (disabled) {
+      this.setAttribute('disabled', '');
+    } else {
+      this.removeAttribute('disabled');
     }
   }
+
+  get disabled(): boolean {
+    return this.hasAttribute('disabled');
+  }
 }
 customElements.define('devtools-toolbar-input', ToolbarInputElement);
 

package/front_end/ui/legacy/UIUtils.ts

@@ -2135,6 +2135,7 @@ export function bindToAction(actionName: string): ReturnType<typeof Directives.r
   const action = ActionRegistry.instance().getAction(actionName);
 
   let setEnabled: (enabled: boolean) => void;
+  let toggled: () => void;
   function actionEnabledChanged(event: Common.EventTarget.EventTargetEvent<boolean>): void {
     setEnabled(event.data);
   }
@@ -2142,6 +2143,7 @@ export function bindToAction(actionName: string): ReturnType<typeof Directives.r
   return Directives.ref((e: Element|undefined) => {
     if (!e || !(e instanceof Buttons.Button.Button)) {
       action.removeEventListener(ActionRegistration.Events.ENABLED, actionEnabledChanged);
+      action.removeEventListener(ActionRegistration.Events.TOGGLED, toggled);
       return;
     }
 
@@ -2151,10 +2153,34 @@ export function bindToAction(actionName: string): ReturnType<typeof Directives.r
 
     action.addEventListener(ActionRegistration.Events.ENABLED, actionEnabledChanged);
 
+    const toggleable = action.toggleable();
+    if (toggleable) {
+      toggled = () => {
+        e.toggled = action.toggled();
+        if (action.title()) {
+          e.title = action.title();
+          Tooltip.installWithActionBinding(e, action.title(), action.id());
+        }
+      };
+      action.addEventListener(ActionRegistration.Events.TOGGLED, toggled);
+    }
     const title = action.title();
-    const iconName = action.icon();
+    const iconName = action.icon() ?? '';
     const jslogContext = action.id();
-    if (iconName) {
+    const toggledIconName = action.toggledIcon() ?? iconName;
+    const toggleType = action.toggleWithRedColor() ? Buttons.Button.ToggleType.RED : Buttons.Button.ToggleType.PRIMARY;
+    if (toggleable) {
+      e.data = {
+        jslogContext,
+        title,
+        variant: Buttons.Button.Variant.ICON_TOGGLE,
+        iconName,
+        toggledIconName,
+        toggleType,
+        toggled: action.toggled(),
+      };
+      toggled();
+    } else if (iconName) {
       e.data = {iconName, jslogContext, title, variant: Buttons.Button.Variant.ICON};
     } else {
       e.data = {jslogContext, title, variant: Buttons.Button.Variant.TEXT};

package/front_end/ui/legacy/Widget.ts

@@ -737,6 +737,11 @@ export class Widget {
       return;
     }
 
+    if (this.#shadowRoot?.delegatesFocus && this.contentElement.querySelector('[autofocus]')) {
+      this.element.focus();
+      return;
+    }
+
     const element = (this.#defaultFocusedElement as HTMLElement | null);
     if (element) {
       if (!element.hasFocus()) {

package/front_end/ui/legacy/components/data_grid/DataGridElement.ts

@@ -312,6 +312,7 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
     for (const element of this.#getStyleElements(nodes)) {
       this.#shadowRoot.appendChild(element.cloneNode(true));
     }
+    this.#dataGrid.dispatchEventToListeners(DataGridEvents.SORTING_CHANGED);
   }
 
   override removeNodes(nodes: NodeList): void {
@@ -346,7 +347,6 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
         dataGridNode.refresh();
       }
     }
-    this.#dataGrid.dispatchEventToListeners(DataGridEvents.SORTING_CHANGED);
   }
 
   #updateCreationNode(): void {

package/front_end/ui/legacy/components/source_frame/StreamingContentHexView.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable rulesdir/no-imperative-dom-api */
 
+import type * as Common from '../../../../core/common/common.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as LinearMemoryInspectorComponents from '../../../../panels/linear_memory_inspector/components/components.js';
 import * as UI from '../../legacy.js';
@@ -22,13 +23,11 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
 
   constructor() {
     super();
-    this.#inspector.contentElement.addEventListener(
-        LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent.eventName,
-        (event: LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent) =>
-            this.#memoryRequested(event));
-    this.#inspector.contentElement.addEventListener(
-        LinearMemoryInspectorComponents.LinearMemoryInspector.AddressChangedEvent.eventName,
-        (event: LinearMemoryInspectorComponents.LinearMemoryInspector.AddressChangedEvent) => {
+    this.#inspector.addEventListener(
+        LinearMemoryInspectorComponents.LinearMemoryInspector.Events.MEMORY_REQUEST, this.#memoryRequested, this);
+    this.#inspector.addEventListener(
+        LinearMemoryInspectorComponents.LinearMemoryInspector.Events.ADDRESS_CHANGED,
+        (event: Common.EventTarget.EventTargetEvent<number>) => {
           this.#address = event.data;
         });
     this.#inspector.show(this.contentElement);
@@ -60,7 +59,7 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
     this.#inspector.hideValueInspector = true;
   }
 
-  #memoryRequested(event: LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent): void {
+  #memoryRequested(event: Common.EventTarget.EventTargetEvent<{start: number, end: number, address: number}>): void {
     // TODO(szuend): The following lines are copied from `LinearMemoryInspectorController`. We can't reuse them
     // as depending on a module in `panels/` from a component is a layering violation.
 

package/package.json

@@ -102,5 +102,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1526203"
+  "version": "1.0.1526630"
 }