chrome-devtools-frontend 1.0.981537 → 1.0.995491

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -257,6 +257,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     this.#mainContainer.setSidebarMinimized(true);
 
     this.#sideBar = new CSSOverviewSidebarPanel();
+    this.#sideBar.setMinimumSize(100, 25);
     this.splitWidget().setSidebarWidget(this.#sideBar);
     this.splitWidget().setMainWidget(this.#mainContainer);
 
@@ -788,7 +789,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
   #colorsToFragment(section: string, color: string): UI.Fragment.Fragment|undefined {
     const blockFragment = UI.Fragment.Fragment.build`<li>
       <button data-type="color" data-color="${color}" data-section="${section}" class="block" $="color"></button>
-      <div class="block-title">${color}</div>
+      <div class="block-title color-text">${color}</div>
     </li>`;
 
     const block = (blockFragment.$('color') as HTMLElement);

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

@@ -6,6 +6,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as PanelFeedback from '../../../ui/components/panel_feedback/panel_feedback.js';
+import * as PanelIntroductionSteps from '../../../ui/components/panel_introduction_steps/panel_introduction_steps.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import cssOverviewStartViewStyles from './cssOverviewStartView.css.js';
@@ -78,12 +79,12 @@ export class CSSOverviewStartView extends HTMLElement {
     // clang-format off
     render(html`
       <div class="css-overview-start-view">
-        <h1 class="summary-header">${i18nString(UIStrings.identifyCSSImprovements)}</h1>
-        <ol class="summary-list">
-          <li>${i18nString(UIStrings.capturePageCSSOverview)}</li>
-          <li>${i18nString(UIStrings.identifyCSSImprovementsWithExampleIssues)}</li>
-          <li>${i18nString(UIStrings.locateAffectedElements)}</li>
-        </ol>
+        <${PanelIntroductionSteps.PanelIntroductionSteps.PanelIntroductionSteps.litTagName}>
+          <span slot="title">${i18nString(UIStrings.identifyCSSImprovements)}</span>
+          <span slot="step-1">${i18nString(UIStrings.capturePageCSSOverview)}</span>
+          <span slot="step-2">${i18nString(UIStrings.identifyCSSImprovementsWithExampleIssues)}</span>
+          <span slot="step-3">${i18nString(UIStrings.locateAffectedElements)}</span>
+        </${PanelIntroductionSteps.PanelIntroductionSteps.PanelIntroductionSteps.litTagName}>
         <div class="start-capture-wrapper">
           <${Buttons.Button.Button.litTagName}
             class="start-capture"

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

@@ -17,54 +17,6 @@ h1 {
   overflow: auto;
 }
 
-.summary-header {
-  color: var(--color-text-primary);
-  font-size: 18px;
-  font-weight: normal;
-  letter-spacing: 0.02em;
-  line-height: 1.33;
-  margin: 0;
-  padding: 0;
-}
-
-.summary-list {
-  counter-reset: custom-counter;
-  list-style: none;
-  margin: 16px 0 30px 30px;
-  padding: 0;
-}
-
-.summary-list li {
-  color: var(--color-text-primary);
-  counter-increment: custom-counter;
-  font-size: 13px;
-  letter-spacing: 0.03em;
-  line-height: 1.54;
-  margin-bottom: 9px;
-  position: relative;
-}
-
-.summary-list li::before {
-  --override-color-counter-background: rgba(26 115 232 / 25%);
-
-  box-sizing: border-box;
-  background: var(--override-color-counter-background);
-  border-radius: 50%;
-  color: var(--color-primary);
-  content: counter(custom-counter);
-  font-size: 12px;
-  height: 18px;
-  left: -30px;
-  line-height: 20px;
-  position: absolute;
-  text-align: center;
-  top: 0;
-  width: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .start-capture-wrapper {
   width: fit-content;
 }

package/front_end/panels/css_overview/cssOverviewCompletedView.css

@@ -95,6 +95,11 @@
   letter-spacing: 0;
 }
 
+.color-text {
+  cursor: text;
+  user-select: text;
+}
+
 .results-section {
   flex-shrink: 0;
   border-bottom: 1px solid var(--color-details-hairline);

package/front_end/panels/css_overview/cssOverviewSidebarPanel.css

@@ -17,6 +17,7 @@
   align-items: center;
   cursor: pointer;
   color: var(--color-text-primary);
+  white-space: nowrap;
 }
 
 .overview-sidebar-panel-item:hover,
@@ -31,4 +32,5 @@
 
 .overview-toolbar {
   border-bottom: 1px solid var(--color-details-hairline);
+  flex: 0 0 auto;
 }

package/front_end/panels/elements/ColorSwatchPopoverIcon.ts

@@ -9,8 +9,9 @@ import * as ColorPicker from '../../ui/legacy/components/color_picker/color_pick
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import type {StylePropertiesSection} from './StylePropertiesSection.js';
 import type {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
-import type {StylePropertiesSection, StylesSidebarPane} from './StylesSidebarPane.js';
+import type {StylesSidebarPane} from './StylesSidebarPane.js';
 
 const UIStrings = {
   /**

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -48,7 +48,8 @@ import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {PlatformFontsWidget} from './PlatformFontsWidget.js';
 import type {Category} from './PropertyNameCategories.js';
 import {categorizePropertyName, DefaultCategoryOrder} from './PropertyNameCategories.js';
-import {IdleCallbackManager, StylePropertiesSection, StylesSidebarPane, StylesSidebarPropertyRenderer} from './StylesSidebarPane.js';
+import {StylePropertiesSection} from './StylePropertiesSection.js';
+import {IdleCallbackManager, StylesSidebarPane, StylesSidebarPropertyRenderer} from './StylesSidebarPane.js';
 
 const UIStrings = {
   /**

package/front_end/panels/elements/ElementStatePaneWidget.ts

@@ -104,10 +104,6 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
   }
 
   private update(): void {
-    if (!this.isShowing()) {
-      return;
-    }
-
     let node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
     if (node) {
       node = node.enclosingElementOrSelf();
@@ -127,6 +123,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
         input.checked = false;
       }
     }
+    ButtonProvider.instance().item().setToggled(this.inputs.some(input => input.checked));
   }
 }
 
@@ -138,6 +135,7 @@ export class ButtonProvider implements UI.Toolbar.Provider {
   private constructor() {
     this.button = new UI.Toolbar.ToolbarToggle(i18nString(UIStrings.toggleElementState), '');
     this.button.setText(i18n.i18n.lockedString(':hov'));
+    this.button.setToggleWithDot(true);
     this.button.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this.clicked, this);
     this.button.element.classList.add('monospace');
     this.view = new ElementStatePaneWidget();
@@ -155,10 +153,10 @@ export class ButtonProvider implements UI.Toolbar.Provider {
   }
 
   private clicked(): void {
-    ElementsPanel.instance().showToolbarPane(!this.view.isShowing() ? this.view : null, this.button);
+    ElementsPanel.instance().showToolbarPane(!this.view.isShowing() ? this.view : null, null);
   }
 
-  item(): UI.Toolbar.ToolbarItem {
+  item(): UI.Toolbar.ToolbarToggle {
     return this.button;
   }
 }

package/front_end/panels/elements/ElementsPanel.ts

@@ -151,6 +151,15 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsPanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+/**
+ * These strings need to match the `SidebarPaneCodes` in UserMetrics.ts. DevTools
+ * collects usage metrics for the different sidebar tabs.
+ */
+export const enum SidebarPaneTabId {
+  Computed = 'Computed',
+  Styles = 'Styles',
+}
+
 const createAccessibilityTreeToggleButton = (isActive: boolean): HTMLElement => {
   const button = new Buttons.Button.Button();
   const title =
@@ -922,7 +931,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
       stylePaneWrapperElement.style.setProperty('left', `${- 1 * largeLength}px`);
       stylePaneWrapperElement.style.setProperty('padding-left', `${largeLength}px`);
       stylePaneWrapperElement.style.setProperty('width', `calc(100% + ${largeLength}px)`);
-      stylePaneWrapperElement.style.setProperty('position', 'fixed');
+      stylePaneWrapperElement.style.setProperty('position', 'absolute');
 
       stylePaneWrapperElement.window().addEventListener('blur', uninstallHackBound);
       stylePaneWrapperElement.window().addEventListener('contextmenu', uninstallHackBound, true);
@@ -1002,10 +1011,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     const tabSelected = (event: Common.EventTarget.EventTargetEvent<UI.TabbedPane.EventData>): void => {
       const {tabId} = event.data;
-      if (tabId === i18nString(UIStrings.computed)) {
+      if (tabId === SidebarPaneTabId.Computed) {
         computedStylePanesWrapper.show(computedView.element);
         showMetricsWidgetInComputedPane();
-      } else if (tabId === i18nString(UIStrings.styles)) {
+      } else if (tabId === SidebarPaneTabId.Styles) {
         stylesSplitWidget.setSidebarWidget(computedStylePanesWrapper);
         showMetricsWidgetInStylesPane();
       }
@@ -1034,12 +1043,14 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     UI.ARIAUtils.markAsComplementary(contentElement);
     UI.ARIAUtils.setAccessibleName(contentElement, i18nString(UIStrings.sidePanelContent));
 
-    const stylesView = new UI.View.SimpleView(i18nString(UIStrings.styles));
+    const stylesView =
+        new UI.View.SimpleView(i18nString(UIStrings.styles), /* isWebComponent */ undefined, SidebarPaneTabId.Styles);
     this.sidebarPaneView.appendView(stylesView);
     stylesView.element.classList.add('flex-auto');
     stylesSplitWidget.show(stylesView.element);
 
-    const computedView = new UI.View.SimpleView(i18nString(UIStrings.computed));
+    const computedView = new UI.View.SimpleView(
+        i18nString(UIStrings.computed), /* isWebComponent */ undefined, SidebarPaneTabId.Computed);
     computedView.element.classList.add('composite', 'fill');
 
     tabbedPane.addEventListener(UI.TabbedPane.Events.TabSelected, tabSelected, this);

package/front_end/panels/elements/ImagePreviewPopover.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Platform from '../../core/platform/platform.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -45,7 +46,8 @@ export class ImagePreviewPopover {
         }
         const precomputedFeatures = await Components.ImagePreview.ImagePreview.loadDimensionsForNode(node);
         const preview = await Components.ImagePreview.ImagePreview.build(
-            node.domModel().target(), href, true, {imageAltText: undefined, precomputedFeatures});
+            node.domModel().target(), href as Platform.DevToolsPath.UrlString, true,
+            {imageAltText: undefined, precomputedFeatures});
         if (preview) {
           popover.contentElement.appendChild(preview);
         }
@@ -58,14 +60,14 @@ export class ImagePreviewPopover {
     this.popover.hidePopover();
   }
 
-  static setImageUrl(element: Element, url: string): Element {
+  static setImageUrl(element: Element, url: Platform.DevToolsPath.UrlString): Element {
     elementToURLMap.set(element, url);
     return element;
   }
 
-  static getImageURL(element: Element): string|undefined {
+  static getImageURL(element: Element): Platform.DevToolsPath.UrlString|undefined {
     return elementToURLMap.get(element);
   }
 }
 
-const elementToURLMap = new WeakMap<Element, string>();
+const elementToURLMap = new WeakMap<Element, Platform.DevToolsPath.UrlString>();

package/front_end/panels/elements/PropertiesWidget.ts

@@ -35,7 +35,6 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as Protocol from '../../generated/protocol.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -147,32 +146,13 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
   }
 
   private filterList(): void {
-    const isHidden = (property: SDK.RemoteObject.RemoteObjectProperty): boolean => {
-      if (!this.showAllPropertiesSetting.get()) {
-        if (SDK.RemoteObject.RemoteObject.isNullOrUndefined(property.value)) {
-          return true;
-        }
-        if (property.value?.type === Protocol.Runtime.RemoteObjectType.Undefined ||
-            (property.value?.type === Protocol.Runtime.RemoteObjectType.Object &&
-             property.value.subtype === Protocol.Runtime.RemoteObjectSubtype.Null)) {
-          return true;
-        }
-      }
-      if (this.filterRegex !== null) {
-        if (this.filterRegex.test(property.name)) {
-          return false;
-        }
-        if (this.filterRegex.test(property.value?.description ?? '')) {
-          return false;
-        }
-        return true;
-      }
-      return false;
-    };
     let noMatches = true;
     for (const element of this.treeOutline.rootElement().children()) {
       const {property} = element as ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement;
-      const hidden = isHidden(property);
+      const hidden = !property.match({
+        includeNullOrUndefinedValues: this.showAllPropertiesSetting.get(),
+        regex: this.filterRegex,
+      });
       if (!hidden) {
         noMatches = false;
       }

package/front_end/panels/elements/StyleEditorWidget.ts

@@ -6,8 +6,9 @@ import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import type * as ElementsComponents from './components/components.js';
 
+import type {StylePropertiesSection} from './StylePropertiesSection.js';
 import {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
-import type {StylePropertiesSection, StylesSidebarPane} from './StylesSidebarPane.js';
+import type {StylesSidebarPane} from './StylesSidebarPane.js';
 
 type PropertySelectedEvent = ElementsComponents.StylePropertyEditor.PropertySelectedEvent;
 type PropertyDeselectedEvent = ElementsComponents.StylePropertyEditor.PropertyDeselectedEvent;