chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/ui/legacy/SettingsUI.ts

@@ -53,7 +53,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/SettingsUI.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export const createSettingCheckbox = function(
-    name: string, setting: Common.Settings.Setting<boolean>, omitParagraphElement?: boolean,
+    name: Common.UIString.LocalizedString, setting: Common.Settings.Setting<boolean>, omitParagraphElement?: boolean,
     tooltip?: string): Element {
   const label = CheckboxLabel.create(name, undefined, undefined, setting.name);
   if (tooltip) {
@@ -80,7 +80,7 @@ const createSettingSelect = function(
   const settingSelectElement = container.createChild('p');
   settingSelectElement.classList.add('settings-select');
   const label = settingSelectElement.createChild('label');
-  const select = (settingSelectElement.createChild('select', 'chrome-select') as HTMLSelectElement);
+  const select = settingSelectElement.createChild('select', 'chrome-select');
   label.textContent = name;
   if (subtitle) {
     container.classList.add('chrome-select-label');

package/front_end/ui/legacy/ShortcutRegistry.test.ts

@@ -16,12 +16,12 @@ describe('ShortcutTreeNode', () => {
     const node = new UI.ShortcutRegistry.ShortcutTreeNode(0, 0);
     node.addKeyMapping([12, 154, 36], 'test action');
     const leafNode = node.getNode(12)?.getNode(154)?.getNode(36);
-    assert.ok(leafNode, 'node should have a descendant for the mapping');
+    assert.isOk(leafNode, 'node should have a descendant for the mapping');
     assert.include(
         leafNode?.actions() || [], 'test action', 'the mapping\'s node should have the \'test action\' action');
     assert.isTrue(node.hasChords(), 'node should have chords');
-    assert.ok(node.getNode(12), 'node should have a child for key=12');
-    assert.notOk(node.getNode(154), 'node should not have a direct child for key=154');
+    assert.isOk(node.getNode(12), 'node should have a child for key=12');
+    assert.isNotOk(node.getNode(154), 'node should not have a direct child for key=154');
   });
 
   it('can clear itself', () => {

package/front_end/ui/legacy/SoftDropDown.ts

@@ -71,7 +71,6 @@ export class SoftDropDown<T> implements ListDelegate<T> {
     this.width = 315;
     createShadowRootWithCoreStyles(this.glassPane.contentElement, {
       cssFile: softDropDownStyles,
-      delegatesFocus: undefined,
     }).appendChild(this.list.element);
     ARIAUtils.markAsMenu(this.list.element);
     VisualLogging.setMappedParent(this.list.element, this.element);

package/front_end/ui/legacy/SplitWidget.ts

@@ -89,7 +89,7 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
         this.contentElement.createChild('div', 'shadow-split-widget-contents shadow-split-widget-sidebar vbox');
     this.mainElement =
         this.contentElement.createChild('div', 'shadow-split-widget-contents shadow-split-widget-main vbox');
-    const mainSlot = this.mainElement.createChild('slot') as HTMLSlotElement;
+    const mainSlot = this.mainElement.createChild('slot');
     mainSlot.name = 'main';
     mainSlot.addEventListener('slotchange', (_: Event) => {
       const assignedNode = mainSlot.assignedNodes()[0];
@@ -98,7 +98,7 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
         this.setMainWidget(widget);
       }
     });
-    const sidebarSlot = this.sidebarElementInternal.createChild('slot') as HTMLSlotElement;
+    const sidebarSlot = this.sidebarElementInternal.createChild('slot');
     sidebarSlot.name = 'sidebar';
     sidebarSlot.addEventListener('slotchange', (_: Event) => {
       const assignedNode = sidebarSlot.assignedNodes()[0];

package/front_end/ui/legacy/SuggestBox.test.ts

@@ -64,7 +64,7 @@ describeWithLocale('SuggestBox', () => {
     suggestBox.updateSuggestions(
         anchorBox, [{text: 'First'}, {text: 'Hello'}, {text: 'The best suggestion'}], true, true, 'e');
 
-    assert.deepStrictEqual(delegate.appliedSuggestions, [{suggestion: 'First', isIntermediateSuggestion: true}]);
+    assert.deepEqual(delegate.appliedSuggestions, [{suggestion: 'First', isIntermediateSuggestion: true}]);
   });
 
   it('selects no item when "canShowForSingleItem" is false', () => {
@@ -72,7 +72,7 @@ describeWithLocale('SuggestBox', () => {
         anchorBox, [{text: 'First'}, {text: 'Hello', priority: 2}, {text: 'The best suggestion', priority: 5}], false,
         true, 'e');
 
-    assert.deepStrictEqual(delegate.appliedSuggestions, []);
+    assert.deepEqual(delegate.appliedSuggestions, []);
   });
 
   it('selects the highest priority item', () => {
@@ -80,7 +80,7 @@ describeWithLocale('SuggestBox', () => {
         anchorBox, [{text: 'First'}, {text: 'Hello', priority: 2}, {text: 'The best suggestion', priority: 5}], true,
         true, 'e');
 
-    assert.deepStrictEqual(
+    assert.deepEqual(
         delegate.appliedSuggestions, [{suggestion: 'The best suggestion', isIntermediateSuggestion: true}]);
   });
 
@@ -95,7 +95,7 @@ describeWithLocale('SuggestBox', () => {
     suggestBox.keyPressed(createKeyEvent('ArrowDown'));
     suggestBox.keyPressed(createKeyEvent('ArrowDown'));
 
-    assert.deepStrictEqual(delegate.appliedSuggestions, [
+    assert.deepEqual(delegate.appliedSuggestions, [
       {suggestion: 'The best suggestion', isIntermediateSuggestion: true},
       {suggestion: 'Hello', isIntermediateSuggestion: true},
       {suggestion: 'First', isIntermediateSuggestion: true},
@@ -111,7 +111,7 @@ describeWithLocale('SuggestBox', () => {
         true, 'e');
 
     suggestBox.keyPressed(createKeyEvent('Enter'));
-    assert.deepStrictEqual(delegate.accceptedSuggestions, ['The best suggestion']);
+    assert.deepEqual(delegate.accceptedSuggestions, ['The best suggestion']);
   });
 
   it('closes the controller element after accepting a suggestion', () => {

package/front_end/ui/legacy/SuggestBox.ts

@@ -105,8 +105,7 @@ export class SuggestBox implements ListDelegate<Suggestion> {
     this.glassPane = new GlassPane();
     this.glassPane.setAnchorBehavior(AnchorBehavior.PREFER_BOTTOM);
     this.glassPane.setOutsideClickCallback(this.hide.bind(this));
-    const shadowRoot = createShadowRootWithCoreStyles(
-        this.glassPane.contentElement, {cssFile: suggestBoxStyles, delegatesFocus: undefined});
+    const shadowRoot = createShadowRootWithCoreStyles(this.glassPane.contentElement, {cssFile: suggestBoxStyles});
     shadowRoot.appendChild(this.element);
   }
 

package/front_end/ui/legacy/TabbedPane.ts

@@ -75,6 +75,14 @@ const UIStrings = {
    *@description Indicates that a tab contains a preview feature (i.e., a beta / experimental feature).
    */
   previewFeature: 'Preview feature',
+  /**
+   * @description Text to move a tab forwar.
+   */
+  moveTabRight: 'Move right',
+  /**
+   * @description Text to move a tab backward.
+   */
+  moveTabLeft: 'Move left',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/TabbedPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -123,7 +131,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.tabsElement = this.headerContentsElement.createChild('div', 'tabbed-pane-header-tabs');
     this.tabsElement.setAttribute('role', 'tablist');
     this.tabsElement.addEventListener('keydown', this.keyDown.bind(this), false);
-    this.contentElementInternal = this.contentElement.createChild('div', 'tabbed-pane-content') as HTMLDivElement;
+    this.contentElementInternal = this.contentElement.createChild('div', 'tabbed-pane-content');
     this.contentElementInternal.createChild('slot');
     this.tabs = [];
     this.tabsHistory = [];
@@ -387,6 +395,21 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.selectTab(this.tabs[nextIndex].id, true);
   }
 
+  getTabIndex(id: string): number {
+    const index = this.tabs.indexOf((this.tabsById.get(id) as TabbedPaneTab));
+    return index;
+  }
+
+  moveTabBackward(id: string, index: number): void {
+    this.insertBefore((this.tabsById.get(id) as TabbedPaneTab), index - 1);
+    this.updateTabSlider();
+  }
+
+  moveTabForward(id: string, index: number): void {
+    this.insertBefore((this.tabsById.get(id) as TabbedPaneTab), index + 2);
+    this.updateTabSlider();
+  }
+
   lastOpenedTabIds(tabsCount: number): string[] {
     function tabToTabId(tab: TabbedPaneTab): string {
       return tab.id;
@@ -1149,7 +1172,7 @@ export class TabbedPaneTab {
     iconContainer.classList.add('tabbed-pane-header-tab-icon');
     const iconNode = measuring ? this.createMeasureClone(this.icon) : this.icon;
     iconContainer.appendChild(iconNode);
-    tabElement.insertBefore(iconContainer, titleElement);
+    titleElement.insertAdjacentElement('beforebegin', iconContainer);
     tabIcons.set(tabElement, iconContainer);
   }
 
@@ -1317,6 +1340,14 @@ export class TabbedPaneTab {
       this.closeTabs(this.tabbedPane.tabsToTheRight(this.id));
     }
 
+    function moveTabForward(this: TabbedPaneTab, tabIndex: number): void {
+      this.tabbedPane.moveTabForward(this.id, tabIndex);
+    }
+
+    function moveTabBackward(this: TabbedPaneTab, tabIndex: number): void {
+      this.tabbedPane.moveTabBackward(this.id, tabIndex);
+    }
+
     const contextMenu = new ContextMenu(event);
     if (this.closeable) {
       contextMenu.defaultSection().appendItem(i18nString(UIStrings.close), close.bind(this), {jslogContext: 'close'});
@@ -1331,6 +1362,15 @@ export class TabbedPaneTab {
     if (this.delegate) {
       this.delegate.onContextMenu(this.id, contextMenu);
     }
+    const tabIndex = this.tabbedPane.getTabIndex(this.id);
+    if (tabIndex > 0) {
+      contextMenu.defaultSection().appendItem(
+          i18nString(UIStrings.moveTabLeft), moveTabBackward.bind(this, tabIndex), {jslogContext: 'move-tab-backward'});
+    }
+    if (tabIndex < this.tabbedPane.tabsElement.childNodes.length - 1) {
+      contextMenu.defaultSection().appendItem(
+          i18nString(UIStrings.moveTabRight), moveTabForward.bind(this, tabIndex), {jslogContext: 'move-tab-forward'});
+    }
     void contextMenu.show();
   }
 

package/front_end/ui/legacy/TextPrompt.ts

@@ -88,7 +88,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
     this.ghostTextElement.setAttribute('contenteditable', 'false');
     this.leftParenthesesIndices = [];
     this.changed = false;
-    ARIAUtils.markAsHidden(this.ghostTextElement);
+    ARIAUtils.setHidden(this.ghostTextElement, true);
   }
 
   initialize(

package/front_end/ui/legacy/Toolbar.test.ts

@@ -2,16 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Coordinator from '../components/render_coordinator/render_coordinator.js';
-
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 import {
   dispatchClickEvent,
   doubleRaf,
   renderElementIntoDOM,
 } from '../../testing/DOMHelpers.js';
 import {describeWithLocale} from '../../testing/EnvironmentHelpers.js';
+import * as RenderCoordinator from '../components/render_coordinator/render_coordinator.js';
 
 import * as UI from './legacy.js';
 
@@ -22,7 +19,7 @@ describeWithLocale('Toolbar', () => {
       renderElementIntoDOM(input.element);
       input.setValue('test value');
       const clearButton = input.element.querySelector('.toolbar-input-clear-button');
-      await coordinator.done();
+      await RenderCoordinator.done();
       const innerButton = clearButton?.shadowRoot?.querySelector('button');
       assert.instanceOf(innerButton, HTMLElement);
       assert.strictEqual(innerButton.title, 'Clear');

package/front_end/ui/legacy/Toolbar.ts

@@ -81,11 +81,11 @@ export class Toolbar {
 
   constructor(className: string, parentElement?: Element) {
     this.items = [];
-    this.element = (parentElement ? parentElement.createChild('div') : document.createElement('div')) as HTMLElement;
+    this.element = parentElement ? parentElement.createChild('div') : document.createElement('div');
     this.element.className = className;
     this.element.classList.add('toolbar');
     this.enabled = true;
-    this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: toolbarStyles, delegatesFocus: undefined});
+    this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: toolbarStyles});
     this.contentElement = this.shadowRoot.createChild('div', 'toolbar-shadow');
   }
 
@@ -1104,7 +1104,7 @@ export class ToolbarComboBox extends ToolbarItem<void> {
     const element = document.createElement('span');
     element.classList.add('toolbar-select-container');
     super(element);
-    this.selectElementInternal = (this.element.createChild('select', 'toolbar-item') as HTMLSelectElement);
+    this.selectElementInternal = this.element.createChild('select', 'toolbar-item');
     const dropdownArrowIcon = IconButton.Icon.create('triangle-down', 'toolbar-dropdown-arrow');
     this.element.appendChild(dropdownArrowIcon);
     if (changeHandler) {
@@ -1137,8 +1137,8 @@ export class ToolbarComboBox extends ToolbarItem<void> {
     this.selectElementInternal.appendChild(option);
   }
 
-  createOption(label: string, value?: string): Element {
-    const option = (this.selectElementInternal.createChild('option') as HTMLOptionElement);
+  createOption(label: string, value?: string): HTMLOptionElement {
+    const option = this.selectElementInternal.createChild('option');
     option.text = label;
     if (typeof value !== 'undefined') {
       option.value = value;
@@ -1250,7 +1250,8 @@ export class ToolbarCheckbox extends ToolbarItem<void> {
   inputElement: HTMLInputElement;
 
   constructor(
-      text: string, tooltip?: string, listener?: ((arg0: MouseEvent) => void), jslogContext?: string, small?: boolean) {
+      text: Common.UIString.LocalizedString, tooltip?: Common.UIString.LocalizedString,
+      listener?: ((arg0: MouseEvent) => void), jslogContext?: string, small?: boolean) {
     super(CheckboxLabel.create(text));
     this.element.classList.add('checkbox');
     this.inputElement = (this.element as CheckboxLabel).checkboxElement;
@@ -1287,8 +1288,10 @@ export class ToolbarCheckbox extends ToolbarItem<void> {
 }
 
 export class ToolbarSettingCheckbox extends ToolbarCheckbox {
-  constructor(setting: Common.Settings.Setting<boolean>, tooltip?: string, alternateTitle?: string) {
-    super(alternateTitle || setting.title() || '', tooltip, undefined, setting.name);
+  constructor(
+      setting: Common.Settings.Setting<boolean>, tooltip?: Common.UIString.LocalizedString,
+      alternateTitle?: Common.UIString.LocalizedString) {
+    super(alternateTitle || setting.title(), tooltip, undefined, setting.name);
     bindCheckbox(this.inputElement, setting);
   }
 }

package/front_end/ui/legacy/Treeoutline.ts

@@ -406,8 +406,7 @@ export class TreeOutlineInShadow extends TreeOutline {
     super();
     this.contentElement.classList.add('tree-outline');
     this.element = document.createElement('div');
-    this.shadowRoot =
-        createShadowRootWithCoreStyles(this.element, {cssFile: treeoutlineStyles, delegatesFocus: undefined});
+    this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: treeoutlineStyles});
     this.disclosureElement = this.shadowRoot.createChild('div', 'tree-outline-disclosure');
     this.disclosureElement.appendChild(this.contentElement);
     this.renderSelection = true;