chrome-devtools-frontend 1.0.955092 → 1.0.956812

package/front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -126,8 +126,6 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   private lastMouseOffsetX: number;
   private selectedGroup: number;
   private keyboardFocusedGroup: number;
-  private selectedGroupBackroundColor: string;
-  private selectedGroupBorderColor: string;
   private offsetWidth!: number;
   private offsetHeight!: number;
   private dragStartX!: number;
@@ -230,10 +228,9 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     // Keyboard focused group is used to navigate groups irrespective of whether they are selectable or not
     this.keyboardFocusedGroup = -1;
 
-    this.selectedGroupBackroundColor = ThemeSupport.ThemeSupport.instance().patchColorText(
-        Colors.SelectedGroupBackground, ThemeSupport.ThemeSupport.ColorUsage.Background);
-    this.selectedGroupBorderColor = ThemeSupport.ThemeSupport.instance().patchColorText(
-        Colors.SelectedGroupBorder, ThemeSupport.ThemeSupport.ColorUsage.Background);
+    ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
+      this.scheduleUpdate();
+    });
   }
 
   willHide(): void {
@@ -1140,7 +1137,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       context.save();
       this.forEachGroupInViewport((offset, index, group, isFirst, groupHeight) => {
         if (this.isGroupFocused(index)) {
-          context.fillStyle = this.selectedGroupBackroundColor;
+          context.fillStyle =
+              ThemeSupport.ThemeSupport.instance().getComputedValue('--selected-group-background', this.contentElement);
           context.fillRect(0, offset, width, groupHeight - group.style.padding);
         }
       });
@@ -1563,7 +1561,6 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       return;
     }
     const lastGroupOffset = groupOffsets[groupOffsets.length - 1];
-    const colorUsage = ThemeSupport.ThemeSupport.ColorUsage;
 
     context.save();
     context.scale(ratio, ratio);
@@ -1571,7 +1568,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     const defaultFont = '11px ' + Host.Platform.fontFamily();
     context.font = defaultFont;
 
-    context.fillStyle = ThemeSupport.ThemeSupport.instance().patchColorText('#fff', colorUsage.Background);
+    context.fillStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background');
     this.forEachGroupInViewport((offset, index, group) => {
       const paddingHeight = group.style.padding;
       if (paddingHeight < 5) {
@@ -1583,7 +1580,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       context.fillRect(0, lastGroupOffset + 2, width, top + height - lastGroupOffset);
     }
 
-    context.strokeStyle = ThemeSupport.ThemeSupport.instance().patchColorText('#eee', colorUsage.Background);
+    context.strokeStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background-elevation-1');
     context.beginPath();
     this.forEachGroupInViewport((offset, index, group, isFirst) => {
       if (isFirst || group.style.padding < 4) {
@@ -1622,7 +1619,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       if (this.isGroupCollapsible(index) && !group.expanded || group.style.shareHeaderLine) {
         const width = this.labelWidthForGroup(context, group) + 2;
         if (this.isGroupFocused(index)) {
-          context.fillStyle = this.selectedGroupBackroundColor;
+          context.fillStyle =
+              ThemeSupport.ThemeSupport.instance().getComputedValue('--selected-group-background', this.contentElement);
         } else {
           const parsedColor = Common.Color.Color.parse(group.style.backgroundColor);
           if (parsedColor) {
@@ -1641,7 +1639,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     });
     context.restore();
 
-    context.fillStyle = ThemeSupport.ThemeSupport.instance().patchColorText('#6e6e6e', colorUsage.Foreground);
+    context.fillStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-secondary');
     context.beginPath();
     this.forEachGroupInViewport((offset, index, group) => {
       if (this.isGroupCollapsible(index)) {
@@ -1652,7 +1650,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     });
     context.fill();
 
-    context.strokeStyle = ThemeSupport.ThemeSupport.instance().patchColorText('#ddd', colorUsage.Background);
+    context.strokeStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-details-hairline-light');
     context.beginPath();
     context.stroke();
 
@@ -1660,7 +1658,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       if (this.isGroupFocused(index)) {
         const lineWidth = 2;
         const bracketLength = 10;
-        context.fillStyle = this.selectedGroupBorderColor;
+        context.fillStyle =
+            ThemeSupport.ThemeSupport.instance().getComputedValue('--selected-group-border', this.contentElement);
         context.fillRect(0, offset - lineWidth, lineWidth, groupHeight - group.style.padding + 2 * lineWidth);
         context.fillRect(0, offset - lineWidth, bracketLength, lineWidth);
         context.fillRect(0, offset + groupHeight - group.style.padding, bracketLength, lineWidth);
@@ -2326,10 +2325,6 @@ export type EventTypes = {
   [Events.EntryHighlighted]: number,
 };
 
-export const Colors = {
-  SelectedGroupBackground: 'hsl(215, 85%, 98%)',
-  SelectedGroupBorder: 'hsl(216, 68%, 54%)',
-};
 export interface Group {
   name: Common.UIString.LocalizedString;
   startLevel: number;

package/front_end/ui/legacy/components/perf_ui/GCActionDelegate.ts

@@ -22,7 +22,7 @@ export class GCActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(_context: UI.Context.Context, _actionId: string): boolean {
     for (const heapProfilerModel of SDK.TargetManager.TargetManager.instance().models(
              SDK.HeapProfilerModel.HeapProfilerModel)) {
-      heapProfilerModel.collectGarbage();
+      void heapProfilerModel.collectGarbage();
     }
     return true;
   }

package/front_end/ui/legacy/components/perf_ui/LineLevelProfile.ts

@@ -171,7 +171,7 @@ export class Helper {
     }
     this.updateTimer = window.setTimeout(() => {
       this.updateTimer = null;
-      this.doUpdate();
+      void this.doUpdate();
     }, 0);
   }
 

package/front_end/ui/legacy/components/perf_ui/LiveHeapProfile.ts

@@ -23,7 +23,7 @@ export class LiveHeapProfile implements Common.Runnable.Runnable,
     this.setting = Common.Settings.Settings.instance().moduleSetting('memoryLiveHeapProfile');
     this.setting.addChangeListener(event => event.data ? this.startProfiling() : this.stopProfiling());
     if (this.setting.get()) {
-      this.startProfiling();
+      void this.startProfiling();
     }
   }
 
@@ -41,7 +41,7 @@ export class LiveHeapProfile implements Common.Runnable.Runnable,
   }
 
   modelAdded(model: SDK.HeapProfilerModel.HeapProfilerModel): void {
-    model.startSampling(1e4);
+    void model.startSampling(1e4);
   }
 
   modelRemoved(_model: SDK.HeapProfilerModel.HeapProfilerModel): void {
@@ -85,7 +85,7 @@ export class LiveHeapProfile implements Common.Runnable.Runnable,
     SDK.TargetManager.TargetManager.instance().removeModelListener(
         SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.Load, this.loadEventFired, this);
     for (const model of SDK.TargetManager.TargetManager.instance().models(SDK.HeapProfilerModel.HeapProfilerModel)) {
-      model.stopSampling();
+      void model.stopSampling();
     }
     Memory.instance().reset();
   }

package/front_end/ui/legacy/components/perf_ui/OverviewGrid.ts

@@ -32,6 +32,7 @@ import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as UI from '../../legacy.js';
+import * as ThemeSupport from '../../theme_support/theme_support.js';
 
 import type {Calculator} from './TimelineGrid.js';
 import {TimelineGrid} from './TimelineGrid.js';
@@ -162,7 +163,7 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
 
     this.parentElement.addEventListener('wheel', this.onMouseWheel.bind(this), true);
     this.parentElement.addEventListener('dblclick', this.resizeWindowMaximum.bind(this), true);
-    UI.Utils.appendStyle(this.parentElement, overviewGridStyles);
+    ThemeSupport.ThemeSupport.instance().appendStyle(this.parentElement, overviewGridStyles);
 
     this.leftResizeElement = parentElement.createChild('div', 'overview-grid-window-resizer') as HTMLElement;
     UI.UIUtils.installDragHandle(

package/front_end/ui/legacy/components/perf_ui/TimelineGrid.ts

@@ -33,7 +33,6 @@
  */
 
 import * as Host from '../../../../core/host/host.js';
-import * as UI from '../../legacy.js';
 import * as ThemeSupport from '../../theme_support/theme_support.js';
 
 import timelineGridStyles from './timelineGrid.css.legacy.js';
@@ -49,7 +48,7 @@ export class TimelineGrid {
 
   constructor() {
     this.element = document.createElement('div');
-    UI.Utils.appendStyle(this.element, timelineGridStyles);
+    ThemeSupport.ThemeSupport.instance().appendStyle(this.element, timelineGridStyles);
 
     this.dividersElementInternal = this.element.createChild('div', 'resources-dividers');
 
@@ -132,12 +131,10 @@ export class TimelineGrid {
     const width = Math.ceil(context.canvas.width / window.devicePixelRatio);
 
     context.beginPath();
-    context.fillStyle = ThemeSupport.ThemeSupport.instance().patchColorText(
-        'rgba(255, 255, 255, 0.5)', ThemeSupport.ThemeSupport.ColorUsage.Background);
+    context.fillStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background-opacity-50');
     context.fillRect(0, 0, width, headerHeight);
 
-    context.fillStyle =
-        ThemeSupport.ThemeSupport.instance().patchColorText('#333', ThemeSupport.ThemeSupport.ColorUsage.Foreground);
+    context.fillStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-primary');
     context.textBaseline = 'hanging';
     context.font = '11px ' + Host.Platform.fontFamily();
 

package/front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.ts

@@ -94,7 +94,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     this.cursorPosition = mouseEvent.offsetX + target.offsetLeft;
     this.cursorElement.style.left = this.cursorPosition + 'px';
     this.cursorElement.style.visibility = 'visible';
-    this.overviewInfo.setContent(this.buildOverviewInfo());
+    void this.overviewInfo.setContent(this.buildOverviewInfo());
   }
 
   private async buildOverviewInfo(): Promise<DocumentFragment> {
@@ -153,7 +153,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
   }
 
   scheduleUpdate(): void {
-    this.updateThrottler.schedule(async () => {
+    void this.updateThrottler.schedule(async () => {
       this.update();
     });
   }

package/front_end/ui/legacy/components/perf_ui/flameChart.css

@@ -6,6 +6,14 @@
 
 .flame-chart-main-pane {
   overflow: hidden;
+
+  --selected-group-background: hsl(215deg 85% 98%);
+  --selected-group-border: hsl(216deg 68% 54%);
+}
+
+:host-context(.-theme-with-dark-background) .flame-chart-main-pane {
+  --selected-group-background: hsl(215deg 85% 15%);
+  --selected-group-border: hsl(216deg 68% 46%);
 }
 
 .flame-chart-marker-highlight-element {

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

@@ -85,7 +85,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     this.itemElementsContainer.classList.add('container');
     this.bottomElementsContainer.appendChild(this.itemElementsContainer);
     this.itemElementsContainer.addEventListener('click', this.onClick.bind(this), false);
-    this.itemElementsContainer.addEventListener('mouseover', this.onMouseOver.bind(this), false);
+    this.itemElementsContainer.addEventListener('mousemove', this.onMouseMove.bind(this), false);
     UI.ARIAUtils.markAsListBox(this.itemElementsContainer);
     UI.ARIAUtils.setControls(this.inputBoxElement, this.itemElementsContainer);
     UI.ARIAUtils.setAutocomplete(this.inputBoxElement, UI.ARIAUtils.AutocompleteInteractionModel.list);
@@ -167,7 +167,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     this.dialog.contentElement.style.setProperty('border-radius', '4px');
     this.show(this.dialog.contentElement);
     UI.ARIAUtils.setExpanded(this.contentElement, true);
-    this.dialog.once(UI.Dialog.Events.Hidden).then(() => {
+    void this.dialog.once(UI.Dialog.Events.Hidden).then(() => {
       this.dispatchEventToListeners(Events.Hidden);
     });
     // @ts-ignore
@@ -309,7 +309,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     }
   }
 
-  private onMouseOver(event: Event): void {
+  private onMouseMove(event: Event): void {
     const item = this.list.itemForNode((event.target as Node | null));
     if (item === null) {
       return;
@@ -321,7 +321,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     this.query = query;
     this.inputBoxElement.focus();
     this.inputBoxElement.setText(query);
-    this.queryChanged();
+    void this.queryChanged();
     this.scheduleFilter();
   }
 
@@ -486,7 +486,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
 
   private onInput(event: TextPrompt.TextPrompt.PromptInputEvent): void {
     this.query = event.data;
-    this.queryChanged();
+    void this.queryChanged();
     this.scheduleFilter();
   }
 

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

@@ -61,7 +61,6 @@ export class FontView extends UI.View.SimpleView {
   private inResize!: boolean|null;
   constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider) {
     super(i18nString(UIStrings.font));
-    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.registerRequiredCSS(fontViewStyles);
     this.element.classList.add('font-view');
     this.url = contentProvider.contentURL();
@@ -94,7 +93,7 @@ export class FontView extends UI.View.SimpleView {
 
     const uniqueFontName = 'WebInspectorFontPreview' + (++_fontId);
     this.fontStyleElement = document.createElement('style');
-    this.contentProvider.requestContent().then(deferredContent => {
+    void this.contentProvider.requestContent().then(deferredContent => {
       this.onFontContentLoaded(uniqueFontName, deferredContent);
     });
     this.element.appendChild(this.fontStyleElement);

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/softContextMenu.css

@@ -35,12 +35,15 @@
   box-shadow: var(--override-mac-specific-box-shadow);
 }
 
+.dockside-title {
+  padding-right: 13px;
+}
+
 .soft-context-menu-item {
   display: flex;
   width: 100%;
   font-size: 12px;
   padding: 3px 7px 3px 8px;
-  margin: 0 13px 0 0;
   white-space: nowrap;
   align-items: center;
 }

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);