chrome-devtools-frontend 1.0.1548980 → 1.0.1550444

package/front_end/panels/console/ConsolePrompt.ts

@@ -13,8 +13,8 @@ import * as Badges from '../../models/badges/badges.js';
 import * as Formatter from '../../models/formatter/formatter.js';
 import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -57,7 +57,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   private requestPreviewBound: () => Promise<void>;
   private requestPreviewCurrent = 0;
   private readonly innerPreviewElement: HTMLElement;
-  private readonly promptIcon: IconButton.Icon.Icon;
+  private readonly promptIcon: Icon;
   private readonly iconThrottler: Common.Throttler.Throttler;
   private readonly eagerEvalSetting: Common.Settings.Setting<boolean>;
   protected previewRequestForTest: Promise<void>|null;
@@ -119,7 +119,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.textChangeThrottler = new Common.Throttler.Throttler(150);
     this.requestPreviewBound = this.requestPreview.bind(this);
     this.innerPreviewElement = this.eagerPreviewElement.createChild('div', 'console-eager-inner-preview');
-    const previewIcon = new IconButton.Icon.Icon();
+    const previewIcon = new Icon();
     previewIcon.name = 'chevron-left-dot';
     previewIcon.classList.add('preview-result-icon', 'medium');
     this.eagerPreviewElement.appendChild(previewIcon);
@@ -127,7 +127,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     const editorContainerElement = this.element.createChild('div', 'console-prompt-editor-container');
     this.element.appendChild(this.eagerPreviewElement);
 
-    this.promptIcon = new IconButton.Icon.Icon();
+    this.promptIcon = new Icon();
     this.promptIcon.name = 'chevron-right';
     this.promptIcon.style.color = 'var(--icon-action)';
     this.promptIcon.classList.add('console-prompt-icon', 'medium');

package/front_end/panels/console/ConsoleView.ts

@@ -47,8 +47,9 @@ import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
+import {createIcon} from '../../ui/kit/kit.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
@@ -1618,7 +1619,7 @@ export class ConsoleView extends UI.Widget.VBox implements
       matchRange = this.regexMatchRanges[this.currentMatchRangeIndex];
       const message = this.visibleViewMessages[matchRange.messageIndex];
       message.searchHighlightNode(matchRange.matchIndex)
-          .classList.remove(UI.UIUtils.highlightedCurrentSearchResultClassName);
+          .classList.remove(Highlighting.highlightedCurrentSearchResultClassName);
     }
 
     index = Platform.NumberUtilities.mod(index, this.regexMatchRanges.length);
@@ -1627,7 +1628,7 @@ export class ConsoleView extends UI.Widget.VBox implements
     matchRange = this.regexMatchRanges[index];
     const message = this.visibleViewMessages[matchRange.messageIndex];
     const highlightNode = message.searchHighlightNode(matchRange.matchIndex);
-    highlightNode.classList.add(UI.UIUtils.highlightedCurrentSearchResultClassName);
+    highlightNode.classList.add(Highlighting.highlightedCurrentSearchResultClassName);
     if (scrollIntoView) {
       this.viewport.scrollItemIntoView(matchRange.messageIndex);
       highlightNode.scrollIntoViewIfNeeded();
@@ -1780,7 +1781,7 @@ export class ConsoleViewFilter {
 
     this.levelMenuButton =
         new UI.Toolbar.ToolbarMenuButton(this.appendLevelMenuItems.bind(this), undefined, undefined, 'log-level');
-    const levelMenuButtonInfoIcon = IconButton.Icon.create('info', 'console-sidebar-levels-info');
+    const levelMenuButtonInfoIcon = createIcon('info', 'console-sidebar-levels-info');
     levelMenuButtonInfoIcon.title = i18nString(UIStrings.overriddenByFilterSidebar);
     this.levelMenuButtonInfo = new UI.Toolbar.ToolbarItem(levelMenuButtonInfoIcon);
     this.levelMenuButtonInfo.setVisible(false);

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -49,9 +49,10 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 import * as RequestLinkIcon from '../../ui/components/request_link_icon/request_link_icon.js';
+import {createIcon, Icon} from '../../ui/kit/kit.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 // eslint-disable-next-line @devtools/es-modules-import
@@ -316,14 +317,14 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   protected consoleRowWrapper: HTMLElement|null = null;
   private readonly previewFormatter: ObjectUI.RemoteObjectPreviewFormatter.RemoteObjectPreviewFormatter;
   private searchRegexInternal: RegExp|null;
-  protected messageIcon: IconButton.Icon.Icon|null;
+  protected messageIcon: Icon|null;
   private traceExpanded: boolean;
   private expandTrace: ((arg0: boolean) => void)|null;
   protected anchorElement: HTMLElement|null;
   protected contentElementInternal: HTMLElement|null;
   private nestingLevelMarkers: HTMLElement[]|null;
   private searchHighlightNodes: Element[];
-  private searchHighlightNodeChanges: UI.UIUtils.HighlightChange[];
+  private searchHighlightNodeChanges: Highlighting.HighlightChange[];
   private isVisibleInternal: boolean;
   private cachedHeight: number;
   private messagePrefix: string;
@@ -661,7 +662,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   }
 
   private buildMessageWithStackTrace(runtimeModel: SDK.RuntimeModel.RuntimeModel): HTMLElement {
-    const icon = IconButton.Icon.create('triangle-right', 'console-message-expand-icon');
+    const icon = createIcon('triangle-right', 'console-message-expand-icon');
     const {stackTraceElement, contentElement, messageElement, clickableElement, toggleElement} =
         this.buildMessageHelper(runtimeModel.target(), this.message.stackTrace, icon);
     // We debounce the trace expansion metric in case this was accidental.
@@ -710,8 +711,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   }
 
   private buildMessageHelper(
-      target: SDK.Target.Target|null, stackTrace: Protocol.Runtime.StackTrace|undefined,
-      icon: IconButton.Icon.Icon|null): {
+      target: SDK.Target.Target|null, stackTrace: Protocol.Runtime.StackTrace|undefined, icon: Icon|null): {
     stackTraceElement: HTMLElement,
     contentElement: HTMLElement,
     messageElement: HTMLElement,
@@ -1567,7 +1567,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   }
 
   #createHoverButton(): HTMLButtonElement {
-    const icon = new IconButton.Icon.Icon();
+    const icon = new Icon();
     icon.name = 'lightbulb-spark';
     icon.style.color = 'var(--devtools-icon-color)';
     icon.classList.add('medium');
@@ -1630,7 +1630,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       return;
     }
 
-    this.messageIcon = new IconButton.Icon.Icon();
+    this.messageIcon = new Icon();
     this.messageIcon.name = iconName;
     this.messageIcon.style.color = color;
     this.messageIcon.classList.add('message-level-icon', 'small');
@@ -1739,7 +1739,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
 
   setSearchRegex(regex: RegExp|null): void {
     if (this.searchHighlightNodeChanges?.length) {
-      UI.UIUtils.revertDomChanges(this.searchHighlightNodeChanges);
+      Highlighting.revertDomChanges(this.searchHighlightNodeChanges);
     }
     this.searchRegexInternal = regex;
     this.searchHighlightNodes = [];
@@ -1757,8 +1757,9 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     }
 
     if (sourceRanges.length) {
-      this.searchHighlightNodes =
-          UI.UIUtils.highlightSearchResults(this.contentElement(), sourceRanges, this.searchHighlightNodeChanges);
+      this.searchHighlightNodes = Highlighting.highlightRangesWithStyleClass(
+          this.contentElement(), sourceRanges, Highlighting.highlightedSearchResultClassName,
+          this.searchHighlightNodeChanges);
     }
   }
 
@@ -2065,7 +2066,7 @@ function getOrCreateTokenizers(): {
 
 export class ConsoleGroupViewMessage extends ConsoleViewMessage {
   private collapsedInternal: boolean;
-  private expandGroupIcon: IconButton.Icon.Icon|null;
+  private expandGroupIcon: Icon|null;
   private readonly onToggle: () => void;
   private groupEndMessageInternal: ConsoleViewMessage|null;
 
@@ -2111,7 +2112,7 @@ export class ConsoleGroupViewMessage extends ConsoleViewMessage {
     if (!element) {
       element = super.toMessageElement();
       const iconType = this.collapsedInternal ? 'triangle-right' : 'triangle-down';
-      this.expandGroupIcon = IconButton.Icon.create(iconType, 'expand-group-icon');
+      this.expandGroupIcon = createIcon(iconType, 'expand-group-icon');
       // Intercept focus to avoid highlight on click.
       this.contentElement().tabIndex = -1;
       if (this.repeatCountElement) {
@@ -2173,7 +2174,7 @@ export class ConsoleCommand extends ConsoleViewMessage {
     const newContentElement = document.createElement('div');
     this.setContentElement(newContentElement);
     newContentElement.classList.add('console-user-command');
-    const userCommandIcon = new IconButton.Icon.Icon();
+    const userCommandIcon = new Icon();
     userCommandIcon.name = 'chevron-right';
     userCommandIcon.classList.add('command-result-icon', 'medium');
     newContentElement.appendChild(userCommandIcon);
@@ -2206,7 +2207,7 @@ export class ConsoleCommandResult extends ConsoleViewMessage {
     if (!element.classList.contains('console-user-command-result')) {
       element.classList.add('console-user-command-result');
       if (this.consoleMessage().level === Protocol.Log.LogEntryLevel.Info) {
-        const icon = new IconButton.Icon.Icon();
+        const icon = new Icon();
         icon.name = 'chevron-left-dot';
         icon.classList.add('command-result-icon', 'medium');
         element.insertBefore(icon, element.firstChild);

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

@@ -53,10 +53,6 @@ const UIStrings = {
    * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
   showMessagesFromAllContexts: 'Show messages from all contexts',
-  /**
-   * @description Title of a setting under the Console category in Settings
-   */
-  logXmlhttprequests: 'Log XMLHttpRequests',
   /**
    * @description Title of a setting under the Console category
    */
@@ -283,15 +279,6 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
-Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.CONSOLE,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.logXmlhttprequests),
-  settingName: 'monitoring-xhr-enabled',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: false,
-});
-
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.CONSOLE,
   storageType: Common.Settings.SettingStorageType.SYNCED,

package/front_end/panels/console_counters/WarningErrorCounter.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/components/icon_button/icon_button.js';
+
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import '../../ui/legacy/components/data_grid/data_grid.js';
-import '../../ui/components/icon_button/icon_button.js';
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';

package/front_end/panels/developer_resources/DeveloperResourcesView.ts

@@ -72,6 +72,7 @@ interface ViewInput {
   filters: TextUtils.TextUtils.ParsedFilter[];
   numResources: number;
   numLoading: number;
+  loadThroughTargetSetting: Common.Settings.Setting<boolean>;
 }
 
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
@@ -91,7 +92,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           </devtools-toolbar-input>
           <devtools-checkbox
               title=${i18nString(UIStrings.loadHttpsDeveloperResources)}
-              ${bindToSetting(SDK.PageResourceLoader.getLoadThroughTargetSetting())}>
+              ${bindToSetting(input.loadThroughTargetSetting)}>
             ${i18nString(UIStrings.enableLoadingThroughTarget)}
           </devtools-checkbox>
         </devtools-toolbar>
@@ -146,6 +147,7 @@ export class DeveloperResourcesView extends UI.Widget.VBox {
       filters: this.#filters,
       numResources: resources,
       numLoading: loading,
+      loadThroughTargetSetting: this.#loader.getLoadThroughTargetSetting(),
     };
     const output = {};
     this.#view(input, output, this.contentElement);

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -12,8 +12,8 @@ import {
   isBlockContainer,
   isFlexContainer,
   isGridContainer,
+  isGridLanesContainer,
   isInlineElement,
-  isMasonryContainer,
   isMulticolContainer,
   isPossiblyReplacedElement,
 } from './CSSRuleValidatorHelper.js';
@@ -145,7 +145,7 @@ export class AlignContentValidator extends CSSRuleValidator {
     }
     const isFlex = isFlexContainer(computedStyles);
     if (!isFlex && !isBlockContainer(computedStyles) && !isGridContainer(computedStyles) &&
-        !isMasonryContainer(computedStyles)) {
+        !isGridLanesContainer(computedStyles)) {
       const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
       const affectedPropertyDeclarationCode = buildPropertyName('align-content');
 
@@ -257,7 +257,7 @@ export class GridContainerValidator extends CSSRuleValidator {
   }
 
   getHint(propertyName: string, computedStyles?: Map<string, string>): Hint|undefined {
-    if (isGridContainer(computedStyles) || isMasonryContainer(computedStyles)) {
+    if (isGridContainer(computedStyles) || isGridLanesContainer(computedStyles)) {
       return;
     }
     const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
@@ -293,7 +293,7 @@ export class GridItemValidator extends CSSRuleValidator {
     if (!parentComputedStyles) {
       return;
     }
-    if (isGridContainer(parentComputedStyles) || isMasonryContainer(parentComputedStyles)) {
+    if (isGridContainer(parentComputedStyles) || isGridLanesContainer(parentComputedStyles)) {
       return;
     }
     const reasonPropertyDeclaration = buildPropertyDefinitionText('display', parentComputedStyles?.get('display'));
@@ -358,13 +358,13 @@ export class FlexGridValidator extends CSSRuleValidator {
       return;
     }
 
-    if (isFlexContainer(computedStyles) || isGridContainer(computedStyles) || isMasonryContainer(computedStyles)) {
+    if (isFlexContainer(computedStyles) || isGridContainer(computedStyles) || isGridLanesContainer(computedStyles)) {
       return;
     }
 
     if (parentComputedStyles &&
         (isFlexContainer(parentComputedStyles) || isGridContainer(parentComputedStyles) ||
-         isMasonryContainer(parentComputedStyles))) {
+         isGridLanesContainer(parentComputedStyles))) {
       const reasonContainerDisplayName = buildPropertyValue(parentComputedStyles.get('display') as string);
       const reasonPropertyName = buildPropertyName(propertyName);
       const reasonAlternativePropertyName = buildPropertyName('justify-self');
@@ -414,7 +414,7 @@ export class MulticolFlexGridValidator extends CSSRuleValidator {
     }
 
     if (isMulticolContainer(computedStyles) || isFlexContainer(computedStyles) || isGridContainer(computedStyles) ||
-        isMasonryContainer(computedStyles)) {
+        isGridLanesContainer(computedStyles)) {
       return;
     }
 

package/front_end/panels/elements/CSSRuleValidatorHelper.ts

@@ -91,12 +91,12 @@ export const isGridContainer = (computedStyles?: Map<string, string>): boolean =
   return display === 'grid' || display === 'inline-grid';
 };
 
-export const isMasonryContainer = (computedStyles?: Map<string, string>): boolean => {
+export const isGridLanesContainer = (computedStyles?: Map<string, string>): boolean => {
   if (!computedStyles) {
     return false;
   }
   const display = computedStyles.get('display');
-  return display === 'masonry' || display === 'inline-masonry';
+  return display === 'grid-lanes' || display === 'inline-grid-lanes';
 };
 
 export const isMulticolContainer = (computedStyles?: Map<string, string>): boolean => {

package/front_end/panels/elements/ColorSwatchPopoverIcon.ts

@@ -6,7 +6,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 Bindings from '../../models/bindings/bindings.js';
-import type * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import type {Icon} from '../../ui/kit/kit.js';
 import * as ColorPicker from '../../ui/legacy/components/color_picker/color_picker.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -33,14 +33,14 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 interface BezierPopoverIconParams {
   treeElement: StylePropertyTreeElement;
   swatchPopoverHelper: InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper;
-  swatch: IconButton.Icon.Icon;
+  swatch: Icon;
   bezierText: HTMLElement;
 }
 
 export class BezierPopoverIcon {
   private treeElement: StylePropertyTreeElement;
   private readonly swatchPopoverHelper: InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper;
-  private readonly swatch: IconButton.Icon.Icon;
+  private readonly swatch: Icon;
   private readonly bezierText: HTMLElement;
   private readonly boundBezierChanged: (event: Common.EventTarget.EventTargetEvent<string>) => void;
   private readonly boundOnScroll: (event: Event) => void;

package/front_end/panels/elements/ElementsPanel.ts

@@ -39,8 +39,10 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
 import * as PanelCommon from '../../panels/common/common.js';
 import type * as Adorners from '../../ui/components/adorners/adorners.js';
+import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -332,6 +334,12 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
         .addChangeListener(this.showUAShadowDOMChanged.bind(this));
     PanelCommon.ExtensionServer.ExtensionServer.instance().addEventListener(
         PanelCommon.ExtensionServer.Events.SidebarPaneAdded, this.extensionSidebarPaneAdded, this);
+
+    if (Annotations.AnnotationRepository.annotationsEnabled()) {
+      PanelCommon.AnnotationManager.instance().initializePlacementForAnnotationType(
+          Annotations.AnnotationType.ELEMENT_NODE, this.resolveRelativePosition.bind(this),
+          this.#domTreeWidget.element);
+    }
   }
 
   private initializeFullAccessibilityTreeView(): void {
@@ -1169,6 +1177,47 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.#domTreeWidget.copyStyles(node);
   }
 
+  async resolveRelativePosition(
+      parentElement: Element, revealNode: boolean, lookupId: string,
+      node?: SDK.DOMModel.DOMNode): Promise<{x: number, y: number}|null> {
+    if (!node) {
+      const backendNodeId = Number(lookupId) as Protocol.DOM.BackendNodeId;
+      if (isNaN(backendNodeId)) {
+        return null;
+      }
+      const rootDOMNode = this.#domTreeWidget.rootDOMNode;
+      if (!rootDOMNode) {
+        return null;
+      }
+      const domModel = rootDOMNode.domModel();
+      const nodes = await domModel.pushNodesByBackendIdsToFrontend(new Set([backendNodeId]));
+      if (!nodes) {
+        return null;
+      }
+      const foundNode = nodes.get(backendNodeId);
+      if (!foundNode) {
+        return null;
+      }
+      node = foundNode;
+    }
+
+    const element = this.#domTreeWidget.treeElementForNode(node);
+    if (!element) {
+      return null;
+    }
+
+    if (revealNode) {
+      // The node must have been revealed in order to calculate its position.
+      await Common.Revealer.reveal(node);
+    }
+
+    const targetRect = element.listItemElement.getBoundingClientRect();
+    const parentRect = parentElement.getBoundingClientRect();
+    const relativeX = 0;
+    const relativeY = targetRect.y - parentRect.y;
+    return {x: relativeX, y: relativeY};
+  }
+
   protected static firstInspectElementCompletedForTest = function(): void {};
   protected static firstInspectElementNodeNameForTest = '';
 }