chrome-devtools-frontend 1.0.935974 → 1.0.937244

package/config/gni/all_devtools_files.gni

@@ -46,7 +46,6 @@ all_devtools_files = [
   "front_end/legacy_test_runner/coverage_test_runner/coverage_test_runner.js",
   "front_end/panels/coverage/module.json",
   "front_end/legacy_test_runner/cpu_profiler_test_runner/cpu_profiler_test_runner.js",
-  "front_end/panels/css_overview/module.json",
   "front_end/legacy_test_runner/data_grid_test_runner/data_grid_test_runner.js",
   "front_end/legacy_test_runner/device_mode_test_runner/device_mode_test_runner.js",
   "front_end/legacy_test_runner/elements_test_runner/elements_test_runner.js",
@@ -62,19 +61,10 @@ all_devtools_files = [
   "front_end/panels/emulation/inspectedPagePlaceholder.css",
   "front_end/panels/emulation/mediaQueryInspector.css",
   "front_end/panels/emulation/module.json",
-  "front_end/panels/event_listeners/module.json",
   "front_end/legacy_test_runner/extensions_test_runner/extensions_test_runner.js",
   "front_end/legacy_test_runner/extensions_test_runner/ExtensionsNetworkTestRunner.js",
   "front_end/legacy_test_runner/extensions_test_runner/ExtensionsTestRunner.js",
   "front_end/legacy_test_runner/heap_profiler_test_runner/heap_profiler_test_runner.js",
-  "front_end/ui/legacy/components/inline_editor/bezierEditor.css",
-  "front_end/ui/legacy/components/inline_editor/bezierSwatch.css",
-  "front_end/ui/legacy/components/inline_editor/colorSwatch.css",
-  "front_end/ui/legacy/components/inline_editor/cssShadowEditor.css",
-  "front_end/ui/legacy/components/inline_editor/cssShadowSwatch.css",
-  "front_end/ui/legacy/components/inline_editor/fontEditor.css",
-  "front_end/ui/legacy/components/inline_editor/module.json",
-  "front_end/ui/legacy/components/inline_editor/swatchPopover.css",
   "front_end/entrypoints/inspector_main/module.json",
   "front_end/entrypoints/inspector_main/nodeIcon.css",
   "front_end/entrypoints/inspector_main/renderingOptions.css",
@@ -86,11 +76,9 @@ all_devtools_files = [
   "front_end/panels/layers/module.json",
   "front_end/entrypoints/main/module.json",
   "front_end/panels/media/module.json",
-  "front_end/panels/mobile_throttling/module.json",
   "front_end/entrypoints/ndb_app/ndb_app.json",
   "front_end/legacy_test_runner/network_test_runner/network_test_runner.js",
   "front_end/panels/network/module.json",
-  "front_end/entrypoints/node_main/module.json",
   "front_end/entrypoints/node_main/nodeConnectionsPanel.css",
   "front_end/ui/legacy/components/perf_ui/chartViewport.css",
   "front_end/ui/legacy/components/perf_ui/filmStripView.css",
@@ -99,7 +87,6 @@ all_devtools_files = [
   "front_end/ui/legacy/components/perf_ui/overviewGrid.css",
   "front_end/ui/legacy/components/perf_ui/timelineGrid.css",
   "front_end/ui/legacy/components/perf_ui/timelineOverviewInfo.css",
-  "front_end/panels/performance_monitor/module.json",
   "front_end/panels/protocol_monitor/module.json",
   "front_end/legacy_test_runner/performance_test_runner/performance_test_runner.js",
   "front_end/legacy_test_runner/performance_test_runner/TimelineDataTestRunner.js",

package/config/gni/devtools_grd_files.gni

@@ -357,7 +357,6 @@ grd_files_release_sources = [
   "front_end/panels/css_overview/components/components.js",
   "front_end/panels/css_overview/css_overview-meta.js",
   "front_end/panels/css_overview/css_overview.js",
-  "front_end/panels/css_overview/css_overview_module.js",
   "front_end/panels/developer_resources/developer_resources-meta.js",
   "front_end/panels/developer_resources/developer_resources.js",
   "front_end/panels/elements/components/components.js",
@@ -370,7 +369,6 @@ grd_files_release_sources = [
   "front_end/panels/emulation/emulation-meta.js",
   "front_end/panels/emulation/emulation.js",
   "front_end/panels/event_listeners/event_listeners.js",
-  "front_end/panels/event_listeners/event_listeners_module.js",
   "front_end/panels/help/help-meta.js",
   "front_end/panels/help/help.js",
   "front_end/panels/input/input-meta.js",
@@ -407,7 +405,6 @@ grd_files_release_sources = [
   "front_end/panels/network/network_module.js",
   "front_end/panels/performance_monitor/performance_monitor-meta.js",
   "front_end/panels/performance_monitor/performance_monitor.js",
-  "front_end/panels/performance_monitor/performance_monitor_module.js",
   "front_end/panels/profiler/profiler-legacy.js",
   "front_end/panels/profiler/profiler-meta.js",
   "front_end/panels/profiler/profiler.js",
@@ -507,7 +504,6 @@ grd_files_release_sources = [
   "front_end/ui/legacy/components/data_grid/data_grid.js",
   "front_end/ui/legacy/components/inline_editor/inline_editor-legacy.js",
   "front_end/ui/legacy/components/inline_editor/inline_editor.js",
-  "front_end/ui/legacy/components/inline_editor/inline_editor_module.js",
   "front_end/ui/legacy/components/object_ui/object_ui-legacy.js",
   "front_end/ui/legacy/components/object_ui/object_ui-meta.js",
   "front_end/ui/legacy/components/object_ui/object_ui.js",
@@ -1513,12 +1509,18 @@ grd_files_debug_sources = [
   "front_end/ui/legacy/components/inline_editor/InlineEditorUtils.js",
   "front_end/ui/legacy/components/inline_editor/SwatchPopoverHelper.js",
   "front_end/ui/legacy/components/inline_editor/Swatches.js",
+  "front_end/ui/legacy/components/inline_editor/bezierEditor.css.js",
+  "front_end/ui/legacy/components/inline_editor/bezierSwatch.css.js",
   "front_end/ui/legacy/components/inline_editor/colorSwatch.css.js",
   "front_end/ui/legacy/components/inline_editor/cssAngle.css.js",
   "front_end/ui/legacy/components/inline_editor/cssAngleEditor.css.js",
   "front_end/ui/legacy/components/inline_editor/cssAngleSwatch.css.js",
   "front_end/ui/legacy/components/inline_editor/cssLength.css.js",
+  "front_end/ui/legacy/components/inline_editor/cssShadowEditor.css.js",
+  "front_end/ui/legacy/components/inline_editor/cssShadowSwatch.css.js",
   "front_end/ui/legacy/components/inline_editor/cssVarSwatch.css.js",
+  "front_end/ui/legacy/components/inline_editor/fontEditor.css.js",
+  "front_end/ui/legacy/components/inline_editor/swatchPopover.css.js",
   "front_end/ui/legacy/components/object_ui/CustomPreviewComponent.js",
   "front_end/ui/legacy/components/object_ui/JavaScriptAutocomplete.js",
   "front_end/ui/legacy/components/object_ui/JavaScriptREPL.js",

package/front_end/.eslintrc.js

@@ -30,6 +30,7 @@ module.exports = {
         'rulesdir/ban_literal_devtools_component_tag_names': 2,
         'rulesdir/ban_self_closing_custom_element_tagnames': 2,
         'rulesdir/ban_style_tags_in_lit_html': 2,
+        'rulesdir/ban_a_tags_in_lit_html': 2,
         'rulesdir/check_component_naming': 2,
         'rulesdir/check_was_shown_methods': 2,
         'rulesdir/static_custom_event_names': 2,

package/front_end/core/host/UserMetrics.ts

@@ -574,7 +574,8 @@ export const DevtoolsExperiments: {
   'reportingApiDebugging': 49,
   'syncSettings': 50,
   'groupAndHideIssuesByKind': 51,
-  '__lastValidEnumPosition': 51,
+  'cssTypeComponentLength': 52,
+  '__lastValidEnumPosition': 52,
 };
 
 export const IssueExpanded: {

package/front_end/entrypoints/devtools_app/devtools_app.json

@@ -2,19 +2,16 @@
   "modules" : [
     { "name": "panels/emulation", "type": "autostart" },
     { "name": "entrypoints/inspector_main", "type": "autostart" },
-    { "name": "panels/mobile_throttling", "type": "autostart" },
 
     { "name": "panels/accessibility" },
     { "name": "panels/lighthouse" },
     { "name": "panels/browser_debugger" },
-    { "name": "panels/css_overview" },
     { "name": "panels/elements" },
     { "name": "emulated_devices" },
     { "name": "panels/issues" },
     { "name": "panels/layers" },
     { "name": "panels/layer_viewer" },
     { "name": "panels/network" },
-    { "name": "panels/performance_monitor" },
     { "name": "panels/application" },
     { "name": "panels/security" },
     { "name": "panels/timeline" },

package/front_end/entrypoints/inspector_main/module.json

@@ -1,7 +1,6 @@
 {
   "dependencies": [
-    "ui/legacy",
-    "panels/mobile_throttling"
+    "ui/legacy"
   ],
     "resources": [
     "nodeIcon.css",

package/front_end/entrypoints/main/MainImpl.ts

@@ -323,15 +323,22 @@ export class MainImpl {
     Root.Runtime.experiments.register(
         Root.Runtime.ExperimentName.SYNC_SETTINGS, 'Sync DevTools settings with Chrome Sync');
 
+    // Debugging of Reporting API
+    Root.Runtime.experiments.register('reportingApiDebugging', 'Enable Reporting API panel in the Application panel');
+
+    // CSS <length> authoring tool.
+    Root.Runtime.experiments.register(
+        'cssTypeComponentLength',
+        'Enable CSS <length> authoring tool in the Styles pane (https://goo.gle/length-feedback)', undefined,
+        'https://developer.chrome.com/blog/new-in-devtools-96/#length');
+
     Root.Runtime.experiments.enableExperimentsByDefault([
       'sourceOrderViewer',
       'hideIssuesFeature',
       'bfcacheDebugging',
+      'cssTypeComponentLength',
     ]);
 
-    // Debugging of Reporting API
-    Root.Runtime.experiments.register('reportingApiDebugging', 'Enable Reporting API panel in the Application panel');
-
     Root.Runtime.experiments.cleanUpStaleExperiments();
     const enabledExperiments = Root.Runtime.Runtime.queryParam('enabledExperiments');
     if (enabledExperiments) {

package/front_end/entrypoints/node_app/node_app.json

@@ -1,6 +1,5 @@
 {
   "modules" : [
-    { "name": "entrypoints/node_main", "type": "autostart" },
     { "name": "panels/js_profiler" }
   ],
   "extends": "shell"

package/front_end/entrypoints/node_main/node_main-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
@@ -31,8 +30,6 @@ let loadedNodeMainModule: (typeof NodeMain|undefined);
 
 async function loadNodeMainModule(): Promise<typeof NodeMain> {
   if (!loadedNodeMainModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('entrypoints/node_main');
     loadedNodeMainModule = await import('./node_main.js');
   }
   return loadedNodeMainModule;

package/front_end/entrypoints/shell/shell.json

@@ -5,8 +5,6 @@
 
     { "name": "panels/console" },
     { "name": "panels/coverage" },
-    { "name": "panels/event_listeners" },
-    { "name": "ui/legacy/components/inline_editor" },
     { "name": "ui/legacy/components/perf_ui" },
     { "name": "panels/profiler" },
     { "name": "panels/protocol_monitor"},

package/front_end/entrypoints/worker_app/worker_app.json

@@ -1,7 +1,5 @@
 {
   "modules" : [
-    { "name": "panels/mobile_throttling", "type": "autostart"  },
-
     { "name": "panels/browser_debugger" },
     { "name": "panels/elements" },
     { "name": "panels/issues" },

package/front_end/panels/application/module.json

@@ -1,10 +1,8 @@
 {
   "dependencies": [
     "ui/legacy/components/source_frame",
-    "ui/legacy/components/inline_editor",
     "ui/legacy",
     "ui/legacy/components/perf_ui",
-    "panels/mobile_throttling",
     "panels/network",
     "panels/sources"
   ]

package/front_end/panels/console/ConsolePinPane.ts

@@ -263,6 +263,7 @@ export class ConsolePin {
         ]),
         CM.EditorView.domEventHandlers({blur: (_e, view) => this.onBlur(view)}),
         TE.Config.baseConfiguration(expression),
+        TE.Config.autocompletion,
       ],
     }));
     parent.appendChild(this.editor);

package/front_end/panels/coverage/CoverageListView.ts

@@ -138,8 +138,8 @@ export class CoverageListView extends UI.Widget.VBox {
     this.highlightRegExp = null;
 
     const columns: DataGrid.DataGrid.ColumnDescriptor[] = [
-      {id: 'url', title: i18nString(UIStrings.url), width: '250px', fixedWidth: false, sortable: true},
-      {id: 'type', title: i18nString(UIStrings.type), width: '45px', fixedWidth: true, sortable: true},
+      {id: 'url', title: i18nString(UIStrings.url), width: '250px', weight: 3, fixedWidth: false, sortable: true},
+      {id: 'type', title: i18nString(UIStrings.type), width: '45px', weight: 1, fixedWidth: true, sortable: true},
       {
         id: 'size',
         title: i18nString(UIStrings.totalBytes),
@@ -147,6 +147,7 @@ export class CoverageListView extends UI.Widget.VBox {
         fixedWidth: true,
         sortable: true,
         align: DataGrid.DataGrid.Align.Right,
+        weight: 1,
       },
       {
         id: 'unusedSize',
@@ -156,9 +157,17 @@ export class CoverageListView extends UI.Widget.VBox {
         sortable: true,
         align: DataGrid.DataGrid.Align.Right,
         sort: DataGrid.DataGrid.Order.Descending,
+        weight: 1,
       },
-      {id: 'bars', title: i18nString(UIStrings.usageVisualization), width: '250px', fixedWidth: false, sortable: true},
-    ] as DataGrid.DataGrid.ColumnDescriptor[];
+      {
+        id: 'bars',
+        title: i18nString(UIStrings.usageVisualization),
+        width: '250px',
+        fixedWidth: false,
+        sortable: true,
+        weight: 1,
+      },
+    ];
     this.dataGrid = new DataGrid.SortableDataGrid.SortableDataGrid<GridNode>({
       displayName: i18nString(UIStrings.codeCoverage),
       columns,

package/front_end/panels/css_overview/components/CSSOverviewStartView.ts

@@ -106,6 +106,7 @@ export class CSSOverviewStartView extends HTMLElement {
   private render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
+    // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
     render(html`
       <div class="css-overview-start-view">
         <h1 class="summary-header">${i18nString(UIStrings.identifyCSSImprovements)}</h1>

package/front_end/panels/css_overview/css_overview-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
@@ -27,8 +26,6 @@ let loadedCSSOverviewModule: (typeof CSSOverview|undefined);
 
 async function loadCSSOverviewModule(): Promise<typeof CSSOverview> {
   if (!loadedCSSOverviewModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/css_overview');
     loadedCSSOverviewModule = await import('./css_overview.js');
   }
   return loadedCSSOverviewModule;

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1049,6 +1049,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           },
         ]),
         TextEditor.Config.baseConfiguration(initialValue),
+        TextEditor.Config.autocompletion,
         html(),
         TextEditor.Config.domWordWrap,
         CodeMirror.EditorView.theme({

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -3055,7 +3055,7 @@ export class StylesSidebarPropertyRenderer {
       }
       processors.push(this.fontHandler);
     }
-    if (this.lengthHandler) {
+    if (Root.Runtime.experiments.isEnabled('cssTypeComponentLength') && this.lengthHandler) {
       // TODO(changhaohan): crbug.com/1138628 refactor this to handle unitless 0 cases
       regexes.push(InlineEditor.CSSLengthUtils.CSSLengthRegex);
       processors.push(this.lengthHandler);

package/front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -286,6 +286,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
                   crumb: true,
                   selected: crumb.selected,
                 };
+                // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
                 return LitHtml.html`
                   <li class=${LitHtml.Directives.classMap(crumbClasses)}
                     data-node-id=${crumb.node.id}

package/front_end/panels/elements/components/QueryContainer.ts

@@ -81,6 +81,7 @@ export class QueryContainer extends HTMLElement {
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
+    // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
     render(html`
       →
       <a href="#"

package/front_end/panels/elements/module.json

@@ -1,8 +1,6 @@
 {
   "dependencies": [
     "ui/legacy",
-    "ui/legacy/components/inline_editor",
-    "panels/event_listeners",
     "ui/legacy/components/text_editor"
   ]
 }

package/front_end/panels/emulation/components/DeviceSizeInputElement.ts

@@ -6,6 +6,7 @@ import type * as Platform from '../../../core/platform/platform.js';
 import * as EmulationModel from '../../../models/emulation/emulation.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as UILegacy from '../../../ui/legacy/legacy.js';
 
 class SizeChangedEvent extends Event {
   static readonly eventName = 'sizechanged';
@@ -14,6 +15,10 @@ class SizeChangedEvent extends Event {
   }
 }
 
+function getInputValue(event: Event): number {
+  return Number((event.target as HTMLInputElement).value);
+}
+
 export class SizeInputElement extends HTMLElement {
   #root = this.attachShadow({mode: 'open'});
   #disabled = false;
@@ -86,13 +91,24 @@ export class SizeInputElement extends HTMLElement {
              placeholder=${this.#placeholder}
              ?disabled=${this.#disabled}
              .value=${this.#size}
-             @change=${this.fireSizeChange} />
+             @change=${this.fireSizeChange}
+             @keydown=${this.handleModifierKeys} />
     `,
         this.#root, {host: this});
   }
 
   private fireSizeChange(event: Event): void {
-    this.dispatchEvent(new SizeChangedEvent(Number((event.target as HTMLInputElement).value)));
+    this.dispatchEvent(new SizeChangedEvent(getInputValue(event)));
+  }
+
+  private handleModifierKeys(event: Event): void {
+    const modifiedValue = UILegacy.UIUtils.modifiedFloatNumber(getInputValue(event), event);
+    if (modifiedValue === null) {
+      return;
+    }
+
+    event.preventDefault();
+    (event.target as HTMLInputElement).value = String(modifiedValue);
   }
 }
 

package/front_end/panels/emulation/module.json

@@ -1,7 +1,6 @@
 {
   "dependencies": [
-    "ui/legacy",
-    "panels/mobile_throttling"
+    "ui/legacy"
   ],
     "resources": [
     "deviceModeToolbar.css",

package/front_end/panels/event_listeners/EventListenersView.ts

@@ -224,6 +224,8 @@ export class EventListenersView extends UI.Widget.VBox {
     if (firstVisibleChild) {
       firstVisibleChild.select(true /* omitFocus */);
     }
+
+    this.treeOutline.setFocusable(Boolean(firstVisibleChild));
   }
 
   reset(): void {

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

@@ -4,7 +4,6 @@
 
 import * as Common from '../../core/common/common.js';
 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
@@ -53,8 +52,6 @@ let loadedMobileThrottlingModule: (typeof MobileThrottling|undefined);
 
 async function loadMobileThrottlingModule(): Promise<typeof MobileThrottling> {
   if (!loadedMobileThrottlingModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/mobile_throttling');
     loadedMobileThrottlingModule = await import('./mobile_throttling.js');
   }
   return loadedMobileThrottlingModule;

package/front_end/panels/network/module.json

@@ -1,6 +1,5 @@
 {
   "dependencies": [
-    "panels/mobile_throttling",
     "ui/legacy/components/perf_ui",
     "ui/legacy/components/source_frame",
     "ui/legacy"

package/front_end/panels/performance_monitor/performance_monitor-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
@@ -47,8 +46,6 @@ let loadedPerformanceMonitorModule: (typeof PerformanceMonitor|undefined);
 
 async function loadPerformanceMonitorModule(): Promise<typeof PerformanceMonitor> {
   if (!loadedPerformanceMonitorModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/performance_monitor');
     loadedPerformanceMonitorModule = await import('./performance_monitor.js');
   }
   return loadedPerformanceMonitorModule;

package/front_end/panels/sources/BreakpointEditDialog.ts

@@ -71,6 +71,7 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
     const editorConfig = [
       (await CodeMirror.javascript()).javascriptLanguage,
       TextEditor.Config.baseConfiguration(oldCondition || ''),
+      TextEditor.Config.autocompletion,
       CodeMirror.EditorView.lineWrapping,
       TextEditor.Config.showCompletionHint,
       await TextEditor.JavaScript.completion(),

package/front_end/panels/sources/module.json

@@ -2,8 +2,6 @@
   "dependencies": [
     "ui/legacy",
     "ui/legacy/components/source_frame",
-    "ui/legacy/components/inline_editor",
-    "panels/event_listeners",
     "panels/coverage"
   ]
 }

package/front_end/panels/timeline/module.json

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

package/front_end/ui/components/docs/create_breadcrumbs.ts

@@ -6,6 +6,7 @@ import * as LitHtml from '../../lit-html/lit-html.js';
 export function init(): void {
   const container = document.createElement('ul');
   // clang-format off
+  // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
   LitHtml.render(LitHtml.html`
 
   <style>

package/front_end/ui/components/helpers/get-stylesheet.ts

@@ -48,7 +48,6 @@ export const CSS_RESOURCES_TO_LOAD_INTO_RUNTIME = [
   'ui/legacy/progressIndicator.css',
   'panels/application/serviceWorkerUpdateCycleView.css',
   'ui/legacy/tabbedPane.css',
-  'ui/legacy/components/inline_editor/colorSwatch.css',
   'ui/legacy/glassPane.css',
   'ui/legacy/suggestBox.css',
   'ui/legacy/treeoutline.css',

package/front_end/ui/components/linkifier/LinkifierImpl.ts

@@ -66,6 +66,7 @@ export class Linkifier extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     await coordinator.write(() => {
       // clang-format off
+      // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
       LitHtml.render(LitHtml.html`<a class="link" href=${this.#url} @click=${this.onLinkActivation}><slot>${LinkifierUtils.linkText(this.#url, this.#lineNumber)}</slot></a>`, this.#shadow, { host: this});
       // clang-format on
     });

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

@@ -57,7 +57,9 @@ 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({icons: false}));
+export const autocompletion = CM.autocompletion({icons: false});
+
+export const sourcesAutocompletion = DynamicSetting.bool('textEditorAutocompletion', autocompletion);
 
 export const bracketMatching = DynamicSetting.bool('textEditorBracketMatching', CM.bracketMatching());
 

package/front_end/ui/legacy/UIUtils.ts

@@ -450,7 +450,7 @@ function modifiedHexValue(hexString: string, event: Event): string|null {
   return resultString;
 }
 
-function modifiedFloatNumber(number: number, event: Event, modifierMultiplier?: number): number|null {
+export function modifiedFloatNumber(number: number, event: Event, modifierMultiplier?: number): number|null {
   const direction = getValueModificationDirection(event);
   if (!direction) {
     return null;

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

@@ -6,6 +6,7 @@ import * as Common from '../../../../core/common/common.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as UI from '../../legacy.js';
 
+import bezierEditorStyles from './bezierEditor.css.js';
 import {BezierUI} from './BezierUI.js';
 
 export class BezierEditor extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
@@ -29,7 +30,6 @@ export class BezierEditor extends Common.ObjectWrapper.eventMixin<EventTypes, ty
   constructor(bezier: UI.Geometry.CubicBezier) {
     super(true);
     this.bezierInternal = bezier;
-    this.registerRequiredCSS('ui/legacy/components/inline_editor/bezierEditor.css');
     this.contentElement.tabIndex = 0;
     this.setDefaultFocusedElement(this.contentElement);
 
@@ -79,6 +79,7 @@ export class BezierEditor extends Common.ObjectWrapper.eventMixin<EventTypes, ty
   }
 
   wasShown(): void {
+    this.registerCSSFiles([bezierEditorStyles]);
     this.unselectPresets();
     // Check if bezier matches a preset
     for (const category of this.presetCategories) {

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

@@ -9,6 +9,7 @@ import * as UI from '../../legacy.js';
 
 import type {CSSShadowModel} from './CSSShadowModel.js';
 import {CSSLength} from './CSSShadowModel.js';
+import cssShadowEditorStyles from './cssShadowEditor.css.js';
 
 const UIStrings = {
   /**
@@ -61,7 +62,6 @@ export class CSSShadowEditor extends Common.ObjectWrapper.eventMixin<EventTypes,
   private changedElement?: HTMLInputElement|null;
   constructor() {
     super(true);
-    this.registerRequiredCSS('ui/legacy/components/inline_editor/cssShadowEditor.css');
     this.contentElement.tabIndex = 0;
     this.setDefaultFocusedElement(this.contentElement);
 
@@ -120,6 +120,7 @@ export class CSSShadowEditor extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   wasShown(): void {
+    this.registerCSSFiles([cssShadowEditorStyles]);
     this.updateUI();
   }
 

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

@@ -8,6 +8,7 @@ import * as SDK from '../../../../core/sdk/sdk.js';
 import * as IconButton from '../../../components/icon_button/icon_button.js';
 import * as UI from '../../legacy.js';
 
+import fontEditorStyles from './fontEditor.css.js';
 import * as FontEditorUnitConverter from './FontEditorUnitConverter.js';
 import * as FontEditorUtils from './FontEditorUtils.js';
 
@@ -123,7 +124,6 @@ export class FontEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
   constructor(propertyMap: Map<string, string>) {
     super(true);
-    this.registerRequiredCSS('ui/legacy/components/inline_editor/fontEditor.css');
     this.selectedNode = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
 
     this.propertyMap = propertyMap;
@@ -174,6 +174,10 @@ export class FontEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
         /** hasUnits= */ true);
   }
 
+  wasShown(): void {
+    this.registerCSSFiles([fontEditorStyles]);
+  }
+
   private async createFontSelectorSection(propertyValue?: string): Promise<void> {
     if (propertyValue) {
       // FIXME(crbug.com/1148434): propertyValue will not be split correctly for font family names that contain commas.

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

@@ -7,6 +7,7 @@ import * as Platform from '../../../../core/platform/platform.js';
 import * as UI from '../../legacy.js';
 
 import {ColorSwatch} from './ColorSwatch.js';
+import swatchPopoverStyles from './swatchPopover.css.js';
 
 export class SwatchPopoverHelper extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   private readonly popover: UI.GlassPane.GlassPane;
@@ -22,7 +23,6 @@ export class SwatchPopoverHelper extends Common.ObjectWrapper.ObjectWrapper<Even
   constructor() {
     super();
     this.popover = new UI.GlassPane.GlassPane();
-    this.popover.registerRequiredCSS('ui/legacy/components/inline_editor/swatchPopover.css');
     this.popover.setSizeBehavior(UI.GlassPane.SizeBehavior.MeasureContent);
     this.popover.setMarginBehavior(UI.GlassPane.MarginBehavior.Arrow);
     this.popover.element.addEventListener('mousedown', e => e.consume(), false);
@@ -60,6 +60,7 @@ export class SwatchPopoverHelper extends Common.ObjectWrapper.ObjectWrapper<Even
       this.hide(true);
     }
 
+    this.popover.registerCSSFiles([swatchPopoverStyles]);
     this.dispatchEventToListeners(Events.WillShowPopover);
 
     this.isHidden = false;

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

@@ -8,6 +8,8 @@ import * as UI from '../../legacy.js';
 
 import {ColorSwatch, FormatChangedEvent} from './ColorSwatch.js';
 import type {CSSShadowModel} from './CSSShadowModel.js';
+import bezierSwatchStyles from './bezierSwatch.css.js';
+import cssShadowSwatchStyles from './cssShadowSwatch.css.js';
 
 export class BezierSwatch extends HTMLSpanElement {
   private readonly iconElementInternal: UI.Icon.Icon;
@@ -16,7 +18,7 @@ export class BezierSwatch extends HTMLSpanElement {
   constructor() {
     super();
     const root = UI.Utils.createShadowRootWithCoreStyles(this, {
-      cssFile: 'ui/legacy/components/inline_editor/bezierSwatch.css',
+      cssFile: [bezierSwatchStyles],
       delegatesFocus: undefined,
     });
     this.iconElementInternal = UI.Icon.Icon.create('smallicon-bezier', 'bezier-swatch-icon');
@@ -63,7 +65,7 @@ export class CSSShadowSwatch extends HTMLSpanElement {
   constructor() {
     super();
     const root = UI.Utils.createShadowRootWithCoreStyles(this, {
-      cssFile: 'ui/legacy/components/inline_editor/cssShadowSwatch.css',
+      cssFile: [cssShadowSwatchStyles],
       delegatesFocus: undefined,
     });
     this.iconElementInternal = UI.Icon.Icon.create('smallicon-shadow', 'shadow-swatch-icon');

package/front_end/ui/legacy/inspectorCommon.css

@@ -390,7 +390,7 @@ input::placeholder {
 .chrome-select:enabled:active,
 .chrome-select:enabled:focus,
 .chrome-select:enabled:hover {
-  --override-select-box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
+  --override-select-box-shadow: 0 0 0 2px var(--color-button-outline-focus);
 
   background-color: var(--color-background-elevation-1);
   box-shadow: var(--override-select-box-shadow);
@@ -401,10 +401,7 @@ input::placeholder {
 }
 
 .chrome-select:enabled:focus {
-  --override-extra-box-shadow-focus: 0 0 0 2px rgb(66 133 244 / 40%);
-
   border-color: transparent;
-  box-shadow: var(--override-select-box-shadow), var(--override-extra-box-shadow-focus);
 }
 
 .-theme-with-dark-background .chrome-select:enabled:active,
@@ -413,14 +410,7 @@ input::placeholder {
 :host-context(.-theme-with-dark-background) .chrome-select:enabled:active,
 :host-context(.-theme-with-dark-background) .chrome-select:enabled:focus,
 :host-context(.-theme-with-dark-background) .chrome-select:enabled:hover {
-  --override-select-box-shadow: 0 1px 2px rgb(230 230 230 / 10%);
-}
-
-/* Disabled so we can keep all the selectors above in one block */
-/* stylelint-disable-next-line no-descending-specificity */
-.-theme-with-dark-background .chrome-select:enabled:focus,
-:host-context(.-theme-with-dark-background) .chrome-select:enabled:focus {
-  --override-extra-box-shadow-focus: 0 0 0 2px rgb(11 78 189 / 40%);
+  --override-select-box-shadow: 0 0 0 2px var(--color-button-outline-focus);
 }
 
 .chrome-select-label {

package/front_end/ui/legacy/softDropDownButton.css

@@ -23,17 +23,6 @@ button.soft-dropdown > .title {
   text-overflow: ellipsis;
 }
 
-button.soft-dropdown:focus-visible::before {
-  content: "";
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  right: 2px;
-  bottom: 2px;
-  border-radius: 2px;
-  background: var(--divider-line);
-}
-
 @media (forced-colors: active) {
   button.soft-dropdown {
     border: 1px solid ButtonText;

package/front_end/ui/legacy/themeColors.css

@@ -240,7 +240,7 @@
   --color-input-outline-disabled: rgba(189 193 198 / 20%);
   --color-input-text-disabled: rgba(128 134 139 / 70%);
   /* Colors for styling buttons */
-  --color-button-outline-focus: rgb(138 180 248 / 80%);
+  --color-button-outline-focus: rgb(138 180 248 / 75%);
   --color-button-primary-background-hovering: rgb(174 203 250 / 100%);
   --color-button-primary-background-pressed: rgb(210 227 252 / 100%);
   --color-button-primary-text: rgb(0 0 0);
@@ -265,10 +265,10 @@
   --color-token-builtin: rgb(159 180 214);
   --color-token-variable-special: rgb(0 85 170);
   --color-token-keyword: rgb(154 127 213);
-  --color-token-number: var(--color-token-number);
   --color-token-string: rgb(242 139 84);
   --color-token-string-special: var(--color-token-string);
   --color-token-atom: rgb(161 247 181);
+  --color-token-number: var(--color-token-atom);
   --color-token-comment: rgb(137 137 137);
   --color-token-tag: rgb(93 176 215);
   --color-token-attribute: rgb(155 187 220);

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.935974"
+  "version": "1.0.937244"
 }

package/scripts/build/rollup.config.js

@@ -75,6 +75,9 @@ export default commandLineArgs => ({
       options: {
         strategy: minifyHTMLStrategy,
         minifyOptions: {
+          collapseInlineTagWhitespace: false,
+          collapseWhitespace: true,
+          conservativeCollapse: true,
           minifyCSS: false,
           removeOptionalTags: true,
         },

package/scripts/eslint_rules/lib/ban_a_tags_in_lit_html.js

@@ -0,0 +1,47 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+'use strict';
+
+function isLitHtmlTemplateCall(taggedTemplateExpression) {
+  if (taggedTemplateExpression.name) {
+    // Call to html`` and we assume that html = LitHtml's html function.
+    return taggedTemplateExpression.name === 'html';
+  }
+
+  // Match calls to LitHtml.html``
+  return taggedTemplateExpression.object && taggedTemplateExpression.object.name === 'LitHtml' &&
+      taggedTemplateExpression.property.name === 'html';
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Check for <a> and </a> in Lit templates instead of using x-link.',
+      category: 'Possible Errors',
+    },
+    fixable: 'code',
+    schema: []  // no options
+  },
+  create: function(context) {
+    return {
+      TaggedTemplateExpression(node) {
+        const isLitHtmlCall = isLitHtmlTemplateCall(node.tag);
+        if (!isLitHtmlCall) {
+          return;
+        }
+
+        // node.quasi.quasis are all the static parts of the template literal.
+        for (const templatePart of node.quasi.quasis) {
+          if (templatePart.value.raw.includes('<a') || templatePart.value.raw.includes('</a>')) {
+            context.report({
+              node,
+              message: 'Adding links to a component should be done using `front_end/ui/legacy/XLink.ts`',
+            });
+          }
+        }
+      },
+    };
+  }
+};

package/scripts/eslint_rules/tests/ban_a_tags_in_lit_html_test.js

@@ -0,0 +1,60 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+'use strict';
+
+const rule = require('../lib/ban_a_tags_in_lit_html.js');
+const ruleTester = new (require('eslint').RuleTester)({
+  parserOptions: {ecmaVersion: 9, sourceType: 'module'},
+  parser: require.resolve('@typescript-eslint/parser'),
+});
+
+const EXPECTED_ERROR_MESSAGE = 'Adding links to a component should be done using `front_end/ui/legacy/XLink.ts`';
+
+ruleTester.run('ban_a_tags_in_lit_html', rule, {
+  valid: [
+    {
+      code: 'LitHtml.html`<p></p>`',
+      filename: 'front_end/components/test.ts',
+    },
+    {
+      code: 'LitHtml.html`<input />`',
+      filename: 'front_end/components/test.ts',
+    },
+    {
+      code: 'LitHtml.html`<${DataGrid.litTagName}></${DataGrid.litTagName}>`',
+      filename: 'front_end/components/test.ts',
+    },
+    {
+      code: 'LitHtml.html`<p><${DataGrid.litTagName}></${DataGrid.litTagName}></p>`',
+      filename: 'front_end/components/test.ts',
+    },
+    {
+      code:
+          'LitHtml.html`<${DataGrid1.litTagName}><${DataGrid2.litTagName}></${DataGrid2.litTagName}></${DataGrid1.litTagName}>`',
+      filename: 'front_end/components/test.ts',
+    }
+  ],
+  invalid: [
+    {
+      code: 'LitHtml.html`<a />`',
+      filename: 'front_end/components/test.ts',
+      errors: [{message: EXPECTED_ERROR_MESSAGE}]
+    },
+    {
+      code: 'LitHtml.html`<a></a>`',
+      filename: 'front_end/components/test.ts',
+      errors: [{message: EXPECTED_ERROR_MESSAGE}]
+    },
+    {code: 'LitHtml.html`</a>`', filename: 'front_end/components/test.ts', errors: [{message: EXPECTED_ERROR_MESSAGE}]},
+    {code: 'LitHtml.html`<a >`', filename: 'front_end/components/test.ts', errors: [{message: EXPECTED_ERROR_MESSAGE}]},
+    {
+      code: 'LitHtml.html`<p><${DataGrid.litTagName}></${DataGrid.litTagName}><a></a></p>`',
+      errors: [{message: EXPECTED_ERROR_MESSAGE}]
+    },
+    {
+      code: 'LitHtml.html`<${DataGrid.litTagName}><a /></${DataGrid.litTagName}>`',
+      errors: [{message: EXPECTED_ERROR_MESSAGE}]
+    },
+  ]
+});

package/front_end/entrypoints/node_main/module.json

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

package/front_end/panels/css_overview/module.json

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

package/front_end/panels/event_listeners/module.json

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

package/front_end/panels/mobile_throttling/module.json

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

package/front_end/panels/performance_monitor/module.json

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

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

@@ -1,14 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy"
-  ],
-    "resources": [
-    "bezierEditor.css",
-    "colorSwatch.css",
-    "bezierSwatch.css",
-    "cssShadowSwatch.css",
-    "cssShadowEditor.css",
-    "fontEditor.css",
-    "swatchPopover.css"
-  ]
-}