chrome-devtools-frontend 1.0.1582745 → 1.0.1585538

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -702,15 +702,27 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       clickableElement.tabIndex = -1;
     }
     clickableElement.appendChild(messageElement);
-    const stackTraceElement = contentElement.createChild('div');
+    const stackTraceElement = contentElement.createChild('div', 'hidden-stack-trace');
+    const targetManager = SDK.TargetManager.TargetManager.instance();
+    const stackTraceTarget = target ?? targetManager.primaryPageTarget() ?? targetManager.rootTarget();
     const stackTracePreview = new Components.JSPresentationUtils.StackTracePreviewContent(
-        undefined, target ?? undefined, this.linkifier, {runtimeStackTrace: stackTrace, widthConstrained: true});
+        undefined, stackTraceTarget ?? undefined, this.linkifier, {widthConstrained: true});
+    if (stackTraceTarget && stackTrace) {
+      const selectableChildIndex = this.selectableChildren.length;
+      void Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
+          .createStackTraceFromProtocolRuntime(stackTrace, stackTraceTarget)
+          .then(stackTrace => {
+            stackTracePreview.stackTrace = stackTrace;
+            return stackTracePreview.updateComplete;
+          })
+          .then(() => {
+            const selectableLinks =
+                stackTracePreview.linkElements.map(element => ({element, forceSelect: () => element.focus()}));
+            this.selectableChildren.splice(selectableChildIndex, 0, ...selectableLinks);
+          });
+    }
     stackTracePreview.markAsRoot();
     stackTracePreview.show(stackTraceElement);
-    for (const linkElement of stackTracePreview.linkElements) {
-      this.selectableChildren.push({element: linkElement, forceSelect: () => linkElement.focus()});
-    }
-    stackTraceElement.classList.add('hidden-stack-trace');
     UI.ARIAUtils.setLabel(
         contentElement, `${messageElement.textContent} ${i18nString(UIStrings.stackMessageCollapsed)}`);
     UI.ARIAUtils.markAsGroup(stackTraceElement);
@@ -2351,11 +2363,6 @@ export class ConsoleTableMessageView extends ConsoleViewMessage {
  */
 const MaxLengthToIgnoreHighlighter = 10000;
 
-/**
- * @constant
- */
-export const MaxLengthForLinks = 40;
-
 let maxTokenizableStringLength = 10000;
 let longStringVisibleLength = 5000;
 

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -38,7 +38,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as ComputedStyleModule from '../../models/computed_style/computed_style.js';
+import type * as ComputedStyleModule from '../../models/computed_style/computed_style.js';
 import * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -46,7 +46,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 
 import * as ElementsComponents from './components/components.js';
-import computedStyleSidebarPaneStyles from './computedStyleSidebarPane.css.js';
+import computedStyleWidgetStyles from './computedStyleWidget.css.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {PlatformFontsWidget} from './PlatformFontsWidget.js';
 import {categorizePropertyName, type Category, DefaultCategoryOrder} from './PropertyNameCategories.js';
@@ -54,6 +54,7 @@ import {Renderer, rendererBase, type RenderingContext, StringRenderer, URLRender
 import {StylePropertiesSection} from './StylePropertiesSection.js';
 
 const {html, render} = Lit;
+const {bindToSetting} = UI.UIUtils;
 
 const UIStrings = {
   /**
@@ -263,9 +264,12 @@ type ComputedStyleData = {
 
 interface ComputedStyleWidgetInput {
   computedStylesTree: TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>;
-  toolbar: HTMLElement;
   hasMatches: boolean;
-  computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
+  computedStyleModel?: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
+  showInheritedComputedStylePropertiesSetting: Common.Settings.Setting<boolean>;
+  groupComputedStylesSetting: Common.Settings.Setting<boolean>;
+  onFilterChanged: (event: CustomEvent<string>) => void;
+  filterText: string;
 }
 
 type View = (input: ComputedStyleWidgetInput, output: null, target: HTMLElement) => void;
@@ -273,23 +277,38 @@ type View = (input: ComputedStyleWidgetInput, output: null, target: HTMLElement)
 export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format off
   render(html`
-    <div class="styles-sidebar-pane-toolbar">${input.toolbar}</div>
-    <div class="computed-style-tree-outline-container">
-      ${input.computedStylesTree}
+    <style>${computedStyleWidgetStyles}</style>
+    <div class="styles-sidebar-pane-toolbar">
+      <devtools-toolbar class="styles-pane-toolbar" role="presentation">
+        <devtools-toolbar-input
+          type="filter"
+          autofocus
+          value=${input.filterText}
+          @change=${input.onFilterChanged}
+        ></devtools-toolbar-input>
+        <devtools-checkbox
+          title=${i18nString(UIStrings.showAll)}
+          ${bindToSetting(input.showInheritedComputedStylePropertiesSetting)}
+        >${i18nString(UIStrings.showAll)}</devtools-checkbox>
+        <devtools-checkbox
+          title=${i18nString(UIStrings.group)}
+          ${bindToSetting(input.groupComputedStylesSetting)}
+        >${i18nString(UIStrings.group)}</devtools-checkbox>
+      </devtools-toolbar>
     </div>
+    ${input.computedStylesTree}
     ${!input.hasMatches ? html`<div class="gray-info-message">${i18nString(UIStrings.noMatchingProperty)}</div>` : ''}
-    <div class="platform-fonts-widget-container">
-      <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PlatformFontsWidget, { sharedModel: input.computedStyleModel})}></devtools-widget>
-    </div>
+    ${input.computedStyleModel ? html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PlatformFontsWidget, { sharedModel: input.computedStyleModel})}></devtools-widget>` : ''}
   `, target);
   // clang-format on
 };
 
 export class ComputedStyleWidget extends UI.Widget.VBox {
-  private computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
+  #computedStyleModel?: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
+  #nodeStyle: ComputedStyleModule.ComputedStyleModel.ComputedStyle|null = null;
+  #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null = null;
   private readonly showInheritedComputedStylePropertiesSetting: Common.Settings.Setting<boolean>;
   private readonly groupComputedStylesSetting: Common.Settings.Setting<boolean>;
-  input: UI.Toolbar.ToolbarInput;
   private filterRegex: RegExp|null;
   private readonly linkifier: Components.Linkifier.Linkifier;
   private readonly imagePreviewPopover: ImagePreviewPopover;
@@ -297,21 +316,14 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   #computedStylesTree = new TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>();
   #treeData?: TreeOutline.TreeOutline.TreeOutlineData<ComputedStyleData>;
   readonly #view: View;
-  private readonly toolbarElement: HTMLElement;
+  #filterText = '';
 
-  constructor(computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel) {
+  constructor() {
     super({useShadowDom: true});
     this.#view = DEFAULT_VIEW;
-    this.registerRequiredCSS(computedStyleSidebarPaneStyles);
 
     this.contentElement.classList.add('styles-sidebar-computed-style-widget');
 
-    this.computedStyleModel = computedStyleModel;
-    this.computedStyleModel.addEventListener(
-        ComputedStyleModule.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.requestUpdate, this);
-    this.computedStyleModel.addEventListener(
-        ComputedStyleModule.ComputedStyleModel.Events.COMPUTED_STYLE_CHANGED, this.requestUpdate, this);
-
     this.showInheritedComputedStylePropertiesSetting =
         Common.Settings.Settings.instance().createSetting('show-inherited-computed-style-properties', false);
     this.showInheritedComputedStylePropertiesSetting.addChangeListener(this.requestUpdate.bind(this));
@@ -321,32 +333,15 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       this.requestUpdate();
     });
 
-    this.toolbarElement = document.createElement('div');
-    this.toolbarElement.classList.add('hbox', 'styles-sidebar-pane-toolbar');
-    const toolbar = document.createElement('devtools-toolbar');
-    toolbar.classList.add('styles-pane-toolbar');
-    this.toolbarElement.appendChild(toolbar);
-
-    const filterInput = new UI.Toolbar.ToolbarFilter(undefined, 1, 1, undefined, undefined, false);
-    filterInput.addEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, this.onFilterChanged, this);
-    toolbar.appendToolbarItem(filterInput);
-    this.input = filterInput;
     this.filterRegex = null;
-
-    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(
-        this.showInheritedComputedStylePropertiesSetting, undefined, i18nString(UIStrings.showAll)));
-    toolbar.appendToolbarItem(
-        new UI.Toolbar.ToolbarSettingCheckbox(this.groupComputedStylesSetting, undefined, i18nString(UIStrings.group)));
-
     this.linkifier = new Components.Linkifier.Linkifier(maxLinkLength);
-
     this.imagePreviewPopover = new ImagePreviewPopover(this.contentElement, event => {
       const link = event.composedPath()[0];
       if (link instanceof Element) {
         return link;
       }
       return null;
-    }, () => this.computedStyleModel.node);
+    }, () => this.#computedStyleModel ? this.#computedStyleModel.node : null);
 
     this.#updateView({hasMatches: true});
   }
@@ -373,15 +368,46 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     this.#view(
         {
           computedStylesTree: this.#computedStylesTree,
-          toolbar: this.toolbarElement,
           hasMatches,
-          computedStyleModel: this.computedStyleModel,
+          computedStyleModel: this.#computedStyleModel,
+          showInheritedComputedStylePropertiesSetting: this.showInheritedComputedStylePropertiesSetting,
+          groupComputedStylesSetting: this.groupComputedStylesSetting,
+          onFilterChanged: this.onFilterChanged.bind(this),
+          filterText: this.#filterText,
         },
         null, this.contentElement);
   }
 
+  get nodeStyle(): ComputedStyleModule.ComputedStyleModel.ComputedStyle|null {
+    return this.#nodeStyle;
+  }
+
+  set nodeStyle(nodeStyle: ComputedStyleModule.ComputedStyleModel.ComputedStyle|null) {
+    this.#nodeStyle = nodeStyle;
+    this.requestUpdate();
+  }
+
+  get matchedStyles(): SDK.CSSMatchedStyles.CSSMatchedStyles|null {
+    return this.#matchedStyles;
+  }
+
+  set matchedStyles(matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null) {
+    this.#matchedStyles = matchedStyles;
+    this.requestUpdate();
+  }
+
+  get computedStyleModel(): ComputedStyleModule.ComputedStyleModel.ComputedStyleModel|undefined {
+    return this.#computedStyleModel;
+  }
+
+  set computedStyleModel(computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel) {
+    this.#computedStyleModel = computedStyleModel;
+    this.requestUpdate();
+  }
+
   override async performUpdate(): Promise<void> {
-    const {computedStyle: nodeStyles, matchedStyles} = await this.computedStyleModel.fetchAllComputedStyleInfo();
+    const nodeStyles = this.#nodeStyle;
+    const matchedStyles = this.#matchedStyles;
     if (!nodeStyles || !matchedStyles) {
       this.#updateView({hasMatches: false});
       return;
@@ -399,7 +425,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles): Promise<void> {
     this.imagePreviewPopover.hide();
     this.linkifier.reset();
-    const cssModel = this.computedStyleModel.cssModel();
+    const cssModel = this.#computedStyleModel?.cssModel();
     if (!cssModel) {
       return;
     }
@@ -442,7 +468,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null): Promise<void> {
     this.imagePreviewPopover.hide();
     this.linkifier.reset();
-    const cssModel = this.computedStyleModel.cssModel();
+    const cssModel = this.#computedStyleModel?.cssModel();
     if (!nodeStyle || !matchedStyles || !cssModel) {
       this.#updateView({hasMatches: false});
       return;
@@ -628,13 +654,14 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     return result;
   }
 
-  private async onFilterChanged(event: Common.EventTarget.EventTargetEvent<string>): Promise<void> {
+  private async onFilterChanged(event: CustomEvent<string>): Promise<void> {
+    this.#filterText = event.detail;
     await this.filterComputedStyles(
-        event.data ? new RegExp(Platform.StringUtilities.escapeForRegExp(event.data), 'i') : null);
+        event.detail ? new RegExp(Platform.StringUtilities.escapeForRegExp(event.detail), 'i') : null);
 
-    if (event.data && this.#computedStylesTree.data && this.#computedStylesTree.data.tree) {
+    if (event.detail && this.#computedStylesTree.data && this.#computedStylesTree.data.tree) {
       UI.ARIAUtils.LiveAnnouncer.alert(i18nString(
-          UIStrings.filterUpdateAriaText, {PH1: event.data, PH2: this.#computedStylesTree.data.tree.length}));
+          UIStrings.filterUpdateAriaText, {PH1: event.detail, PH2: this.#computedStylesTree.data.tree.length}));
     }
   }
 
@@ -646,6 +673,11 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     return this.filterAlphabeticalList();
   }
 
+  setFilterInput(text: string): void {
+    this.#filterText = text;
+    this.requestUpdate();
+  }
+
   private nodeFilter(node: TreeOutline.TreeOutlineUtils.TreeNode<ComputedStyleData>): boolean {
     const regex = this.filterRegex;
     const data = node.treeNodeData;

package/front_end/panels/elements/ElementStatePaneWidget.ts

@@ -106,7 +106,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         jslog=${VisualLogging.pane('element-states')}>
       <div class="page-state-checkbox">
         <devtools-checkbox class="small" title=${i18nString(UIStrings.emulatesAFocusedPage)}
-            jslog=${VisualLogging.toggle('emulate-page-focus').track({change: true})} ${bindToSetting('emulate-page-focus')}>${
+            ${bindToSetting('emulate-page-focus')}>${
           i18nString(UIStrings.emulateFocusedPage)}</devtools-checkbox>
         <devtools-button
             @click=${() => UIHelpers.openInNewTab('https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page')}

package/front_end/panels/elements/ElementsPanel.ts

@@ -212,7 +212,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   private readonly accessibilityTreeView: AccessibilityTreeView|undefined;
   private breadcrumbs: ElementsComponents.ElementsBreadcrumbs.ElementsBreadcrumbs;
   stylesWidget: StylesSidebarPane;
-  private readonly computedStyleWidget: ComputedStyleWidget;
+  readonly #computedStyleWidget: ComputedStyleWidget;
   private readonly metricsWidget: MetricsSidebarPane;
   private searchResults!: Array<{
     domModel: SDK.DOMModel.DOMModel,
@@ -315,7 +315,13 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
         ComputedStyleWidget, this.evaluateTrackingComputedStyleUpdatesForNode, this);
 
     this.stylesWidget = new StylesSidebarPane(this.#computedStyleModel);
-    this.computedStyleWidget = new ComputedStyleWidget(this.#computedStyleModel);
+    this.#computedStyleWidget = new ComputedStyleWidget();
+    this.#computedStyleWidget.computedStyleModel = this.#computedStyleModel;
+    this.#computedStyleModel.addEventListener(
+        ComputedStyle.ComputedStyleModel.Events.COMPUTED_STYLE_CHANGED, this.#updateComputedStyles, this);
+    this.#computedStyleModel.addEventListener(
+        ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.#updateComputedStyles, this);
+
     this.metricsWidget = new MetricsSidebarPane(this.#computedStyleModel);
 
     Common.Settings.Settings.instance()
@@ -374,6 +380,13 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
         shouldTrackComputedStyleUpdates ? selectedNode.id : undefined);
   }, 100);
 
+  async #updateComputedStyles(): Promise<void> {
+    const computedStyle = await this.#computedStyleModel.fetchComputedStyle();
+    const matchedCascade = await this.#computedStyleModel.fetchMatchedCascade();
+    this.#computedStyleWidget.nodeStyle = computedStyle;
+    this.#computedStyleWidget.matchedStyles = matchedCascade;
+  }
+
   private handleElementExpanded(): void {
     if (Annotations.AnnotationRepository.annotationsEnabled()) {
       void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(Annotations.AnnotationType.ELEMENT_NODE);
@@ -1007,7 +1020,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     const computedStylePanesWrapper = new UI.Widget.VBox();
     computedStylePanesWrapper.element.classList.add('style-panes-wrapper');
     computedStylePanesWrapper.element.setAttribute('jslog', `${VisualLogging.pane('computed').track({resize: true})}`);
-    this.computedStyleWidget.show(computedStylePanesWrapper.element);
+    this.#computedStyleWidget.show(computedStylePanesWrapper.element);
 
     const stylesSplitWidget = new UI.SplitWidget.SplitWidget(
         true /* isVertical */, true /* secondIsSidebar */, 'elements.styles.sidebar.width', 100);
@@ -1024,7 +1037,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     });
 
     const showMetricsWidgetInComputedPane = (): void => {
-      this.metricsWidget.show(computedStylePanesWrapper.element, this.computedStyleWidget.element);
+      this.metricsWidget.show(computedStylePanesWrapper.element, this.#computedStyleWidget.element);
       this.stylesWidget.removeEventListener(StylesSidebarPaneEvents.STYLES_UPDATE_COMPLETED, toggleMetricsWidget);
     };
 
@@ -1147,7 +1160,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   }
 
   getComputedStyleWidget(): ComputedStyleWidget {
-    return this.computedStyleWidget;
+    return this.#computedStyleWidget;
   }
 
   private setupStyleTracking(cssModel: SDK.CSSModel.CSSModel): void {