chrome-devtools-frontend 1.0.1589336 → 1.0.1590494

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -93,21 +93,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ComputedStyleWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-/**
- * Rendering a property's name and value is expensive, and each time we do it
- * it generates a new HTML element. If we call this directly from our Lit
- * components, we will generate a brand new DOM element on each single render.
- * This is very expensive and unnecessary - for the majority of re-renders a
- * property's name and value does not change. So we cache the rest of rendering
- * the name and value in a map, where the key used is a combination of the
- * property's name and value. This ensures that we only re-generate this element
- * if the node itself changes.
- * The resulting Element nodes are inserted into the ComputedStyleProperty
- * component via <slot>s, ensuring that Lit doesn't directly render/re-render
- * the element.
- */
-const propertyContentsCache = new Map<string, {name: Element, value: Element}>();
-
 function matchProperty(name: string, value: string): SDK.CSSPropertyParser.BottomUpTreeMatching|null {
   return SDK.CSSPropertyParser.matchDeclaration(name, value, [
     new SDK.CSSPropertyParserMatchers.ColorMatcher(), new SDK.CSSPropertyParserMatchers.URLMatcher(),
@@ -116,9 +101,10 @@ function matchProperty(name: string, value: string): SDK.CSSPropertyParser.Botto
 }
 
 function renderPropertyContents(
-    node: SDK.DOMModel.DOMNode, propertyName: string, propertyValue: string): {name: Element, value: Element} {
+    node: SDK.DOMModel.DOMNode, cache: Map<string, {name: Element, value: Element}>, propertyName: string,
+    propertyValue: string): {name: Element, value: Element} {
   const cacheKey = propertyName + ':' + propertyValue;
-  const valueFromCache = propertyContentsCache.get(cacheKey);
+  const valueFromCache = cache.get(cacheKey);
   if (valueFromCache) {
     return valueFromCache;
   }
@@ -130,7 +116,7 @@ function renderPropertyContents(
                         [new ColorRenderer(), new URLRenderer(null, node), new StringRenderer()])
                     .valueElement;
   value.slot = 'value';
-  propertyContentsCache.set(cacheKey, {name, value});
+  cache.set(cacheKey, {name, value});
   return {name, value};
 }
 
@@ -139,10 +125,11 @@ function renderPropertyContents(
  * to ensure nothing expensive runs here, or if it does it is safely cached.
  **/
 const createPropertyElement =
-    (node: SDK.DOMModel.DOMNode, propertyName: string, propertyValue: string, traceable: boolean, inherited: boolean,
+    (node: SDK.DOMModel.DOMNode, cache: Map<string, {name: Element, value: Element}>, propertyName: string,
+     propertyValue: string, traceable: boolean, inherited: boolean,
      activeProperty: SDK.CSSProperty.CSSProperty|undefined,
      onContextMenu: ((event: Event) => void)): Lit.TemplateResult => {
-      const {name, value} = renderPropertyContents(node, propertyName, propertyValue);
+      const {name, value} = renderPropertyContents(node, cache, propertyName, propertyValue);
       // clang-format off
       return html`<devtools-computed-style-property
         .traceable=${traceable}
@@ -315,6 +302,24 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   private filterRegex: RegExp|null;
   private readonly linkifier: Components.Linkifier.Linkifier;
   private readonly imagePreviewPopover: ImagePreviewPopover;
+  /**
+   * Rendering a property's name and value is expensive, and each time we do it
+   * it generates a new HTML element. If we call this directly from our Lit
+   * components, we will generate a brand new DOM element on each single render.
+   * This is very expensive and unnecessary - for the majority of re-renders a
+   * property's name and value does not change. So we cache the rest of rendering
+   * the name and value in a map, where the key used is a combination of the
+   * property's name and value. This ensures that we only re-generate this element
+   * if the node itself changes.
+   * The resulting Element nodes are inserted into the ComputedStyleProperty
+   * component via <slot>s, ensuring that Lit doesn't directly render/re-render
+   * the element.
+   * We have to store this cache per widget because it is possible to have
+   * multiple widgets for the same NodeId showing at once. In that case, if we
+   * reuse the same element from the cache, only one of the widgets will be
+   * populated, because an HTML node cannot be in two locations at once.
+   */
+  #propertyElementsCache = new Map<string, {name: Element, value: Element}>();
 
   #computedStylesTree = new TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>();
   #treeData?: TreeOutline.TreeOutline.TreeOutlineData<ComputedStyleData>;
@@ -559,8 +564,8 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
         const activeProperty = trace?.find(
             property => matchedStyles.propertyState(property) === SDK.CSSMatchedStyles.PropertyState.ACTIVE);
         const propertyElement = createPropertyElement(
-            domNode, data.propertyName, data.propertyValue, propertyTraces.has(data.propertyName), data.inherited,
-            activeProperty, event => {
+            domNode, this.#propertyElementsCache, data.propertyName, data.propertyValue,
+            propertyTraces.has(data.propertyName), data.inherited, activeProperty, event => {
               if (activeProperty) {
                 this.handleContextMenuEvent(matchedStyles, activeProperty, event);
               }

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -113,6 +113,10 @@ const UIStrings = {
    * @description A context menu item in the Elements Tree Element of the Elements panel
    */
   editAsHtml: 'Edit as HTML',
+  /**
+   * @description A context menu item in the Elements Tree Element of the Elements panel
+   */
+  editData: 'Edit data',
   /**
    * @description Text to cut an element, cut should be used as a verb
    */
@@ -628,6 +632,18 @@ function renderTitle(
           Platform.StringUtilities.collapseWhitespace(node.nodeNameInCorrectCase())}</span>`;
     }
 
+    case Node.PROCESSING_INSTRUCTION_NODE: {
+      const nodeValue = node.nodeValue();
+      const maybeSpace = nodeValue ? ' ' : '';
+      return html`<span class="webkit-html-processing-instruction">&lt;?<span
+          class="webkit-html-tag-name" jslog=${VisualLogging.value('tag-name').track({change: true, dblclick: true})}>${
+          node.nodeName()}</span>${maybeSpace}<span class="webkit-html-processing-instruction-value" jslog=${
+          VisualLogging.value('processing-instruction-value').track({
+            change: true,
+            dblclick: true,
+          })}>${nodeValue}</span>?&gt;</span>`;
+    }
+
     default: {
       return html`${Platform.StringUtilities.collapseWhitespace(node.nodeNameInCorrectCase())}`;
     }
@@ -1785,11 +1801,13 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       return false;
     }
 
-    if (this.nodeInternal.nodeType() !== Node.ELEMENT_NODE && this.nodeInternal.nodeType() !== Node.TEXT_NODE) {
+    if (this.nodeInternal.nodeType() !== Node.ELEMENT_NODE && this.nodeInternal.nodeType() !== Node.TEXT_NODE &&
+        this.nodeInternal.nodeType() !== Node.PROCESSING_INSTRUCTION_NODE) {
       return false;
     }
 
-    const textNode = eventTarget.enclosingNodeOrSelfWithClass('webkit-html-text-node');
+    const textNode = eventTarget.enclosingNodeOrSelfWithClass('webkit-html-text-node') ??
+        eventTarget.enclosingNodeOrSelfWithClass('webkit-html-processing-instruction-value');
     if (textNode) {
       return this.startEditingTextNode(textNode);
     }
@@ -2127,6 +2145,24 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
+  async populateProcessingElementContextMenu(contextMenu: UI.ContextMenu.ContextMenu): Promise<void> {
+    const treeOutline = this.treeOutline;
+    if (!treeOutline) {
+      return;
+    }
+
+    contextMenu.editSection().appendItem(
+        i18nString(UIStrings.editData), this.startEditingProcessingInstructionValue.bind(this),
+        {jslogContext: 'elements.edit-data'});
+    contextMenu.editSection().appendItem(
+        i18nString(UIStrings.duplicateElement), treeOutline.duplicateNode.bind(treeOutline, this.nodeInternal), {
+          disabled: (this.nodeInternal.isInShadowTree()),
+          jslogContext: 'elements.duplicate-element',
+        });
+    contextMenu.editSection().appendItem(
+        i18nString(UIStrings.deleteElement), this.remove.bind(this), {jslogContext: 'delete-element'});
+  }
+
   private startEditing(): boolean|undefined {
     if (!this.treeOutline || this.treeOutline.selectedDOMNode() !== this.nodeInternal) {
       return;
@@ -2151,6 +2187,19 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       }
     }
 
+    if (this.nodeInternal.nodeType() === Node.PROCESSING_INSTRUCTION_NODE) {
+      return this.startEditingProcessingInstructionValue();
+    }
+
+    return;
+  }
+
+  private startEditingProcessingInstructionValue(): boolean|undefined {
+    const processingInstructionValue =
+        this.listItemElement.getElementsByClassName('webkit-html-processing-instruction-value')[0];
+    if (processingInstructionValue) {
+      return this.startEditingTextNode(processingInstructionValue);
+    }
     return;
   }
 
@@ -2586,6 +2635,11 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
 
     function moveToNextAttributeIfNeeded(this: ElementsTreeElement): void {
+      if (this.nodeInternal.nodeType() === Node.PROCESSING_INSTRUCTION_NODE) {
+        this.startEditingProcessingInstructionValue();
+        return;
+      }
+
       if (moveDirection !== 'forward') {
         this.addNewAttribute();
         return;

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1332,6 +1332,8 @@ export class ElementsTreeOutline extends
       await treeElement.populateNodeContextMenu(contextMenu);
     } else if (isPseudoElement) {
       treeElement.populatePseudoElementContextMenu(contextMenu);
+    } else if (treeElement.node().nodeType() === Node.PROCESSING_INSTRUCTION_NODE) {
+      await treeElement.populateProcessingElementContextMenu(contextMenu);
     }
 
     ElementsPanel.instance().populateAdornerSettingsContextMenu(contextMenu);

package/front_end/panels/elements/StyleEditorWidget.ts

@@ -9,7 +9,7 @@ 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 {StylesSidebarPane} from './StylesSidebarPane.js';
+import type {StylesContainer} from './StylesContainer.js';
 
 type PropertySelectedEvent = ElementsComponents.StylePropertyEditor.PropertySelectedEvent;
 type PropertyDeselectedEvent = ElementsComponents.StylePropertyEditor.PropertyDeselectedEvent;
@@ -29,7 +29,7 @@ interface Editor extends HTMLElement {
  */
 export class StyleEditorWidget extends UI.Widget.VBox {
   private editor?: Editor;
-  private pane?: StylesSidebarPane;
+  private stylesContainer?: StylesContainer;
   private section?: StylePropertiesSection;
   private editorContainer: HTMLElement;
 
@@ -69,8 +69,8 @@ export class StyleEditorWidget extends UI.Widget.VBox {
     await this.render();
   }
 
-  bindContext(pane: StylesSidebarPane, section: StylePropertiesSection): void {
-    this.pane = pane;
+  bindContext(stylesContainer: StylesContainer, section: StylePropertiesSection): void {
+    this.stylesContainer = stylesContainer;
     this.section = section;
     this.editor?.addEventListener('propertyselected', this.onPropertySelected);
     this.editor?.addEventListener('propertydeselected', this.onPropertyDeselected);
@@ -85,7 +85,7 @@ export class StyleEditorWidget extends UI.Widget.VBox {
   }
 
   unbindContext(): void {
-    this.pane = undefined;
+    this.stylesContainer = undefined;
     this.section = undefined;
     this.editor?.removeEventListener('propertyselected', this.onPropertySelected);
     this.editor?.removeEventListener('propertydeselected', this.onPropertyDeselected);
@@ -98,7 +98,7 @@ export class StyleEditorWidget extends UI.Widget.VBox {
     this.editor.data = {
       authoredProperties: this.section ? getAuthoredStyles(this.section, this.editor.getEditableProperties()) :
                                          new Map(),
-      computedProperties: this.pane ? await fetchComputedStyles(this.pane) : new Map(),
+      computedProperties: this.stylesContainer ? await fetchComputedStyles(this.stylesContainer) : new Map(),
     };
   }
 
@@ -118,19 +118,19 @@ export class StyleEditorWidget extends UI.Widget.VBox {
   }
 
   static createTriggerButton(
-      pane: StylesSidebarPane, section: StylePropertiesSection, editorClass: {new(): Editor}, buttonTitle: string,
-      triggerKey: string): HTMLElement {
+      stylesContainer: StylesContainer, section: StylePropertiesSection, editorClass: {new(): Editor},
+      buttonTitle: string, triggerKey: string): HTMLElement {
     const triggerButton = createIcon('flex-wrap', 'styles-pane-button');
     triggerButton.title = buttonTitle;
     triggerButton.role = 'button';
 
     triggerButton.onclick = async event => {
       event.stopPropagation();
-      const popoverHelper = pane.swatchPopoverHelper();
+      const popoverHelper = stylesContainer.swatchPopoverHelper();
       const widget = StyleEditorWidget.instance();
       widget.element.classList.toggle('with-padding', true);
       widget.setEditor(editorClass);
-      widget.bindContext(pane, section);
+      widget.bindContext(stylesContainer, section);
       widget.setTriggerKey(triggerKey);
       await widget.render();
       widget.focus();
@@ -168,8 +168,8 @@ function ensureTreeElementForProperty(section: StylePropertiesSection, propertyN
   return newTarget;
 }
 
-async function fetchComputedStyles(pane: StylesSidebarPane): Promise<Map<string, string>> {
-  const computedStyleModel = pane.computedStyleModel();
+async function fetchComputedStyles(stylesContainer: StylesContainer): Promise<Map<string, string>> {
+  const computedStyleModel = stylesContainer.computedStyleModel();
   const style = await computedStyleModel.fetchComputedStyle();
   return style ? style.computedStyle : new Map();
 }