chrome-devtools-frontend 1.0.937244 → 1.0.939066

package/front_end/panels/animation/animationTimeline.css

@@ -112,7 +112,7 @@ circle.animation-keyframe-point:active {
 }
 
 .animation-timeline-header::after {
-  content: '';
+  content: "";
   height: calc(100% - 48px - 28px);
   position: absolute;
   width: 150px;
@@ -184,14 +184,14 @@ circle.animation-keyframe-point:active {
   height: 100%;
   width: 100%;
   top: 28px;
-  border-left: 1px solid var(--color-syntax-1);
+  border-left: 1px solid var(--color-red);
   z-index: 2;
   cursor: col-resize;
 }
 
 .animation-scrubber-line {
   width: 11px;
-  background: linear-gradient(to right, transparent 5px, var(--color-syntax-1) 5px, var(--color-syntax-1) 6px, transparent 6px);
+  background: linear-gradient(to right, transparent 5px, var(--color-red) 5px, var(--color-red) 6px, transparent 6px);
   position: absolute;
   top: -28px;
   height: 28px;
@@ -204,7 +204,7 @@ circle.animation-keyframe-point:active {
   width: 7px;
   height: 7px;
   transform: rotate(45deg);
-  background: var(--color-syntax-1);
+  background: var(--color-red);
   position: absolute;
   left: 2px;
   top: 1px;
@@ -361,7 +361,7 @@ text.animation-timeline-grid-label {
 
 .animation-paused::before,
 .animation-paused::after {
-  content: '';
+  content: "";
   background: var(--color-background);
   width: 7px;
   height: 20px;

package/front_end/panels/application/components/ReportsGrid.ts

@@ -5,6 +5,7 @@
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import type * as Protocol from '../../../generated/protocol.js';
@@ -24,6 +25,33 @@ export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const {render, html} = LitHtml;
 
+export class ReportsGridStatusHeader extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-resources-reports-grid-status-header`;
+  private readonly shadow = this.attachShadow({mode: 'open'});
+
+  connectedCallback(): void {
+    this.shadow.adoptedStyleSheets = [reportingApiGridStyles];
+    this.render();
+  }
+
+  private render(): void {
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    render(html`
+      ${i18n.i18n.lockedString('Status')}
+      <x-link href="https://web.dev/reporting-api/#report-status">
+        <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+          iconName: 'help_outline',
+          color: 'var(--color-primary)',
+          width: '16px',
+          height: '16px',
+          } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}>
+      </x-link>
+    `, this.shadow, {host: this});
+    // clang-format on
+  }
+}
+
 export interface ReportsGridData {
   reports: Protocol.Network.ReportingApiReport[];
 }
@@ -59,21 +87,24 @@ export class ReportsGrid extends HTMLElement {
         {
           id: 'type',
           title: i18n.i18n.lockedString('Type'),
-          widthWeighting: 10,
+          widthWeighting: 20,
           hideable: false,
           visible: true,
         },
         {
           id: 'status',
           title: i18n.i18n.lockedString('Status'),
-          widthWeighting: 10,
+          widthWeighting: 20,
           hideable: false,
           visible: true,
+          titleElement: html`
+          <${ReportsGridStatusHeader.litTagName}></${ReportsGridStatusHeader.litTagName}>
+          `,
         },
         {
           id: 'destination',
           title: i18n.i18n.lockedString('Destination'),
-          widthWeighting: 10,
+          widthWeighting: 20,
           hideable: false,
           visible: true,
         },
@@ -116,7 +147,7 @@ export class ReportsGrid extends HTMLElement {
           </div>
         `}
       </div>
-    `, this.shadow);
+    `, this.shadow, {host: this});
     // clang-format on
   }
 
@@ -135,10 +166,13 @@ export class ReportsGrid extends HTMLElement {
   }
 }
 
+ComponentHelpers.CustomElements.defineComponent(
+    'devtools-resources-reports-grid-status-header', ReportsGridStatusHeader);
 ComponentHelpers.CustomElements.defineComponent('devtools-resources-reports-grid', ReportsGrid);
 
 declare global {
   interface HTMLElementTagNameMap {
+    'devtools-resources-reports-grid-status-header': ReportsGridStatusHeader;
     'devtools-resources-reports-grid': ReportsGrid;
   }
 }

package/front_end/panels/application/components/frameDetailsReportView.css

@@ -54,7 +54,7 @@ button.link {
 }
 
 .inline-name::after {
-  content: ':\u00a0';
+  content: ":\u00a0";
 }
 
 .inline-items {

package/front_end/panels/application/components/reportingApiGrid.css

@@ -33,3 +33,7 @@
 devtools-data-grid-controller {
   border: 1px solid var(--color-details-hairline);
 }
+
+.inline-icon {
+  vertical-align: text-bottom;
+}

package/front_end/panels/application/module.json

@@ -1,9 +1,7 @@
 {
   "dependencies": [
-    "ui/legacy/components/source_frame",
     "ui/legacy",
     "ui/legacy/components/perf_ui",
-    "panels/network",
-    "panels/sources"
+    "panels/network"
   ]
 }

package/front_end/panels/application/resourcesPanel.css

@@ -122,7 +122,7 @@
 
 .database-query-result {
   position: relative;
-  padding: 1px 22px 1px 22px;
+  padding: 1px 22px;
   min-height: 16px;
   margin-left: -22px;
   padding-right: 0;

package/front_end/panels/application/resourcesSidebar.css

@@ -18,7 +18,7 @@
 }
 
 li.storage-group-list-item {
-  padding: 10px 8px 6px 8px;
+  padding: 10px 8px 6px;
 }
 
 li.storage-group-list-item:not(:first-child) {

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;
@@ -99,8 +96,6 @@ let loadedSourcesModule: (typeof Sources|undefined);
 //  collision with node_app as a separate view with the same id is registered in it.
 async function loadSourcesModule(): Promise<typeof Sources> {
   if (!loadedSourcesModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('sources');
     loadedSourcesModule = await import('../sources/sources.js');
   }
   return loadedSourcesModule;

package/front_end/panels/browser_debugger/xhrBreakpointsSidebarPane.css

@@ -15,10 +15,7 @@
 
 .breakpoint-condition {
   display: block;
-  margin-top: 4px;
-  margin-bottom: 4px;
-  margin-left: 23px;
-  margin-right: 8px;
+  margin: 4px 8px 4px 23px;
 }
 
 .breakpoint-condition-input {
@@ -42,7 +39,7 @@
   background-color: var(--legacy-focus-bg-color);
 }
 
-.breakpoint-entry [is=dt-checkbox] {
+.breakpoint-entry [is="dt-checkbox"] {
   max-width: 100%;
 }
 

package/front_end/panels/changes/changesSidebar.css

@@ -23,7 +23,7 @@
 }
 
 li .icon {
-  margin: -3px -5px -3px -5px;
+  margin: -3px -5px;
   background: var(--color-background-elevation-2);
 }
 

package/front_end/panels/changes/changesView.css

@@ -4,12 +4,12 @@
  * found in the LICENSE file.
  */
 
-[slot=insertion-point-main] {
+[slot="insertion-point-main"] {
   flex-direction: column;
   display: flex;
 }
 
-[slot=insertion-point-sidebar] {
+[slot="insertion-point-sidebar"] {
   overflow: auto;
 }
 

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

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.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
@@ -118,8 +117,6 @@ let loadedConsoleModule: (typeof Console|undefined);
 
 async function loadConsoleModule(): Promise<typeof Console> {
   if (!loadedConsoleModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/console');
     loadedConsoleModule = await import('./console.js');
   }
   return loadedConsoleModule;
@@ -306,6 +303,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.CONSOLE,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.groupSimilarMessagesInConsole),
   settingName: 'consoleGroupSimilar',
   settingType: Common.Settings.SettingType.BOOLEAN,

package/front_end/panels/console/consolePrompt.css

@@ -5,7 +5,7 @@
  */
 
 #console-prompt .CodeMirror {
-  padding: 3px 0 1px 0;
+  padding: 3px 0 1px;
 }
 
 #console-prompt .CodeMirror-line {

package/front_end/panels/console/consoleSidebar.css

@@ -19,7 +19,7 @@
   margin: 0 8px;
 }
 
-[is=ui-icon] {
+[is="ui-icon"] {
   margin: 0 5px;
 }
 
@@ -48,7 +48,7 @@ li .largeicon-navigator-folder {
 }
 
 @media (forced-colors: active) {
-  [is=ui-icon].icon-mask {
+  [is="ui-icon"].icon-mask {
     background-color: ButtonText;
   }
 
@@ -65,8 +65,8 @@ li .largeicon-navigator-folder {
     color: HighlightText;
   }
 
-  .tree-outline li:hover [is=ui-icon].icon-mask,
-  .tree-outline li.selected [is=ui-icon].icon-mask,
+  .tree-outline li:hover [is="ui-icon"].icon-mask,
+  .tree-outline li.selected [is="ui-icon"].icon-mask,
   .tree-outline li.selected:focus .spritesheet-mediumicons:not(.icon-mask) {
     background-color: HighlightText !important; /* stylelint-disable-line declaration-no-important */
   }

package/front_end/panels/console/consoleView.css

@@ -462,7 +462,7 @@
 
 @media (forced-colors: active) {
   .console-message-expand-icon,
-  .console-warning-level [is=ui-icon].icon-mask.expand-group-icon {
+  .console-warning-level [is="ui-icon"].icon-mask.expand-group-icon {
     forced-color-adjust: none;
     background-color: ButtonText;
   }
@@ -493,7 +493,7 @@
     color: HighlightText;
   }
 
-  .console-message-wrapper:focus [is=ui-icon].icon-mask {
+  .console-message-wrapper:focus [is="ui-icon"].icon-mask {
     background-color: HighlightText;
   }
 

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

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -11,12 +11,9 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-
-import cssOverviewCompletedViewStyles from './cssOverviewCompletedView.css.js';
-
-import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import type * as Protocol from '../../generated/protocol.js';
 
+import cssOverviewCompletedViewStyles from './cssOverviewCompletedView.css.js';
 import type {OverviewController, PopulateNodesEvent, PopulateNodesEventNodes, PopulateNodesEventNodeTypes} from './CSSOverviewController.js';
 import {Events as CSSOverViewControllerEvents} from './CSSOverviewController.js';
 import {CSSOverviewSidebarPanel, SidebarEvents} from './CSSOverviewSidebarPanel.js';
@@ -227,15 +224,14 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
   readonly #resultsContainer: UI.Widget.VBox;
   readonly #elementContainer: DetailsView;
   readonly #sideBar: CSSOverviewSidebarPanel;
-  #cssModel: SDK.CSSModel.CSSModel;
-  #domModel: SDK.DOMModel.DOMModel;
-  readonly #domAgent: ProtocolProxyApi.DOMApi;
+  #cssModel?: SDK.CSSModel.CSSModel;
+  #domModel?: SDK.DOMModel.DOMModel;
   #linkifier: Components.Linkifier.Linkifier;
   #viewMap: Map<string, ElementDetailsView>;
   #data: OverviewData|null;
   #fragment?: UI.Fragment.Fragment;
 
-  constructor(controller: OverviewController, target: SDK.Target.Target) {
+  constructor(controller: OverviewController) {
     super('css_overview_completed_view');
 
     this.#controller = controller;
@@ -264,14 +260,6 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     this.splitWidget().setSidebarWidget(this.#sideBar);
     this.splitWidget().setMainWidget(this.#mainContainer);
 
-    const cssModel = target.model(SDK.CSSModel.CSSModel);
-    const domModel = target.model(SDK.DOMModel.DOMModel);
-    if (!cssModel || !domModel) {
-      throw new Error('Target must provide CSS and DOM models');
-    }
-    this.#cssModel = cssModel;
-    this.#domModel = domModel;
-    this.#domAgent = target.domAgent();
     this.#linkifier = new Components.Linkifier.Linkifier(/* maxLinkLength */ 20, /* useLinkDecorator */ true);
 
     this.#viewMap = new Map();
@@ -300,6 +288,16 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     // TODO(paullewis): update the links in the panels in case source has been .
   }
 
+  initializeModels(target: SDK.Target.Target): void {
+    const cssModel = target.model(SDK.CSSModel.CSSModel);
+    const domModel = target.model(SDK.DOMModel.DOMModel);
+    if (!cssModel || !domModel) {
+      throw new Error('Target must provide CSS and DOM models');
+    }
+    this.#cssModel = cssModel;
+    this.#domModel = domModel;
+  }
+
   private sideBarItemSelected(event: Common.EventTarget.EventTargetEvent<string>): void {
     const {data} = event;
     const section = (this.#fragment as UI.Fragment.Fragment).$(data);
@@ -650,6 +648,9 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
 
     let view = this.#viewMap.get(id);
     if (!view) {
+      if (!this.#domModel || !this.#cssModel) {
+        throw new Error('Unable to initialize CSS Overview, missing models');
+      }
       view = new ElementDetailsView(this.#controller, this.#domModel, this.#cssModel, this.#linkifier);
       view.populateNodes(payload.nodes);
       this.#viewMap.set(id, view);
@@ -970,7 +971,7 @@ export class ElementDetailsView extends UI.Widget.Widget {
     this.#elementGrid.setStriped(true);
     this.#elementGrid.addEventListener(DataGrid.DataGrid.Events.SortingChanged, this.sortMediaQueryDataGrid.bind(this));
 
-    this.element.appendChild(this.#elementGrid.element);
+    this.#elementGrid.asWidget().show(this.element);
   }
 
   private sortMediaQueryDataGrid(): void {

package/front_end/panels/css_overview/CSSOverviewPanel.ts

@@ -21,12 +21,13 @@ import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
 // eslint-disable-next-line @typescript-eslint/naming-convention
 let CSSOverviewPanelInstance: CSSOverviewPanel;
 
-export class CSSOverviewPanel extends UI.Panel.Panel {
-  readonly #model: CSSOverviewModel;
+export class CSSOverviewPanel extends UI.Panel.Panel implements SDK.TargetManager.Observer {
   readonly #controller: OverviewController;
   readonly #startView: CSSOverviewComponents.CSSOverviewStartView.CSSOverviewStartView;
   readonly #processingView: CSSOverviewProcessingView;
   readonly #completedView: CSSOverviewCompletedView;
+  #model?: CSSOverviewModel;
+  #target?: SDK.Target.Target;
   #backgroundColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
   #textColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
   #fillColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
@@ -44,15 +45,14 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
 
     this.element.classList.add('css-overview-panel');
 
-    const [model] = SDK.TargetManager.TargetManager.instance().models(CSSOverviewModel);
-    this.#model = (model as CSSOverviewModel);
-
     this.#controller = new OverviewController();
     this.#startView = new CSSOverviewComponents.CSSOverviewStartView.CSSOverviewStartView();
     this.#startView.addEventListener(
         'overviewstartrequested', () => this.#controller.dispatchEventToListeners(Events.RequestOverviewStart));
     this.#processingView = new CSSOverviewProcessingView(this.#controller);
-    this.#completedView = new CSSOverviewCompletedView(this.#controller, model.target());
+    this.#completedView = new CSSOverviewCompletedView(this.#controller);
+
+    SDK.TargetManager.TargetManager.instance().observeTargets(this);
 
     this.#controller.addEventListener(Events.RequestOverviewStart, _event => {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.CaptureCssOverviewClicked);
@@ -73,6 +73,26 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
     return CSSOverviewPanelInstance;
   }
 
+  targetAdded(target: SDK.Target.Target): void {
+    if (this.#target) {
+      return;
+    }
+    this.#target = target;
+    this.#completedView.initializeModels(target);
+    const [model] = SDK.TargetManager.TargetManager.instance().models(CSSOverviewModel);
+    this.#model = (model as CSSOverviewModel);
+  }
+
+  targetRemoved(): void {
+  }
+
+  private getModel(): CSSOverviewModel {
+    if (!this.#model) {
+      throw new Error('Did not retrieve model information yet.');
+    }
+    return this.#model;
+  }
+
   private reset(): void {
     this.#backgroundColors = new Map();
     this.#textColors = new Map();
@@ -104,7 +124,7 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
   }
 
   private requestNodeHighlight(evt: Common.EventTarget.EventTargetEvent<number>): void {
-    this.#model.highlightNode((evt.data as Protocol.DOM.BackendNodeId));
+    this.getModel().highlightNode((evt.data as Protocol.DOM.BackendNodeId));
   }
 
   private renderInitialView(): void {
@@ -144,10 +164,11 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
   private async startOverview(): Promise<void> {
     this.renderOverviewStartedView();
 
+    const model = this.getModel();
     const [globalStyleStats, { elementCount, backgroundColors, textColors, textColorContrastIssues, fillColors, borderColors, fontInfo, unusedDeclarations }, mediaQueries] = await Promise.all([
-      this.#model.getGlobalStylesheetStats(),
-      this.#model.getNodeStyleStats(),
-      this.#model.getMediaQueries(),
+      model.getGlobalStylesheetStats(),
+      model.getNodeStyleStats(),
+      model.getMediaQueries(),
     ]);
 
     if (elementCount) {

package/front_end/panels/css_overview/components/cssOverviewStartView.css

@@ -84,7 +84,7 @@ h1 {
   font-size: 13px;
   line-height: 20px;
   letter-spacing: 0.01em;
-  margin: 9px 0 14px 0;
+  margin: 9px 0 14px;
 }
 
 .preview-icon {

package/front_end/panels/css_overview/cssOverviewCompletedView.css

@@ -28,7 +28,7 @@
 
 .overview-completed-view .colors ul li {
   display: inline-block;
-  margin: 0 0 16px 0;
+  margin: 0 0 16px;
   padding: 0 8px 0 0;
 }
 
@@ -111,7 +111,7 @@
   font-size: 15px;
   font-weight: normal;
   padding: 0;
-  margin: 0 0 20px 0;
+  margin: 0 0 20px;
   padding-left: calc(var(--overview-default-padding) + var(--overview-icon-padding));
   position: relative;
   height: 26px;
@@ -119,7 +119,7 @@
 }
 
 .results-section h1::before {
-  content: '';
+  content: "";
   display: block;
   position: absolute;
   left: var(--overview-default-padding);
@@ -264,14 +264,14 @@
 .overview-completed-view .font-info h2 {
   font-size: 14px;
   font-weight: bold;
-  margin: 0 0 1em 0;
+  margin: 0 0 1em;
 }
 
 .overview-completed-view .font-info h3 {
   font-size: 13px;
   font-weight: normal;
   font-style: italic;
-  margin: 0 0 0.5em 0;
+  margin: 0 0 0.5em;
 }
 
 .overview-completed-view .font-info {
@@ -300,7 +300,7 @@
   width: 30px;
 }
 
-.contrast-warning [is=ui-icon] {
+.contrast-warning [is="ui-icon"] {
   margin-left: 5px;
 }
 
@@ -318,11 +318,11 @@
   min-width: initial;
 }
 
-[is=ui-icon].smallicon-checkmark-square {
+[is="ui-icon"].smallicon-checkmark-square {
   background-color: var(--color-green);
 }
 
-[is=ui-icon].smallicon-no {
+[is="ui-icon"].smallicon-no {
   background-color: var(--color-red);
 }
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1440,11 +1440,14 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     const currentNode = this.parentPaneInternal.node();
     this.parentPaneInternal.setUserOperation(true);
 
+    styleText += Platform.StringUtilities.findUnclosedCssQuote(styleText);
+
     // Append a ";" if the new text does not end in ";".
     // FIXME: this does not handle trailing comments.
     if (styleText.length && !/;\s*$/.test(styleText)) {
       styleText += ';';
     }
+
     const overwriteProperty = !this.newProperty || hasBeenEditedIncrementally;
     let success: boolean = await this.property.setText(styleText, majorChange, overwriteProperty);
     // Revert to the original text if applying the new text failed

package/front_end/panels/elements/classesPaneWidget.css

@@ -16,7 +16,7 @@
   justify-content: flex-start;
 }
 
-.styles-element-classes-pane [is=dt-checkbox] {
+.styles-element-classes-pane [is="dt-checkbox"] {
   margin-right: 15px;
 }
 

package/front_end/panels/elements/components/adornerSettingsPane.css

@@ -44,7 +44,7 @@
 
 .close::before,
 .close::after {
-  content: '';
+  content: "";
   display: inline-block;
   position: absolute;
   left: 0;

package/front_end/panels/elements/computedStyleWidgetTree.css

@@ -32,7 +32,7 @@
 }
 
 .group-title > h1 {
-  margin: 1px 0 0 0;
+  margin: 1px 0 0;
   padding: 1em 0;
   width: 100%;
   cursor: pointer;

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

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

package/front_end/panels/elements/elementsPanel.css

@@ -30,7 +30,7 @@
 #elements-content {
   flex: 1 1;
   overflow: auto;
-  padding: 2px 0 0 0;
+  padding: 2px 0 0;
 }
 
 .style-panes-wrapper {