chrome-devtools-frontend 1.0.925655 → 1.0.927419

package/front_end/ui/components/text_prompt/textPrompt.css

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2021 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+:host {
+  white-space: pre;
+  overflow: hidden;
+  display: inline-flex;
+}
+
+.prefix {
+  color: var(--color-primary);
+}
+
+input {
+  width: 0;
+  border: none;
+  outline: none;
+}
+
+.text-prompt-input {
+  border: none;
+  outline: none;
+  display: inline;
+  flex: 1 0 auto;
+}
+
+.text-prompt-input::after {
+  content: attr(suggestion);
+  color: var(--color-background-highlight);
+}

package/front_end/ui/components/text_prompt/text_prompt.ts

@@ -0,0 +1,9 @@
+// Copyright (c) 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as TextPrompt from './TextPrompt.js';
+
+export {
+  TextPrompt,
+};

package/front_end/ui/legacy/UIUtils.ts

@@ -602,7 +602,8 @@ export function anotherProfilerActiveLabel(): string {
   return i18nString(UIStrings.anotherProfilerIsAlreadyActive);
 }
 
-export function asyncStackTraceLabel(description: string|undefined): string {
+export function asyncStackTraceLabel(
+    description: string|undefined, previousCallFrames: {functionName: string}[]): string {
   if (description) {
     if (description === 'Promise.resolve') {
       return i18nString(UIStrings.promiseResolvedAsync);
@@ -610,6 +611,13 @@ export function asyncStackTraceLabel(description: string|undefined): string {
     if (description === 'Promise.reject') {
       return i18nString(UIStrings.promiseRejectedAsync);
     }
+    // TODO(crbug.com/1254259): Remove the check for 'async function'
+    // once the relevant V8 inspector CL rolls into Node LTS.
+    if ((description === 'await' || description === 'async function') && previousCallFrames.length !== 0) {
+      const lastPreviousFrame = previousCallFrames[previousCallFrames.length - 1];
+      const lastPreviousFrameName = beautifyFunctionName(lastPreviousFrame.functionName);
+      description = `await in ${lastPreviousFrameName}`;
+    }
     return i18nString(UIStrings.sAsync, {PH1: description});
   }
   return i18nString(UIStrings.asyncCall);

package/front_end/ui/legacy/components/quick_open/CommandMenu.ts

@@ -22,9 +22,13 @@ const UIStrings = {
   */
   noCommandsFound: 'No commands found',
   /**
-  * @description Text in Command Menu of the Command Menu
+  * @description Text for command prefix of run a command
+  */
+  run: 'Run',
+  /**
+  * @description Text for command suggestion of run a command
   */
-  runCommand: 'Run Command',
+  command: 'Command',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/quick_open/CommandMenu.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -388,6 +392,7 @@ export class ShowActionDelegate implements UI.ActionRegistration.ActionDelegate
 registerProvider({
   prefix: '>',
   iconName: 'ic_command_run_command',
-  title: (): Common.UIString.LocalizedString => i18nString(UIStrings.runCommand),
   provider: () => Promise.resolve(CommandMenuProvider.instance()),
+  titlePrefix: (): Common.UIString.LocalizedString => i18nString(UIStrings.run),
+  titleSuggestion: (): Common.UIString.LocalizedString => i18nString(UIStrings.command),
 });

package/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts

@@ -10,6 +10,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as Diff from '../../../../third_party/diff/diff.js';
+import * as TextPrompt from '../../../../ui/components/text_prompt/text_prompt.js';
 import * as UI from '../../legacy.js';
 
 const UIStrings = {
@@ -37,9 +38,8 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
   private loadTimeout: number;
   private refreshListWithCurrentResult!: (() => void)|undefined;
   private dialog!: UI.Dialog.Dialog|undefined;
-  private query!: string|undefined;
-  private readonly promptElement: HTMLElement;
-  private readonly prompt: UI.TextPrompt.TextPrompt;
+  private query = '';
+  private readonly inputBoxElement: TextPrompt.TextPrompt.TextPrompt;
   private readonly hintElement: HTMLElement;
   private readonly bottomElementsContainer: HTMLElement;
   private readonly progressElement: HTMLElement;
@@ -48,7 +48,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
   private list: UI.ListControl.ListControl<number>;
   private readonly itemElementsContainer: HTMLDivElement;
   private notFoundElement: HTMLElement;
-  private prefix: string;
+  private prefix = '';
   private provider: Provider|null;
   private readonly queryChangedCallback?: (arg0: string) => void;
 
@@ -66,15 +66,11 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     UI.ARIAUtils.markAsCombobox(this.contentElement);
     this.registerRequiredCSS('ui/legacy/components/quick_open/filteredListWidget.css');
 
-    this.promptElement = this.contentElement.createChild('div', 'filtered-list-widget-input');
-    UI.ARIAUtils.setAccessibleName(this.promptElement, i18nString(UIStrings.quickOpenPrompt));
-    this.promptElement.setAttribute('spellcheck', 'false');
-    this.promptElement.setAttribute('contenteditable', 'plaintext-only');
-    this.prompt = new UI.TextPrompt.TextPrompt();
-    this.prompt.initialize(() => Promise.resolve([]));
-    const promptProxy = this.prompt.attach(this.promptElement);
-    promptProxy.addEventListener('input', this.onInput.bind(this), false);
-    promptProxy.classList.add('filtered-list-widget-prompt-element');
+    this.inputBoxElement = new TextPrompt.TextPrompt.TextPrompt();
+    this.inputBoxElement.data = {ariaLabel: i18nString(UIStrings.quickOpenPrompt), prefix: '', suggestion: ''};
+    this.inputBoxElement.addEventListener(
+        TextPrompt.TextPrompt.PromptInputEvent.eventName, this.onInput.bind(this), false);
+    this.contentElement.appendChild(this.inputBoxElement);
 
     this.hintElement = this.contentElement.createChild('div', 'filtered-list-widget-hint');
 
@@ -89,15 +85,14 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     this.bottomElementsContainer.appendChild(this.itemElementsContainer);
     this.itemElementsContainer.addEventListener('click', this.onClick.bind(this), false);
     UI.ARIAUtils.markAsListBox(this.itemElementsContainer);
-    UI.ARIAUtils.setControls(this.promptElement, this.itemElementsContainer);
-    UI.ARIAUtils.setAutocomplete(this.promptElement, UI.ARIAUtils.AutocompleteInteractionModel.list);
+    UI.ARIAUtils.setControls(this.inputBoxElement, this.itemElementsContainer);
+    UI.ARIAUtils.setAutocomplete(this.inputBoxElement, UI.ARIAUtils.AutocompleteInteractionModel.list);
 
     this.notFoundElement = this.bottomElementsContainer.createChild('div', 'not-found-text');
     this.notFoundElement.classList.add('hidden');
 
-    this.setDefaultFocusedElement(this.promptElement);
+    this.setDefaultFocusedElement(this.inputBoxElement);
 
-    this.prefix = '';
     this.provider = provider;
     this.queryChangedCallback = queryChangedCallback;
   }
@@ -138,6 +133,14 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     return false;
   }
 
+  setCommandPrefix(commandPrefix: string): void {
+    this.inputBoxElement.setPrefix(commandPrefix);
+  }
+
+  setCommandSuggestion(suggestion: string): void {
+    this.inputBoxElement.setSuggestion(suggestion);
+  }
+
   setHintElement(hint: string): void {
     this.hintElement.textContent = hint;
   }
@@ -146,7 +149,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
    * Sets the text prompt's accessible title. By default, it is "Quick open prompt".
    */
   setPromptTitle(title: string): void {
-    UI.ARIAUtils.setAccessibleName(this.promptElement, title);
+    UI.ARIAUtils.setAccessibleName(this.inputBoxElement, title);
   }
 
   showAsDialog(dialogTitle?: string): void {
@@ -190,7 +193,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
   }
 
   setQuerySelectedRange(startIndex: number, endIndex: number): void {
-    this.prompt.setSelectedRange(startIndex, endIndex);
+    this.inputBoxElement.setSelectedRange(startIndex, endIndex);
   }
 
   private attachProvider(): void {
@@ -203,12 +206,8 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     this.itemsLoaded(this.provider);
   }
 
-  private value(): string {
-    return this.prompt.text().trim();
-  }
-
   private cleanValue(): string {
-    return this.value().substring(this.prefix.length);
+    return this.query.substring(this.prefix.length);
   }
 
   wasShown(): void {
@@ -290,7 +289,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     if (toElement) {
       toElement.classList.add('selected');
     }
-    UI.ARIAUtils.setActiveDescendant(this.promptElement, toElement);
+    UI.ARIAUtils.setActiveDescendant(this.inputBoxElement, toElement);
   }
 
   private onClick(event: Event): void {
@@ -307,15 +306,15 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
   }
 
   setQuery(query: string): void {
-    this.prompt.focus();
-    this.prompt.setText(query);
+    this.query = query;
+    this.inputBoxElement.focus();
+    this.inputBoxElement.setText(query);
     this.queryChanged();
-    this.prompt.autoCompleteSoon(true);
     this.scheduleFilter();
   }
 
   private tabKeyPressed(): boolean {
-    const userEnteredText = this.prompt.text();
+    const userEnteredText = this.query;
     let completion;
     for (let i = this.promptHistory.length - 1; i >= 0; i--) {
       if (this.promptHistory[i] !== userEnteredText && this.promptHistory[i].startsWith(userEnteredText)) {
@@ -326,9 +325,9 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     if (!completion) {
       return false;
     }
-    this.prompt.focus();
-    this.prompt.setText(completion);
-    this.prompt.setDOMSelection(userEnteredText.length, completion.length);
+    this.inputBoxElement.focus();
+    this.inputBoxElement.setText(completion);
+    this.inputBoxElement.setSelectedRange(userEnteredText.length, completion.length);
     this.scheduleFilter();
     return true;
   }
@@ -360,7 +359,6 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     this.progressBarElement.classList.remove('filtered-widget-progress-fade', 'hidden');
 
     const query = this.provider.rewriteQuery(this.cleanValue());
-    this.query = query;
 
     const filterRegex = query ? Platform.StringUtilities.filterRegex(query) : null;
 
@@ -468,14 +466,15 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     }
   }
 
-  private onInput(): void {
+  private onInput(event: TextPrompt.TextPrompt.PromptInputEvent): void {
+    this.query = event.data;
     this.queryChanged();
     this.scheduleFilter();
   }
 
-  private queryChanged(): void {
+  private async queryChanged(): Promise<void> {
     if (this.queryChangedCallback) {
-      this.queryChangedCallback(this.value());
+      await this.queryChangedCallback(this.query);
     }
     if (this.provider) {
       this.provider.queryChanged(this.cleanValue());
@@ -521,7 +520,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
   }
 
   private selectItem(itemIndex: number|null): void {
-    this.promptHistory.push(this.value());
+    this.promptHistory.push(this.query);
     if (this.promptHistory.length > 100) {
       this.promptHistory.shift();
     }
@@ -603,8 +602,9 @@ export function getRegisteredProviders(): ProviderRegistration[] {
   return registeredProviders;
 }
 export interface ProviderRegistration {
-  provider: () => Promise<Provider>;
-  title?: (() => string);
   prefix: string;
   iconName: string;
+  provider: () => Promise<Provider>;
+  titlePrefix: (() => string);
+  titleSuggestion?: (() => string);
 }

package/front_end/ui/legacy/components/quick_open/HelpQuickOpen.ts

@@ -36,10 +36,15 @@ export class HelpQuickOpen extends Provider {
   private addProvider(extension: {
     prefix: string,
     iconName: string,
-    title?: () => string,
+    titlePrefix: () => string,
+    titleSuggestion?: () => string,
   }): void {
-    if (extension.title) {
-      this.providers.push({prefix: extension.prefix || '', iconName: extension.iconName, title: extension.title()});
+    if (extension.titleSuggestion) {
+      this.providers.push({
+        prefix: extension.prefix || '',
+        iconName: extension.iconName,
+        title: extension.titlePrefix() + ' ' + extension.titleSuggestion(),
+      });
     }
   }
 
@@ -84,6 +89,7 @@ export class HelpQuickOpen extends Provider {
 registerProvider({
   prefix: '?',
   iconName: 'ic_command_help',
-  title: undefined,
   provider: () => Promise.resolve(HelpQuickOpen.instance()),
+  titlePrefix: () => 'Help',
+  titleSuggestion: undefined,
 });

package/front_end/ui/legacy/components/quick_open/QuickOpen.ts

@@ -21,15 +21,18 @@ export const history: string[] = [];
 
 export class QuickOpenImpl {
   private prefix: string|null;
-  private readonly query: string;
-  private readonly providers: Map<string, () => Promise<Provider>>;
   private readonly prefixes: string[];
+  private providers: Map<string, {
+    provider: () => Promise<Provider>,
+    titlePrefix: (() => string),
+    titleSuggestion?: (() => string),
+  }>;
   private filteredListWidget: FilteredListWidget|null;
+
   constructor() {
     this.prefix = null;
-    this.query = '';
-    this.providers = new Map();
     this.prefixes = [];
+    this.providers = new Map();
     this.filteredListWidget = null;
 
     getRegisteredProviders().forEach(this.addProvider.bind(this));
@@ -48,18 +51,27 @@ export class QuickOpenImpl {
   private addProvider(extension: {
     prefix: string,
     provider: () => Promise<Provider>,
+    titlePrefix: () => string,
+    titleSuggestion?: (() => string),
   }): void {
     const prefix = extension.prefix;
     if (prefix === null) {
       return;
     }
     this.prefixes.push(prefix);
-    this.providers.set(prefix, extension.provider);
+    this.providers.set(prefix, {
+      provider: extension.provider,
+      titlePrefix: extension.titlePrefix,
+      titleSuggestion: extension.titleSuggestion,
+    });
   }
 
-  private queryChanged(query: string): void {
+  private async queryChanged(query: string): Promise<void> {
     const prefix = this.prefixes.find(prefix => query.startsWith(prefix));
     if (typeof prefix !== 'string' || this.prefix === prefix) {
+      if (query !== prefix && this.filteredListWidget) {
+        this.filteredListWidget.setCommandSuggestion('');
+      }
       return;
     }
 
@@ -68,18 +80,23 @@ export class QuickOpenImpl {
       return;
     }
     this.filteredListWidget.setPrefix(prefix);
+    const titlePrefixFunction = this.providers.get(prefix)?.titlePrefix;
+    this.filteredListWidget.setCommandPrefix(titlePrefixFunction ? titlePrefixFunction() : '');
+    const titleSuggestionFunction = this.providers.get(prefix)?.titleSuggestion;
+    this.filteredListWidget.setCommandSuggestion(titleSuggestionFunction ? titleSuggestionFunction() : '');
+
     this.filteredListWidget.setProvider(null);
-    const providerFunction = this.providers.get(prefix);
+    const providerFunction = this.providers.get(prefix)?.provider;
     if (!providerFunction) {
       return;
     }
-    providerFunction().then(provider => {
-      if (this.prefix !== prefix || !this.filteredListWidget) {
-        return;
-      }
-      this.filteredListWidget.setProvider(provider);
-      this.providerLoadedForTest(provider);
-    });
+
+    const provider = await providerFunction();
+    if (this.prefix !== prefix || !this.filteredListWidget) {
+      return;
+    }
+    this.filteredListWidget.setProvider(provider);
+    this.providerLoadedForTest(provider);
   }
 
   private providerLoadedForTest(_provider: Provider): void {

package/front_end/ui/legacy/components/quick_open/filteredListWidget.css

@@ -27,13 +27,12 @@
   font-size: inherit;
 }
 
-.filtered-list-widget-input {
-  white-space: pre;
-  height: 18px;
-  margin-top: 12px;
-  overflow: hidden;
-  flex: auto;
-  border: 1px solid transparent;
+devtools-text-prompt {
+  flex: 0 0 40px;
+  font-size: 14px;
+  font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
+  line-height: 16px;
+  padding: 12px;
 }
 
 .filtered-list-widget-hint {
@@ -246,7 +245,7 @@
     color: HighlightText;
   }
 
-  .filtered-list-widget-input {
+  devtools-text-prompt {
     border-color: ButtonText;
   }
 }

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

@@ -33,12 +33,6 @@ SourceFrame.ResourceSourceFrame = SourceFrameModule.ResourceSourceFrame.Resource
 /** @constructor */
 SourceFrame.ResourceSourceFrame.SearchableContainer = SourceFrameModule.ResourceSourceFrame.SearchableContainer;
 
-/** @constructor */
-SourceFrame.SourceCodeDiff = SourceFrameModule.SourceCodeDiff.SourceCodeDiff;
-
-/** @enum {symbol} */
-SourceFrame.SourceCodeDiff.EditType = SourceFrameModule.SourceCodeDiff.EditType;
-
 /** @constructor */
 SourceFrame.SourceFrame = SourceFrameModule.SourceFrame.SourceFrameImpl;
 

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

@@ -8,7 +8,6 @@ import * as ImageView from './ImageView.js';
 import * as JSONView from './JSONView.js';
 import * as PreviewFactory from './PreviewFactory.js';
 import * as ResourceSourceFrame from './ResourceSourceFrame.js';
-import * as SourceCodeDiff from './SourceCodeDiff.js';
 import * as SourceFrame from './SourceFrame.js';
 import * as SourcesTextEditor from './SourcesTextEditor.js';
 import * as XMLView from './XMLView.js';
@@ -20,7 +19,6 @@ export {
   JSONView,
   PreviewFactory,
   ResourceSourceFrame,
-  SourceCodeDiff,
   SourceFrame,
   SourcesTextEditor,
   XMLView,

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

@@ -102,11 +102,13 @@ export function buildStackTraceRows(
         () => throttler.schedule(async () => updateHiddenRows(updateCallback, stackTraceRows)));
   }
 
-  function buildStackTraceRowsHelper(stackTrace: Protocol.Runtime.StackTrace, asyncFlag: boolean): void {
+  function buildStackTraceRowsHelper(
+      stackTrace: Protocol.Runtime.StackTrace,
+      previousCallFrames: Protocol.Runtime.CallFrame[]|undefined = undefined): void {
     let asyncRow: StackTraceAsyncRow|null = null;
-    if (asyncFlag) {
+    if (previousCallFrames) {
       asyncRow = {
-        asyncDescription: UI.UIUtils.asyncStackTraceLabel(stackTrace.description),
+        asyncDescription: UI.UIUtils.asyncStackTraceLabel(stackTrace.description, previousCallFrames),
         ignoreListHide: false,
         rowCountHide: false,
       };
@@ -141,18 +143,18 @@ export function buildStackTraceRows(
       }
       stackTraceRows.push({functionName, link, ignoreListHide, rowCountHide});
     }
-    if (asyncFlag && asyncRow && hiddenCallFrames > 0 && hiddenCallFrames === stackTrace.callFrames.length) {
+    if (asyncRow && hiddenCallFrames > 0 && hiddenCallFrames === stackTrace.callFrames.length) {
       stackTraceRows[1].rowCountHide ? asyncRow.rowCountHide = true : asyncRow.ignoreListHide = true;
     }
   }
 
-  buildStackTraceRowsHelper(stackTrace, false);
-  let asyncStackTrace = stackTrace.parent;
-  while (asyncStackTrace) {
+  buildStackTraceRowsHelper(stackTrace);
+  let previousCallFrames = stackTrace.callFrames;
+  for (let asyncStackTrace = stackTrace.parent; asyncStackTrace; asyncStackTrace = asyncStackTrace.parent) {
     if (asyncStackTrace.callFrames.length) {
-      buildStackTraceRowsHelper(asyncStackTrace, true);
+      buildStackTraceRowsHelper(asyncStackTrace, previousCallFrames);
     }
-    asyncStackTrace = asyncStackTrace.parent;
+    previousCallFrames = asyncStackTrace.callFrames;
   }
   return stackTraceRows;
 }

package/front_end/ui/legacy/filter.css

@@ -164,6 +164,7 @@
     forced-color-adjust: none;
     background: ButtonFace;
     box-shadow: var(--legacy-focus-ring-inactive-shadow);
+    color: fieldtext;
   }
 
   .filter-input-container:hover,

package/front_end/ui/legacy/inspectorSyntaxHighlight.css

@@ -129,7 +129,7 @@
 }
 
 .cm-xml-tag {
-  color: var(--override-dom-tag-name-color);
+  color: var(--color-token-tag);
 }
 
 .cm-xml-attribute {
@@ -140,11 +140,6 @@
   color: #00e; /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
 }
 
-:root {
-  --override-dom-tag-name-color: rgb(136 18 128);
-  --override-dom-attribute-name-color: rgb(153 69 0);
-}
-
 .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 */
@@ -159,7 +154,7 @@
 .webkit-html-tag-name,
 .webkit-html-close-tag-name {
   /* Keep this in sync with view-source.css (.webkit-html-tag) */
-  color: var(--override-dom-tag-name-color);
+  color: var(--color-token-tag);
 }
 
 .webkit-html-pseudo-element {
@@ -192,7 +187,7 @@
 
 .webkit-html-attribute-name {
   /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
-  color: var(--override-dom-attribute-name-color); /* stylelint-disable-line plugin/use_theme_colors */
+  color: var(--color-token-attribute); /* stylelint-disable-line plugin/use_theme_colors */
   /* See: crbug.com/1152736 for color variable migration. */
   unicode-bidi: -webkit-isolate;
 }

package/front_end/ui/legacy/inspectorSyntaxHighlightDark.css

@@ -21,7 +21,7 @@
 }
 
 .cm-js-def {
-  color: var(--override-dom-tag-name-color);
+  color: var(--color-token-tag);
 }
 
 .cm-js-keyword {
@@ -57,7 +57,7 @@
 }
 
 .cm-js-tag {
-  color: var(--override-dom-tag-name-color);
+  color: var(--color-token-tag);
 }
 
 .cm-js-variable {
@@ -161,11 +161,11 @@
 }
 
 .cm-xml-tag {
-  color: var(--override-dom-tag-name-color);
+  color: var(--color-token-tag);
 }
 
 .cm-xml-attribute {
-  color: var(--override-dom-attribute-name-color);
+  color: var(--color-token-attribute);
 }
 
 .cm-xml-link {
@@ -173,7 +173,7 @@
 }
 
 .webkit-html-attribute-name {
-  color: var(--override-dom-attribute-name-color);
+  color: var(--color-token-attribute);
 }
 
 .webkit-html-attribute-value {
@@ -185,15 +185,15 @@
 }
 
 .webkit-html-tag {
-  color: var(--override-dom-tag-name-color);
+  color: var(--color-token-tag);
 }
 
 .webkit-html-tag-name {
-  color: var(--override-dom-tag-name-color);
+  color: var(--color-token-tag);
 }
 
 .webkit-html-close-tag-name {
-  color: var(--override-dom-tag-name-color);
+  color: var(--color-token-tag);
 }
 
 .webkit-html-text-node {
@@ -217,11 +217,11 @@
 }
 
 .cm-def {
-  color: var(--override-dom-tag-name-color);
+  color: var(--color-token-tag);
 }
 
 .cm-header {
-  color: var(--override-dom-tag-name-color);
+  color: var(--color-token-tag);
 }
 
 .cm-variable-2 {
@@ -254,7 +254,7 @@
 }
 
 .cm-tag {
-  color: var(--override-dom-tag-name-color);
+  color: var(--color-token-tag);
 }
 
 .cm-attribute {
@@ -268,8 +268,3 @@
 .cm-link {
   color: rgb(159 180 214); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
 }
-
-:root {
-  --override-dom-tag-name-color: rgb(93 176 215);
-  --override-dom-attribute-name-color: rgb(155 187 220);
-}