chrome-devtools-frontend 1.0.954845 → 1.0.956401

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

@@ -98,7 +98,6 @@ export class ImageView extends UI.View.SimpleView {
   private cachedContent?: string|null;
   constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider) {
     super(i18nString(UIStrings.image));
-    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.registerRequiredCSS(imageViewStyles);
     this.element.tabIndex = -1;
     this.element.classList.add('image-view');
@@ -139,7 +138,7 @@ export class ImageView extends UI.View.SimpleView {
   }
 
   wasShown(): void {
-    this.updateContentIfNeeded();
+    void this.updateContentIfNeeded();
   }
 
   disposeView(): void {
@@ -150,7 +149,7 @@ export class ImageView extends UI.View.SimpleView {
   }
 
   private workingCopyCommitted(): void {
-    this.updateContentIfNeeded();
+    void this.updateContentIfNeeded();
   }
 
   private async updateContentIfNeeded(): Promise<void> {
@@ -192,7 +191,7 @@ export class ImageView extends UI.View.SimpleView {
       await this.saveImage();
     });
 
-    contextMenu.show();
+    void contextMenu.show();
   }
 
   private copyImageAsDataURL(): void {

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

@@ -56,7 +56,6 @@ export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Search
   constructor(parsedJSON: ParsedJSON, startCollapsed?: boolean) {
     super();
     this.initialized = false;
-    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.registerRequiredCSS(jsonViewStyles);
     this.parsedJSON = parsedJSON;
     this.startCollapsed = Boolean(startCollapsed);

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

@@ -84,7 +84,6 @@ export class SearchableContainer extends UI.Widget.VBox {
 
   constructor(resource: TextUtils.ContentProvider.ContentProvider, contentType: string, autoPrettyPrint?: boolean) {
     super(true);
-    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.registerRequiredCSS(resourceSourceFrameStyles);
     const sourceFrame = new ResourceSourceFrame(resource, contentType);
     this.sourceFrame = sourceFrame;
@@ -99,7 +98,7 @@ export class SearchableContainer extends UI.Widget.VBox {
     searchableView.show(this.contentElement);
 
     const toolbar = new UI.Toolbar.Toolbar('toolbar', this.contentElement);
-    sourceFrame.toolbarItems().then(items => {
+    void sourceFrame.toolbarItems().then(items => {
       items.map(item => toolbar.appendToolbarItem(item));
     });
   }

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

@@ -150,7 +150,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.formattedMap = null;
     this.prettyToggle = new UI.Toolbar.ToolbarToggle(i18nString(UIStrings.prettyPrint), 'largeicon-pretty-print');
     this.prettyToggle.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, () => {
-      this.setPretty(!this.prettyToggle.toggled());
+      void this.setPretty(!this.prettyToggle.toggled());
     });
     this.shouldAutoPrettyPrint = false;
     this.prettyToggle.setVisible(false);
@@ -394,7 +394,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   wasShown(): void {
-    this.ensureContentLoaded();
+    void this.ensureContentLoaded();
     this.wasShownOrLoaded();
   }
 
@@ -760,7 +760,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
           this.doFindSearchMatches.bind(this, searchConfig, shouldJump, Boolean(jumpBackwards));
     }
 
-    this.ensureContentLoaded();
+    void this.ensureContentLoaded();
   }
 
   private resetCurrentSearchResultIndex(): void {
@@ -945,7 +945,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     const pos = state.selection.main.from, line = state.doc.lineAt(pos);
     this.populateTextAreaContextMenu(contextMenu, line.number - 1, pos - line.from);
     contextMenu.appendApplicableItems(this);
-    contextMenu.show();
+    void contextMenu.show();
     return true;
   }
 
@@ -959,7 +959,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     const lineNumber = this.textEditor.state.doc.lineAt(position).number - 1;
     this.populateLineGutterContextMenu(contextMenu, lineNumber);
     contextMenu.appendApplicableItems(this);
-    contextMenu.show();
+    void contextMenu.show();
     return true;
   }
 

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

@@ -28,11 +28,9 @@ export class XMLView extends UI.Widget.Widget implements UI.SearchableView.Searc
 
   constructor(parsedXML: Document) {
     super(true);
-    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.registerRequiredCSS(xmlViewStyles);
     this.contentElement.classList.add('shadow-xml-view', 'source-code');
     this.treeOutline = new UI.TreeOutline.TreeOutlineInShadow();
-    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.treeOutline.registerRequiredCSS(xmlTreeStyles);
     this.contentElement.appendChild(this.treeOutline.element);
     this.currentSearchFocusIndex = 0;

package/front_end/ui/legacy/components/utils/ImagePreview.ts

@@ -95,7 +95,7 @@ export class ImagePreview {
       if (imageAltText) {
         imageElement.alt = imageAltText;
       }
-      imageResource.populateImageSource(imageElement);
+      void imageResource.populateImageSource(imageElement);
 
       function buildContent(): void {
         const shadowBoundary = document.createElement('div');

package/front_end/ui/legacy/components/utils/JSPresentationUtils.ts

@@ -83,7 +83,7 @@ function populateContextMenu(link: Element, event: Event): void {
     }
   }
   contextMenu.appendApplicableItems(event);
-  contextMenu.show();
+  void contextMenu.show();
 }
 
 export function buildStackTraceRows(

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -255,7 +255,7 @@ export class Linkifier implements SDK.TargetManager.Observer {
     const linkDisplayOptions = {showColumnNumber: linkifyURLOptions.showColumnNumber};
 
     const currentOnLiveLocationUpdate = this.onLiveLocationUpdate;
-    Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
+    void Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
         .createLiveLocation(rawLocation, this.updateAnchor.bind(this, link, linkDisplayOptions), pool)
         .then(liveLocation => {
           if (liveLocation) {
@@ -356,7 +356,7 @@ export class Linkifier implements SDK.TargetManager.Observer {
     const linkDisplayOptions = {showColumnNumber: false};
 
     const currentOnLiveLocationUpdate = this.onLiveLocationUpdate;
-    Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
+    void Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
         .createStackTraceTopFrameLiveLocation(
             debuggerModel.createRawLocationsByStackTrace(stackTrace),
             this.updateAnchor.bind(this, link, linkDisplayOptions), pool)
@@ -395,7 +395,7 @@ export class Linkifier implements SDK.TargetManager.Observer {
     const linkDisplayOptions = {showColumnNumber: false};
 
     const currentOnLiveLocationUpdate = this.onLiveLocationUpdate;
-    Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance()
+    void Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance()
         .createLiveLocation(rawLocation, this.updateAnchor.bind(this, link, linkDisplayOptions), pool)
         .then(liveLocation => {
           linkInfo.liveLocation = liveLocation;
@@ -437,7 +437,7 @@ export class Linkifier implements SDK.TargetManager.Observer {
         if (header && header.ownerNode) {
           anchor.addEventListener('click', event => {
             event.consume(true);
-            Common.Revealer.reveal(header.ownerNode || null);
+            void Common.Revealer.reveal(header.ownerNode || null);
           }, false);
           // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
           // This workaround is needed to make stylelint happy
@@ -700,7 +700,7 @@ export class Linkifier implements SDK.TargetManager.Observer {
   static invokeFirstAction(linkInfo: _LinkInfo): boolean {
     const actions = Linkifier.linkActions(linkInfo);
     if (actions.length) {
-      actions[0].handler.call(null);
+      void actions[0].handler.call(null);
       return true;
     }
     return false;

package/front_end/ui/legacy/components/utils/TargetDetachedDialog.ts

@@ -21,7 +21,7 @@ export class TargetDetachedDialog extends SDK.SDKModel.SDKModel<void> implements
   constructor(target: SDK.Target.Target) {
     super(target);
     target.registerInspectorDispatcher(this);
-    target.inspectorAgent().invoke_enable();
+    void target.inspectorAgent().invoke_enable();
     // Hide all dialogs if a new top-level target is created.
     if (target.parentTarget()?.type() === SDK.Target.Type.Browser && TargetDetachedDialog.hideCrashedDialog) {
       TargetDetachedDialog.hideCrashedDialog.call(null);
@@ -71,7 +71,7 @@ export class TargetDetachedDialog extends SDK.SDKModel.SDKModel<void> implements
   /** ;
    */
   targetReloadedAfterCrash(): void {
-    this.target().runtimeAgent().invoke_runIfWaitingForDebugger();
+    void this.target().runtimeAgent().invoke_runIfWaitingForDebugger();
     if (TargetDetachedDialog.hideCrashedDialog) {
       TargetDetachedDialog.hideCrashedDialog.call(null);
       TargetDetachedDialog.hideCrashedDialog = null;

package/front_end/ui/legacy/inspectorSyntaxHighlight.css

@@ -27,18 +27,16 @@
  */
 
 .webkit-css-property {
-  color: var(--webkit-css-property-color, rgb(200 0 0)); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--webkit-css-property-color, var(--color-syntax-1)); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
 }
 
 .webkit-html-comment {
   /* Keep this in sync with view-source.css (.webkit-html-comment) */
-  color: rgb(35 110 37); /* stylelint-disable-line plugin/use_theme_colors */
-  /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--color-token-comment);
 }
 
 .webkit-html-tag {
-  color: rgb(168 148 166); /* stylelint-disable-line plugin/use_theme_colors */
-  /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--color-token-tag);
 }
 
 .webkit-html-tag-name,
@@ -49,16 +47,17 @@
 
 .webkit-html-pseudo-element {
   /* This one is non-standard. */
-  color: rgb(17 85 204); /* stylelint-disable-line plugin/use_theme_colors */
-  /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--color-token-pseudo-element);
 }
 
 .webkit-html-js-node,
 .webkit-html-css-node {
+  color: var(--color-text-primary);
   white-space: pre-wrap;
 }
 
 .webkit-html-text-node {
+  color: var(--color-text-primary);
   unicode-bidi: -webkit-isolate;
 }
 
@@ -77,15 +76,13 @@
 
 .webkit-html-attribute-name {
   /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
-  color: var(--color-token-attribute); /* stylelint-disable-line plugin/use_theme_colors */
-  /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--color-token-attribute);
   unicode-bidi: -webkit-isolate;
 }
 
 .webkit-html-attribute-value {
   /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
-  color: rgb(26 26 166); /* stylelint-disable-line plugin/use_theme_colors */
-  /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--color-token-attribute-value);
   unicode-bidi: -webkit-isolate;
   word-break: break-all;
 }

package/front_end/ui/legacy/tabbedPane.css

@@ -236,6 +236,7 @@
   flex: 0 0 auto;
   flex-direction: column;
   padding-top: 10px;
+  padding-right: 8px;
   overflow: hidden;
 }
 

package/front_end/ui/legacy/themeColors.css

@@ -155,6 +155,7 @@
   --color-token-meta: rgb(85 85 85);
   --color-token-deleted: rgb(221 68 68);
   --color-token-inserted: rgb(34 153 34);
+  --color-token-pseudo-element: rgb(17 85 204);
 
   /* Colors used by the code editor */
   --color-secondary-cursor: #c0c0c0;
@@ -295,8 +296,9 @@
   --color-token-comment: rgb(137 137 137);
   --color-token-tag: rgb(93 176 215);
   --color-token-attribute: rgb(155 187 220);
-  --color-token-attribute-value: rgb(1 200 1);
+  --color-token-attribute-value: rgb(242 151 102);
   --color-token-meta: rgb(221 251 85);
+  --color-token-pseudo-element: rgb(237 119 229);
 
   /* Colors used by the code editor */
   --color-secondary-cursor: rgb(63 63 63);

package/front_end/ui/legacy/theme_support/theme_support_impl.ts

@@ -34,46 +34,20 @@
  */
 
 import * as Common from '../../../core/common/common.js';
-import * as Platform from '../../../core/platform/platform.js';
 
 import inspectorSyntaxHighlightStyles from '../inspectorSyntaxHighlight.css.legacy.js';
-import inspectorSyntaxHighlightDarkStyles from '../inspectorSyntaxHighlightDark.css.legacy.js';
 
 let themeSupportInstance: ThemeSupport;
 
 const themeValuesCache = new Map<CSSStyleDeclaration, Map<string, string>>();
 
-export class ThemeSupport {
-  private readonly themeNameInternal: string;
-  private themableProperties: Set<string>;
-  private readonly cachedThemePatches: Map<string, string>;
-  private readonly setting: Common.Settings.Setting<string>;
-  private readonly customSheets: Set<string>;
-  private readonly computedRoot: () => symbol | CSSStyleDeclaration;
-  private injectingStyleSheet?: boolean;
+export class ThemeSupport extends EventTarget {
+  private themeNameInternal = 'systemPreferred';
+  private customSheets: Set<string> = new Set();
+  private computedRoot = Common.Lazy.lazy(() => window.getComputedStyle(document.documentElement));
 
-  private constructor(setting: Common.Settings.Setting<string>) {
-    const systemPreferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default';
-    this.themeNameInternal = setting.get() === 'systemPreferred' ? systemPreferredTheme : setting.get();
-    this.themableProperties = new Set([
-      'color',
-      'box-shadow',
-      'text-shadow',
-      'outline-color',
-      'background-image',
-      'background-color',
-      'border-left-color',
-      'border-right-color',
-      'border-top-color',
-      'border-bottom-color',
-      '-webkit-border-image',
-      'fill',
-      'stroke',
-    ]);
-    this.cachedThemePatches = new Map();
-    this.setting = setting;
-    this.customSheets = new Set();
-    this.computedRoot = Common.Lazy.lazy(() => window.getComputedStyle(document.documentElement));
+  private constructor(private setting: Common.Settings.Setting<string>) {
+    super();
   }
 
   static hasInstance(): boolean {
@@ -139,12 +113,7 @@ export class ThemeSupport {
   }
 
   injectHighlightStyleSheets(element: Element|ShadowRoot): void {
-    this.injectingStyleSheet = true;
     this.appendStyle(element, inspectorSyntaxHighlightStyles);
-    if (this.themeNameInternal === 'dark') {
-      this.appendStyle(element, inspectorSyntaxHighlightDarkStyles);
-    }
-    this.injectingStyleSheet = false;
   }
 
   /**
@@ -165,212 +134,37 @@ export class ThemeSupport {
     }
   }
 
-  isForcedColorsMode(): boolean {
-    return window.matchMedia('(forced-colors: active)').matches;
-  }
-
   addCustomStylesheet(sheetText: string): void {
     this.customSheets.add(sheetText);
   }
 
   applyTheme(document: Document): void {
-    if (!this.hasTheme() || this.isForcedColorsMode()) {
+    const isForcedColorsMode = window.matchMedia('(forced-colors: active)').matches;
+    if (isForcedColorsMode) {
       return;
     }
 
-    if (this.themeNameInternal === 'dark') {
-      document.documentElement.classList.add('-theme-with-dark-background');
-    }
-
-    const styleSheets = document.styleSheets;
-    const result = [];
-    for (let i = 0; i < styleSheets.length; ++i) {
-      const href = styleSheets[i].href;
-      if (!href) {
-        continue;
-      }
-      result.push(this.patchForTheme(href, (styleSheets[i] as CSSStyleSheet)));
-    }
-    result.push('/*# sourceURL=inspector.css.theme */');
-
-    const styleElement = document.createElement('style');
-    styleElement.textContent = result.join('\n');
-    document.head.appendChild(styleElement);
-  }
-
-  themeStyleSheet(id: string, text: string): string {
-    if (!this.hasTheme() || this.injectingStyleSheet || this.isForcedColorsMode()) {
-      return '';
-    }
-
-    let patch = this.cachedThemePatches.get(id);
-    if (!patch) {
-      const styleElement = document.createElement('style');
-      styleElement.textContent = text;
-      document.body.appendChild(styleElement);
-
-      const {sheet} = styleElement;
-      if (!sheet) {
-        throw new Error('No sheet in stylesheet object');
-      }
-      patch = this.patchForTheme(id, sheet);
-      document.body.removeChild(styleElement);
-    }
-    return patch;
-  }
-
-  private patchForTheme(id: string, styleSheet: CSSStyleSheet): string {
-    const cached = this.cachedThemePatches.get(id);
-    if (cached) {
-      return cached;
-    }
-
-    try {
-      const rules = styleSheet.cssRules;
-      const result = [];
-      for (let j = 0; j < rules.length; ++j) {
-        const rule = rules[j];
-        if (rule instanceof CSSImportRule) {
-          result.push(this.patchForTheme(rule.styleSheet.href || '', rule.styleSheet));
-          continue;
-        }
-
-        if (!(rule instanceof CSSStyleRule)) {
-          continue;
-        }
-
-        const output: string[] = [];
-        const style = rule.style;
-        const selectorText = rule.selectorText;
-        for (let i = 0; style && i < style.length; ++i) {
-          this.patchProperty(selectorText, style, style[i], output);
-        }
-        if (output.length) {
-          result.push(rule.selectorText + '{' + output.join('') + '}');
-        }
-      }
-
-      const fullText = result.join('\n');
-      this.cachedThemePatches.set(id, fullText);
-      return fullText;
-    } catch (e) {
-      this.setting.set('default');
-      return '';
-    }
-  }
-
-  /**
-   * Theming API is primarily targeted at making dark theme look good.
-   * - If rule has ".-theme-preserve" in selector, it won't be affected.
-   * - One can create specializations for dark themes via body.-theme-with-dark-background selector in host context.
-   */
-  private patchProperty(selectorText: string, style: CSSStyleDeclaration, name: string, output: string[]): void {
-    if (!this.themableProperties.has(name)) {
-      return;
-    }
-
-    const value = style.getPropertyValue(name);
-    if (!value || value === 'none' || value === 'inherit' || value === 'initial' || value === 'transparent') {
-      return;
-    }
-    if (name === 'background-image' && value.indexOf('gradient') === -1) {
-      return;
-    }
-
-    if (selectorText.indexOf('-theme-') !== -1) {
-      return;
-    }
+    const systemPreferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default';
+    this.themeNameInternal = this.setting.get() === 'systemPreferred' ? systemPreferredTheme : this.setting.get();
 
-    let colorUsage = ThemeSupport.ColorUsage.Unknown;
-    if (name.indexOf('background') === 0 || name.indexOf('border') === 0) {
-      colorUsage |= ThemeSupport.ColorUsage.Background;
-    }
-    if (name.indexOf('background') === -1) {
-      colorUsage |= ThemeSupport.ColorUsage.Foreground;
-    }
+    const wasDarkThemed = document.documentElement.classList.contains('-theme-with-dark-background');
+    document.documentElement.classList.toggle('-theme-with-dark-background', this.themeNameInternal === 'dark');
 
-    output.push(name);
-    output.push(':');
-    if (/^var\(.*\)$/.test(value)) {
-      // Don't translate CSS variables.
-      output.push(value);
-    } else {
-      const items = value.replace(Common.Color.Regex, '\0$1\0').split('\0');
-      for (const item of items) {
-        output.push(this.patchColorText(item, (colorUsage as number)));
-      }
-    }
-    if (style.getPropertyPriority(name)) {
-      output.push(' !important');
-    }
-    output.push(';');
-  }
+    const isDarkThemed = document.documentElement.classList.contains('-theme-with-dark-background');
 
-  /**
-   * This legacy function has been supeseded by CSS custom properties. Wherever possible, please use
-   * the values declared in global stylesheets.
-   *
-   * @deprecated
-   */
-  patchColorText(text: string, colorUsage: number): string {
-    const color = Common.Color.Color.parse(text);
-    if (!color) {
-      return text;
+    // In the event the theme changes we need to clear caches and notify subscribers.
+    if (wasDarkThemed !== isDarkThemed) {
+      themeValuesCache.clear();
+      this.customSheets.clear();
+      this.dispatchEvent(new ThemeChangeEvent());
     }
-    const outColor = this.patchColor(color, colorUsage);
-    let outText = outColor.asString(null);
-    if (!outText) {
-      outText = outColor.asString(outColor.hasAlpha() ? Common.Color.Format.RGBA : Common.Color.Format.RGB);
-    }
-    return outText || text;
-  }
-
-  /**
-   * This legacy function has been supeseded by CSS custom properties. Wherever possible, please use
-   * the values declared in global stylesheets.
-   *
-   * @deprecated
-   */
-  patchColor(color: Common.Color.Color, colorUsage: number): Common.Color.Color {
-    const hsla = color.hsla();
-    this.patchHSLA(hsla, colorUsage);
-
-    const rgba: number[] = [];
-    Common.Color.Color.hsl2rgb(hsla, rgba);
-    return new Common.Color.Color(rgba, color.format());
   }
+}
 
-  private patchHSLA(hsla: number[], colorUsage: number): void {
-    const hue = hsla[0];
-    const sat = hsla[1];
-    let lit: number = hsla[2];
-    const alpha = hsla[3];
+export class ThemeChangeEvent extends Event {
+  static readonly eventName = 'themechange';
 
-    switch (this.themeNameInternal) {
-      case 'dark': {
-        const minCap = colorUsage & ThemeSupport.ColorUsage.Background ? 0.14 : 0;
-        const maxCap = colorUsage & ThemeSupport.ColorUsage.Foreground ? 0.9 : 1;
-        lit = 1 - lit;
-        if (lit < minCap * 2) {
-          lit = minCap + lit / 2;
-        } else if (lit > 2 * maxCap - 1) {
-          lit = maxCap - 1 / 2 + lit / 2;
-        }
-        break;
-      }
-    }
-    hsla[0] = Platform.NumberUtilities.clamp(hue, 0, 1);
-    hsla[1] = Platform.NumberUtilities.clamp(sat, 0, 1);
-    hsla[2] = Platform.NumberUtilities.clamp(lit, 0, 1);
-    hsla[3] = Platform.NumberUtilities.clamp(alpha, 0, 1);
-  }
-}
-export namespace ThemeSupport {
-  // TODO(crbug.com/1167717): Make this a const enum again
-  // eslint-disable-next-line rulesdir/const_enum
-  export enum ColorUsage {
-    Unknown = 0,
-    Foreground = 1,
-    Background = 2,
+  constructor() {
+    super(ThemeChangeEvent.eventName, {bubbles: true, composed: true});
   }
 }

package/front_end/ui/legacy/toolbar.css

@@ -294,6 +294,7 @@ select.toolbar-item:disabled {
   opacity: 50%;
 }
 
+button.toolbar-item:focus-visible,
 select.toolbar-item:focus-visible {
   background: var(--color-background-elevation-2);
   border-radius: 2px;

package/package.json

@@ -53,5 +53,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.954845"
+  "version": "1.0.956401"
 }

package/scripts/component_server/server.js

@@ -150,8 +150,8 @@ function createServerIndexFile(componentNames) {
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width" />
       <title>DevTools components</title>
-      <link rel="stylesheet" href="/front_end/ui/legacy/themeColors.css" />
-      <link rel="stylesheet" href="/front_end/ui/components/docs/component_docs_styles.css" />
+      <link rel="stylesheet" href="${sharedResourcesBase}front_end/ui/legacy/themeColors.css" />
+      <link rel="stylesheet" href="${sharedResourcesBase}front_end/ui/components/docs/component_docs_styles.css" />
     </head>
     <body id="index-page">
       <h1>DevTools components</h1>