chrome-devtools-frontend 1.0.1649421 → 1.0.1650035

package/front_end/core/sdk/CSSMetadata.ts

@@ -55,6 +55,11 @@ export class CSSMetadata {
     for (let i = 0; i < properties.length; ++i) {
       const property = properties[i];
       const propertyName = property.name;
+      if ('is_descriptor' in property && 'is_property' in property) {
+        if (property.is_descriptor && !property.is_property) {
+          continue;
+        }
+      }
       if (!CSS.supports(propertyName, 'initial')) {
         continue;
       }
@@ -99,9 +104,18 @@ export class CSSMetadata {
         propertyValueSets.set(propertyName, extraValues);
       }
     }
-    // finally add common keywords to value sets and convert property #values
+    // finally add keywords from alias property, common keywords to value sets and convert property #values
     // into arrays since callers expect arrays
     for (const [propertyName, values] of propertyValueSets) {
+      const aliasFor = this.#aliasesFor.get(propertyName);
+      if (aliasFor) {
+        const aliasForValues = propertyValueSets.get(aliasFor);
+        if (aliasForValues) {
+          for (const val of aliasForValues) {
+            values.add(val);
+          }
+        }
+      }
       for (const commonKeyword of CommonKeywords) {
         if (!values.has(commonKeyword) && CSS.supports(propertyName, commonKeyword)) {
           values.add(commonKeyword);
@@ -1675,4 +1689,8 @@ export interface CSSPropertyDefinition {
   longhands: string[]|null;
   inherited: boolean|null;
   svg: boolean|null;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  is_descriptor?: boolean;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  is_property?: boolean;
 }

package/front_end/entrypoints/heap_snapshot_worker/HeapSnapshot.ts

@@ -1382,6 +1382,12 @@ export abstract class HeapSnapshot {
     };
 
     switch (filterName) {
+      case 'objectsRetainedByContexts':
+        traverse((_node: HeapSnapshotNode, edge: HeapSnapshotEdge) => {
+          return !this.isContextObject(edge.node());
+        });
+        markUnreachableNodes();
+        return (node: HeapSnapshotNode) => !getBit(node);
       case 'objectsRetainedByDetachedDomNodes':
         // Traverse the graph, avoiding detached nodes.
         traverse((_node: HeapSnapshotNode, edge: HeapSnapshotEdge) => {
@@ -1581,6 +1587,10 @@ export abstract class HeapSnapshot {
     return true;
   }
 
+  isContextObject(_node: HeapSnapshotNode): boolean {
+    return false;
+  }
+
   calculateShallowSizes(): void {
   }
 
@@ -3684,6 +3694,11 @@ export class JSHeapSnapshot extends HeapSnapshot {
     return node.isUserRoot() || node.isDocumentDOMTreesRoot();
   }
 
+  override isContextObject(node: HeapSnapshotNode): boolean {
+    const name = node.rawName();
+    return name === 'system / Context' || name.startsWith('system / Context / ');
+  }
+
   override userObjectsMapAndFlag(): {map: Uint8Array, flag: number}|null {
     return {map: this.flags, flag: this.nodeFlags.pageObject};
   }

package/front_end/generated/Deprecation.ts

@@ -54,6 +54,10 @@ export const UIStrings = {
    * @description Warning displayed to developers when a data: URL is assigned to SVGUseElement to let them know that the support is deprecated.
    */
   DataUrlInSvgUse: "Support for data: URLs in SVGUseElement is deprecated and it will be removed in the future.",
+  /**
+   * @description Warning displayed to developers when an unknown protocol string is used in a call to navigator.credentials.get() or create() with the 'digital' option.
+   */
+  DigitalCredentialsUnknownProtocol: "An unknown Digital Credentials protocol was requested in navigator.credentials.get() or create(). In a future release, unrecognized protocols will be blocked.",
   /**
    * @description Warning displayed to developers when document.createEvent() is called with 'KeyboardEvents', which is a non-standard event interface that will be removed.
    */
@@ -333,6 +337,10 @@ export const DEPRECATIONS_METADATA: Partial<Record<string, DeprecationDescriptor
     "chromeStatusFeature": 5128825141198848,
     "milestone": 119
   },
+  "DigitalCredentialsUnknownProtocol": {
+    "chromeStatusFeature": 6492906882990080,
+    "milestone": 160
+  },
   "DocumentCreateEventKeyboardEvents": {
     "chromeStatusFeature": 5095987863486464,
     "milestone": 151

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -1430,7 +1430,7 @@ export const NativeFunctions = [
   },
   {
     name: "add",
-    signatures: [["sub_apps_to_add"]],
+    signatures: [["install_paths"]],
     receivers: ["SubApps"]
   },
   {
@@ -2005,7 +2005,7 @@ export const NativeFunctions = [
   },
   {
     name: "remove",
-    signatures: [["app_ids"]],
+    signatures: [["manifest_ids"]],
     receivers: ["SubApps"]
   },
   {

package/front_end/panels/console/ConsolePinPane.ts

@@ -403,6 +403,7 @@ export class ConsolePinPresenter extends UI.Widget.Widget {
       CodeMirror.EditorView.domEventHandlers({
         blur: (_e, view) => this.#onBlur(view),
         paste: () => this.#onPaste(),
+        drop: event => event.preventDefault(),
       }),
       TextEditor.Config.baseConfiguration(doc),
       TextEditor.Config.closeBrackets.instance(),

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -738,65 +738,86 @@ function renderLinkifiedValue(value: string, node: SDK.DOMModel.DOMNode): Lit.Te
   });
 }
 
+const relationPromisesCache = new WeakMap<SDK.DOMModel.DOMNode, Map<string, Promise<string|Lit.LitTemplate>>>();
+const relatedElementsCache = new WeakMap<SDK.DOMModel.DOMNode, Map<string, SDK.DOMModel.DOMNode|null>>();
+
 function renderAttribute(
     attr: {name: string, value?: string}, updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null,
     isDiff: boolean, node: SDK.DOMModel.DOMNode): Lit.LitTemplate {
   const name = attr.name;
   const value = attr.value || '';
   const forceValue = isDiff;
+  const isRelation = name === 'popovertarget' || name === 'interesttarget' || name === 'commandfor';
   const hasText = (forceValue || value.length > 0);
-  const jslog = VisualLogging.value(name === 'style' ? 'style-attribute' : 'attribute').track({
-    change: true,
-    dblclick: true,
-  });
-
-  const relationRef =
-      (relation: Protocol.DOM.GetElementByRelationRequestRelation, tooltip: string): ReturnType<typeof ref> =>
-          ref((el): void => {
-            if (!el) {
-              return;
-            }
-            void (async(): Promise<void> => {
-              const relatedElementId = await node.domModel().getElementByRelation(node.id, relation);
-              const relatedElement = node.domModel().nodeForId(relatedElementId);
-              if (!relatedElement) {
-                return;
-              }
-              const link = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(relatedElement, {
-                preventKeyboardFocus: true,
-                tooltip,
-                textContent: el.textContent || undefined,
-                isDynamicLink: true,
-              });
-              render(link, el as HTMLElement);
-            })();
-          });
+  const linkifyName = isRelation && value.length === 0;
+  const linkifyValue = isRelation && value.length > 0;
 
-  let relationRefDirective: ReturnType<typeof relationRef> = ref(() => {});
-  if (!value) {
+  let relation: Protocol.DOM.GetElementByRelationRequestRelation|undefined = undefined;
+  let tooltip = '';
+  if (isRelation) {
     if (name === 'popovertarget') {
-      relationRefDirective = relationRef(
-          Protocol.DOM.GetElementByRelationRequestRelation.PopoverTarget, i18nString(UIStrings.showPopoverTarget));
+      relation = Protocol.DOM.GetElementByRelationRequestRelation.PopoverTarget;
+      tooltip = i18nString(UIStrings.showPopoverTarget);
     } else if (name === 'interesttarget') {
-      relationRefDirective = relationRef(
-          Protocol.DOM.GetElementByRelationRequestRelation.InterestTarget, i18nString(UIStrings.showInterestTarget));
+      relation = Protocol.DOM.GetElementByRelationRequestRelation.InterestTarget;
+      tooltip = i18nString(UIStrings.showInterestTarget);
     } else if (name === 'commandfor') {
-      relationRefDirective = relationRef(
-          Protocol.DOM.GetElementByRelationRequestRelation.CommandFor, i18nString(UIStrings.showCommandForTarget));
-    }
-  }
+      relation = Protocol.DOM.GetElementByRelationRequestRelation.CommandFor;
+      tooltip = i18nString(UIStrings.showCommandForTarget);
+    }
+  }
+
+  let relationPromise: Promise<string|Lit.LitTemplate>|undefined = undefined;
+  if (isRelation && relation) {
+    let nodeCache = relationPromisesCache.get(node);
+    if (!nodeCache) {
+      nodeCache = new Map();
+      relationPromisesCache.set(node, nodeCache);
+    }
+    const cacheKey = `${relation}:${value}`;
+    relationPromise = nodeCache.get(cacheKey);
+    const relationType = relation;
+    if (!relationPromise) {
+      relationPromise = (async () => {
+        try {
+          const relatedElementId = await node.domModel().getElementByRelation(node.id, relationType);
+          const relatedElement = node.domModel().nodeForId(relatedElementId);
+
+          let elemCache = relatedElementsCache.get(node);
+          if (!elemCache) {
+            elemCache = new Map();
+            relatedElementsCache.set(node, elemCache);
+          }
+          elemCache.set(`${name}:${value}`, relatedElement || null);
 
-  let valueRelationRefDirective: ReturnType<typeof relationRef> = ref(() => {});
-  if (value) {
-    if (name === 'popovertarget') {
-      valueRelationRefDirective = relationRef(
-          Protocol.DOM.GetElementByRelationRequestRelation.PopoverTarget, i18nString(UIStrings.showPopoverTarget));
-    } else if (name === 'interesttarget') {
-      valueRelationRefDirective = relationRef(
-          Protocol.DOM.GetElementByRelationRequestRelation.InterestTarget, i18nString(UIStrings.showInterestTarget));
-    } else if (name === 'commandfor') {
-      valueRelationRefDirective = relationRef(
-          Protocol.DOM.GetElementByRelationRequestRelation.CommandFor, i18nString(UIStrings.showCommandForTarget));
+          const isNameLinking = value.length === 0;
+          const fallback = isNameLinking ? name : value;
+
+          if (!relatedElement) {
+            return fallback;
+          }
+
+          const linkOptions: PanelsCommon.DOMLinkifier.Options = {
+            preventKeyboardFocus: true,
+            tooltip,
+            isDynamicLink: true,
+          };
+
+          if (isNameLinking) {
+            linkOptions.textContent = name;
+          } else {
+            const targetId = relatedElement.getAttribute('id');
+            if (targetId) {
+              linkOptions.textContent = targetId;
+            }
+          }
+
+          return PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(relatedElement, linkOptions);
+        } catch {
+          return value.length === 0 ? name : value;
+        }
+      })();
+      nodeCache.set(cacheKey, relationPromise);
     }
   }
 
@@ -815,23 +836,31 @@ function renderAttribute(
     valueType = ValueType.SRCSET;
   }
 
-  const withEntitiesRef = valueType === ValueType.UNKNOWN ? ref(el => {
+  const withEntitiesRef = (valueType === ValueType.UNKNOWN && !isRelation) ? ref(el => {
     if (el) {
       setValueWithEntities(el, value);
     }
   }) :
-                                                            nothing;
+                                                                             nothing;
+
+  const jslog = VisualLogging.value(name === 'style' ? 'style-attribute' : 'attribute').track({
+    change: true,
+    dblclick: true,
+  });
 
-  // clang-format off
   return html`<span class="webkit-html-attribute" jslog=${jslog}><span class="webkit-html-attribute-name"
-      ${animateOn(Boolean(updateRecord?.isAttributeModified(name) && !hasText), DOM_UPDATE_ANIMATION_CLASS_NAME)} ${relationRefDirective}>${name}</span>${hasText ? html`=\u200B"<span class="webkit-html-attribute-value" ${animateOn(
-    Boolean(updateRecord?.isAttributeModified(name) && hasText),
-    DOM_UPDATE_ANIMATION_CLASS_NAME)} ${valueRelationRefDirective} ${withEntitiesRef}>
+      ${animateOn(Boolean(updateRecord?.isAttributeModified(name) && !hasText), DOM_UPDATE_ANIMATION_CLASS_NAME)}>${
+      linkifyName && relationPromise ? Lit.Directives.until(relationPromise, name) : name}</span>${
+      hasText ?
+          html`=\u200B"<span class="webkit-html-attribute-value" ${
+              animateOn(Boolean(updateRecord?.isAttributeModified(name) && hasText),
+                        DOM_UPDATE_ANIMATION_CLASS_NAME)} ${withEntitiesRef}>
                         ${valueType === ValueType.SRC ? renderLinkifiedValue(value, node) : nothing}
-                        ${valueType === ValueType.SRCSET ? renderLinkifiedSrcset(Common.Srcset.parseSrcset(value), node) : nothing}
+                        ${
+              valueType === ValueType.SRCSET ? renderLinkifiedSrcset(Common.Srcset.parseSrcset(value), node) : nothing}
+                        ${linkifyValue && relationPromise ? Lit.Directives.until(relationPromise, value) : nothing}
                 </span>"` :
-      nothing}</span>`;
-  // clang-format on
+          nothing}</span>`;
 }
 
 function renderTag(
@@ -2440,9 +2469,20 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       }
     }
 
-    const attributeValue = attributeName && attributeValueElement ?
+    let attributeValue = attributeName && attributeValueElement ?
         this.nodeInternal.getAttribute(attributeName)?.replaceAll('"', '&quot;') :
         undefined;
+
+    const isRelation =
+        attributeName === 'popovertarget' || attributeName === 'interesttarget' || attributeName === 'commandfor';
+    if (isRelation && attributeName && attributeValueElement) {
+      const rawValue = this.nodeInternal.getAttribute(attributeName) || '';
+      const relatedElement = relatedElementsCache.get(this.nodeInternal)?.get(`${attributeName}:${rawValue}`);
+      if (relatedElement) {
+        attributeValue = relatedElement.getAttribute('id') || '';
+      }
+    }
+
     if (attributeValue !== undefined) {
       attributeValueElement.setTextContentTruncatedIfNeeded(
           attributeValue, i18nString(UIStrings.valueIsTooLargeToEdit));

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -136,6 +136,11 @@ const UIStrings = {
    * detached DOM nodes and other objects kept alive by detached DOM nodes
    */
   objectsRetainedByDetachedDomNodes: 'Objects retained by detached DOM nodes',
+  /**
+   * @description An option which will filter the heap snapshot to show only
+   * objects kept alive by contexts
+   */
+  objectsRetainedByContexts: 'Objects retained by contexts',
   /**
    * @description An option which will filter the heap snapshot to show only
    * objects kept alive by the DevTools console
@@ -773,6 +778,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
   static readonly ALWAYS_AVAILABLE_FILTERS: ReadonlyArray<{uiName: string, filterName: string}> = [
     {uiName: i18nString(UIStrings.duplicatedStrings), filterName: 'duplicatedStrings'},
     {uiName: i18nString(UIStrings.objectsRetainedByDetachedDomNodes), filterName: 'objectsRetainedByDetachedDomNodes'},
+    {uiName: i18nString(UIStrings.objectsRetainedByContexts), filterName: 'objectsRetainedByContexts'},
     {uiName: i18nString(UIStrings.objectsRetainedByConsole), filterName: 'objectsRetainedByConsole'},
     {uiName: i18nString(UIStrings.objectsRetainedByEventHandlers), filterName: 'objectsRetainedByEventHandlers'},
   ];

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: 619f853fcd9eb9a1f7b73de8a235a34248fd4a88
+Revision: 497ce88cb71102650c4ed3ec5fa40ddd45c28c26
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -257,6 +257,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
         focus: () => this.onFocus(),
         blur: () => this.onBlur(),
         paste: () => this.onPaste(),
+        drop: event => event.preventDefault(),
         scroll: () => this.dispatchEventToListeners(Events.EDITOR_SCROLL),
         contextmenu: event => this.onContextMenu(event),
       }),
@@ -264,16 +265,15 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
         domEventHandlers:
             {contextmenu: (_view, block, event) => this.onLineGutterContextMenu(block.from, event as MouseEvent)},
       }),
-      CodeMirror.EditorView.updateListener.of(
-          (update):
-              void => {
-                if (update.selectionSet || update.docChanged) {
-                  this.updateSourcePosition();
-                }
-                if (update.docChanged) {
-                  this.onTextChanged();
-                }
-              }),
+      CodeMirror.EditorView.updateListener.of((update):
+                                                  void => {
+                                                    if (update.selectionSet || update.docChanged) {
+                                                      this.updateSourcePosition();
+                                                    }
+                                                    if (update.docChanged) {
+                                                      this.onTextChanged();
+                                                    }
+                                                  }),
       activeSearchState,
       CodeMirror.Prec.lowest(searchHighlighter),
       config.language.of([]),

package/package.json

@@ -92,5 +92,5 @@
     "webidl2": "24.5.0",
     "yargs": "17.7.2"
   },
-  "version": "1.0.1649421"
+  "version": "1.0.1650035"
 }