chrome-devtools-frontend 1.0.1004641 → 1.0.1004895

package/front_end/core/i18n/locales/en-US.json

@@ -1421,9 +1421,6 @@
   "models/issues_manager/DeprecationIssue.ts | localCSSFileExtensionRejected": {
     "message": "CSS cannot be loaded from file: URLs unless they end in a .css file extension."
   },
-  "models/issues_manager/DeprecationIssue.ts | mediaElementAudioSourceNode": {
-    "message": "Creating a MediaElementAudioSourceNode on an OfflineAudioContext is deprecated and will be removed."
-  },
   "models/issues_manager/DeprecationIssue.ts | mediaSourceAbortRemove": {
     "message": "Using SourceBuffer.abort() to abort remove()'s asynchronous range removal is deprecated due to specification change. Support will be removed in the future. You should instead await updateend. abort() is intended to only abort an asynchronous media append or reset parser state."
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -1421,9 +1421,6 @@
   "models/issues_manager/DeprecationIssue.ts | localCSSFileExtensionRejected": {
     "message": "ĈŚŜ ćâńn̂ót̂ b́ê ĺôád̂éd̂ f́r̂óm̂ file: ÚR̂Ĺŝ ún̂ĺêśŝ t́ĥéŷ én̂d́ îń â .css f́îĺê éx̂t́êńŝíôń."
   },
-  "models/issues_manager/DeprecationIssue.ts | mediaElementAudioSourceNode": {
-    "message": "Ĉŕêát̂ín̂ǵ â MediaElementAudioSourceNode ón̂ án̂ OfflineAudioContext íŝ d́êṕr̂éĉát̂éd̂ án̂d́ ŵíl̂ĺ b̂é r̂ém̂óv̂éd̂."
-  },
   "models/issues_manager/DeprecationIssue.ts | mediaSourceAbortRemove": {
     "message": "Ûśîńĝ SourceBuffer.abort() t́ô áb̂ór̂t́ remove()'ŝ áŝýn̂ćĥŕôńôúŝ ŕâńĝé r̂ém̂óv̂ál̂ íŝ d́êṕr̂éĉát̂éd̂ d́ûé t̂ó ŝṕêćîf́îćât́îón̂ ćĥán̂ǵê. Śûṕp̂ór̂t́ ŵíl̂ĺ b̂é r̂ém̂óv̂éd̂ ín̂ t́ĥé f̂út̂úr̂é. Ŷóû śĥóûĺd̂ ín̂śt̂éâd́ âẃâít̂ updateend. abort() íŝ ín̂t́êńd̂éd̂ t́ô ón̂ĺŷ áb̂ór̂t́ âń âśŷńĉh́r̂ón̂óûś m̂éd̂íâ áp̂ṕêńd̂ ór̂ ŕêśêt́ p̂ár̂śêŕ ŝt́ât́ê."
   },

package/front_end/core/sdk/DOMModel.ts

@@ -71,6 +71,7 @@ export class DOMNode {
   #creationStackTraceInternal: Promise<Protocol.Runtime.StackTrace|null>|null;
   pseudoElementsInternal: Map<string, DOMNode>;
   #distributedNodesInternal: DOMNodeShortcut[];
+  assignedSlot: DOMNodeShortcut|null;
   readonly shadowRootsInternal: DOMNode[];
   #attributesInternal: Map<string, Attribute>;
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
@@ -101,6 +102,7 @@ export class DOMNode {
     this.#creationStackTraceInternal = null;
     this.pseudoElementsInternal = new Map();
     this.#distributedNodesInternal = [];
+    this.assignedSlot = null;
     this.shadowRootsInternal = [];
     this.#attributesInternal = new Map();
     this.#markers = new Map();
@@ -181,6 +183,10 @@ export class DOMNode {
       this.setDistributedNodePayloads(payload.distributedNodes);
     }
 
+    if (payload.assignedSlot) {
+      this.setAssignedSlot(payload.assignedSlot);
+    }
+
     if (payload.children) {
       this.setChildrenPayload(payload.children);
     }
@@ -341,6 +347,10 @@ export class DOMNode {
     return this.pseudoElementsInternal.get(DOMNode.PseudoElementNames.Marker) || null;
   }
 
+  hasAssignedSlot(): boolean {
+    return this.assignedSlot !== null;
+  }
+
   isInsertionPoint(): boolean {
     return !this.isXMLNode() &&
         (this.#nodeNameInternal === 'SHADOW' || this.#nodeNameInternal === 'CONTENT' ||
@@ -680,6 +690,11 @@ export class DOMNode {
     }
   }
 
+  setAssignedSlot(payload: Protocol.DOM.BackendNode): void {
+    this.assignedSlot =
+        new DOMNodeShortcut(this.#domModelInternal.target(), payload.backendNodeId, payload.nodeType, payload.nodeName);
+  }
+
   private renumber(): void {
     if (!this.childrenInternal) {
       throw new Error('DOMNode._children is expected to not be null.');

package/front_end/generated/protocol.ts

@@ -3212,6 +3212,7 @@ export namespace DOM {
      */
     isSVG?: boolean;
     compatibilityMode?: CompatibilityMode;
+    assignedSlot?: BackendNode;
   }
 
   /**

package/front_end/models/issues_manager/DeprecationIssue.ts

@@ -34,7 +34,9 @@ const UIStrings = {
   authorizationCoveredByWildcard:
       'Authorization will not be covered by the wildcard symbol (*) in CORS `Access-Control-Allow-Headers` handling.',
   /**
-   * @description TODO(crbug.com/1320334): Description needed for translation
+   * @description This warning occurs when a page attempts to request a resource
+   *    whose URL contained both a newline character (`\n` or `\r`), and a
+   *    less-than character (`<`). These resources are blocked.
    */
   canRequestURLHTTPContainingNewline:
       'Resource requests whose URLs contained both removed whitespace `\\(n|r|t)` characters and less-than characters (`<`) are blocked. Please remove newlines and encode less-than characters from places like element attribute values in order to load these resources.',
@@ -137,11 +139,6 @@ const UIStrings = {
    */
   localCSSFileExtensionRejected:
       'CSS cannot be loaded from `file:` URLs unless they end in a `.css` file extension.',
-  /**
-   * @description TODO(crbug.com/1320344): Description needed for translation
-   */
-  mediaElementAudioSourceNode:
-      'Creating a `MediaElementAudioSourceNode` on an `OfflineAudioContext` is deprecated and will be removed.',
   /**
    * @description TODO(crbug.com/1320345): Description needed for translation
    */
@@ -415,11 +412,6 @@ export class DeprecationIssue extends Issue {
         messageFunction = i18nLazyString(UIStrings.localCSSFileExtensionRejected);
         milestone = 64;
         break;
-      case Protocol.Audits.DeprecationIssueType.MediaElementAudioSourceNode:
-        messageFunction = i18nLazyString(UIStrings.mediaElementAudioSourceNode);
-        feature = 5258622686724096;
-        milestone = 71;
-        break;
       case Protocol.Audits.DeprecationIssueType.MediaSourceAbortRemove:
         messageFunction = i18nLazyString(UIStrings.mediaSourceAbortRemove);
         feature = 6107495151960064;

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -41,6 +41,7 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as Adorners from '../../ui/components/adorners/adorners.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 TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -237,6 +238,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   private searchHighlightsVisible?: boolean;
   selectionElement?: HTMLDivElement;
   private hintElement?: HTMLElement;
+  #slot?: Adorners.Adorner.Adorner;
   private contentElement: HTMLElement;
 
   constructor(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean) {
@@ -422,6 +424,21 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.expandedChildrenLimitInternal = expandedChildrenLimit;
   }
 
+  createSlotLink(nodeShortcut: SDK.DOMModel.DOMNodeShortcut|null): void {
+    if (nodeShortcut) {
+      const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
+          ElementsComponents.AdornerManager.RegisteredAdorners.SLOT);
+      this.#slot = this.adornSlot(config);
+      const deferredNode = nodeShortcut.deferredNode;
+      this.#slot.addEventListener('click', () => {
+        deferredNode.resolve(node => {
+          void Common.Revealer.reveal(node);
+        });
+      });
+      this.#slot.addEventListener('mousedown', e => e.consume(), false);
+    }
+  }
+
   private createSelection(): void {
     const contentElement = this.contentElement;
     if (!contentElement) {
@@ -1314,6 +1331,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       if (!this.isClosingTagInternal && this.adornerContainer) {
         this.contentElement.append(this.adornerContainer);
       }
+      if (this.#slot) {
+        this.contentElement.append(this.#slot);
+      }
       this.highlightResult = [];
       delete this.selectionElement;
       delete this.hintElement;
@@ -1936,6 +1956,27 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     return adorner;
   }
 
+  adornSlot({name}: {name: string}): Adorners.Adorner.Adorner {
+    const linkIcon = new IconButton.Icon.Icon();
+    linkIcon
+        .data = {iconName: 'ic_show_node_16x16', color: 'var(--color-text-disabled)', width: '12px', height: '12px'};
+    const slotText = document.createElement('span');
+    slotText.textContent = name;
+    const adornerContent = document.createElement('span');
+    adornerContent.append(linkIcon);
+    adornerContent.append(slotText);
+    adornerContent.classList.add('adorner-with-icon');
+    const adorner = new Adorners.Adorner.Adorner();
+    adorner.data = {
+      name,
+      content: adornerContent,
+    };
+    this.adorners.push(adorner);
+    ElementsPanel.instance().registerAdorner(adorner);
+    this.updateAdorners();
+    return adorner;
+  }
+
   removeAdorner(adornerToRemove: Adorners.Adorner.Adorner): void {
     const adorners = this.adorners;
     ElementsPanel.instance().deregisterAdorner(adornerToRemove);

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1180,6 +1180,11 @@ export class ElementsTreeOutline extends
         !node.parentNode.parentNode) {
       treeElement.setCollapsible(false);
     }
+
+    if (node.hasAssignedSlot()) {
+      treeElement.createSlotLink(node.assignedSlot);
+    }
+
     treeElement.selectable = Boolean(this.selectEnabled);
     return treeElement;
   }

package/front_end/panels/elements/components/AdornerManager.ts

@@ -29,6 +29,7 @@ export enum RegisteredAdorners {
   AD = 'ad',
   SCROLL_SNAP = 'scroll-snap',
   CONTAINER = 'container',
+  SLOT = 'slot',
 }
 
 // This enum-like const object serves as the authoritative registry for all the
@@ -65,6 +66,12 @@ export function getRegisteredAdorner(which: RegisteredAdorners): RegisteredAdorn
         category: AdornerCategories.LAYOUT,
         enabledByDefault: true,
       };
+    case RegisteredAdorners.SLOT:
+      return {
+        name: 'slot',
+        category: AdornerCategories.LAYOUT,
+        enabledByDefault: true,
+      };
   }
 }
 

package/front_end/panels/elements/elementsTreeOutline.css

@@ -27,6 +27,15 @@
   display: none;
 }
 
+.adorner-with-icon {
+  display: flex;
+  justify-content: center;
+}
+
+.adorner-with-icon *:not(:last-child) {
+  margin-right: 2px;
+}
+
 .elements-disclosure {
   width: 100%;
   display: inline-block;

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1004641"
+  "version": "1.0.1004895"
 }