chrome-devtools-frontend 1.0.1386602 → 1.0.1418433

package/front_end/ui/legacy/Treeoutline.ts

@@ -44,7 +44,7 @@ import {type Config, InplaceEditor} from './InplaceEditor.js';
 import {Keys} from './KeyboardShortcut.js';
 import * as ThemeSupport from './theme_support/theme_support.js';
 import {Tooltip} from './Tooltip.js';
-import treeoutlineStyles from './treeoutline.css.legacy.js';
+import treeoutlineStyles from './treeoutline.css.js';
 import {
   createShadowRootWithCoreStyles,
   deepElementFromPoint,
@@ -64,13 +64,13 @@ export enum Events {
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
-export type EventTypes = {
-  [Events.ElementAttached]: TreeElement,
-  [Events.ElementsDetached]: void,
-  [Events.ElementExpanded]: TreeElement,
-  [Events.ElementCollapsed]: TreeElement,
-  [Events.ElementSelected]: TreeElement,
-};
+export interface EventTypes {
+  [Events.ElementAttached]: TreeElement;
+  [Events.ElementsDetached]: void;
+  [Events.ElementExpanded]: TreeElement;
+  [Events.ElementCollapsed]: TreeElement;
+  [Events.ElementSelected]: TreeElement;
+}
 
 export class TreeOutline extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   readonly rootElementInternal: TreeElement;
@@ -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;
@@ -417,12 +416,10 @@ export class TreeOutlineInShadow extends TreeOutline {
     }
   }
 
-  registerRequiredCSS(cssFile: {cssContent: string}): void {
-    ThemeSupport.ThemeSupport.instance().appendStyle(this.shadowRoot, cssFile);
-  }
-
-  registerCSSFiles(cssFiles: CSSStyleSheet[]): void {
-    this.shadowRoot.adoptedStyleSheets = this.shadowRoot.adoptedStyleSheets.concat(cssFiles);
+  registerRequiredCSS(...cssFiles: {cssContent: string}[]): void {
+    for (const cssFile of cssFiles) {
+      ThemeSupport.ThemeSupport.instance().appendStyle(this.shadowRoot, cssFile);
+    }
   }
 
   hideOverflow(): void {

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

@@ -2,33 +2,32 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 
 import * as UI from './legacy.js';
 
+const {urlString} = Platform.DevToolsPath;
+
 describe('UIUtils', () => {
   describe('addReferrerToURL', () => {
     it('correctly adds referrer info to URLs', () => {
       assert.strictEqual(
-          UI.UIUtils.addReferrerToURL('https://www.domain.com/route' as Platform.DevToolsPath.UrlString),
+          UI.UIUtils.addReferrerToURL(urlString`https://www.domain.com/route`),
           'https://www.domain.com/route?utm_source=devtools');
       assert.strictEqual(
-          UI.UIUtils.addReferrerToURL('https://www.domain.com/route#anchor' as Platform.DevToolsPath.UrlString),
+          UI.UIUtils.addReferrerToURL(urlString`https://www.domain.com/route#anchor`),
           'https://www.domain.com/route?utm_source=devtools#anchor');
       assert.strictEqual(
-          UI.UIUtils.addReferrerToURL('https://www.domain.com/route?key=value' as Platform.DevToolsPath.UrlString),
+          UI.UIUtils.addReferrerToURL(urlString`https://www.domain.com/route?key=value`),
           'https://www.domain.com/route?key=value&utm_source=devtools');
       assert.strictEqual(
-          UI.UIUtils.addReferrerToURL(
-              'https://www.domain.com/route?key=value#anchor' as Platform.DevToolsPath.UrlString),
+          UI.UIUtils.addReferrerToURL(urlString`https://www.domain.com/route?key=value#anchor`),
           'https://www.domain.com/route?key=value&utm_source=devtools#anchor');
       assert.strictEqual(
-          UI.UIUtils.addReferrerToURL(
-              'https://www.domain.com/route?utm_source=devtools#anchor' as Platform.DevToolsPath.UrlString),
+          UI.UIUtils.addReferrerToURL(urlString`https://www.domain.com/route?utm_source=devtools#anchor`),
           'https://www.domain.com/route?utm_source=devtools#anchor');
       assert.strictEqual(
-          UI.UIUtils.addReferrerToURL(
-              'https://www.domain.com/route?key=value&utm_source=devtools#anchor' as Platform.DevToolsPath.UrlString),
+          UI.UIUtils.addReferrerToURL(urlString`https://www.domain.com/route?key=value&utm_source=devtools#anchor`),
           'https://www.domain.com/route?key=value&utm_source=devtools#anchor');
     });
   });
@@ -36,19 +35,16 @@ describe('UIUtils', () => {
   describe('addReferrerToURLIfNecessary', () => {
     it('correctly adds referrer for web.dev and developers.google.com', () => {
       assert.strictEqual(
-          UI.UIUtils.addReferrerToURLIfNecessary('https://web.dev/route' as Platform.DevToolsPath.UrlString),
+          UI.UIUtils.addReferrerToURLIfNecessary(urlString`https://web.dev/route`),
           'https://web.dev/route?utm_source=devtools');
       assert.strictEqual(
-          UI.UIUtils.addReferrerToURLIfNecessary(
-              'https://developers.google.com/route#anchor' as Platform.DevToolsPath.UrlString),
+          UI.UIUtils.addReferrerToURLIfNecessary(urlString`https://developers.google.com/route#anchor`),
           'https://developers.google.com/route?utm_source=devtools#anchor');
       assert.strictEqual(
-          UI.UIUtils.addReferrerToURLIfNecessary(
-              'https://www.domain.com/web.dev/route' as Platform.DevToolsPath.UrlString),
+          UI.UIUtils.addReferrerToURLIfNecessary(urlString`https://www.domain.com/web.dev/route`),
           'https://www.domain.com/web.dev/route');
       assert.strictEqual(
-          UI.UIUtils.addReferrerToURLIfNecessary(
-              'https://foo.developers.google.com/route#anchor' as Platform.DevToolsPath.UrlString),
+          UI.UIUtils.addReferrerToURLIfNecessary(urlString`https://foo.developers.google.com/route#anchor`),
           'https://foo.developers.google.com/route#anchor');
     });
   });

package/front_end/ui/legacy/UIUtils.ts

@@ -33,6 +33,8 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import './Toolbar.js';
+
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
@@ -41,29 +43,31 @@ import * as Buttons from '../components/buttons/buttons.js';
 import * as IconButton from '../components/icon_button/icon_button.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
-import applicationColorTokensStyles from './applicationColorTokens.css.legacy.js';
 import * as ARIAUtils from './ARIAUtils.js';
-import checkboxTextLabelStyles from './checkboxTextLabel.css.legacy.js';
-import confirmDialogStyles from './confirmDialog.css.legacy.js';
-import designTokensStyles from './designTokens.css.legacy.js';
+import checkboxTextLabelStyles from './checkboxTextLabel.css.js';
+import confirmDialogStyles from './confirmDialog.css.js';
 import {Dialog} from './Dialog.js';
 import {Size} from './Geometry.js';
 import {GlassPane, PointerEventsBehavior, SizeBehavior} from './GlassPane.js';
-import inlineButtonStyles from './inlineButton.css.legacy.js';
-import inspectorCommonStyles from './inspectorCommon.css.legacy.js';
-import {KeyboardShortcut} from './KeyboardShortcut.js';
-import radioButtonStyles from './radioButton.css.legacy.js';
-import sliderStyles from './slider.css.legacy.js';
-import smallBubbleStyles from './smallBubble.css.legacy.js';
-import textButtonStyles from './textButton.css.legacy.js';
+import inlineButtonStyles from './inlineButton.css.js';
+import inspectorCommonStyles from './inspectorCommon.css.js';
+import {KeyboardShortcut, Keys} from './KeyboardShortcut.js';
+import smallBubbleStyles from './smallBubble.css.js';
 import * as ThemeSupport from './theme_support/theme_support.js';
-import themeColorsStyles from './themeColors.css.legacy.js';
-import tokens from './tokens.css.legacy.js';
-import {Toolbar, type ToolbarButton} from './Toolbar.js';
+import type {ToolbarButton} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import type {TreeOutline} from './Treeoutline.js';
 import {Widget} from './Widget.js';
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'dt-checkbox': CheckboxLabel;
+    'dt-close-button': DevToolsCloseButton;
+    'dt-icon-label': DevToolsIconLabel;
+    'dt-small-bubble': DevToolsSmallBubble;
+  }
+}
+
 const UIStrings = {
   /**
    *@description label to open link externally
@@ -227,7 +231,7 @@ class DragHandler {
       if (targetDocument.defaultView && targetDocument.defaultView.top) {
         this.dragEventsTargetDocumentTop = targetDocument.defaultView.top.document;
       }
-    } catch (e) {
+    } catch {
       this.dragEventsTargetDocumentTop = this.dragEventsTargetDocument;
     }
 
@@ -1131,14 +1135,54 @@ export function createInput(className?: string, type?: string, jslogContext?: st
   return element;
 }
 
+export function createHistoryInput(type = 'search', className?: string): HTMLInputElement {
+  const history = [''];
+  let historyPosition = 0;
+
+  const historyInput = document.createElement('input');
+  historyInput.type = type;
+  if (className) {
+    historyInput.className = className;
+  }
+  historyInput.addEventListener('input', onInput, false);
+  historyInput.addEventListener('keydown', onKeydown, false);
+  return historyInput;
+
+  function onInput(_event: Event): void {
+    if (history.length === historyPosition + 1) {
+      history[historyPosition] = historyInput.value;
+    }
+  }
+
+  function onKeydown(event: KeyboardEvent): void {
+    if (event.keyCode === Keys.Up.code) {
+      historyPosition = Math.max(historyPosition - 1, 0);
+      historyInput.value = history[historyPosition];
+      historyInput.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+      event.consume(true);
+    } else if (event.keyCode === Keys.Down.code) {
+      historyPosition = Math.min(historyPosition + 1, history.length - 1);
+      historyInput.value = history[historyPosition];
+      historyInput.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+      event.consume(true);
+    } else if (event.keyCode === Keys.Enter.code) {
+      if (history.length > 1 && history[history.length - 2] === historyInput.value) {
+        return;
+      }
+      history[history.length - 1] = historyInput.value;
+      historyPosition = history.length - 1;
+      history.push('');
+    }
+  }
+}
+
 export function createSelect(name: string, options: string[]|Map<string, string[]>[]|Set<string>): HTMLSelectElement {
   const select = document.createElement('select');
-  select.classList.add('chrome-select');
   ARIAUtils.setLabel(select, name);
   for (const option of options) {
     if (option instanceof Map) {
       for (const [key, value] of option) {
-        const optGroup = (select.createChild('optgroup') as HTMLOptGroupElement);
+        const optGroup = select.createChild('optgroup');
         optGroup.label = key;
         for (const child of value) {
           if (typeof child === 'string') {
@@ -1174,22 +1218,10 @@ export function createLabel(title: string, className?: string, associatedControl
   return element;
 }
 
-export function createRadioLabel(
-    name: string, title: string, checked?: boolean, jslogContext?: string): DevToolsRadioButton {
-  const element = (document.createElement('span', {is: 'dt-radio'}) as DevToolsRadioButton);
-  element.radioElement.name = name;
-  element.radioElement.checked = Boolean(checked);
-  createTextChild(element.labelElement, title);
-  if (jslogContext) {
-    element.radioElement.setAttribute('jslog', `${VisualLogging.toggle().track({change: true}).context(jslogContext)}`);
-  }
-  return element;
-}
-
 export function createIconLabel(
     options: {title?: string, iconName: string, color?: string, width?: '14px'|'20px', height?: '14px'|'20px'}):
     DevToolsIconLabel {
-  const element = (document.createElement('span', {is: 'dt-icon-label'}) as DevToolsIconLabel);
+  const element = document.createElement('dt-icon-label');
   if (options.title) {
     element.createChild('span').textContent = options.title;
   }
@@ -1202,12 +1234,63 @@ export function createIconLabel(
   return element;
 }
 
-export function createSlider(min: number, max: number, tabIndex: number): Element {
-  const element = (document.createElement('span', {is: 'dt-slider'}) as DevToolsSlider);
-  element.sliderElement.min = String(min);
-  element.sliderElement.max = String(max);
-  element.sliderElement.step = String(1);
-  element.sliderElement.tabIndex = tabIndex;
+/**
+ * Creates a radio button, which is comprised of a `<label>` and an `<input type="radio">` element.
+ *
+ * The returned pair contains the `label` element and and the `radio` input element. The latter is
+ * a child of the `label`, and therefore no association via `for` attribute is necessary to make
+ * the radio button accessible.
+ *
+ * The element is automatically styled correctly, as long as the core styles (in particular
+ * `inspectorCommon.css` is injected into the current document / shadow root). The lit
+ * equivalent of calling this method is:
+ *
+ * ```js
+ * const jslog = VisualLogging.toggle().track({change: true}).context(jslogContext);
+ * html`<label><input type="radio" name=${name} jslog=${jslog}>${title}</label>`
+ * ```
+ *
+ * @param name the name of the radio group.
+ * @param title the label text for the radio button.
+ * @param jslogContext the context string for the `jslog` attribute.
+ * @returns the pair of `HTMLLabelElement` and `HTMLInputElement`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
+ */
+export function createRadioButton(
+    name: string, title: string, jslogContext: string): {label: HTMLLabelElement, radio: HTMLInputElement} {
+  const label = document.createElement('label');
+  const radio = label.createChild('input');
+  radio.type = 'radio';
+  radio.name = name;
+  radio.setAttribute('jslog', `${VisualLogging.toggle().track({change: true}).context(jslogContext)}`);
+  createTextChild(label, title);
+  return {label, radio};
+}
+
+/**
+ * Creates an `<input type="range">` element with the specified parameters (a slider)
+ * and a `step` of 1 (the default for the element).
+ *
+ * The element is automatically styled correctly, as long as the core styles (in particular
+ * `inspectorCommon.css` is injected into the current document / shadow root). The lit
+ * equivalent of calling this method is:
+ *
+ * ```js
+ * html`<input type="range" min=${min} max=${max} tabindex=${tabIndex}>`
+ * ```
+ *
+ * @param min the minimum allowed value.
+ * @param max the maximum allowed value.
+ * @param tabIndex the value for the `tabindex` attribute.
+ * @returns the newly created `HTMLInputElement` for the slider.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
+ */
+export function createSlider(min: number, max: number, tabIndex: number): HTMLInputElement {
+  const element = document.createElement('input');
+  element.type = 'range';
+  element.min = String(min);
+  element.max = String(max);
+  element.tabIndex = tabIndex;
   return element;
 }
 
@@ -1225,19 +1308,19 @@ export class CheckboxLabel extends HTMLElement {
     super();
     CheckboxLabel.lastId = CheckboxLabel.lastId + 1;
     const id = 'ui-checkbox-label' + CheckboxLabel.lastId;
-    this.shadowRootInternal =
-        createShadowRootWithCoreStyles(this, {cssFile: checkboxTextLabelStyles, delegatesFocus: undefined});
-    this.checkboxElement = (this.shadowRootInternal.createChild('input') as HTMLInputElement);
+    this.shadowRootInternal = createShadowRootWithCoreStyles(this, {cssFile: checkboxTextLabelStyles});
+    this.checkboxElement = this.shadowRootInternal.createChild('input');
     this.checkboxElement.type = 'checkbox';
     this.checkboxElement.setAttribute('id', id);
-    this.textElement = this.shadowRootInternal.createChild('label', 'dt-checkbox-text') as HTMLElement;
+    this.textElement = this.shadowRootInternal.createChild('label', 'dt-checkbox-text');
     this.textElement.setAttribute('for', id);
     this.shadowRootInternal.createChild('slot');
   }
 
-  static create(title?: string, checked?: boolean, subtitle?: string, jslogContext?: string, small?: boolean):
-      CheckboxLabel {
-    const element = document.createElement('dt-checkbox') as CheckboxLabel;
+  static create(
+      title?: Platform.UIString.LocalizedString, checked?: boolean, subtitle?: Platform.UIString.LocalizedString,
+      jslogContext?: string, small?: boolean): CheckboxLabel {
+    const element = document.createElement('dt-checkbox');
     element.checkboxElement.checked = Boolean(checked);
     if (jslogContext) {
       element.checkboxElement.setAttribute(
@@ -1254,21 +1337,25 @@ export class CheckboxLabel extends HTMLElement {
     return element;
   }
 
+  /** Only to be used when the checkbox label is 'generated' (a regex, a className, etc). Most checkboxes should be create()'d with UIStrings */
+  static createWithStringLiteral(
+      title?: string, checked?: boolean, subtitle?: Platform.UIString.LocalizedString, jslogContext?: string,
+      small?: boolean): CheckboxLabel {
+    const stringLiteral = title as Platform.UIString.LocalizedString;
+    return CheckboxLabel.create(stringLiteral, checked, subtitle, jslogContext, small);
+  }
+
   private static lastId = 0;
 }
 
-// Skip registerCustomElement flow as it's incompatible with Safari with this specific custom element.
-self.customElements.define('dt-checkbox', CheckboxLabel);
+customElements.define('dt-checkbox', CheckboxLabel);
 
-export class DevToolsIconLabel extends HTMLSpanElement {
+export class DevToolsIconLabel extends HTMLElement {
   readonly #icon: IconButton.Icon.Icon;
 
   constructor() {
     super();
-    const root = createShadowRootWithCoreStyles(this, {
-      cssFile: undefined,
-      delegatesFocus: undefined,
-    });
+    const root = createShadowRootWithCoreStyles(this);
     this.#icon = new IconButton.Icon.Icon();
     this.#icon.style.setProperty('margin-right', '4px');
     this.#icon.style.setProperty('vertical-align', 'baseline');
@@ -1288,67 +1375,14 @@ export class DevToolsIconLabel extends HTMLSpanElement {
   }
 }
 
-let labelId = 0;
+customElements.define('dt-icon-label', DevToolsIconLabel);
 
-export class DevToolsRadioButton extends HTMLSpanElement {
-  radioElement: HTMLInputElement;
-  labelElement: HTMLLabelElement;
-
-  constructor() {
-    super();
-    this.radioElement = (this.createChild('input', 'dt-radio-button') as HTMLInputElement);
-    this.labelElement = (this.createChild('label') as HTMLLabelElement);
-
-    const id = 'dt-radio-button-id' + (++labelId);
-    this.radioElement.id = id;
-    this.radioElement.type = 'radio';
-    this.labelElement.htmlFor = id;
-    const root = createShadowRootWithCoreStyles(this, {cssFile: radioButtonStyles, delegatesFocus: undefined});
-    root.createChild('slot');
-    this.addEventListener('click', this.radioClickHandler.bind(this), false);
-  }
-
-  radioClickHandler(): void {
-    if (this.radioElement.checked || this.radioElement.disabled) {
-      return;
-    }
-    this.radioElement.checked = true;
-    this.radioElement.dispatchEvent(new Event('change'));
-  }
-}
-
-registerCustomElement('span', 'dt-radio', DevToolsRadioButton);
-registerCustomElement('span', 'dt-icon-label', DevToolsIconLabel);
-
-export class DevToolsSlider extends HTMLSpanElement {
-  sliderElement: HTMLInputElement;
-
-  constructor() {
-    super();
-    const root = createShadowRootWithCoreStyles(this, {cssFile: sliderStyles, delegatesFocus: undefined});
-    this.sliderElement = document.createElement('input');
-    this.sliderElement.classList.add('dt-range-input');
-    this.sliderElement.type = 'range';
-    root.appendChild(this.sliderElement);
-  }
-
-  set value(amount: number) {
-    this.sliderElement.value = String(amount);
-  }
-
-  get value(): number {
-    return Number(this.sliderElement.value);
-  }
-}
-
-registerCustomElement('span', 'dt-slider', DevToolsSlider);
-
-export class DevToolsSmallBubble extends HTMLSpanElement {
+export class DevToolsSmallBubble extends HTMLElement {
   private textElement: Element;
 
   constructor() {
     super();
-    const root = createShadowRootWithCoreStyles(this, {cssFile: smallBubbleStyles, delegatesFocus: undefined});
+    const root = createShadowRootWithCoreStyles(this, {cssFile: smallBubbleStyles});
     this.textElement = root.createChild('div');
     this.textElement.className = 'info';
     this.textElement.createChild('slot');
@@ -1359,37 +1393,37 @@ export class DevToolsSmallBubble extends HTMLSpanElement {
   }
 }
 
-registerCustomElement('span', 'dt-small-bubble', DevToolsSmallBubble);
+customElements.define('dt-small-bubble', DevToolsSmallBubble);
 
-export class DevToolsCloseButton extends HTMLDivElement {
-  private button: Buttons.Button.Button;
+export class DevToolsCloseButton extends HTMLElement {
+  #button: Buttons.Button.Button;
 
   constructor() {
     super();
-    const root = createShadowRootWithCoreStyles(this, {delegatesFocus: undefined});
-    this.button = new Buttons.Button.Button();
-    this.button.data = {variant: Buttons.Button.Variant.ICON, iconName: 'cross'};
-    this.button.classList.add('close-button');
-    this.button.setAttribute('jslog', `${VisualLogging.close().track({click: true})}`);
-    Tooltip.install(this.button, i18nString(UIStrings.close));
-    ARIAUtils.setLabel(this.button, i18nString(UIStrings.close));
-    root.appendChild(this.button);
+    const root = createShadowRootWithCoreStyles(this);
+    this.#button = new Buttons.Button.Button();
+    this.#button.data = {variant: Buttons.Button.Variant.ICON, iconName: 'cross'};
+    this.#button.classList.add('close-button');
+    this.#button.setAttribute('jslog', `${VisualLogging.close().track({click: true})}`);
+    Tooltip.install(this.#button, i18nString(UIStrings.close));
+    ARIAUtils.setLabel(this.#button, i18nString(UIStrings.close));
+    root.appendChild(this.#button);
   }
 
   setAccessibleName(name: string): void {
-    ARIAUtils.setLabel(this.button, name);
+    ARIAUtils.setLabel(this.#button, name);
   }
 
   setTabbable(tabbable: boolean): void {
     if (tabbable) {
-      this.button.tabIndex = 0;
+      this.#button.tabIndex = 0;
     } else {
-      this.button.tabIndex = -1;
+      this.#button.tabIndex = -1;
     }
   }
 }
 
-registerCustomElement('div', 'dt-close-button', DevToolsCloseButton);
+customElements.define('dt-close-button', DevToolsCloseButton);
 
 export function bindInput(
     input: HTMLInputElement, apply: (arg0: string) => void, validate: (arg0: string) => {
@@ -1569,11 +1603,14 @@ export function createFileSelectorElement(callback: (arg0: File) => void, accept
   }
   fileSelectorElement.style.display = 'none';
   fileSelectorElement.tabIndex = -1;
-  fileSelectorElement.onchange = () => {
-    if (fileSelectorElement.files) {
+  fileSelectorElement.addEventListener('change', () => {
+    if (fileSelectorElement.files?.length) {
       callback(fileSelectorElement.files[0]);
     }
-  };
+  });
+  fileSelectorElement.addEventListener('click', () => {
+    fileSelectorElement.value = '';
+  });
 
   return fileSelectorElement;
 }
@@ -1585,8 +1622,7 @@ export class MessageDialog {
     const dialog = new Dialog(jslogContext);
     dialog.setSizeBehavior(SizeBehavior.MEASURE_CONTENT);
     dialog.setDimmed(true);
-    const shadowRoot = createShadowRootWithCoreStyles(
-        dialog.contentElement, {cssFile: confirmDialogStyles, delegatesFocus: undefined});
+    const shadowRoot = createShadowRootWithCoreStyles(dialog.contentElement, {cssFile: confirmDialogStyles});
     const content = shadowRoot.createChild('div', 'widget');
     await new Promise(resolve => {
       const okButton = createTextButton(
@@ -1610,8 +1646,7 @@ export class ConfirmDialog {
     dialog.setSizeBehavior(SizeBehavior.MEASURE_CONTENT);
     dialog.setDimmed(true);
     ARIAUtils.setLabel(dialog.contentElement, message);
-    const shadowRoot = createShadowRootWithCoreStyles(
-        dialog.contentElement, {cssFile: confirmDialogStyles, delegatesFocus: undefined});
+    const shadowRoot = createShadowRootWithCoreStyles(dialog.contentElement, {cssFile: confirmDialogStyles});
     const content = shadowRoot.createChild('div', 'widget');
     content.createChild('div', 'message').createChild('span').textContent = message;
     const buttonsBar = content.createChild('div', 'button');
@@ -1636,11 +1671,10 @@ export class ConfirmDialog {
 
 export function createInlineButton(toolbarButton: ToolbarButton): Element {
   const element = document.createElement('span');
-  const shadowRoot = createShadowRootWithCoreStyles(element, {cssFile: inlineButtonStyles, delegatesFocus: undefined});
+  const shadowRoot = createShadowRootWithCoreStyles(element, {cssFile: inlineButtonStyles});
   element.classList.add('inline-button');
-  const toolbar = new Toolbar('');
+  const toolbar = shadowRoot.createChild('devtools-toolbar');
   toolbar.appendToolbarItem(toolbarButton);
-  shadowRoot.appendChild(toolbar.element);
   return element;
 }
 
@@ -1833,23 +1867,22 @@ function focusChanged(event: Event): void {
   updateXWidgetfocusWidgetForNode(element);
 }
 
-export function injectCoreStyles(root: Element|ShadowRoot): void {
-  ThemeSupport.ThemeSupport.instance().appendStyle(root, applicationColorTokensStyles);
-  ThemeSupport.ThemeSupport.instance().appendStyle(root, designTokensStyles);
-  ThemeSupport.ThemeSupport.instance().appendStyle(root, inspectorCommonStyles);
-  ThemeSupport.ThemeSupport.instance().appendStyle(root, textButtonStyles);
-  ThemeSupport.ThemeSupport.instance().appendStyle(root, themeColorsStyles);
-  ThemeSupport.ThemeSupport.instance().appendStyle(root, tokens);
-
-  ThemeSupport.ThemeSupport.instance().injectHighlightStyleSheets(root);
-}
-
-export function injectTextButtonStyles(root: Element|ShadowRoot): void {
-  ThemeSupport.ThemeSupport.instance().appendStyle(root, textButtonStyles);
+export function injectCoreStyles(elementOrShadowRoot: Element|ShadowRoot): void {
+  ThemeSupport.ThemeSupport.instance().appendStyle(elementOrShadowRoot, inspectorCommonStyles);
+  ThemeSupport.ThemeSupport.instance().appendStyle(elementOrShadowRoot, Buttons.textButtonStyles);
 }
 
+/**
+ * Creates a new shadow DOM tree with the core styles and an optional list of
+ * additional styles, and attaches it to the specified `element`.
+ *
+ * @param element the `Element` to attach the shadow DOM tree to.
+ * @param options optional additional style sheets and options for `Element#attachShadow()`.
+ * @returns the newly created `ShadowRoot`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow
+ */
 export function createShadowRootWithCoreStyles(
-    element: Element, options: {cssFile?: CSSStyleSheet[]|{cssContent: string}, delegatesFocus?: boolean} = {
+    element: Element, options: {cssFile?: ({cssContent: string})[]|{cssContent: string}, delegatesFocus?: boolean} = {
       delegatesFocus: undefined,
       cssFile: undefined,
     }): ShadowRoot {
@@ -1860,12 +1893,12 @@ export function createShadowRootWithCoreStyles(
 
   const shadowRoot = element.attachShadow({mode: 'open', delegatesFocus});
   injectCoreStyles(shadowRoot);
-  if (cssFile) {
-    if ('cssContent' in cssFile) {
-      ThemeSupport.ThemeSupport.instance().appendStyle(shadowRoot, cssFile);
-    } else {
-      shadowRoot.adoptedStyleSheets = cssFile;
+  if (Array.isArray(cssFile)) {
+    for (const cf of cssFile) {
+      ThemeSupport.ThemeSupport.instance().appendStyle(shadowRoot, cf);
     }
+  } else if (cssFile) {
+    ThemeSupport.ThemeSupport.instance().appendStyle(shadowRoot, cssFile);
   }
   shadowRoot.addEventListener('focus', focusChanged, true);
   return shadowRoot;
@@ -1895,18 +1928,3 @@ export function measuredScrollbarWidth(document?: Document|null): number {
   document.body.removeChild(scrollDiv);
   return cachedMeasuredScrollbarWidth;
 }
-
-export function registerCustomElement(
-    localName: string, typeExtension: string, definition: new () => HTMLElement): () => Element {
-  self.customElements.define(typeExtension, class extends definition {
-    constructor() {
-      // The JSDoc above does not allow the super call to have no params, but
-      // it seems to be the nearest to something both Closure and TS understand.
-      // @ts-ignore crbug.com/1011811: Fix after Closure has been removed.
-      super();
-      // TODO(einbinder) convert to classes and custom element tags
-      this.setAttribute('is', typeExtension);
-    }
-  }, {extends: localName});
-  return (): Element => document.createElement(localName, {is: typeExtension});
-}