chrome-devtools-frontend 1.0.938150 → 1.0.938678

package/config/gni/all_devtools_files.gni

@@ -30,7 +30,6 @@ all_devtools_files = [
   "front_end/legacy_test_runner/bindings_test_runner/IsolatedFilesystemTestRunner.js",
   "front_end/legacy_test_runner/bindings_test_runner/OverridesTestRunner.js",
   "front_end/legacy_test_runner/bindings_test_runner/PersistenceTestRunner.js",
-  "front_end/panels/browser_debugger/module.json",
   "front_end/third_party/codemirror/codemirror.css",
   "front_end/legacy_test_runner/console_test_runner/console_test_runner.js",
   "front_end/legacy_test_runner/coverage_test_runner/coverage_test_runner.js",

package/config/gni/devtools_grd_files.gni

@@ -340,7 +340,6 @@ grd_files_release_sources = [
   "front_end/panels/browser_debugger/browser_debugger-legacy.js",
   "front_end/panels/browser_debugger/browser_debugger-meta.js",
   "front_end/panels/browser_debugger/browser_debugger.js",
-  "front_end/panels/browser_debugger/browser_debugger_module.js",
   "front_end/panels/changes/changes-legacy.js",
   "front_end/panels/changes/changes-meta.js",
   "front_end/panels/changes/changes.js",

package/front_end/core/host/InspectorFrontendHostAPI.ts

@@ -368,4 +368,5 @@ export enum EnumeratedHistogram {
   LinearMemoryInspectorTarget = 'DevTools.LinearMemoryInspector.Target',
   Language = 'DevTools.Language',
   ConsoleShowsCorsErrors = 'DevTools.ConsoleShowsCorsErrors',
+  SyncSetting = 'DevTools.SyncSetting',
 }

package/front_end/core/host/UserMetrics.ts

@@ -245,6 +245,22 @@ export class UserMetrics {
     InspectorFrontendHostInstance.recordEnumeratedHistogram(
         EnumeratedHistogram.ConsoleShowsCorsErrors, Number(show), 2);
   }
+
+  syncSetting(devtoolsSyncSettingEnabled: boolean): void {
+    const size = Object.keys(SyncSetting).length + 1;
+
+    InspectorFrontendHostInstance.getSyncInformation(syncInfo => {
+      let settingValue = SyncSetting.ChromeSyncDisabled;
+      if (syncInfo.isSyncActive && !syncInfo.arePreferencesSynced) {
+        settingValue = SyncSetting.ChromeSyncSettingsDisabled;
+      } else if (syncInfo.isSyncActive && syncInfo.arePreferencesSynced) {
+        settingValue = devtoolsSyncSettingEnabled ? SyncSetting.DevToolsSyncSettingEnabled :
+                                                    SyncSetting.DevToolsSyncSettingDisabled;
+      }
+
+      InspectorFrontendHostInstance.recordEnumeratedHistogram(EnumeratedHistogram.SyncSetting, settingValue, size);
+    });
+  }
 }
 
 // Codes below are used to collect UMA histograms in the Chromium port.
@@ -800,3 +816,12 @@ export const Language: Record<string, number> = {
   'zh-TW': 81,
   'zu': 82,
 };
+
+// TODO(crbug.com/1167717): Make this a const enum again
+// eslint-disable-next-line rulesdir/const_enum
+export enum SyncSetting {
+  ChromeSyncDisabled = 1,
+  ChromeSyncSettingsDisabled = 2,
+  DevToolsSyncSettingDisabled = 3,
+  DevToolsSyncSettingEnabled = 4,
+}

package/front_end/entrypoints/devtools_app/devtools_app.json

@@ -3,7 +3,6 @@
     { "name": "panels/emulation", "type": "autostart" },
 
     { "name": "panels/lighthouse" },
-    { "name": "panels/browser_debugger" },
     { "name": "emulated_devices" },
     { "name": "panels/issues" },
     { "name": "panels/layers" },

package/front_end/entrypoints/main/MainImpl.ts

@@ -47,6 +47,7 @@ import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Snippets from '../../panels/snippets/snippets.js';
 import * as Timeline from '../../panels/timeline/timeline.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -147,6 +148,9 @@ export class MainImpl {
     console.timeStamp('Main._gotPreferences');
     this.createSettings(prefs);
     await this.requestAndRegisterLocaleData();
+
+    Host.userMetrics.syncSetting(Common.Settings.Settings.instance().moduleSetting<boolean>('sync_preferences').get());
+
     this.createAppUI();
   }
 
@@ -873,6 +877,16 @@ export class MainMenuItem implements UI.Toolbar.Provider {
       if (location !== 'drawer-view' && location !== 'panel') {
         continue;
       }
+
+      if (viewExtension.isPreviewFeature()) {
+        const previewIcon = new IconButton.Icon.Icon();
+        previewIcon.data = {iconName: 'ic_preview_feature', color: 'var(--icon-color)', width: '14px', height: '14px'};
+        moreTools.defaultSection().appendItem(title, () => {
+          UI.ViewManager.ViewManager.instance().showView(id, true, false);
+        }, /* disabled=*/ false, previewIcon);
+        continue;
+      }
+
       moreTools.defaultSection().appendItem(title, () => {
         UI.ViewManager.ViewManager.instance().showView(id, true, false);
       });

package/front_end/entrypoints/worker_app/worker_app.json

@@ -1,6 +1,5 @@
 {
   "modules" : [
-    { "name": "panels/browser_debugger" },
     { "name": "panels/issues" },
     { "name": "panels/layer_viewer" },
     { "name": "panels/network" },

package/front_end/legacy_test_runner/test_runner/test_runner.js

@@ -59,15 +59,13 @@ export async function _executeTestScript() {
 
     // Auto-start unit tests
     self.test = async function() {
-      // TODO(crbug.com/1011811): Remove eval when we use TypeScript which does support dynamic imports
-      await eval(`import("${testScriptURL}")`);
+      await import(testScriptURL);
     };
     return;
   }
 
   try {
-    // TODO(crbug.com/1011811): Remove eval when we use TypeScript which does support dynamic imports
-    await eval(`import("${testScriptURL}")`);
+    await import(testScriptURL);
   } catch (err) {
     TestRunner.addResult('TEST ENDED EARLY DUE TO UNCAUGHT ERROR:');
     TestRunner.addResult(err && err.stack || err);

package/front_end/panels/browser_debugger/browser_debugger-meta.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -83,8 +82,6 @@ let loadedBrowserDebuggerModule: (typeof BrowserDebugger|undefined);
 
 async function loadBrowserDebuggerModule(): Promise<typeof BrowserDebugger> {
   if (!loadedBrowserDebuggerModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/browser_debugger');
     loadedBrowserDebuggerModule = await import('./browser_debugger.js');
   }
   return loadedBrowserDebuggerModule;

package/front_end/panels/help/ReleaseNoteText.ts

@@ -35,6 +35,34 @@ function getLocalizedReleaseNoteURL(url: string): string {
 }
 
 export const releaseNoteText: ReleaseNote[] = [
+  {
+    version: 39,
+    header: 'Highlights from the Chrome 97 update',
+    highlights: [
+      {
+        title: 'New preview feature: Recorder panel',
+        subtitle: 'Record, replay and measure user flows with options to export to Puppeteer script and more.',
+        link: getLocalizedReleaseNoteURL('https://developer.chrome.com/blog/new-in-devtools-97/#recorder'),
+      },
+      {
+        title: 'Enhanced "Edit as HTML" with code completion',
+        subtitle: 'Edit as HTML in the Elements panel now supports code completion, syntax highlights and more.',
+        link: getLocalizedReleaseNoteURL('https://developer.chrome.com/blog/new-in-devtools-97/#code-completion'),
+      },
+      {
+        title: 'Refresh device list in Device Mode',
+        subtitle: 'New devices are added in the device list.',
+        link: getLocalizedReleaseNoteURL('https://developer.chrome.com/blog/new-in-devtools-97/#device'),
+      },
+      {
+        title: 'Improved code debugging experience',
+        subtitle:
+            'Include column number in the Console stack trace, improved breakpoints display in the Sources panel and more.',
+        link: getLocalizedReleaseNoteURL('https://developer.chrome.com/blog/new-in-devtools-97/#debugging'),
+      },
+    ],
+    link: getLocalizedReleaseNoteURL('https://developer.chrome.com/blog/new-in-devtools-97'),
+  },
   {
     version: 38,
     header: 'Highlights from the Chrome 96 update',

package/front_end/panels/sources/JavaScriptBreakpointsSidebarPane.ts

@@ -10,8 +10,8 @@ import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as UI from '../../ui/legacy/legacy.js';
-
 import {LogpointPrefix} from './BreakpointEditDialog.js';
+
 import javaScriptBreakpointsSidebarPaneStyles from './javaScriptBreakpointsSidebarPane.css.js';
 
 const UIStrings = {
@@ -288,31 +288,38 @@ export class JavaScriptBreakpointsSidebarPane extends UI.ThrottledWidget.Throttl
     element.tabIndex = this.list.selectedItem() === item ? 0 : -1;
     element.addEventListener('contextmenu', this.breakpointContextMenu.bind(this), true);
     element.addEventListener('click', this.revealLocation.bind(this, element), false);
-    const checkboxLabel = UI.UIUtils.CheckboxLabel.create('');
 
+    const hasLogpoint = item.locations.some(location => location.breakpoint.condition().includes(LogpointPrefix));
+    const hasConditional = item.locations.some(location => Boolean(location.breakpoint.condition()));
+    const lineElement = element.createChild('div', 'decoration-and-content');
+    if (hasLogpoint) {
+      lineElement.classList.add('logpoint');
+    } else if (hasConditional) {
+      lineElement.classList.add('breakpoint-conditional');
+    }
+
+    const checkboxLabel = UI.UIUtils.CheckboxLabel.create('');
     const uiLocation = item.locations[0].uiLocation;
     const hasEnabled = item.locations.some(location => location.breakpoint.enabled());
     const hasDisabled = item.locations.some(location => !location.breakpoint.enabled());
-    const hasLogpoint = item.locations.some(location => location.breakpoint.condition().includes(LogpointPrefix));
-    const hasConditional = item.locations.some(location => Boolean(location.breakpoint.condition()));
     checkboxLabel.textElement.textContent = uiLocation.linkText() +
         (item.showColumn && typeof uiLocation.columnNumber === 'number' ? ':' + (uiLocation.columnNumber + 1) : '');
     checkboxLabel.checkboxElement.checked = hasEnabled;
     checkboxLabel.checkboxElement.indeterminate = hasEnabled && hasDisabled;
     checkboxLabel.checkboxElement.tabIndex = -1;
     checkboxLabel.addEventListener('click', this.breakpointCheckboxClicked.bind(this), false);
-    element.appendChild(checkboxLabel);
+    lineElement.appendChild(checkboxLabel);
     let checkedDescription: Common.UIString.LocalizedString =
         hasEnabled ? i18nString(UIStrings.checked) : i18nString(UIStrings.unchecked);
     if (hasEnabled && hasDisabled) {
       checkedDescription = i18nString(UIStrings.mixed);
     }
     if (item.isSelected) {
-      UI.ARIAUtils.setDescription(element, i18nString(UIStrings.sBreakpointHit, {PH1: checkedDescription}));
+      UI.ARIAUtils.setDescription(lineElement, i18nString(UIStrings.sBreakpointHit, {PH1: checkedDescription}));
       element.classList.add('breakpoint-hit');
       this.setDefaultFocusedElement(element);
     } else {
-      UI.ARIAUtils.setDescription(element, checkedDescription);
+      UI.ARIAUtils.setDescription(lineElement, checkedDescription);
     }
 
     element.addEventListener('keydown', event => {
@@ -322,16 +329,6 @@ export class JavaScriptBreakpointsSidebarPane extends UI.ThrottledWidget.Throttl
       }
     });
 
-    const lineElement = element.createChild('div', 'decoration-and-source');
-    const decorationElement = lineElement.createChild('span', 'breakpoint');
-    if (hasDisabled) {
-      decorationElement.classList.add('disabled');
-    }
-    if (hasLogpoint) {
-      decorationElement.classList.add('logpoint');
-    } else if (hasConditional) {
-      decorationElement.classList.add('breakpoint-conditional');
-    }
     const snippetElement = lineElement.createChild('div', 'source-text monospace');
     const lineNumber = uiLocation.lineNumber;
 

package/front_end/panels/sources/javaScriptBreakpointsSidebarPane.css

@@ -5,7 +5,7 @@
  */
 
 .breakpoint-entry {
-  padding: 3px 8px 3px 8px;
+  padding: 3px 0;
   min-height: 18px;
   line-height: 15px;
   border-top: 1px solid var(--color-details-hairline-light);
@@ -18,68 +18,42 @@
 .breakpoint-entry [is=dt-checkbox] {
   max-width: 100%;
   white-space: nowrap;
+  border-left-width: 3px;
 }
 
 :not(.breakpoints-list-deactivated) > .breakpoint-entry:hover {
   background-color: var(--color-background-elevation-1);
 }
 
-.breakpoint-entry > .decoration-and-source {
-  display: flex;
-}
-
-.breakpoint-entry .breakpoint {
-  content: var(--inline-breakpoint-enabled);
-  height: 12px;
-  top: 1px;
-  position: relative;
-  width: 11px;
-  margin-left: 3px;
-  margin-right: 3px;
-
-  --inline-breakpoint-enabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.7549 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.7549 11.2583 6.29382 11.5 5.80139 11.5H0.5V0.5Z" fill="%234285F4" stroke="%231A73E8"/></svg>');
-  --inline-breakpoint-disabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.7549 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.7549 11.2583 6.29382 11.5 5.80139 11.5H0.5V0.5Z" fill="%234285F4" fill-opacity="0.2" stroke="%231A73E8"/></svg>');
-  --inline-conditional-breakpoint-enabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.75489 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.75489 11.2583 6.29382 11.5 5.80138 11.5H0.5V0.5Z" fill="%23F29900" stroke="%23E37400"/><path d="M3.51074 7.75635H4.68408V9H3.51074V7.75635ZM4.68408 7.23779H3.51074V6.56104C3.51074 6.271 3.55615 6.02344 3.64697 5.81836C3.73779 5.61328 3.90039 5.39648 4.13477 5.16797L4.53027 4.77686C4.71484 4.59814 4.83936 4.4502 4.90381 4.33301C4.97119 4.21582 5.00488 4.09424 5.00488 3.96826C5.00488 3.77197 4.9375 3.62402 4.80273 3.52441C4.66797 3.4248 4.46582 3.375 4.19629 3.375C3.9502 3.375 3.69238 3.42773 3.42285 3.5332C3.15625 3.63574 2.88232 3.78955 2.60107 3.99463V2.81689C2.88818 2.65283 3.17822 2.52979 3.47119 2.44775C3.76709 2.36279 4.06299 2.32031 4.35889 2.32031C4.95068 2.32031 5.41504 2.45801 5.75195 2.7334C6.08887 3.00879 6.25732 3.38818 6.25732 3.87158C6.25732 4.09424 6.20752 4.30225 6.10791 4.49561C6.0083 4.68604 5.8208 4.91602 5.54541 5.18555L5.15869 5.56348C4.95947 5.75684 4.83203 5.91504 4.77637 6.03809C4.7207 6.16113 4.69287 6.31201 4.69287 6.49072C4.69287 6.51709 4.69141 6.54785 4.68848 6.58301C4.68848 6.61816 4.68701 6.65625 4.68408 6.69727V7.23779Z" fill="white"/></svg>');
-  --inline-conditional-breakpoint-disabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.75489 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.75489 11.2583 6.29382 11.5 5.80138 11.5H0.5V0.5Z" fill="%23F9AB00" fill-opacity="0.2" stroke="%23E37400"/><path d="M3.51074 7.75635H4.68408V9H3.51074V7.75635ZM4.68408 7.23779H3.51074V6.56104C3.51074 6.271 3.55615 6.02344 3.64697 5.81836C3.73779 5.61328 3.90039 5.39648 4.13477 5.16797L4.53027 4.77686C4.71484 4.59814 4.83936 4.4502 4.90381 4.33301C4.97119 4.21582 5.00488 4.09424 5.00488 3.96826C5.00488 3.77197 4.9375 3.62402 4.80273 3.52441C4.66797 3.4248 4.46582 3.375 4.19629 3.375C3.9502 3.375 3.69238 3.42773 3.42285 3.5332C3.15625 3.63574 2.88232 3.78955 2.60107 3.99463V2.81689C2.88818 2.65283 3.17822 2.52979 3.47119 2.44775C3.76709 2.36279 4.06299 2.32031 4.35889 2.32031C4.95068 2.32031 5.41504 2.45801 5.75195 2.7334C6.08887 3.00879 6.25732 3.38818 6.25732 3.87158C6.25732 4.09424 6.20752 4.30225 6.10791 4.49561C6.0083 4.68604 5.8208 4.91602 5.54541 5.18555L5.15869 5.56348C4.95947 5.75684 4.83203 5.91504 4.77637 6.03809C4.7207 6.16113 4.69287 6.31201 4.69287 6.49072C4.69287 6.51709 4.69141 6.54785 4.68848 6.58301C4.68848 6.61816 4.68701 6.65625 4.68408 6.69727V7.23779Z" fill="%23E37400"/></svg>');
-  --inline-logpoint-enabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.7549 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.7549 11.2583 6.29382 11.5 5.80139 11.5H0.5V0.5Z" fill="%23F439A0" stroke="%23D01884"/><circle cx="3" cy="6" r="1" fill="white"/><circle cx="7" cy="6" r="1" fill="white"/></svg>');
-  --inline-logpoint-disabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.7549 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.7549 11.2583 6.29382 11.5 5.80139 11.5H0.5V0.5Z" fill="%23F439A0" fill-opacity="0.2" stroke="%23D01884"/><circle cx="3" cy="6" r="1" fill="%23D01884"/><circle cx="7" cy="6" r="1" fill="%23D01884"/></svg>');
-}
-
-.breakpoint-entry .breakpoint.disabled,
-.breakpoints-list-deactivated .breakpoint-entry .breakpoint {
-  content: var(--inline-breakpoint-disabled);
-}
-
-:host-context(.-theme-with-dark-background) .breakpoint-entry .breakpoint {
-  --inline-breakpoint-enabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.7549 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.7549 11.2583 6.29382 11.5 5.80139 11.5H0.5V0.5Z" fill="%235186EC" stroke="%231A73E8"/></svg>');
-  --inline-conditional-breakpoint-enabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.75489 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.75489 11.2583 6.29382 11.5 5.80138 11.5H0.5V0.5Z" fill="%23e9a33a" stroke="%23E37400"/><path d="M3.51074 7.75635H4.68408V9H3.51074V7.75635ZM4.68408 7.23779H3.51074V6.56104C3.51074 6.271 3.55615 6.02344 3.64697 5.81836C3.73779 5.61328 3.90039 5.39648 4.13477 5.16797L4.53027 4.77686C4.71484 4.59814 4.83936 4.4502 4.90381 4.33301C4.97119 4.21582 5.00488 4.09424 5.00488 3.96826C5.00488 3.77197 4.9375 3.62402 4.80273 3.52441C4.66797 3.4248 4.46582 3.375 4.19629 3.375C3.9502 3.375 3.69238 3.42773 3.42285 3.5332C3.15625 3.63574 2.88232 3.78955 2.60107 3.99463V2.81689C2.88818 2.65283 3.17822 2.52979 3.47119 2.44775C3.76709 2.36279 4.06299 2.32031 4.35889 2.32031C4.95068 2.32031 5.41504 2.45801 5.75195 2.7334C6.08887 3.00879 6.25732 3.38818 6.25732 3.87158C6.25732 4.09424 6.20752 4.30225 6.10791 4.49561C6.0083 4.68604 5.8208 4.91602 5.54541 5.18555L5.15869 5.56348C4.95947 5.75684 4.83203 5.91504 4.77637 6.03809C4.7207 6.16113 4.69287 6.31201 4.69287 6.49072C4.69287 6.51709 4.69141 6.54785 4.68848 6.58301C4.68848 6.61816 4.68701 6.65625 4.68408 6.69727V7.23779Z" fill="white"/></svg>');
-  --inline-logpoint-enabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.7549 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.7549 11.2583 6.29382 11.5 5.80139 11.5H0.5V0.5Z" fill="%23E54D9B" stroke="%23D01884"/><circle cx="3" cy="6" r="1" fill="white"/><circle cx="7" cy="6" r="1" fill="white"/></svg>');
-}
+.decoration-and-content {
+  --override-color-breakpoint-conditional: #f29900;
+  --override-color-logpoint: #f439a0;
 
-.breakpoint-entry .breakpoint-conditional {
-  content: var(--inline-conditional-breakpoint-enabled);
+  padding: 0 8px;
+  border-left: 4px solid;
+  border-color: transparent;
 }
 
-.breakpoint-entry .breakpoint-conditional.disabled,
-.breakpoints-list-deactivated .breakpoint-entry .breakpoint-conditional {
-  content: var(--inline-conditional-breakpoint-disabled);
+.-theme-with-dark-background .decoration-and-content,
+:host-context(.-theme-with-dark-background) .decoration-and-content {
+  --override-color-breakpoint-conditional: #e9a33a;
+  --override-color-logpoint: #e54d9b;
 }
 
-.breakpoint-entry .logpoint {
-  content: var(--inline-logpoint-enabled);
+.decoration-and-content.breakpoint-conditional {
+  border-color: var(--override-color-breakpoint-conditional);
 }
 
-.breakpoint-entry .logpoint.disabled,
-.breakpoints-list-deactivated .breakpoint-entry .logpoint {
-  content: var(--inline-logpoint-disabled);
+.decoration-and-content.logpoint {
+  border-color: var(--override-color-logpoint);
 }
 
-.breakpoint-entry .source-text {
+.decoration-and-content > .source-text {
   cursor: pointer;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
-  margin-left: 4px;
+  margin-left: 22px;
 }
 
 .breakpoints-list-deactivated {

package/front_end/ui/components/settings/settingCheckbox.css

@@ -24,3 +24,8 @@ label {
 p {
   margin: 12px 0;
 }
+
+/* Preserve look of legacy checkboxes in dark mode */
+:host-context(.-theme-with-dark-background) input[type="checkbox"]:not(.-theme-preserve) {
+  accent-color: var(--color-checkbox-accent-color);
+}

package/front_end/ui/legacy/ContextMenu.ts

@@ -137,8 +137,11 @@ export class Section {
     this.items = [];
   }
 
-  appendItem(label: string, handler: () => void, disabled?: boolean): Item {
+  appendItem(label: string, handler: () => void, disabled?: boolean, additionalElement?: Element): Item {
     const item = new Item(this.contextMenu, 'item', label, disabled);
+    if (additionalElement) {
+      item.customElement = additionalElement;
+    }
     this.items.push(item);
     if (this.contextMenu) {
       this.contextMenu.setHandler(item.id(), handler);
@@ -147,7 +150,7 @@ export class Section {
   }
 
   appendCustomItem(element: Element): Item {
-    const item = new Item(this.contextMenu, 'item', '<custom>');
+    const item = new Item(this.contextMenu, 'item');
     item.customElement = element;
     this.items.push(item);
     return item;

package/front_end/ui/legacy/SoftContextMenu.ts

@@ -193,7 +193,7 @@ export class SoftContextMenu {
       subMenuTimer: undefined,
     };
 
-    if (item.element) {
+    if (item.element && !item.label) {
       const wrapper = menuItemElement.createChild('div', 'soft-context-menu-custom-item');
       wrapper.appendChild(item.element);
       detailsForElement.customElement = (item.element as HTMLElement);
@@ -205,6 +205,9 @@ export class SoftContextMenu {
       menuItemElement.classList.add('soft-context-menu-disabled');
     }
     createTextChild(menuItemElement, item.label || '');
+    if (item.element) {
+      menuItemElement.appendChild(item.element);
+    }
     menuItemElement.createChild('span', 'soft-context-menu-shortcut').textContent = item.shortcut || '';
 
     menuItemElement.addEventListener('mousedown', this.menuItemMouseDown.bind(this), false);

package/front_end/ui/legacy/checkboxTextLabel.css

@@ -60,6 +60,10 @@ input.dt-checkbox-themed:checked::after {
   background-color: var(--color-background-inverted);
 }
 
+:host-context(.-theme-with-dark-background) input:not(.dt-checkbox-themed) {
+  accent-color: var(--color-checkbox-accent-color);
+}
+
 .dt-checkbox-text {
   margin-left: 3px;
   overflow: hidden;

package/front_end/ui/legacy/inspectorCommon.css

@@ -287,6 +287,10 @@ input::placeholder {
   --override-input-placeholder-color: rgb(230 230 230 / 54%);
 }
 
+:host-context(.-theme-with-dark-background) input[type="checkbox"]:not(.-theme-preserve) {
+  accent-color: var(--color-checkbox-accent-color);
+}
+
 .harmony-input:not([type]),
 .harmony-input[type=number],
 .harmony-input[type=text] {

package/front_end/ui/legacy/softContextMenu.css

@@ -44,6 +44,12 @@
   white-space: nowrap;
 }
 
+.soft-context-menu-item devtools-icon {
+  --icon-color: var(--color-text-secondary);
+
+  pointer-events: none;
+}
+
 .soft-context-menu-disabled {
   color: var(--color-text-disabled);
   pointer-events: none;
@@ -66,6 +72,10 @@
   color: var(--override-context-menu-hover-text-color);
 }
 
+.soft-context-menu-item-mouse-over devtools-icon {
+  --icon-color: var(--override-context-menu-hover-text-color);
+}
+
 .-theme-with-dark-background .soft-context-menu-item-mouse-over,
 :host-context(.-theme-with-dark-background) .soft-context-menu-item-mouse-over {
   --override-dark-mode-focus-color: #1a73e8;

package/front_end/ui/legacy/themeColors.css

@@ -233,6 +233,7 @@
   --color-error-text: hsl(0deg 100% 75%);
   --color-error-border: rgb(92 0 0);
   --color-error-background: hsl(0deg 100% 8%);
+  --color-checkbox-accent-color: rgb(255 165 0);
   /* Colors for styling inputs */
   --color-input-outline: rgb(189 193 198);
   --color-input-outline-active: rgb(138 180 248);

package/package.json

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

package/front_end/panels/browser_debugger/module.json

@@ -1,3 +0,0 @@
-{
-  "dependencies": []
-}