chrome-devtools-frontend 1.0.934332 → 1.0.935974

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

@@ -1249,6 +1249,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.searchInAnonymousAndContent),
   settingName: 'searchInAnonymousAndContentScripts',
   settingType: Common.Settings.SettingType.BOOLEAN,
@@ -1267,6 +1268,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.automaticallyRevealFilesIn),
   settingName: 'autoRevealInNavigator',
   settingType: Common.Settings.SettingType.BOOLEAN,
@@ -1285,6 +1287,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.enableJavascriptSourceMaps),
   settingName: 'jsSourceMapsEnabled',
   settingType: Common.Settings.SettingType.BOOLEAN,
@@ -1303,6 +1306,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.enableTabMovesFocus),
   settingName: 'textEditorTabMovesFocus',
   settingType: Common.Settings.SettingType.BOOLEAN,
@@ -1321,6 +1325,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.detectIndentation),
   settingName: 'textEditorAutoDetectIndent',
   settingType: Common.Settings.SettingType.BOOLEAN,
@@ -1339,6 +1344,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.autocompletion),
   settingName: 'textEditorAutocompletion',
   settingType: Common.Settings.SettingType.BOOLEAN,
@@ -1375,6 +1381,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.codeFolding),
   settingName: 'textEditorCodeFolding',
   settingType: Common.Settings.SettingType.BOOLEAN,
@@ -1393,6 +1400,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.showWhitespaceCharacters),
   settingName: 'showWhitespacesInEditor',
   settingType: Common.Settings.SettingType.ENUM,
@@ -1418,6 +1426,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.displayVariableValuesInlineWhile),
   settingName: 'inlineVariableValues',
   settingType: Common.Settings.SettingType.BOOLEAN,
@@ -1436,6 +1445,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.enableAutoFocusOnDebuggerPaused),
   settingName: 'autoFocusOnDebuggerPausedEnabled',
   settingType: Common.Settings.SettingType.BOOLEAN,
@@ -1454,6 +1464,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.enableCssSourceMaps),
   settingName: 'cssSourceMapsEnabled',
   settingType: Common.Settings.SettingType.BOOLEAN,
@@ -1472,6 +1483,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.allowScrollingPastEndOfFile),
   settingName: 'allowScrollPastEof',
   settingType: Common.Settings.SettingType.BOOLEAN,

package/front_end/panels/sources/watchExpressionsSidebarPane.css

@@ -7,12 +7,19 @@
 .watch-expression-delete-button {
   position: absolute;
   top: 5px;
-  right: 16px;
   cursor: pointer;
   opacity: 0%;
 }
 
-.watch-expression-header:hover .watch-expression-delete-button {
+.right-aligned {
+  right: 16px;
+}
+
+.left-aligned {
+  left: -11px;
+}
+
+.watch-expression-title:hover .watch-expression-delete-button {
   opacity: 100%;
 }
 
@@ -108,7 +115,7 @@ li.watch-expression-editing::before {
 }
 
 @media (forced-colors: active) {
-  .watch-expression-header:hover .watch-expression-delete-button,
+  .watch-expression-title:hover .watch-expression-delete-button,
   .watch-expressions .dimmed {
     opacity: 100%;
   }

package/front_end/panels/timeline/module.json

@@ -4,7 +4,6 @@
     "panels/coverage",
     "panels/layer_viewer",
     "ui/legacy/components/perf_ui",
-    "ui/legacy/components/data_grid",
     "panels/profiler",
     "panels/mobile_throttling"
   ]

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

@@ -390,6 +390,7 @@ UI.ActionRegistration.registerActionExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.PERFORMANCE,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.hideChromeFrameInLayersView),
   settingName: 'frameViewerHideChromeWindow',
   settingType: Common.Settings.SettingType.BOOLEAN,

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

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 // eslint-disable-next-line rulesdir/es_modules_import
@@ -30,8 +29,6 @@ let loadedWebAudioModule: (typeof WebAudio|undefined);
 
 async function loadWebAudioModule(): Promise<typeof WebAudio> {
   if (!loadedWebAudioModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/web_audio');
     loadedWebAudioModule = await import('./web_audio.js');
   }
   return loadedWebAudioModule;

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

@@ -26,8 +26,6 @@ let loadedWebauthnModule: (typeof Webauthn|undefined);
 
 async function loadWebauthnModule(): Promise<typeof Webauthn> {
   if (!loadedWebauthnModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/webauthn');
     loadedWebauthnModule = await import('./webauthn.js');
   }
   return loadedWebauthnModule;

package/front_end/ui/components/buttons/button.css

@@ -32,6 +32,7 @@ button {
   display: inline-flex;
   font-family: inherit;
   font-size: 12px;
+  font-weight: 500;
   height: 24px;
   line-height: 14px;
   padding: 5px 12px;

package/front_end/ui/components/text_editor/config.ts

@@ -57,7 +57,7 @@ export const tabMovesFocus = DynamicSetting.bool('textEditorTabMovesFocus', CM.k
   shift: (view: CM.EditorView): boolean => view.state.doc.length ? CM.indentLess(view) : false,
 }]));
 
-export const autocompletion = DynamicSetting.bool('textEditorAutocompletion', CM.autocompletion());
+export const autocompletion = DynamicSetting.bool('textEditorAutocompletion', CM.autocompletion({icons: false}));
 
 export const bracketMatching = DynamicSetting.bool('textEditorBracketMatching', CM.bracketMatching());
 

package/front_end/ui/components/text_editor/theme.ts

@@ -57,6 +57,11 @@ export const editorTheme = CM.EditorView.theme({
     padding: '0 3px 0 9px',
   },
 
+  '.cm-matchingBracket, .cm-nonmatchingBracket': {
+    background: 'transparent',
+    borderBottom: 'none',
+  },
+
   '&:focus-within .cm-matchingBracket': {
     color: 'inherit',
     backgroundColor: 'var(--color-matching-bracket-background)',
@@ -112,6 +117,14 @@ export const editorTheme = CM.EditorView.theme({
     width: 'fit-content',
   },
 
+  '.cm-tooltip.cm-tooltip-autocomplete > ul': {
+    minWidth: '16em',
+    '& > li[aria-selected]': {
+      backgroundColor: 'var(--color-selected-option-background)',
+      color: 'var(--color-selected-option)',
+    },
+  },
+
   '.cm-highlightedLine': {
     animation: 'cm-fading-highlight 2s 0s',
   },

package/front_end/ui/legacy/GlassPane.ts

@@ -58,6 +58,10 @@ export class GlassPane {
     this.widgetInternal.registerRequiredCSS(cssFile);
   }
 
+  registerCSSFiles(cssFiles: CSSStyleSheet[]): void {
+    this.widgetInternal.registerCSSFiles(cssFiles);
+  }
+
   setDefaultFocusedElement(element: Element|null): void {
     this.widgetInternal.setDefaultFocusedElement(element);
   }

package/front_end/ui/legacy/InspectorView.ts

@@ -443,10 +443,6 @@ function getDisableLocaleInfoBarSetting(): Common.Settings.Setting<boolean> {
 }
 
 function shouldShowLocaleInfobar(): boolean {
-  if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.LOCALIZED_DEVTOOLS)) {
-    return false;
-  }
-
   if (getDisableLocaleInfoBarSetting().get()) {
     return false;
   }

package/front_end/ui/legacy/TabbedPane.ts

@@ -251,6 +251,10 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   closeTabs(ids: string[], userGesture?: boolean): void {
+    if (ids.length === 0) {
+      return;
+    }
+
     const focused = this.hasFocus();
     for (let i = 0; i < ids.length; ++i) {
       this.innerCloseTab(ids[i], userGesture);

package/front_end/ui/legacy/ViewManager.ts

@@ -28,6 +28,11 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/ViewManager.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export const defaultOptionsForTabs = {
+  security: true,
+};
+
 export class PreRegisteredView implements View {
   private readonly viewRegistration: ViewRegistration;
   private widgetRequested: boolean;
@@ -615,9 +620,12 @@ export class _TabbedLocation extends Location implements TabbedViewLocation {
   private setOrUpdateCloseableTabsSetting(): void {
     // Update the setting value, we respect the closed state decided by the user
     // and append the new tabs with value of true so they are shown open
-    const defaultOptionsForTabs = {'security': true};
     const tabs = this.closeableTabSetting.get();
-    const newClosable = Object.assign(defaultOptionsForTabs, tabs);
+    const newClosable = Object.assign(
+        {
+          ...defaultOptionsForTabs,
+        },
+        tabs);
     this.closeableTabSetting.set(newClosable);
   }
 

package/front_end/ui/legacy/components/color_picker/Spectrum.ts

@@ -42,6 +42,7 @@ import {ContrastDetails, Events as ContrastDetailsEvents} from './ContrastDetail
 
 import type {ContrastInfo} from './ContrastInfo.js';
 import {ContrastOverlay} from './ContrastOverlay.js';
+import spectrumStyles from './spectrum.css.js';
 
 const UIStrings = {
   /**
@@ -183,7 +184,6 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
   private colorFormat?: string;
   constructor(contrastInfo?: ContrastInfo|null) {
     super(true);
-    this.registerRequiredCSS('ui/legacy/components/color_picker/spectrum.css');
 
     this.contentElement.tabIndex = 0;
     this.colorElement = this.contentElement.createChild('div', 'spectrum-color');
@@ -1140,6 +1140,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
   }
 
   wasShown(): void {
+    this.registerCSSFiles([spectrumStyles]);
     this.hueAlphaWidth = this.hueElement.offsetWidth;
     this.slideHelperWidth = this.hueSlider.offsetWidth / 2;
     this.dragWidth = this.colorElement.offsetWidth;

package/front_end/ui/legacy/components/cookie_table/CookiesTable.ts

@@ -43,6 +43,8 @@ import * as NetworkForward from '../../../../panels/network/forward/forward.js';
 import * as UI from '../../legacy.js';
 import * as DataGrid from '../data_grid/data_grid.js';
 
+import cookiesTableStyles from './cookiesTable.css.js';
+
 const UIStrings = {
   /**
   *@description Cookie table cookies table expires session value in Cookies Table of the Cookies table in the Application panel
@@ -124,7 +126,6 @@ export class CookiesTable extends UI.Widget.VBox {
       deleteCallback?: ((arg0: SDK.Cookie.Cookie, arg1: () => void) => void)) {
     super();
 
-    this.registerRequiredCSS('ui/legacy/components/cookie_table/cookiesTable.css');
     this.element.classList.add('cookies-table');
 
     this.saveCallback = saveCallback;
@@ -286,6 +287,10 @@ export class CookiesTable extends UI.Widget.VBox {
     this.cookieToBlockedReasons = null;
   }
 
+  wasShown(): void {
+    this.registerCSSFiles([cookiesTableStyles]);
+  }
+
   setCookies(
       cookies: SDK.Cookie.Cookie[],
       cookieToBlockedReasons?: ReadonlyMap<SDK.Cookie.Cookie, SDK.CookieModel.BlockedReason[]>): void {

package/front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -31,6 +31,8 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as UI from '../../legacy.js';
 
+import dataGridStyles from './dataGrid.css.js';
+
 const UIStrings = {
   /**
   *@description Accessible text label for expandible nodes in datagrids
@@ -169,7 +171,6 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     const {displayName, columns: columnsArray, editCallback, deleteCallback, refreshCallback} = dataGridParameters;
     this.element = document.createElement('div');
     this.element.classList.add('data-grid');
-    UI.Utils.appendStyle(this.element, 'ui/legacy/components/data_grid/dataGrid.css');
     this.element.tabIndex = 0;
     this.element.addEventListener('keydown', this.keyDown.bind(this), false);
     this.element.addEventListener('contextmenu', this.contextMenu.bind(this), true);
@@ -2351,6 +2352,7 @@ export class DataGridWidget<T> extends UI.Widget.VBox {
   }
 
   wasShown(): void {
+    this.registerCSSFiles([dataGridStyles]);
     this.dataGrid.wasShown();
   }
 

package/front_end/ui/legacy/components/data_grid/dataGrid.css

@@ -154,6 +154,7 @@
 }
 
 .data-grid th .sort-order-icon-container {
+  background-color: var(--color-background-elevation-1);
   position: absolute;
   top: 1px;
   right: 0;
@@ -162,6 +163,10 @@
   align-items: center;
 }
 
+.data-grid th:hover .sort-order-icon-container {
+  background-color: var(--color-background-highlight);
+}
+
 .data-grid th .sort-order-icon {
   margin-right: 4px;
   margin-bottom: -2px;

package/front_end/ui/legacy/components/inline_editor/CSSLength.ts

@@ -77,6 +77,10 @@ export class CSSLength extends HTMLElement {
   }
 
   private onValueMousedown(event: MouseEvent): void {
+    if (event.button !== 0) {
+      return;
+    }
+
     this.currentMouseClientX = event.clientX;
     const targetDocument = event.target instanceof Node && event.target.ownerDocument;
     if (targetDocument) {
@@ -136,9 +140,12 @@ export class CSSLength extends HTMLElement {
         <span class="value"
           @mousedown=${this.onValueMousedown}
           @mouseup=${this.onValueMouseup}
-        >${this.length.value}</span><select class="unit ${this.length.unit}" @mouseup=${this.onUnitMouseup} @change=${this.onUnitChange}>
-          ${options}
-        </select>
+        >${this.length.value}</span><span class="unit">${this.length.unit}</span><div class="unit-dropdown">
+          <span class="icon"></span>
+          <select @mouseup=${this.onUnitMouseup} @change=${this.onUnitChange}>
+            ${options}
+          </select>
+        </div>
       `;
     // clang-format on
   }

package/front_end/ui/legacy/components/inline_editor/CSSShadowEditor.ts

@@ -106,7 +106,7 @@ export class CSSShadowEditor extends Common.ObjectWrapper.eventMixin<EventTypes,
     field.appendChild(textInput);
     textInput.id = propertyName;
     textInput.addEventListener('keydown', this.handleValueModification.bind(this), false);
-    textInput.addEventListener('mousewheel', this.handleValueModification.bind(this), false);
+    textInput.addEventListener('wheel', this.handleValueModification.bind(this), false);
     textInput.addEventListener('input', this.onTextInput.bind(this), false);
     textInput.addEventListener('blur', this.onTextBlur.bind(this), false);
     return textInput;

package/front_end/ui/legacy/components/inline_editor/cssLength.css

@@ -14,21 +14,42 @@
   cursor: ew-resize;
 }
 
-select.unit {
+.unit-dropdown {
+  display: none;
+}
+
+.unit-dropdown select {
   all: unset;
   cursor: pointer;
-  width: 2ch;
+  opacity: 0%;
+  width: 0.8em;
+}
+
+.icon {
+  position: absolute;
+  display: inline-block;
+  -webkit-mask-image: var(--image-file-chevrons);
+  -webkit-mask-position: -12px 4px;
+  -webkit-mask-size: 19px 6px;
+  -webkit-mask-repeat: no-repeat;
+  background-color: var(--color-text-primary);
+  content: '';
+  height: 1em;
+  width: 1em;
+}
+
+:host(:not(:last-child)) {
+  margin-right: 0.1em;
 }
 
-select.unit:hover {
-  text-decoration: underline;
+:host(:not(:last-child)) .unit-dropdown {
+  position: absolute;
 }
 
-select.unit.rem {
-  width: 3ch;
+.css-length:hover .unit-dropdown {
+  display: inline-block;
 }
 
-select.unit.vmin,
-select.unit.vmax {
-  width: 4ch;
+:host(:last-child) .unit-dropdown select {
+  width: 0.6em;
 }

package/front_end/ui/legacy/components/object_ui/CustomPreviewComponent.ts

@@ -9,6 +9,7 @@ import * as UI from '../../legacy.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 
 import {ObjectPropertiesSection} from './ObjectPropertiesSection.js';
+import customPreviewComponentStyles from './customPreviewComponent.css.js';
 
 const UIStrings = {
   /**
@@ -188,7 +189,7 @@ export class CustomPreviewComponent {
     this.element = document.createElement('span');
     this.element.classList.add('source-code');
     const shadowRoot = UI.Utils.createShadowRootWithCoreStyles(this.element, {
-      cssFile: 'ui/legacy/components/object_ui/customPreviewComponent.css',
+      cssFile: [customPreviewComponentStyles],
       delegatesFocus: undefined,
     });
     this.element.addEventListener('contextmenu', this.contextMenuEventFired.bind(this), false);

package/front_end/ui/legacy/components/object_ui/ObjectPopoverHelper.ts

@@ -34,7 +34,9 @@ import * as UI from '../../legacy.js';
 import * as Components from '../utils/utils.js';
 
 import {CustomPreviewComponent} from './CustomPreviewComponent.js';
+import objectPopoverStyles from './objectPopover.css.js';
 import {ObjectPropertiesSection} from './ObjectPropertiesSection.js';
+import objectValueStyles from './objectValue.css.js';
 
 export class ObjectPopoverHelper {
   private readonly linkifier: Components.Linkifier.Linkifier|null;
@@ -72,7 +74,7 @@ export class ObjectPopoverHelper {
       } else {
         popoverContentElement = document.createElement('div');
         popoverContentElement.classList.add('object-popover-content');
-        UI.Utils.appendStyle(popoverContentElement, 'ui/legacy/components/object_ui/objectPopover.css');
+        popover.registerCSSFiles([objectPopoverStyles]);
         const titleElement = popoverContentElement.createChild('div', 'monospace object-popover-title');
         titleElement.createChild('span').textContent = description;
         linkifier = new Components.Linkifier.Linkifier();
@@ -90,8 +92,7 @@ export class ObjectPopoverHelper {
 
     popoverContentElement = document.createElement('span');
     popoverContentElement.dataset.stableNameForTest = 'object-popover-content';
-    UI.Utils.appendStyle(popoverContentElement, 'ui/legacy/components/object_ui/objectValue.css');
-    UI.Utils.appendStyle(popoverContentElement, 'ui/legacy/components/object_ui/objectPopover.css');
+    popover.registerCSSFiles([objectValueStyles, objectPopoverStyles]);
     const valueElement = popoverContentElement.createChild('span', 'monospace object-value-' + result.type);
     valueElement.style.whiteSpace = 'pre';
 

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -43,6 +43,8 @@ import {CustomPreviewComponent} from './CustomPreviewComponent.js';
 import {JavaScriptAutocomplete} from './JavaScriptAutocomplete.js';
 import {JavaScriptREPL} from './JavaScriptREPL.js';
 import {createSpansForNodeTitle, RemoteObjectPreviewFormatter} from './RemoteObjectPreviewFormatter.js';
+import objectValueStyles from './objectValue.css.js';
+import objectPropertiesSectionStyles from './objectPropertiesSection.css.js';
 
 const UIStrings = {
   /**
@@ -161,8 +163,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     }
 
     objectPropertiesSectionMap.set(this.element, this);
-    this.registerRequiredCSS('ui/legacy/components/object_ui/objectValue.css');
-    this.registerRequiredCSS('ui/legacy/components/object_ui/objectPropertiesSection.css');
+    this.registerCSSFiles([objectValueStyles, objectPropertiesSectionStyles]);
     this.rootElement().childrenListElement.classList.add('source-code', 'object-properties-section');
   }
 
@@ -183,7 +184,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     const titleElement = document.createElement('span');
     titleElement.classList.add('source-code');
     const shadowRoot = UI.Utils.createShadowRootWithCoreStyles(titleElement, {
-      cssFile: 'ui/legacy/components/object_ui/objectValue.css',
+      cssFile: [objectValueStyles],
       delegatesFocus: undefined,
     });
     const propertyValue =
@@ -578,8 +579,7 @@ export class ObjectPropertiesSectionsTreeOutline extends UI.TreeOutline.TreeOutl
   private readonly editable: boolean;
   constructor(options?: TreeOutlineOptions|null) {
     super();
-    this.registerRequiredCSS('ui/legacy/components/object_ui/objectValue.css');
-    this.registerRequiredCSS('ui/legacy/components/object_ui/objectPropertiesSection.css');
+    this.registerCSSFiles([objectValueStyles, objectPropertiesSectionStyles]);
     this.editable = !(options && options.readOnly);
     this.contentElement.classList.add('source-code');
     this.contentElement.classList.add('object-properties-section');

package/front_end/ui/legacy/components/perf_ui/perf_ui-meta.ts

@@ -71,6 +71,7 @@ UI.ActionRegistration.registerActionExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.PERFORMANCE,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.flamechartMouseWheelAction),
   settingName: 'flamechartMouseWheelAction',
   settingType: Common.Settings.SettingType.ENUM,

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

@@ -13,6 +13,8 @@ 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';
 
+import filteredListWidgetStyles from './filteredListWidget.css.js';
+
 const UIStrings = {
   /**
   * @description Aria label for quick open dialog prompt
@@ -64,7 +66,6 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     const listener = (this.onKeyDown.bind(this) as (arg0: Event) => void);
     this.contentElement.addEventListener('keydown', listener, true);
     UI.ARIAUtils.markAsCombobox(this.contentElement);
-    this.registerRequiredCSS('ui/legacy/components/quick_open/filteredListWidget.css');
 
     this.inputBoxElement = new TextPrompt.TextPrompt.TextPrompt();
     this.inputBoxElement.data = {ariaLabel: i18nString(UIStrings.quickOpenPrompt), prefix: '', suggestion: ''};
@@ -212,6 +213,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
   }
 
   wasShown(): void {
+    this.registerCSSFiles([filteredListWidgetStyles]);
     this.attachProvider();
   }
 

package/front_end/ui/legacy/components/quick_open/quick_open-meta.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import * as Root from '../../../../core/root/root.js';
 import * as UI from '../../legacy.js';
 
 const UIStrings = {
@@ -26,8 +25,6 @@ let loadedQuickOpenModule: (typeof QuickOpen|undefined);
 
 async function loadQuickOpenModule(): Promise<typeof QuickOpen> {
   if (!loadedQuickOpenModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('ui/legacy/components/quick_open');
     loadedQuickOpenModule = await import('./quick_open.js');
   }
   return loadedQuickOpenModule;

package/front_end/ui/legacy/components/source_frame/module.json

@@ -1,8 +1,7 @@
 {
   "dependencies": [
     "ui/legacy/components/text_editor",
-    "ui/legacy",
-    "ui/legacy/components/object_ui"
+    "ui/legacy"
   ],
     "resources": [
     "fontView.css",

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

@@ -48,6 +48,7 @@ const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.defaultIndentation),
   settingName: 'textEditorIndent',
   settingType: Common.Settings.SettingType.ENUM,

package/front_end/ui/legacy/themeColors.css

@@ -163,6 +163,8 @@
   --color-nonmatching-bracket-background: rgb(255 0 0 / 7%);
   --color-editor-selection: #cfe8fc;
   --color-editor-selection-blurred: #e0e0e0;
+  --color-selected-option: #fff;
+  --color-selected-option-background: #1a73e8;
   --color-highlighted-line: rgb(255 255 0 / 50%);
 }
 
@@ -282,5 +284,7 @@
   --color-nonmatching-bracket-background: initial;
   --color-editor-selection: hsl(207deg 88% 22%);
   --color-editor-selection-blurred: #454545;
+  --color-selected-option: #fff;
+  --color-selected-option-background: #0e639c;
   --color-highlighted-line: hsl(133deg 100% 30% / 50%);
 }

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.934332"
+  "version": "1.0.935974"
 }