chrome-devtools-frontend 1.0.1675430 → 1.0.1678416

package/front_end/panels/elements/LayoutPane.ts

@@ -461,15 +461,9 @@ export class LayoutPane extends UI.Widget.Widget {
       const mappedSetting = {
         type: settingType,
         name: setting.name,
-        title: uiDescriptor?.title?.() ?? setting.title(),
+        title: uiDescriptor?.title ?? '',
       };
-      const options = uiDescriptor?.options?.map(opt => ({
-                                                   value: opt.value,
-                                                   title: opt.title(),
-                                                   text: typeof opt.text === 'function' ? opt.text() : opt.text,
-                                                   raw: opt.raw,
-                                                 })) ??
-          setting.options();
+      const options = uiDescriptor?.options ?? [];
 
       if (typeof settingValue === 'boolean') {
         settings.push({

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -983,22 +983,23 @@ export class ColorMixRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
       return false;
     };
 
-    const childTracingContexts =
-        context.tracing?.evaluation([match.space, match.color1, match.color2], {match, context});
-    const childRenderingContexts =
-        childTracingContexts?.map(ctx => ctx.renderingContext(context)) ?? [context, context, context];
+    const childTracingContexts = context.tracing?.evaluation(
+        match.space.length ? [match.color1, match.color2, match.space] : [match.color1, match.color2],
+        {match, context});
+    const color1RenderingContext = childTracingContexts?.at(0)?.renderingContext(context) ?? context;
+    const color2RenderingContext = childTracingContexts?.at(1)?.renderingContext(context) ?? context;
+    const spaceRenderingContext = childTracingContexts?.at(2)?.renderingContext(context) ?? context;
 
     const contentChild = document.createElement('span');
-    const color1 = Renderer.renderInto(match.color1, childRenderingContexts[1], contentChild);
-    const color2 = Renderer.renderInto(match.color2, childRenderingContexts[2], contentChild);
-    render(
-        html`${
-            this.#treeElement?.getTracingTooltip(
-                'color-mix', match.node, this.#matchedStyles, this.#computedStyles, this.#computedStyleExtraFields,
-                context) ??
-            'color-mix'}(${Renderer.render(match.space, childRenderingContexts[0]).nodes}, ${color1.nodes}, ${
-            color2.nodes})`,
-        contentChild);
+    const color1 = Renderer.renderInto(match.color1, color1RenderingContext, contentChild);
+    const color2 = Renderer.renderInto(match.color2, color2RenderingContext, contentChild);
+    render(html`${
+               this.#treeElement?.getTracingTooltip('color-mix', match.node, this.#matchedStyles, this.#computedStyles,
+                                                    this.#computedStyleExtraFields, context) ??
+               'color-mix'}(${
+               match.space.length ? html`${Renderer.render(match.space, spaceRenderingContext).nodes}, ` :
+                                    ''}${color1.nodes}, ${color2.nodes})`,
+           contentChild);
 
     const color1Controls = color1.cssControls.get('color') ?? [];
     const color2Controls = color2.cssControls.get('color') ?? [];
@@ -1011,7 +1012,7 @@ export class ColorMixRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
     const space = match.space.map(space => context.matchedResult.getComputedText(space)).join(' ');
     const color1Text = match.color1.map(color => context.matchedResult.getComputedText(color)).join(' ');
     const color2Text = match.color2.map(color => context.matchedResult.getComputedText(color)).join(' ');
-    const colorMixText = `color-mix(${space}, ${color1Text}, ${color2Text})`;
+    const colorMixText = `color-mix(${space ? `${space}, ` : ''}${color1Text}, ${color2Text})`;
 
     const nodeId = this.#stylesContainer.node()?.id;
     if (nodeId !== undefined && childTracingContexts) {

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

@@ -7,10 +7,75 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as SettingsUI from '../../ui/settings/settings.js';
 
 import * as Elements from './elements.js';
 
 const UIStrings = {
+  /**
+   * @description Text of a setting that turn on the measuring rulers when hover over a target.
+   */
+  rulersOnHover: 'Rulers on hover',
+  /**
+   * @description Text of an option that turn on the measuring rulers when hover over a target through the Command Menu.
+   */
+  showRulersOnHover: 'Show rulers on hover',
+  /**
+   * @description Text of a setting that do turn off the measuring rulers when hover over a target.
+   */
+  doNotShowRulersOnHover: 'Don’t show rulers on hover',
+  /**
+   * @description Title of a setting under the Elements category in Settings.
+   */
+  apca: 'Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ratio and AA/AAA guidelines',
+  /**
+   * @description Title of a setting that turns on grid area name labels.
+   */
+  showAreaNames: 'Show area names',
+  /**
+   * @description Title of a setting under the Grid category that turns CSS Grid Area highlighting on.
+   */
+  showGridNamedAreas: 'Show grid named areas',
+  /**
+   * @description Title of a setting under the Grid category that turns CSS Grid Area highlighting off.
+   */
+  doNotShowGridNamedAreas: 'Do not show grid named areas',
+  /**
+   * @description Title of a setting that turns on grid track size labels.
+   */
+  showTrackSizes: 'Show track sizes',
+  /**
+   * @description Title for CSS Grid tooling option.
+   */
+  showGridTrackSizes: 'Show grid track sizes',
+  /**
+   * @description Title for CSS Grid tooling option.
+   */
+  doNotShowGridTrackSizes: 'Do not show grid track sizes',
+  /**
+   * @description Title of a setting that turns on grid extension lines.
+   */
+  extendGridLines: 'Extend grid lines',
+  /**
+   * @description Title of a setting that turns off the grid extension lines.
+   */
+  doNotExtendGridLines: 'Do not extend grid lines',
+  /**
+   * @description Title of a setting that turns on grid line labels.
+   */
+  showLineLabels: 'Show line labels',
+  /**
+   * @description Title of a setting that turns off the grid line labels.
+   */
+  hideLineLabels: 'Hide line labels',
+  /**
+   * @description Title of a setting that turns on grid line number labels.
+   */
+  showLineNumbers: 'Show line numbers',
+  /**
+   * @description Title of a setting that turns on grid line name labels.
+   */
+  showLineNames: 'Show line names',
   /**
    * @description Command for showing the 'Elements' panel. Elements refers to HTML elements.
    */
@@ -696,16 +761,6 @@ UI.Toolbar.registerToolbarItem({
   order: 0,
 });
 
-UI.UIUtils.registerRenderer({
-  contextTypes() {
-    return [SDK.DOMModel.DOMNode, SDK.DOMModel.DeferredDOMNode];
-  },
-  async loadRenderer() {
-    const Elements = await loadElementsModule();
-    return Elements.ElementsTreeOutlineRenderer.Renderer.instance();
-  },
-});
-
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.NONE,
   storageType: Common.Settings.SettingStorageType.GLOBAL,
@@ -714,3 +769,90 @@ Common.Settings.registerSettingExtension({
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,
 });
+
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.showMetricsRulersSettingDescriptor, {
+  category: Common.Settings.SettingCategory.ELEMENTS,
+  title: i18nLazyString(UIStrings.rulersOnHover),
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.showRulersOnHover),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.doNotShowRulersOnHover),
+    },
+  ],
+});
+
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.apcaSettingDescriptor, {
+  category: Common.Settings.SettingCategory.ELEMENTS,
+  title: i18nLazyString(UIStrings.apca),
+});
+
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.showGridAreasSettingDescriptor, {
+  category: Common.Settings.SettingCategory.GRID,
+  title: i18nLazyString(UIStrings.showAreaNames),
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.showGridNamedAreas),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.doNotShowGridNamedAreas),
+    },
+  ],
+});
+
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.showGridTrackSizesSettingDescriptor, {
+  category: Common.Settings.SettingCategory.GRID,
+  title: i18nLazyString(UIStrings.showTrackSizes),
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.showGridTrackSizes),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.doNotShowGridTrackSizes),
+    },
+  ],
+});
+
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.extendGridLinesSettingDescriptor, {
+  category: Common.Settings.SettingCategory.GRID,
+  title: i18nLazyString(UIStrings.extendGridLines),
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.extendGridLines),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.doNotExtendGridLines),
+    },
+  ],
+});
+
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.showGridLineLabelsSettingDescriptor, {
+  category: Common.Settings.SettingCategory.GRID,
+  title: i18nLazyString(UIStrings.showLineLabels),
+  options: [
+    {
+      title: i18nLazyString(UIStrings.hideLineLabels),
+      text: i18nLazyString(UIStrings.hideLineLabels),
+      value: 'none',
+    },
+    {
+      title: i18nLazyString(UIStrings.showLineNumbers),
+      text: i18nLazyString(UIStrings.showLineNumbers),
+      value: 'lineNumbers',
+    },
+    {
+      title: i18nLazyString(UIStrings.showLineNames),
+      text: i18nLazyString(UIStrings.showLineNames),
+      value: 'lineNames',
+    },
+  ],
+});

package/front_end/panels/elements/elements.ts

@@ -45,7 +45,6 @@ import * as ElementsSidebarPane from './ElementsSidebarPane.js';
 import * as ElementStatePaneWidget from './ElementStatePaneWidget.js';
 import * as ElementsTreeElement from './ElementsTreeElement.js';
 import * as ElementsTreeOutline from './ElementsTreeOutline.js';
-import * as ElementsTreeOutlineRenderer from './ElementsTreeOutlineRenderer.js';
 import * as EventListenersWidget from './EventListenersWidget.js';
 import * as ImagePreviewPopover from './ImagePreviewPopover.js';
 import * as InspectElementModeController from './InspectElementModeController.js';
@@ -83,7 +82,6 @@ export {
   ElementStatePaneWidget,
   ElementsTreeElement,
   ElementsTreeOutline,
-  ElementsTreeOutlineRenderer,
   EventListenersWidget,
   ImagePreviewPopover,
   InspectElementModeController,

package/front_end/panels/emulation/DeviceModeView.ts

@@ -287,7 +287,7 @@ export class DeviceModeView extends UI.Widget.VBox {
     const model = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
     this.#showDeviceModeSetting = model.enabledSetting();
     this.#showDeviceModeSetting.setRequiresUserAction(Boolean(Root.Runtime.Runtime.queryParam('hasOtherClients')));
-    this.#showDeviceModeSetting.addChangeListener(this.requestUpdate.bind(this));
+    this.#showDeviceModeSetting.addChangeListener(this.#showDeviceModeChanged, this);
     SDK.TargetManager.TargetManager.instance().addModelListener(SDK.OverlayModel.OverlayModel,
                                                                 SDK.OverlayModel.Events.SCREENSHOT_REQUESTED,
                                                                 this.screenshotRequestedFromOverlay, this);
@@ -296,6 +296,14 @@ export class DeviceModeView extends UI.Widget.VBox {
     UI.ZoomManager.ZoomManager.instance().addEventListener(UI.ZoomManager.Events.ZOOM_CHANGED, this.zoomChanged, this);
   }
 
+  #showDeviceModeChanged(): void {
+    if (!this.#showDeviceModeSetting.get()) {
+      this.model.emulate(EmulationModel.DeviceModeModel.Type.None, null, null);
+      this.model.exitHingeMode();
+    }
+    this.requestUpdate();
+  }
+
   override performUpdate(): void {
     this.#toggleDeviceModeAction.setToggled(this.#showDeviceModeSetting.get());
     const input: DeviceModeViewInput = {

package/front_end/panels/event_listeners/EventListenersView.ts

@@ -14,6 +14,7 @@ import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {frameworkEventListeners, type FrameworkEventListenersObject} from './EventListenersUtils.js';
@@ -325,10 +326,13 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
   private setTitle(object: SDK.RemoteObject.RemoteObject, linkifier: Components.Linkifier.Linkifier): void {
     const title = this.listItemElement.createChild('span', 'event-listener-details');
 
-    const propertyValue = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.createPropertyValue(
-        object, /* wasThrown */ false, /* showPreview */ false);
-    this.valueTitle = propertyValue;
-    title.appendChild(this.valueTitle);
+    const propertyValue = ObjectUI.ObjectPropertiesSection.renderPropertyValue(
+        object, /* wasThrown */ false, /* showPreview */ false, linkifier, /* isSyntheticProperty */ false,
+        /* variableName */ undefined, /* includeNullOrUndefined */ undefined, /* useCustomPreview */ false, element => {
+          this.valueTitle = element;
+        });
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(propertyValue, title);
 
     if (this.#eventListener.canRemove()) {
       const deleteButton = new Buttons.Button.Button();

package/front_end/panels/issues/AffectedTrackingSitesView.ts

@@ -1,10 +1,10 @@
 // Copyright 2023 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
+import {html, render} from '../../ui/lit/lit.js';
 
 import {AffectedResourcesView} from './AffectedResourcesView.js';
 
@@ -21,24 +21,35 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/issues/AffectedTrackingSitesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+export interface ViewInput {
+  trackingSites: readonly string[];
+}
+export type ViewOutput = object;
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+export function defaultView(input: ViewInput, output: ViewOutput, target: HTMLElement): void {
+  render(html`
+      <tbody>
+        ${input.trackingSites.map(site => html`
+          <tr class="affected-resource-directive">
+            <td class="affected-resource-cell" title=${site}>${site}</td>
+          </tr>
+        `)}
+      </tbody>
+    `,
+         target);
+}
+
 export class AffectedTrackingSitesView extends AffectedResourcesView {
+  #view: View = defaultView;
+
   protected override getResourceNameWithCount(count: number): Platform.UIString.LocalizedString {
     return i18nString(UIStrings.nTrackingSites, {n: count});
   }
 
   override update(): void {
-    this.clear();
-    const trackingSites = this.issue.getBounceTrackingSites();
-    let count = 0;
-
-    for (const site of trackingSites) {
-      const row = document.createElement('tr');
-      row.classList.add('affected-resource-directive');
-
-      this.appendIssueDetailCell(row, site);
-      this.affectedResources.appendChild(row);
-      count++;
-    }
-    this.updateAffectedResourceCount(count);
+    const trackingSites = Array.from(this.issue.getBounceTrackingSites());
+    this.#view({trackingSites}, {}, this.affectedResources);
+    this.updateAffectedResourceCount(trackingSites.length);
   }
 }

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -385,7 +385,8 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
       runtimeSetting.setting.addChangeListener(this.recomputePageAuditability.bind(this));
     }
 
-    const javaScriptDisabledSetting = Common.Settings.Settings.instance().moduleSetting('java-script-disabled');
+    const javaScriptDisabledSetting =
+        Common.Settings.Settings.instance().resolve(SDK.SDKSettings.javaScriptDisabledSettingDescriptor);
     javaScriptDisabledSetting.addChangeListener(this.recomputePageAuditability.bind(this));
 
     SDK.TargetManager.TargetManager.instance().observeModels(SDK.ServiceWorkerManager.ServiceWorkerManager, this);
@@ -494,7 +495,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
   }
 
   private javaScriptDisabled(): boolean {
-    return Common.Settings.Settings.instance().moduleSetting('java-script-disabled').get();
+    return Common.Settings.Settings.instance().resolve(SDK.SDKSettings.javaScriptDisabledSettingDescriptor).get();
   }
 
   private async hasImportantResourcesNotCleared(): Promise<string> {