chrome-devtools-frontend 1.0.934269 → 1.0.935784

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.934269"
+  "version": "1.0.935784"
 }

package/front_end/panels/changes/module.json

@@ -1,7 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy/components/text_editor",
-    "panels/snippets",
-    "ui/legacy"
-  ]
-}

package/front_end/panels/developer_resources/module.json

@@ -1,6 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy",
-    "ui/legacy/components/data_grid"
-  ]
-}

package/front_end/panels/search/module.json

@@ -1,5 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy"
-  ]
-}

package/front_end/panels/snippets/module.json

@@ -1,6 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy/components/quick_open",
-    "ui/legacy"
-  ]
-}

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

@@ -1,8 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy"
-  ],
-  "resources": [
-    "dataGrid.css"
-  ]
-}

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

@@ -1,11 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy"
-  ],
-    "resources": [
-    "customPreviewComponent.css",
-    "objectPopover.css",
-    "objectPropertiesSection.css",
-    "objectValue.css"
-  ]
-}

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

@@ -1,8 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy"
-  ],
-    "resources": [
-    "filteredListWidget.css"
-  ]
-}