chrome-devtools-frontend 1.0.1512349 → 1.0.1513662

package/front_end/ui/legacy/FilterBar.ts

@@ -72,7 +72,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class FilterBar extends Common.ObjectWrapper.eventMixin<FilterBarEventTypes, typeof HBox>(HBox) {
   private enabled: boolean;
   private readonly stateSetting: Common.Settings.Setting<boolean>;
-  private readonly filterButtonInternal: ToolbarSettingToggle;
+  readonly #filterButton: ToolbarSettingToggle;
   private filters: FilterUI[];
   private alwaysShowFilters?: boolean;
   private showingWidget?: boolean;
@@ -86,10 +86,10 @@ export class FilterBar extends Common.ObjectWrapper.eventMixin<FilterBarEventTyp
 
     this.stateSetting =
         Common.Settings.Settings.instance().createSetting('filter-bar-' + name + '-toggled', Boolean(visibleByDefault));
-    this.filterButtonInternal =
+    this.#filterButton =
         new ToolbarSettingToggle(this.stateSetting, 'filter', i18nString(UIStrings.filter), 'filter-filled', 'filter');
-    this.filterButtonInternal.element.style.setProperty('--dot-toggle-top', '13px');
-    this.filterButtonInternal.element.style.setProperty('--dot-toggle-left', '14px');
+    this.#filterButton.element.style.setProperty('--dot-toggle-top', '13px');
+    this.#filterButton.element.style.setProperty('--dot-toggle-left', '14px');
 
     this.filters = [];
 
@@ -98,7 +98,7 @@ export class FilterBar extends Common.ObjectWrapper.eventMixin<FilterBarEventTyp
   }
 
   filterButton(): ToolbarButton {
-    return this.filterButtonInternal;
+    return this.#filterButton;
   }
 
   addDivider(): void {
@@ -116,7 +116,7 @@ export class FilterBar extends Common.ObjectWrapper.eventMixin<FilterBarEventTyp
 
   setEnabled(enabled: boolean): void {
     this.enabled = enabled;
-    this.filterButtonInternal.setEnabled(enabled);
+    this.#filterButton.setEnabled(enabled);
     this.updateFilterBar();
   }
 
@@ -164,7 +164,7 @@ export class FilterBar extends Common.ObjectWrapper.eventMixin<FilterBarEventTyp
 
   private updateFilterButton(): void {
     const isActive = this.hasActiveFilter();
-    this.filterButtonInternal.setChecked(isActive);
+    this.#filterButton.setChecked(isActive);
   }
 
   clear(): void {

package/front_end/ui/legacy/Fragment.ts

@@ -17,15 +17,15 @@ function setNodeData<T>(node: Node, value: T): void {
 }
 
 export class Fragment {
-  private readonly elementInternal: Element;
+  readonly #element: Element;
   private readonly elementsById = new Map<string, Element>();
 
   constructor(element: Element) {
-    this.elementInternal = element;
+    this.#element = element;
   }
 
   element(): Element {
-    return this.elementInternal;
+    return this.#element;
   }
 
   $(elementId: string): Element {
@@ -194,7 +194,7 @@ export class Fragment {
       return value;
     }
     if (value instanceof Fragment) {
-      return value.elementInternal;
+      return value.#element;
     }
     if (Array.isArray(value)) {
       const node = document.createDocumentFragment();

package/front_end/ui/legacy/GlassPane.ts

@@ -9,7 +9,7 @@ import {deepElementFromEvent, measuredScrollbarWidth} from './UIUtils.js';
 import {Widget} from './Widget.js';
 
 export class GlassPane {
-  private readonly widgetInternal;
+  readonly #widget;
 
   element: typeof Widget.prototype.element;
   contentElement: typeof Widget.prototype.contentElement;
@@ -26,10 +26,10 @@ export class GlassPane {
   #ignoreLeftMargin = false;
 
   constructor(jslog?: string) {
-    this.widgetInternal = new Widget({jslog, useShadowDom: true});
-    this.widgetInternal.markAsRoot();
-    this.element = this.widgetInternal.element;
-    this.contentElement = this.widgetInternal.contentElement;
+    this.#widget = new Widget({jslog, useShadowDom: true});
+    this.#widget.markAsRoot();
+    this.element = this.#widget.element;
+    this.contentElement = this.#widget.contentElement;
 
     this.registerRequiredCSS(glassPaneStyles);
     this.setPointerEventsBehavior(PointerEventsBehavior.PIERCE_GLASS_PANE);
@@ -42,15 +42,15 @@ export class GlassPane {
   }
 
   isShowing(): boolean {
-    return this.widgetInternal.isShowing();
+    return this.#widget.isShowing();
   }
 
   registerRequiredCSS(...cssFiles: Array<string&{_tag: 'CSS-in-JS'}>): void {
-    this.widgetInternal.registerRequiredCSS(...cssFiles);
+    this.#widget.registerRequiredCSS(...cssFiles);
   }
 
   setDefaultFocusedElement(element: Element|null): void {
-    this.widgetInternal.setDefaultFocusedElement(element);
+    this.#widget.setDefaultFocusedElement(element);
   }
 
   setDimmed(dimmed: boolean): void {
@@ -115,7 +115,7 @@ export class GlassPane {
     this.element.setAttribute('data-devtools-glass-pane', '');
     document.body.addEventListener('mousedown', this.onMouseDownBound, true);
     document.body.addEventListener('pointerdown', this.onMouseDownBound, true);
-    this.widgetInternal.show(document.body);
+    this.#widget.show(document.body);
     panes.add(this);
     this.positionContent();
   }
@@ -127,7 +127,7 @@ export class GlassPane {
     panes.delete(this);
     this.element.ownerDocument.body.removeEventListener('mousedown', this.onMouseDownBound, true);
     this.element.ownerDocument.body.removeEventListener('pointerdown', this.onMouseDownBound, true);
-    this.widgetInternal.detach();
+    this.#widget.detach();
     if (this.#onHideCallback) {
       this.#onHideCallback();
     }
@@ -291,11 +291,11 @@ export class GlassPane {
     }
 
     this.contentElement.positionAt(positionX, positionY, container);
-    this.widgetInternal.doResize();
+    this.#widget.doResize();
   }
 
   widget(): Widget {
-    return this.widgetInternal;
+    return this.#widget;
   }
 
   static setContainer(element: Element): void {

package/front_end/ui/legacy/InspectorView.ts

@@ -225,7 +225,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
 
     this.drawerSplitWidget.installResizer(this.drawerTabbedPane.headerElement());
     this.drawerSplitWidget.setSidebarWidget(this.drawerTabbedPane);
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.VERTICAL_DRAWER)) {
+    if (Root.Runtime.hostConfig.devToolsFlexibleLayout?.verticalDrawerEnabled) {
       this.drawerTabbedPane.rightToolbar().appendToolbarItem(this.#toggleOrientationButton);
     }
     this.drawerTabbedPane.rightToolbar().appendToolbarItem(closeDrawerButton);
@@ -393,11 +393,6 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     }
   }
 
-  private emitDrawerChangeEvent(isDrawerOpen: boolean): void {
-    const evt = new CustomEvent(Events.DRAWER_CHANGE, {bubbles: true, cancelable: true, detail: {isDrawerOpen}});
-    document.body.dispatchEvent(evt);
-  }
-
   private getTabbedPaneForTabId(tabId: string): TabbedPane|null {
     // Tab exists in the main panel
     if (this.tabbedPane.hasTab(tabId)) {
@@ -429,7 +424,6 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     } else {
       this.focusRestorer = null;
     }
-    this.emitDrawerChangeEvent(true);
     ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.drawerShown));
   }
 
@@ -446,11 +440,13 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     }
     this.drawerSplitWidget.hideSidebar(true);
 
-    this.emitDrawerChangeEvent(false);
     ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.drawerHidden));
   }
 
   toggleDrawerOrientation({force}: {force?: Omit<DrawerOrientation, DrawerOrientation.UNSET>} = {}): void {
+    if (!this.drawerTabbedPane.isShowing()) {
+      return;
+    }
     let drawerWillBeVertical: boolean;
     if (force) {
       drawerWillBeVertical = force === DrawerOrientation.VERTICAL;
@@ -753,9 +749,7 @@ export class ActionDelegate implements ActionDelegateInterface {
         }
         return true;
       case 'main.toggle-drawer-orientation':
-        if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.VERTICAL_DRAWER)) {
-          InspectorView.instance().toggleDrawerOrientation();
-        }
+        InspectorView.instance().toggleDrawerOrientation();
         return true;
       case 'main.next-tab':
         InspectorView.instance().tabbedPane.selectNextTab();
@@ -802,7 +796,3 @@ export class InspectorViewTabDelegate implements TabbedPaneTabDelegate {
     }
   }
 }
-
-export const enum Events {
-  DRAWER_CHANGE = 'drawerchange',
-}

package/front_end/ui/legacy/ListControl.ts

@@ -43,8 +43,8 @@ export class ListControl<T> {
   private bottomHeight: number;
   private model: ListModel<T>;
   private itemToElement: Map<T, Element>;
-  private selectedIndexInternal: number;
-  private selectedItemInternal: T|null;
+  #selectedIndex: number;
+  #selectedItem: T|null;
   private delegate: ListDelegate<T>;
   private readonly mode: ListMode;
   private fixedHeight: number;
@@ -64,8 +64,8 @@ export class ListControl<T> {
     this.model = model;
     this.model.addEventListener(ListModelEvents.ITEMS_REPLACED, this.replacedItemsInRange, this);
     this.itemToElement = new Map();
-    this.selectedIndexInternal = -1;
-    this.selectedItemInternal = null;
+    this.#selectedIndex = -1;
+    this.#selectedItem = null;
 
     this.element.tabIndex = -1;
     this.element.addEventListener('click', this.onClick.bind(this), false);
@@ -100,17 +100,17 @@ export class ListControl<T> {
     const to = from + data.removed.length;
     const keepSelectedIndex = data.keepSelectedIndex;
 
-    const oldSelectedItem = this.selectedItemInternal;
+    const oldSelectedItem = this.#selectedItem;
     const oldSelectedElement = oldSelectedItem !== null ? (this.itemToElement.get(oldSelectedItem) || null) : null;
     for (let i = 0; i < data.removed.length; i++) {
       this.itemToElement.delete(data.removed[i]);
     }
     this.invalidate(from, to, data.inserted);
 
-    if (this.selectedIndexInternal >= to) {
-      this.selectedIndexInternal += data.inserted - (to - from);
-      this.selectedItemInternal = this.model.at(this.selectedIndexInternal);
-    } else if (this.selectedIndexInternal >= from) {
+    if (this.#selectedIndex >= to) {
+      this.#selectedIndex += data.inserted - (to - from);
+      this.#selectedItem = this.model.at(this.#selectedIndex);
+    } else if (this.#selectedIndex >= from) {
       const selectableIndex = keepSelectedIndex ? from : from + data.inserted;
       let index = this.findFirstSelectable(selectableIndex, +1, false);
       if (index === -1) {
@@ -134,16 +134,16 @@ export class ListControl<T> {
     const item = this.model.at(index);
     this.itemToElement.delete(item);
     this.invalidateRange(index, index + 1);
-    if (this.selectedIndexInternal !== -1) {
-      this.select(this.selectedIndexInternal, null, null);
+    if (this.#selectedIndex !== -1) {
+      this.select(this.#selectedIndex, null, null);
     }
   }
 
   refreshAllItems(): void {
     this.itemToElement.clear();
     this.invalidateRange(0, this.model.length);
-    if (this.selectedIndexInternal !== -1) {
-      this.select(this.selectedIndexInternal, null, null);
+    if (this.#selectedIndex !== -1) {
+      this.select(this.#selectedIndex, null, null);
     }
   }
 
@@ -197,11 +197,11 @@ export class ListControl<T> {
   }
 
   selectedItem(): T|null {
-    return this.selectedItemInternal;
+    return this.#selectedItem;
   }
 
   selectedIndex(): number {
-    return this.selectedIndexInternal;
+    return this.#selectedIndex;
   }
 
   selectItem(item: T|null, center?: boolean, dontScroll?: boolean): void {
@@ -221,16 +221,16 @@ export class ListControl<T> {
     if (index !== -1 && !dontScroll) {
       this.scrollIntoView(index, center);
     }
-    if (this.selectedIndexInternal !== index) {
+    if (this.#selectedIndex !== index) {
       this.select(index);
     }
   }
 
   selectPreviousItem(canWrap?: boolean, center?: boolean): boolean {
-    if (this.selectedIndexInternal === -1 && !canWrap) {
+    if (this.#selectedIndex === -1 && !canWrap) {
       return false;
     }
-    let index: number = this.selectedIndexInternal === -1 ? this.model.length - 1 : this.selectedIndexInternal - 1;
+    let index: number = this.#selectedIndex === -1 ? this.model.length - 1 : this.#selectedIndex - 1;
     index = this.findFirstSelectable(index, -1, Boolean(canWrap));
     if (index !== -1) {
       this.scrollIntoView(index, center);
@@ -241,10 +241,10 @@ export class ListControl<T> {
   }
 
   selectNextItem(canWrap?: boolean, center?: boolean): boolean {
-    if (this.selectedIndexInternal === -1 && !canWrap) {
+    if (this.#selectedIndex === -1 && !canWrap) {
       return false;
     }
-    let index: number = this.selectedIndexInternal === -1 ? 0 : this.selectedIndexInternal + 1;
+    let index: number = this.#selectedIndex === -1 ? 0 : this.#selectedIndex + 1;
     index = this.findFirstSelectable(index, +1, Boolean(canWrap));
     if (index !== -1) {
       this.scrollIntoView(index, center);
@@ -258,7 +258,7 @@ export class ListControl<T> {
     if (this.mode === ListMode.NonViewport) {
       return false;
     }
-    let index: number = this.selectedIndexInternal === -1 ? this.model.length - 1 : this.selectedIndexInternal;
+    let index: number = this.#selectedIndex === -1 ? this.model.length - 1 : this.#selectedIndex;
     index = this.findPageSelectable(index, -1);
     if (index !== -1) {
       this.scrollIntoView(index, center);
@@ -272,7 +272,7 @@ export class ListControl<T> {
     if (this.mode === ListMode.NonViewport) {
       return false;
     }
-    let index: number = this.selectedIndexInternal === -1 ? 0 : this.selectedIndexInternal;
+    let index: number = this.#selectedIndex === -1 ? 0 : this.#selectedIndex;
     index = this.findPageSelectable(index, +1);
     if (index !== -1) {
       this.scrollIntoView(index, center);
@@ -415,15 +415,15 @@ export class ListControl<T> {
 
   private select(index: number, oldItem?: T|null, oldElement?: Element|null): void {
     if (oldItem === undefined) {
-      oldItem = this.selectedItemInternal;
+      oldItem = this.#selectedItem;
     }
     if (oldElement === undefined) {
       oldElement = this.itemToElement.get((oldItem as T)) || null;
     }
-    this.selectedIndexInternal = index;
-    this.selectedItemInternal = index === -1 ? null : this.model.at(index);
-    const newItem = this.selectedItemInternal;
-    const newElement = this.selectedIndexInternal !== -1 ? this.elementAtIndex(index) : null;
+    this.#selectedIndex = index;
+    this.#selectedItem = index === -1 ? null : this.model.at(index);
+    const newItem = this.#selectedItem;
+    const newElement = this.#selectedIndex !== -1 ? this.elementAtIndex(index) : null;
     this.delegate.selectedItemChanged(
         oldItem, newItem, (oldElement as HTMLElement | null), (newElement as HTMLElement | null));
     if (!this.delegate.updateSelectedItemARIA((oldElement), newElement)) {

package/front_end/ui/legacy/ListWidget.ts

@@ -312,7 +312,7 @@ export type EditorControl<T = string> = (HTMLInputElement|HTMLSelectElement|Cust
 
 export class Editor<T> {
   element: HTMLDivElement;
-  private readonly contentElementInternal: HTMLElement;
+  readonly #contentElement: HTMLElement;
   private commitButton: Buttons.Button.Button;
   private readonly cancelButton: Buttons.Button.Button;
   private errorMessageContainer: HTMLElement;
@@ -331,8 +331,8 @@ export class Editor<T> {
     this.element.addEventListener(
         'keydown', onKeyDown.bind(null, Platform.KeyboardUtilities.isEscKey, this.cancelClicked.bind(this)), false);
 
-    this.contentElementInternal = this.element.createChild('div', 'editor-content');
-    this.contentElementInternal.addEventListener('keydown', onKeyDown.bind(null, event => {
+    this.#contentElement = this.element.createChild('div', 'editor-content');
+    this.#contentElement.addEventListener('keydown', onKeyDown.bind(null, event => {
       if (event.key !== 'Enter') {
         return false;
       }
@@ -368,7 +368,7 @@ export class Editor<T> {
   }
 
   contentElement(): Element {
-    return this.contentElementInternal;
+    return this.#contentElement;
   }
 
   createInput(

package/front_end/ui/legacy/PopoverHelper.ts

@@ -170,7 +170,7 @@ export class PopoverHelper {
     }
 
     this.hidePopoverTimer = window.setTimeout(() => {
-      this.hidePopoverInternal();
+      this.#hidePopover();
       this.hidePopoverTimer = null;
     }, timeout);
   }
@@ -184,7 +184,7 @@ export class PopoverHelper {
     this.showPopoverTimer = window.setTimeout(() => {
       this.showPopoverTimer = null;
       this.stopHidePopoverTimer();
-      this.hidePopoverInternal();
+      this.#hidePopover();
       const document = ((event.target as Node).ownerDocument) as Document;
       this.showPopover(document);
     }, timeout);
@@ -204,10 +204,10 @@ export class PopoverHelper {
 
   hidePopover(): void {
     this.stopShowPopoverTimer();
-    this.hidePopoverInternal();
+    this.#hidePopover();
   }
 
-  private hidePopoverInternal(): void {
+  #hidePopover(): void {
     if (!this.hidePopoverCallback) {
       return;
     }

package/front_end/ui/legacy/ShortcutRegistry.ts

@@ -452,32 +452,32 @@ export class ShortcutRegistry {
 }
 
 export class ShortcutTreeNode {
-  private readonly keyInternal: number;
-  private actionsInternal: string[];
-  private chordsInternal: Map<number, ShortcutTreeNode>;
+  readonly #key: number;
+  #actions: string[];
+  #chords: Map<number, ShortcutTreeNode>;
   private readonly depth: number;
 
   constructor(key: number, depth = 0) {
-    this.keyInternal = key;
-    this.actionsInternal = [];
-    this.chordsInternal = new Map();
+    this.#key = key;
+    this.#actions = [];
+    this.#chords = new Map();
     this.depth = depth;
   }
 
   addAction(action: string): void {
-    this.actionsInternal.push(action);
+    this.#actions.push(action);
   }
 
   key(): number {
-    return this.keyInternal;
+    return this.#key;
   }
 
   chords(): Map<number, ShortcutTreeNode> {
-    return this.chordsInternal;
+    return this.#chords;
   }
 
   hasChords(): boolean {
-    return this.chordsInternal.size > 0;
+    return this.#chords.size > 0;
   }
 
   addKeyMapping(keys: number[], action: string): void {
@@ -489,24 +489,24 @@ export class ShortcutTreeNode {
       this.addAction(action);
     } else {
       const key = keys[this.depth];
-      if (!this.chordsInternal.has(key)) {
-        this.chordsInternal.set(key, new ShortcutTreeNode(key, this.depth + 1));
+      if (!this.#chords.has(key)) {
+        this.#chords.set(key, new ShortcutTreeNode(key, this.depth + 1));
       }
-      (this.chordsInternal.get(key) as ShortcutTreeNode).addKeyMapping(keys, action);
+      (this.#chords.get(key) as ShortcutTreeNode).addKeyMapping(keys, action);
     }
   }
 
   getNode(key: number): ShortcutTreeNode|null {
-    return this.chordsInternal.get(key) || null;
+    return this.#chords.get(key) || null;
   }
 
   actions(): string[] {
-    return this.actionsInternal;
+    return this.#actions;
   }
 
   clear(): void {
-    this.actionsInternal = [];
-    this.chordsInternal = new Map();
+    this.#actions = [];
+    this.#chords = new Map();
   }
 }