chrome-devtools-frontend 1.0.1026160 → 1.0.1027447

package/front_end/panels/security/SecurityPanel.ts

@@ -329,6 +329,16 @@ const UIStrings = {
   */
   cipher: 'Cipher',
   /**
+  *@description Text in Security Panel that refers to the signature algorithm
+  *used by the server for authenticate in the TLS handshake.
+  */
+  serverSignature: 'Server signature',
+  /**
+  *@description Text in Security Panel that refers to whether the ClientHello
+  *message in the TLS handshake was encrypted.
+  */
+  encryptedClientHello: 'Encrypted ClientHello',
+  /**
   *@description Sct div text content in Security Panel of the Security panel
   */
   certificateTransparency: 'Certificate Transparency',
@@ -442,12 +452,42 @@ const UIStrings = {
   *@example {2} PH1
   */
   showMoreSTotal: 'Show more ({PH1} total)',
+  /**
+  *@description Shown when a field refers to an option that is unknown to the frontend.
+  */
+  unknownField: 'unknown',
+  /**
+  *@description Shown when a field refers to a TLS feature which was enabled.
+  */
+  enabled: 'enabled',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/security/SecurityPanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 let securityPanelInstance: SecurityPanel;
 
+// See https://www.iana.org/assignments/tls-parameters/tls-parameters.xhtml#tls-signaturescheme
+// This contains signature schemes supported by Chrome.
+const SignatureSchemeStrings = new Map([
+  // The full name for these schemes is RSASSA-PKCS1-v1_5, sometimes
+  // "PKCS#1 v1.5", but those are very long, so let "RSA" vs "RSA-PSS"
+  // disambiguate.
+  [0x0201, 'RSA with SHA-1'],
+  [0x0401, 'RSA with SHA-256'],
+  [0x0501, 'RSA with SHA-384'],
+  [0x0601, 'RSA with SHA-512'],
+
+  // We omit the curve from these names because in TLS 1.2 these code points
+  // were not specific to a curve. Saying "P-256" for a server that used a P-384
+  // key with SHA-256 in TLS 1.2 would be confusing.
+  [0x0403, 'ECDSA with SHA-256'],
+  [0x0503, 'ECDSA with SHA-384'],
+
+  [0x0804, 'RSA-PSS with SHA-256'],
+  [0x0805, 'RSA-PSS with SHA-384'],
+  [0x0806, 'RSA-PSS with SHA-512'],
+]);
+
 export class SecurityPanel extends UI.Panel.PanelWithSidebar implements
     SDK.TargetManager.SDKModelObserver<SecurityModel> {
   private readonly mainView: SecurityMainView;
@@ -1466,11 +1506,23 @@ export class SecurityOriginView extends UI.Widget.VBox {
         table.addRow(i18nString(UIStrings.keyExchange), originState.securityDetails.keyExchangeGroup);
       }
 
+      if (originState.securityDetails.serverSignatureAlgorithm) {
+        // See https://www.iana.org/assignments/tls-parameters/tls-parameters.xhtml#tls-signaturescheme
+        let sigString = SignatureSchemeStrings.get(originState.securityDetails.serverSignatureAlgorithm);
+        sigString ??=
+            i18nString(UIStrings.unknownField) + ' (' + originState.securityDetails.serverSignatureAlgorithm + ')';
+        table.addRow(i18nString(UIStrings.serverSignature), sigString);
+      }
+
       table.addRow(
           i18nString(UIStrings.cipher),
           originState.securityDetails.cipher +
               (originState.securityDetails.mac ? ' with ' + originState.securityDetails.mac : ''));
 
+      if (originState.securityDetails.encryptedClientHello) {
+        table.addRow(i18nString(UIStrings.encryptedClientHello), i18nString(UIStrings.enabled));
+      }
+
       // Create the certificate section outside the callback, so that it appears in the right place.
       const certificateSection = this.element.createChild('div', 'origin-view-section');
       const certificateDiv = certificateSection.createChild('div', 'origin-view-section-title');

package/front_end/panels/security/originView.css

@@ -79,7 +79,7 @@
 
 .security-origin-view .details-table-row > td:first-child {
   color: var(--color-text-secondary);
-  width: calc(110px + 1em);
+  width: calc(120px + 1em);
   text-align: right;
   padding-right: 1em;
 }

package/front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts

@@ -26,6 +26,15 @@ const UIStrings = {
   */
   ignoreListContentScriptsExtension: 'Add content scripts to ignore list (extension scripts in the page)',
   /**
+  *@description Text in Framework Ignore List Settings Tab of the Settings
+  */
+  automaticallyIgnoreListKnownThirdPartyScripts: 'Automatically add known third-party scripts to ignore list',
+  /**
+  *@description Text in Framework Ignore List Settings Tab of the Settings
+  */
+  automaticallyIgnoreListKnownThirdPartyScriptsTooltip:
+      'Add sources from the `x_google_ignoreList` field from source maps to the ignore list',
+  /**
   *@description Ignore List label in Framework Ignore List Settings Tab of the Settings
   */
   ignoreList: 'Ignore List',
@@ -98,6 +107,13 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
         Common.Settings.Settings.instance().moduleSetting('skipContentScripts'), true));
     UI.Tooltip.Tooltip.install(ignoreListContentScripts, i18nString(UIStrings.ignoreListContentScriptsExtension));
 
+    const automaticallyIgnoreList = this.contentElement.createChild('div', 'automatically-ignore-list');
+    automaticallyIgnoreList.appendChild(UI.SettingsUI.createSettingCheckbox(
+        i18nString(UIStrings.automaticallyIgnoreListKnownThirdPartyScripts),
+        Common.Settings.Settings.instance().moduleSetting('automaticallyIgnoreListKnownThirdPartyScripts'), true));
+    UI.Tooltip.Tooltip.install(
+        automaticallyIgnoreList, i18nString(UIStrings.automaticallyIgnoreListKnownThirdPartyScriptsTooltip));
+
     this.ignoreListLabel = i18nString(UIStrings.ignoreList);
     this.disabledLabel = i18nString(UIStrings.disabled);
 

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -219,13 +219,13 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     this.callFrameWarningsElement.classList.add('hidden');
 
     const details = UI.Context.Context.instance().flavor(SDK.DebuggerModel.DebuggerPausedDetails);
+    this.setSourceMapSubscription(details?.debuggerModel ?? null);
     if (!details) {
       this.notPausedMessageElement.classList.remove('hidden');
       this.ignoreListMessageElement.classList.add('hidden');
       this.showMoreMessageElement.classList.add('hidden');
       this.items.replaceAll([]);
       UI.Context.Context.instance().setFlavor(SDK.DebuggerModel.CallFrame, null);
-      this.setSourceMapSubscription(null);
       return;
     }
 
@@ -251,7 +251,6 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     }
 
     let debuggerModel = details.debuggerModel;
-    this.setSourceMapSubscription(debuggerModel);
     let asyncStackTraceId = details.asyncStackTraceId;
     let asyncStackTrace: Protocol.Runtime.StackTrace|undefined|null = details.asyncStackTrace;
     let previousStackTrace: Protocol.Runtime.CallFrame[]|SDK.DebuggerModel.CallFrame[] = details.callFrames;
@@ -494,7 +493,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     const canIgnoreList =
         Bindings.IgnoreListManager.IgnoreListManager.instance().canIgnoreListUISourceCode(uiSourceCode);
     const isIgnoreListed =
-        Bindings.IgnoreListManager.IgnoreListManager.instance().isIgnoreListedUISourceCode(uiSourceCode);
+        Bindings.IgnoreListManager.IgnoreListManager.instance().isUserIgnoreListedURL(uiSourceCode.url());
     const isContentScript = uiSourceCode.project().type() === Workspace.Workspace.projectTypes.ContentScripts;
 
     const manager = Bindings.IgnoreListManager.IgnoreListManager.instance();

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -235,6 +235,9 @@ export class DebuggerPlugin extends Plugin {
     Common.Settings.Settings.instance()
         .moduleSetting('skipContentScripts')
         .addChangeListener(this.showIgnoreListInfobarIfNeeded, this);
+    Common.Settings.Settings.instance()
+        .moduleSetting('automaticallyIgnoreListKnownThirdPartyScripts')
+        .addChangeListener(this.showIgnoreListInfobarIfNeeded, this);
 
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DebuggerModel.CallFrame, this.callFrameChanged, this);
     this.liveLocationPool = new Bindings.LiveLocation.LiveLocationPool();
@@ -365,7 +368,7 @@ export class DebuggerPlugin extends Plugin {
       return;
     }
     const projectType = uiSourceCode.project().type();
-    if (!Bindings.IgnoreListManager.IgnoreListManager.instance().isIgnoreListedUISourceCode(uiSourceCode)) {
+    if (!Bindings.IgnoreListManager.IgnoreListManager.instance().isUserIgnoreListedURL(uiSourceCode.url())) {
       this.hideIgnoreListInfobar();
       return;
     }
@@ -513,7 +516,7 @@ export class DebuggerPlugin extends Plugin {
 
     if (this.uiSourceCode.project().type() === Workspace.Workspace.projectTypes.Network &&
         Common.Settings.Settings.instance().moduleSetting('jsSourceMapsEnabled').get() &&
-        !Bindings.IgnoreListManager.IgnoreListManager.instance().isIgnoreListedUISourceCode(this.uiSourceCode)) {
+        !Bindings.IgnoreListManager.IgnoreListManager.instance().isUserIgnoreListedURL(this.uiSourceCode.url())) {
       if (this.scriptFileForDebuggerModel.size) {
         const scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile =
             this.scriptFileForDebuggerModel.values().next().value;
@@ -1625,6 +1628,9 @@ export class DebuggerPlugin extends Plugin {
     Common.Settings.Settings.instance()
         .moduleSetting('skipContentScripts')
         .removeChangeListener(this.showIgnoreListInfobarIfNeeded, this);
+    Common.Settings.Settings.instance()
+        .moduleSetting('automaticallyIgnoreListKnownThirdPartyScripts')
+        .removeChangeListener(this.showIgnoreListInfobarIfNeeded, this);
     super.dispose();
 
     UI.Context.Context.instance().removeFlavorChangeListener(SDK.DebuggerModel.CallFrame, this.callFrameChanged, this);

package/front_end/panels/sources/navigatorTree.css

@@ -121,9 +121,9 @@
   background: var(--override-image-font-tree-item-color);
 }
 
-.navigator-sm-folder-tree-item .tree-element-title,
-.navigator-sm-script-tree-item .tree-element-title,
-.navigator-sm-stylesheet-tree-item .tree-element-title {
+.tree-outline:not(:has(.navigator-deployed-tree-item)) .navigator-sm-folder-tree-item .tree-element-title,
+.tree-outline:not(:has(.navigator-deployed-tree-item)) .navigator-sm-script-tree-item .tree-element-title,
+.tree-outline:not(:has(.navigator-deployed-tree-item)) .navigator-sm-stylesheet-tree-item .tree-element-title {
   font-style: italic;
 }
 

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -701,7 +701,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   }
 
   private isIgnoreListedURL(url: Platform.DevToolsPath.UrlString): boolean {
-    return Bindings.IgnoreListManager.IgnoreListManager.instance().isIgnoreListedURL(url);
+    return Bindings.IgnoreListManager.IgnoreListManager.instance().isUserIgnoreListedURL(url);
   }
 
   private appendAsyncEventsGroup(

package/front_end/ui/components/docs/building-ui-documentation/CreatingComponents.md

@@ -78,9 +78,11 @@ Each component defines a `#render` method which is responsible for invoking LitH
 The `#render` method calls `LitHtml.render`, building up a template with `LitHtml.html`:
 
 ```ts
-LitHtml.render(LitHtml.html``, this.#shadow, {host: this});
+LitHtml.render(LitHtml.html`<p>hello world!</p>`, this.#shadow, {host: this});
 ```
 
+The third argument (`{host: this}`) tells LitHtml to automatically bind event listeners to the component. This can save you some painful debugging where event listeners do not have the right `this` reference; so we enforce the use of `{host: this}` via a custom ESLint rule.
+
 There is unfortunately a [clang-format bug](crbug.com/1079231) which makes its auto-formatting of LitHtml templates very unreadable, so we usually disable clang-format round the call:
 
 ```ts
@@ -110,3 +112,172 @@ void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
 ```
 
 > `scheduleRender` returns a promise; we use the `void` keyword to instruct TypeScript that we are purposefully not using `await` to wait for the promise to resolve. When scheduling a render it's most common to "fire and forget".
+
+To summarise, most components start off life looking like:
+
+```ts
+export class ElementsBreadcrumbs extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-chrome-link`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #boundRender = this.#render.bind(this);
+
+  #render(): void {
+    LitHtml.render(LitHtml.html``, this.#shadow, {host:this});
+  }
+}
+```
+
+## Triggering a render
+
+One of the most important aspects to understand about our component system is that **rendering does not happen automatically**.
+
+To ensure we trigger a render once the component is added to the DOM, we can define [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#:~:text=lifecycle.%20For%20example%2C-,connectedCallback,-is%20invoked%20each):
+
+```ts
+export class ElementsBreadcrumbs extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-chrome-link`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #boundRender = this.#render.bind(this);
+
+  connectedCallback(): void {
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  #render(): void {
+    LitHtml.render(LitHtml.html``, this.#shadow, {host:this});
+  }
+}
+```
+
+## Passing data into a component
+
+Most of our components will require data that is passed into them. For example, `ElementsBreadcrumbs` takes in an array of `DOMNode` objects.
+
+To provide a component some data, we define a `data` setter. This setter takes an object with any data the component requires. This object should have a TypeScript interface defined for it:
+
+```ts
+export interface ElementsBreadcrumbsData {
+  selectedNode: DOMNode|null;
+  crumbs: DOMNode[];
+}
+
+export class ElementsBreadcrumbs extends HTMLElement {
+  // ...
+  #crumbs: DOMNode[] = [];
+  #selectedNode: DOMNode|null = null;
+
+  set data(data: ElementsBreadcrumbsData) {
+    this.#crumbs = data.crumbs;
+    this.#selectedNode = data.selectedNode;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+}
+```
+
+## Rendering components
+
+Now we know how to create components that can take data, let's render them!
+
+### From a DevTools Widget
+
+If you are rendering a component from the DevTools widget system, you should instantiate the component, pass any `data` to it, and then append it into the DOM:
+
+```ts
+// Within a Widget
+const breadcrumbs = new ElementsBreadcrumbs();
+breadcrumbs.data = {selectedNode: node, crumbs: [...]};
+this.appendChild(breadcrumbs);
+```
+
+### From another component
+
+If you are rendering a component from within another component, render it within the call to `LitHtml.html` and use the static `litTagName` property:
+
+```ts
+// Within some component
+LitHtml.render(LitHtml.html`
+  <${ElementsBreadcrumbs.litTagName}></${ElementsBreadcrumbs>
+`, this.#shadow, {host: this});
+```
+
+To pass data, we use [LitHtml's dot syntax](https://lit.dev/docs/templates/expressions/#property-expressions) to set the `data` property (and invoke our `set data` setter):
+
+```ts
+// Within some component
+LitHtml.render(LitHtml.html`
+  <${ElementsBreadcrumbs.litTagName} .data=${{
+    selectedNode: node,
+    crumbs: [...],
+  }}>
+  </${ElementsBreadcrumbs>
+`, this.#shadow, {host: this});
+```
+
+To enforce some type safety, we also use TypeScript's `as` keyword to force the compiler to type-check the `data` object against the interface:
+
+```ts
+// Within some component
+LitHtml.render(LitHtml.html`
+  <${ElementsBreadcrumbs.litTagName} .data=${{
+    selectedNode: node,
+    crumbs: [...],
+  } as ElementsBreadcrumbsData}>
+  </${ElementsBreadcrumbs>
+`, this.#shadow, {host: this});
+```
+
+This type-checking requirement is enforced by an ESLint rule.
+
+## Performance concerns with data passing
+
+The approach of `set data(data)` was chosen because:
+
+1. It requires few lines of code.
+2. It provides some form of type safety via the `as FooData` check.
+3. At the time we didn't have a solution for scheduled and batched renders, and didn't want multiple setters to trigger multiple unnecessary renders.
+
+However, using `set data(data)` does come with some negative performance costs:
+
+1. LitHtml will always think the value has changed, because it's an object. If a component renders twice with `.data=${{name: 'Jack'}}`, Lit will think that the value has changed because it's a new object, even though we can see it's holding the same data.
+2. This approach causes these objects to be created (and subsequently garbage collected) on/after each render.
+
+For most components in DevTools, these trade-offs are acceptable, and we prefer the type-safety of `set data` and take the usually imperceivable performance hit. However, in rare circumstances, this performance hit is noticeable. A good example of this is in Performance Insights, where we have to constantly re-render components as the user scrolls through their performance timeline. We noticed that this caused a large amount of garbage collection from all the objects being created per-render and then immediately disposed.
+
+For these situations, we can instead move to an approach where we set properties individually. We still define the interface as before, and then define an individual setter for each property:
+
+```ts
+interface ElementsBreadcrumbsData {
+  selectedNode: DOMNode|null;
+  crumbs: DOMNode[];
+}
+
+class ElementsBreadcrumbs extends HTMLElement {
+  #crumbs: DOMNode[] = [];
+  #selectedNode: DOMNode|null = null;
+
+  set crumbs(crumbs: ElementsBreadcrumbsData['crumbs']) {
+    this.#crumbs = crumbs;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  set selectedNode(selectedNode: ElementsBreadcrumbsData['selectedNode']) {
+    this.#selectedNode = selectedNode;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+}
+```
+
+Rendering this component within another Lit component would now be done like so:
+
+```ts
+// Within some component
+LitHtml.render(LitHtml.html`
+  <${ElementsBreadcrumbs.litTagName} .crumbs=${[...]} .selectedNode=${node}>
+  </${ElementsBreadcrumbs>
+`, this.#shadow, {host: this});
+```
+
+This solution is more performant, but less type-safe as TypeScript has no means of checking those values. This is something we may rectify using the `as` pattern, but for now it's preferred to use the `set data` method by default.
+
+
+

package/front_end/ui/components/panel_feedback/PreviewToggle.ts

@@ -72,23 +72,22 @@ export class PreviewToggle extends HTMLElement {
     render(
       html`
       <div class="container">
-        <div class="checkbox-line">
-          <label class="experiment-preview">
-            <input type="checkbox" ?checked=${checked} @change=${this.#checkboxChanged} aria-label=${this.#name}/>
-            <${IconButton.Icon.Icon.litTagName} .data=${{
-              iconName: 'ic_preview_feature',
-              width: '16px',
-              height: '16px',
-              color: 'var(--color-text-secondary)',
-            } as IconButton.Icon.IconData}>
-            </${IconButton.Icon.Icon.litTagName}>${this.#name}
-          </label>
-          ${this.#feedbackURL && !this.#helperText
-            ? html`<div class="feedback"><x-link class="x-link" href=${this.#feedbackURL}>${i18nString(UIStrings.shortFeedbackLink)}</x-link></div>`
-            : nothing}
-        </div>
+        <label class="experiment-preview">
+          <input type="checkbox" ?checked=${checked} @change=${this.#checkboxChanged} aria-label=${this.#name}/>
+          <${IconButton.Icon.Icon.litTagName} .data=${{
+            iconName: 'ic_preview_feature',
+            width: '16px',
+            height: '16px',
+            color: 'var(--color-text-secondary)',
+          } as IconButton.Icon.IconData}>
+          </${IconButton.Icon.Icon.litTagName}>${this.#name}
+        </label>
+        <div class="spacer"></div>
+        ${this.#feedbackURL && !this.#helperText
+          ? html`<div class="feedback"><x-link class="x-link" href=${this.#feedbackURL}>${i18nString(UIStrings.shortFeedbackLink)}</x-link></div>`
+          : nothing}
         ${this.#learnMoreURL
-          ? html`<x-link class="x-link" href=${this.#learnMoreURL}>${i18nString(UIStrings.learnMoreLink)}</x-link>`
+          ? html`<div class="learn-more"><x-link class="x-link" href=${this.#learnMoreURL}>${i18nString(UIStrings.learnMoreLink)}</x-link></div>`
           : nothing}
         <div class="helper">
           ${this.#helperText && this.#feedbackURL

package/front_end/ui/components/panel_feedback/previewToggle.css

@@ -8,35 +8,33 @@
   display: block;
 }
 
-.experiment-preview {
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 4px;
+}
+
+.experiment-preview,
+.feedback,
+.learn-more {
   display: flex;
   align-items: center;
 }
 
 .helper {
+  flex-basis: 100%;
   text-align: center;
   font-style: italic;
 }
 
-.feedback {
-  text-align: right;
-}
-
-.checkbox-line {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.container {
-  padding: 4px;
+.spacer {
+  flex: 1;
 }
 
 .x-link {
   color: var(--color-primary);
   text-decoration-line: underline;
-  margin: 4px;
+  margin: 0 4px;
 }
 
 .feedback .x-link {

package/front_end/ui/components/text_editor/TextEditor.ts

@@ -105,6 +105,9 @@ export class TextEditor extends HTMLElement {
   connectedCallback(): void {
     if (!this.#activeEditor) {
       this.#createEditor();
+    } else {
+      this.#activeEditor.scrollDOM.scrollTop = this.#lastScrollPos.top;
+      this.#activeEditor.scrollDOM.scrollLeft = this.#lastScrollPos.left;
     }
   }
 

package/front_end/ui/legacy/ARIAUtils.ts

@@ -344,10 +344,6 @@ export function setAccessibleName(element: Element, name: string): void {
   element.setAttribute('aria-label', name);
 }
 
-// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const _descriptionMap = new WeakMap<Element, Element>();
-
 export function setDescription(element: Element, description: string): void {
   // Nodes in the accessibility tree are made up of a core
   // triplet of "name", "value", "description"
@@ -360,77 +356,7 @@ export function setDescription(element: Element, description: string): void {
   // to appear with the description when the element is hovered.
   // This is usually fine, except that DevTools has its own styled
   // tooltips which would interfere with the browser tooltips.
-  //
-  // In future, the aria-description attribute may be used once it
-  // is unflagged.
-  //
-  // aria-describedby requires that an extra element exist in DOM
-  // that this element can point to. Both elements also have to
-  // be in the same shadow root. This is not trivial to manage.
-  // The rest of DevTools shouldn't have to worry about this,
-  // so there is some unfortunate code below.
-
-  const oldDescription = _descriptionMap.get(element);
-  if (oldDescription) {
-    oldDescription.remove();
-  }
-  element.removeAttribute('data-aria-utils-animation-hack');
-
-  if (!description) {
-    _descriptionMap.delete(element);
-    element.removeAttribute('aria-describedby');
-    return;
-  }
-
-  // We make a hidden element that contains the decsription
-  // and will be pointed to by aria-describedby.
-  const descriptionElement = document.createElement('span');
-  descriptionElement.textContent = description;
-  descriptionElement.style.display = 'none';
-  ensureId(descriptionElement);
-  element.setAttribute('aria-describedby', descriptionElement.id);
-  _descriptionMap.set(element, descriptionElement);
-
-  // Now we have to actually put this description element
-  // somewhere in the DOM so that we can point to it.
-  // It would be nice to just put it in the body, but that
-  // wouldn't work if the main element is in a shadow root.
-  // So the cleanest approach is to add the description element
-  // as a child of the main element. But wait! Some HTML elements
-  // aren't supposed to have children. Blink won't search inside
-  // these elements, and won't find our description element.
-  const contentfulVoidTags = new Set<string>(['INPUT', 'IMG']);
-  if (!contentfulVoidTags.has(element.tagName)) {
-    element.appendChild(descriptionElement);
-    // If we made it here, someone setting .textContent
-    // or removeChildren on the element will blow away
-    // our description. At least we tried our best!
-    return;
-  }
-
-  // We have some special element, like an <input>, where putting the
-  // description element inside it doesn't work.
-  // Lets try the next best thing, and just put the description element
-  // next to it in the DOM.
-  const inserted = element.insertAdjacentElement('afterend', descriptionElement);
-  if (inserted) {
-    return;
-  }
-
-  // Uh oh, the insertion didn't work! That means we aren't currently in the DOM.
-  // How can we find out when the element enters the DOM?
-  // See inspectorCommon.css
-  element.setAttribute('data-aria-utils-animation-hack', 'sorry');
-  element.addEventListener('animationend', () => {
-    // Someone might have made a new description in the meantime.
-    if (_descriptionMap.get(element) !== descriptionElement) {
-      return;
-    }
-    element.removeAttribute('data-aria-utils-animation-hack');
-
-    // Try it again. This time we are in the DOM, so it *should* work.
-    element.insertAdjacentElement('afterend', descriptionElement);
-  }, {once: true});
+  element.setAttribute('aria-description', description);
 }
 
 export function setActiveDescendant(element: Element, activedescendant: Element|null): void {

package/front_end/ui/legacy/ListControl.ts

@@ -428,6 +428,10 @@ export class ListControl<T> {
       }
       if (newElement) {
         ARIAUtils.setSelected(newElement, true);
+        const text = newElement.textContent;
+        if (text) {
+          ARIAUtils.alert(text);
+        }
       }
       ARIAUtils.setActiveDescendant(this.element, newElement);
     }

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -30,6 +30,7 @@
 
 import * as Common from '../../../../core/common/common.js';
 import type * as Components from '../utils/utils.js';
+import * as Root from '../../../../core/root/root.js';
 import * as Host from '../../../../core/host/host.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as LinearMemoryInspector from '../../../components/linear_memory_inspector/linear_memory_inspector.js';
@@ -222,8 +223,12 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
       return;
     }
 
+    const includedWebIdlTypes = webIdlType.includes?.map(className => domPinnedProperties[className]) ?? [];
+    const includedWebIdlProps = includedWebIdlTypes.flatMap(webIdlType => Object.entries(webIdlType.props ?? {}));
+    const webIdlProps = {...webIdlType.props, ...Object.fromEntries(includedWebIdlProps)};
+
     for (const property of properties) {
-      const webIdlProperty = webIdlType?.props?.[property.name];
+      const webIdlProperty = webIdlProps[property.name];
       if (webIdlProperty) {
         property.webIdl = {info: webIdlProperty};
       }
@@ -1118,10 +1123,12 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
       this.expandedValueElement = this.createExpandedValueElement(this.property.value);
     }
 
+    const experiment = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.IMPORTANT_DOM_PROPERTIES);
+
     let adorner: Element|string = '';
     let container: Element;
 
-    if (this.property.webIdl?.applicable) {
+    if (this.property.webIdl?.applicable && experiment) {
       const icon = new IconButton.Icon.Icon();
       icon.data = {
         iconName: 'star_outline',
@@ -1148,7 +1155,10 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.listItemElement.removeChildren();
     this.rowContainer = (container as HTMLElement);
     this.listItemElement.appendChild(this.rowContainer);
-    this.listItemElement.dataset.webidl = this.property.webIdl?.applicable ? 'true' : 'false';
+
+    if (experiment) {
+      this.listItemElement.dataset.webidl = this.property.webIdl?.applicable ? 'true' : 'false';
+    }
   }
 
   private updatePropertyPath(): void {