chrome-devtools-frontend 1.0.1547147 → 1.0.1548870

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -223,6 +223,14 @@ const UIStrings = {
    * @description Tooltip shown when user hovers over the cookie icon to explain that the button will bring the user to the cookie report
    */
   SeeIssueInCookieReport: 'Click to open privacy and security panel and show third-party cookie report',
+  /**
+   * @description Element text content in Object Properties Section
+   */
+  dots: '(...)',
+  /**
+   * @description Element title in Object Properties Section
+   */
+  invokePropertyGetter: 'Invoke property getter',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/console/ConsoleViewMessage.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -282,6 +290,14 @@ const hoverButtonObserver = new IntersectionObserver(results => {
   }
 });
 
+function appendOrShow(parent: Element, child: DocumentFragment|UI.Widget.Widget): void {
+  if (child instanceof UI.Widget.Widget) {
+    child.show(parent, null, /* suppressOprhanWidgetError=*/ true);
+  } else {
+    parent.appendChild(child);
+  }
+}
+
 export class ConsoleViewMessage implements ConsoleViewportElement {
   protected message: SDK.ConsoleModel.ConsoleMessage;
   private readonly linkifier: Components.Linkifier.Linkifier;
@@ -452,7 +468,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
           if (this.message.type === Protocol.Runtime.ConsoleAPICalledEventType.Assert) {
             this.messagePrefix = i18nString(UIStrings.assertionFailed);
           }
-          if (this.message.parameters && this.message.parameters.length === 1) {
+          if (this.message.parameters?.length === 1) {
             const parameter = this.message.parameters[0];
             if (typeof parameter !== 'string' && parameter.type === 'string') {
               messageElement = this.tryFormatAsError((parameter.value as string));
@@ -528,7 +544,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         this.selectableChildren.push({element: linkElement, forceSelect: () => linkElement.focus()});
         return linkElement;
       });
-      messageElement.appendChild(fragment);
+      appendOrShow(messageElement, fragment);
     }
     return messageElement;
   }
@@ -767,7 +783,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     for (let i = 0; i < parameters.length; ++i) {
       // Inline strings when formatting.
       if (shouldFormatMessage && parameters[i].type === 'string') {
-        formattedResult.appendChild(this.linkifyStringAsFragment(parameters[i].description || ''));
+        appendOrShow(formattedResult, this.linkifyStringAsFragment(parameters[i].description || ''));
       } else {
         formattedResult.appendChild(this.formatParameter(parameters[i], false, true));
       }
@@ -843,9 +859,10 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     const result = document.createElement('span');
     const description = obj.description || '';
     if (description.length > getMaxTokenizableStringLength()) {
-      const propertyValue =
-          new ObjectUI.ObjectPropertiesSection.ExpandableTextPropertyValue(description, getLongStringVisibleLength());
-      result.appendChild(propertyValue.element);
+      const propertyValue = new ObjectUI.ObjectPropertiesSection.ExpandableTextPropertyValue();
+      propertyValue.text = description;
+      propertyValue.maxLength = getLongStringVisibleLength();
+      propertyValue.show(result, null, /* suppressOprhanWidgetError=*/ true);
     } else {
       UI.UIUtils.createTextChild(result, description);
     }
@@ -982,7 +999,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     const text = Platform.StringUtilities.formatAsJSLiteral(description);
     const result = document.createElement('span');
     result.addEventListener('contextmenu', this.contextMenuEventFired.bind(this, output), false);
-    result.appendChild(this.linkifyStringAsFragment(text));
+    appendOrShow(result, this.linkifyStringAsFragment(text));
     return result;
   }
 
@@ -999,7 +1016,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       let errorElement = this.tryFormatAsError(error.errorStack, details);
       if (!errorElement) {
         errorElement = document.createElement('span');
-        errorElement.append(this.linkifyStringAsFragment(error.errorStack));
+        appendOrShow(errorElement, this.linkifyStringAsFragment(error.errorStack));
       }
 
       if (includeCausedByPrefix) {
@@ -1010,9 +1027,9 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         result.appendChild(errorElement);
       }
 
-      if (cause && cause.subtype === 'error') {
+      if (cause?.subtype === 'error') {
         await formatErrorStack(cause, /* includeCausedByPrefix */ true);
-      } else if (cause && cause.type === 'string') {
+      } else if (cause?.type === 'string') {
         const stringCauseElement = document.createElement('div');
         stringCauseElement.append(`Caused by: ${cause.value}`);
         result.append(stringCauseElement);
@@ -1037,11 +1054,43 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return fragment;
   }
 
+  createRemoteObjectAccessorPropertySpan(
+      object: SDK.RemoteObject.RemoteObject|null, propertyPath: string[],
+      callback: (arg0: SDK.RemoteObject.CallFunctionResult) => void): HTMLElement {
+    const rootElement = document.createElement('span');
+    const element = rootElement.createChild('span');
+    element.textContent = i18nString(UIStrings.dots);
+    if (!object) {
+      return rootElement;
+    }
+    element.classList.add('object-value-calculate-value-button');
+    UI.Tooltip.Tooltip.install(element, i18nString(UIStrings.invokePropertyGetter));
+    element.addEventListener('click', onInvokeGetterClick, false);
+
+    function onInvokeGetterClick(event: Event): void {
+      event.consume();
+      if (object) {
+        void object.callFunction(invokeGetter, [{value: JSON.stringify(propertyPath)}]).then(callback);
+      }
+    }
+
+    function invokeGetter(this: Object, arrayStr: string): Object {
+      let result: Object = this;
+      const properties = JSON.parse(arrayStr);
+      for (let i = 0, n = properties.length; i < n; ++i) {
+        // @ts-expect-error callFunction expects this to be a generic Object, so while this works we can't be more specific on types.
+        result = result[properties[i]];
+      }
+      return result;
+    }
+
+    return rootElement;
+  }
+
   private formatAsAccessorProperty(
       object: SDK.RemoteObject.RemoteObject|null, propertyPath: string[], isArrayEntry: boolean): HTMLElement {
     const rootElement =
-        ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.createRemoteObjectAccessorPropertySpan(
-            object, propertyPath, onInvokeGetterClick.bind(this));
+        this.createRemoteObjectAccessorPropertySpan(object, propertyPath, onInvokeGetterClick.bind(this));
 
     function onInvokeGetterClick(this: ConsoleViewMessage, result: SDK.RemoteObject.CallFunctionResult): void {
       const wasThrown = result.wasThrown;
@@ -1093,7 +1142,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         }
         case 'string': {
           if (currentStyle.size === 0) {
-            formattedResult.append(this.linkifyStringAsFragment(token.value));
+            appendOrShow(formattedResult, this.linkifyStringAsFragment(token.value));
           } else {
             const lines = token.value.split('\n');
             for (let i = 0; i < lines.length; i++) {
@@ -1104,7 +1153,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
               wrapper.style.setProperty('contain', 'paint');
               wrapper.style.setProperty('display', 'inline-block');
               wrapper.style.setProperty('max-width', '100%');
-              wrapper.appendChild(this.linkifyStringAsFragment(lines[i]));
+              appendOrShow(wrapper, this.linkifyStringAsFragment(lines[i]));
               for (const [property, {value, priority}] of currentStyle) {
                 wrapper.style.setProperty(property, value, priority);
               }
@@ -1477,7 +1526,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       return false;
     }
     if (!Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').getIfNotDisabled() ||
-        !AiAssistanceModel.BuiltInAi.BuiltInAi.cachedIsAvailable()) {
+        !AiAssistanceModel.BuiltInAi.BuiltInAi.instance().hasSession()) {
       return false;
     }
     const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
@@ -1757,13 +1806,13 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     for (let f = 0; f < frames.length; ++f) {
       const {name} = frames[f];
       const formattedLine = document.createElement('span');
-      formattedLine.appendChild(this.linkifyStringAsFragment(`${prefix} ${name} (`));
+      appendOrShow(formattedLine, this.linkifyStringAsFragment(`${prefix} ${name} (`));
       const scriptLocationLink = this.linkifier.linkifyScriptLocation(
           debuggerModel.target(), null, url, lineNumber, {columnNumber, inlineFrameIndex: f});
       scriptLocationLink.tabIndex = -1;
       this.selectableChildren.push({element: scriptLocationLink, forceSelect: () => scriptLocationLink.focus()});
       formattedLine.appendChild(scriptLocationLink);
-      formattedLine.appendChild(this.linkifyStringAsFragment(suffix));
+      appendOrShow(formattedLine, this.linkifyStringAsFragment(suffix));
       formattedLine.classList.add('formatted-stack-frame');
       stackTrace.insertBefore(formattedLine, insertBefore);
     }
@@ -1824,7 +1873,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       // where the error occurred. We use the source location from the
       // exceptionDetails and append it to the end of the message instead.
       if (!link && exceptionDetails && line.startsWith('SyntaxError')) {
-        formattedResult.appendChild(this.linkifyStringAsFragment(line));
+        appendOrShow(formattedResult, this.linkifyStringAsFragment(line));
         const maybeScriptLocation = this.createScriptLocationLinkForSyntaxError(debuggerModel, exceptionDetails);
         if (maybeScriptLocation) {
           formattedResult.append(' (at ');
@@ -1835,18 +1884,18 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         continue;
       }
       if (!isCallFrame) {
-        formattedResult.appendChild(this.linkifyStringAsFragment(`${line}${newline}`));
+        appendOrShow(formattedResult, this.linkifyStringAsFragment(`${line}${newline}`));
         continue;
       }
       const formattedLine = document.createElement('span');
       if (!link) {
-        formattedLine.appendChild(this.linkifyStringAsFragment(`${line}${newline}`));
+        appendOrShow(formattedLine, this.linkifyStringAsFragment(`${line}${newline}`));
         formattedLine.classList.add('formatted-builtin-stack-frame');
         formattedResult.appendChild(formattedLine);
         continue;
       }
       const suffix = `${link.suffix}${newline}`;
-      formattedLine.appendChild(this.linkifyStringAsFragment(link.prefix));
+      appendOrShow(formattedLine, this.linkifyStringAsFragment(link.prefix));
       const scriptLocationLink = this.linkifier.linkifyScriptLocation(
           debuggerModel.target(), link.scriptId || null, link.url, link.lineNumber, {
             columnNumber: link.columnNumber,
@@ -1856,7 +1905,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       scriptLocationLink.tabIndex = -1;
       this.selectableChildren.push({element: scriptLocationLink, forceSelect: () => scriptLocationLink.focus()});
       formattedLine.appendChild(scriptLocationLink);
-      formattedLine.appendChild(this.linkifyStringAsFragment(suffix));
+      appendOrShow(formattedLine, this.linkifyStringAsFragment(suffix));
       formattedLine.classList.add('formatted-stack-frame');
       formattedResult.appendChild(formattedLine);
 
@@ -1887,13 +1936,12 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   private linkifyWithCustomLinkifier(
       string: string,
       linkifier: (arg0: string, arg1: Platform.DevToolsPath.UrlString, arg2?: number, arg3?: number) => Node):
-      DocumentFragment {
+      DocumentFragment|UI.Widget.Widget {
     if (string.length > getMaxTokenizableStringLength()) {
-      const propertyValue =
-          new ObjectUI.ObjectPropertiesSection.ExpandableTextPropertyValue(string, getLongStringVisibleLength());
-      const fragment = document.createDocumentFragment();
-      fragment.appendChild(propertyValue.element);
-      return fragment;
+      const propertyValue = new ObjectUI.ObjectPropertiesSection.ExpandableTextPropertyValue();
+      propertyValue.text = string;
+      propertyValue.maxLength = getLongStringVisibleLength();
+      return propertyValue;
     }
     const container = document.createDocumentFragment();
     const tokens = ConsoleViewMessage.tokenizeMessageText(string);
@@ -1932,7 +1980,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return container;
   }
 
-  private linkifyStringAsFragment(string: string): DocumentFragment {
+  private linkifyStringAsFragment(string: string): DocumentFragment|UI.Widget.Widget {
     return this.linkifyWithCustomLinkifier(string, (text, url, lineNumber, columnNumber) => {
       const options = {text, lineNumber, columnNumber};
       const linkElement =

package/front_end/panels/console/ConsoleViewport.ts

@@ -424,7 +424,7 @@ export class ConsoleViewport {
 
     for (let i = start; i <= end; i++) {
       const element = (this.providerElement(i) as ConsoleViewMessage);
-      if (element && element.consoleMessage().type === 'table') {
+      if (element?.consoleMessage().type === 'table') {
         return true;
       }
     }

package/front_end/panels/console/consoleInsightTeaser.css

@@ -88,6 +88,7 @@
     padding: var(--sys-size-5) 0 0;
     display: flex;
     align-items: center;
+    height: 34px;
 
     devtools-checkbox {
       margin-left: auto;

package/front_end/panels/coverage/CoverageModel.ts

@@ -895,7 +895,7 @@ export const mergeSegments = (segmentsA: CoverageSegment[], segmentsB: CoverageS
     const end = Math.min(a.end, b.end);
     const last = result[result.length - 1];
     const stamp = Math.min(a.stamp, b.stamp);
-    if (!last || last.count !== count || last.stamp !== stamp) {
+    if (last?.count !== count || last.stamp !== stamp) {
       result.push({end, count, stamp});
     } else {
       last.end = end;
@@ -1078,7 +1078,7 @@ export class CoverageInfo {
     for (const segment of this.segments) {
       if (segment.count) {
         const last = ranges.length > 0 ? ranges[ranges.length - 1] : null;
-        if (last && last.end === start + offset) {
+        if (last?.end === start + offset) {
           // We can extend the last segment.
           last.end = segment.end + offset;
         } else {

package/front_end/panels/elements/ElementsPanel.ts

@@ -641,7 +641,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
       return;
     }
 
-    if (!this.searchConfig || this.searchConfig.query !== query) {
+    if (this.searchConfig?.query !== query) {
       this.onSearchCanceled();
     } else {
       this.hideSearchHighlights();

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -104,6 +104,7 @@ interface ViewInput {
 interface ViewOutput {
   elementsTreeOutline?: ElementsTreeOutline;
   highlightedTreeElement: ElementsTreeElement|null;
+  isUpdatingHighlights: boolean;
   alreadyExpandedParentTreeElement: ElementsTreeElement|null;
 }
 
@@ -135,6 +136,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
   // Node highlighting logic. FIXME: express as a lit template.
   const previousHighlightedNode = output.highlightedTreeElement?.node() ?? null;
   if (previousHighlightedNode !== input.currentHighlightedNode) {
+    output.isUpdatingHighlights = true;
     let treeElement: ElementsTreeElement|null = null;
 
     if (output.highlightedTreeElement) {
@@ -172,6 +174,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
     output.highlightedTreeElement = treeElement;
     output.elementsTreeOutline.setHoverEffect(treeElement);
     treeElement?.reveal(true);
+    output.isUpdatingHighlights = false;
   }
 };
 
@@ -224,6 +227,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   #viewOutput: ViewOutput = {
     highlightedTreeElement: null,
     alreadyExpandedParentTreeElement: null,
+    isUpdatingHighlights: false,
   };
   #highlightThrottler = new Common.Throttler.Throttler(100);
 
@@ -238,8 +242,8 @@ export class DOMTreeWidget extends UI.Widget.Widget {
           SDK.OverlayModel.OverlayModel, SDK.OverlayModel.Events.HIGHLIGHT_NODE_REQUESTED, this.#highlightNode, this,
           {scoped: true});
       SDK.TargetManager.TargetManager.instance().addModelListener(
-          SDK.OverlayModel.OverlayModel, SDK.OverlayModel.Events.INSPECT_MODE_WILL_BE_TOGGLED, this.#clearState, this,
-          {scoped: true});
+          SDK.OverlayModel.OverlayModel, SDK.OverlayModel.Events.INSPECT_MODE_WILL_BE_TOGGLED,
+          this.#clearHighlightedNode, this, {scoped: true});
     }
   }
 
@@ -250,7 +254,13 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     });
   }
 
-  #clearState(): void {
+  #clearHighlightedNode(): void {
+    // Highlighting an element via tree outline will emit the
+    // INSPECT_MODE_WILL_BE_TOGGLED event, therefore, we skip it if the view
+    // informed us that it is updating the element.
+    if (this.#viewOutput.isUpdatingHighlights) {
+      return;
+    }
     this.#currentHighlightedNode = null;
     this.requestUpdate();
   }
@@ -304,11 +314,11 @@ export class DOMTreeWidget extends UI.Widget.Widget {
           currentHighlightedNode: this.#currentHighlightedNode,
           onElementsTreeUpdated: this.onElementsTreeUpdated.bind(this),
           onSelectedNodeChanged: event => {
-            this.#clearState();
+            this.#clearHighlightedNode();
             this.onSelectedNodeChanged(event);
           },
-          onElementCollapsed: this.#clearState.bind(this),
-          onElementExpanded: this.#clearState.bind(this),
+          onElementCollapsed: this.#clearHighlightedNode.bind(this),
+          onElementExpanded: this.#clearHighlightedNode.bind(this),
         },
         this.#viewOutput, this.contentElement);
   }
@@ -684,7 +694,7 @@ export class ElementsTreeOutline extends
   }
 
   resetClipboardIfNeeded(removedNode: SDK.DOMModel.DOMNode): void {
-    if (this.clipboardNodeData && this.clipboardNodeData.node === removedNode) {
+    if (this.clipboardNodeData?.node === removedNode) {
       this.setClipboardData(null);
     }
   }

package/front_end/panels/elements/NodeStackTraceWidget.ts

@@ -5,6 +5,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
+import type * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, render} from '../../ui/lit/lit.js';
@@ -23,20 +24,20 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 interface ViewInput {
   target?: SDK.Target.Target;
   linkifier: Components.Linkifier.Linkifier;
-  options: Components.JSPresentationUtils.Options;
+  stackTrace?: StackTrace.StackTrace.StackTrace;
 }
 
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input, _output, target) => {
-  const {target: sdkTarget, linkifier, options} = input;
+  const {target: sdkTarget, linkifier, stackTrace} = input;
   // clang-format off
   render(html`
     <style>${nodeStackTraceWidgetStyles}</style>
-    ${target && options.stackTrace ?
+    ${target && stackTrace ?
          html`<devtools-widget
                 class="stack-trace"
-                .widgetConfig=${UI.Widget.widgetConfig(Components.JSPresentationUtils.StackTracePreviewContent, {target: sdkTarget, linkifier, options})}>
+                .widgetConfig=${UI.Widget.widgetConfig(Components.JSPresentationUtils.StackTracePreviewContent, {target: sdkTarget, linkifier, stackTrace})}>
               </devtools-widget>` :
          html`<div class="gray-info-message">${i18nString(UIStrings.noStackTraceAvailable)}</div>`}`,
     target);
@@ -75,7 +76,7 @@ export class NodeStackTraceWidget extends UI.Widget.VBox {
     const input: ViewInput = {
       target,
       linkifier: this.#linkifier,
-      options: {stackTrace},
+      stackTrace,
     };
     this.#view(input, {}, this.contentElement);
   }

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -2412,8 +2412,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
 
     if (this.valueElement) {
-      const lineBreakValue =
-          this.valueElement.firstElementChild && this.valueElement.firstElementChild.tagName === 'BR';
+      const lineBreakValue = this.valueElement.firstElementChild?.tagName === 'BR';
       const separator = lineBreakValue ? ':' : ': ';
       this.listItemElement.createChild('span', 'styles-name-value-separator').textContent = separator;
       if (this.expandElement) {

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -368,7 +368,7 @@ function renderInsightSourcesList(
     sources: Console.PromptBuilder.Source[], isPageReloadRecommended: boolean): Lit.TemplateResult {
   // clang-format off
   return html`
-    <div class="insight-sources">style>
+    <div class="insight-sources">
       <ul>
         ${Directives.repeat(sources, item => item.value, item => {
           return html`<li><x-link class="link" title="${localizeType(item.type)} ${i18nString(UIStrings.opensInNewTab)}" href="data:text/plain;charset=utf-8,${encodeURIComponent(item.value)}" jslog=${VisualLogging.link('source-' + item.type).track({click: true})}>

package/front_end/panels/network/RequestConditionsDrawer.ts

@@ -123,22 +123,42 @@ const UIStrings = {
    */
   learnMoreLabel: 'Learn more about URL pattern syntax',
   /**
-   * @description Aria label on a button moving an entry up
+   * @description Tooltip on a button moving an entry up
+   * @example {*://example.com} PH1
    */
-  increasePriority: 'Move up (higher patterns are checked first)',
+  increasePriority: 'Move up {PH1}',
   /**
-   * @description Aria label on a button moving an entry down
+   * @description Tooltip on a button moving an entry down
+   * @example {*://example.com} PH1
    */
-  decreasePriority: 'Move down (higher patterns are checked first)',
+  decreasePriority: 'Move down {PH1}',
   /**
    * @description Tooltip on a checkbox togging the effects for a pattern
    * @example {*://example.com} PH1
    */
   enableThrottlingToggleLabel: 'Throttle or block {PH1}',
   /**
-   * @description Aria label on a combobox selecting the request conditions
+   * @description Tooltip on a combobox selecting the request conditions
    */
   requestConditionsLabel: 'Request conditions',
+  /**
+   * @description Aria announcement when a pattern was moved up
+   */
+  patternMovedUp: 'URL pattern was moved up',
+  /**
+   * @description Aria announcemenet when a pattern was moved down
+   */
+  patternMovedDown: 'URL pattern was moved down',
+  /**
+   * @description Text on a button to start editing text
+   * @example {*://example.com} PH1
+   */
+  editPattern: 'Edit {PH1}',
+  /**
+   * @description Label for an item to remove something
+   * @example {*://example.com} PH1
+   */
+  removePattern: 'Remove {PH1}',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/RequestConditionsDrawer.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -195,7 +215,9 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           ${individualThrottlingEnabled ? i18nString(UIStrings.addRule) : i18nString(UIStrings.addPattern)}
       </devtools-button>
     </div>
-    <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(UI.Widget.VBox)}>${input.list.element}</devtools-widget>
+    <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(UI.Widget.VBox)}>
+      ${input.list.element}
+    </devtools-widget>
     `,
       // clang-format on
       target);
@@ -379,6 +401,12 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
     const element = document.createElement('div');
     this.#listElements.set(condition, element);
     element.classList.add('blocked-url');
+    this.updateItem(element, condition, editable, index);
+    return element;
+  }
+
+  updateItem(element: HTMLElement, condition: SDK.NetworkManager.RequestCondition, editable: boolean, index: number):
+      void {
     const toggle = (e: Event): void => {
       if (editable) {
         e.consume(true);
@@ -396,12 +424,14 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
     if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
       const moveUp = (e: Event): void => {
         if (this.manager.requestConditions.conditionsEnabled) {
+          UI.ARIAUtils.LiveAnnouncer.status(i18nString(UIStrings.patternMovedUp));
           e.consume(true);
           this.manager.requestConditions.increasePriority(condition);
         }
       };
       const moveDown = (e: Event): void => {
         if (this.manager.requestConditions.conditionsEnabled) {
+          UI.ARIAUtils.LiveAnnouncer.status(i18nString(UIStrings.patternMovedDown));
           e.consume(true);
           this.manager.requestConditions.decreasePriority(condition);
         }
@@ -413,13 +443,13 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
       @click=${toggle}
       type=checkbox
       title=${i18nString(UIStrings.enableThrottlingToggleLabel, {PH1: constructorStringOrWildcardURL})}
-      ?checked=${enabled}
-      ?disabled=${!editable || !originalOrUpgradedURLPattern}
-      .jslog=${VisualLogging.toggle().track({ change: true })}>
+      .checked=${enabled}
+      .disabled=${!editable || !originalOrUpgradedURLPattern}
+      jslog=${VisualLogging.toggle().track({ change: true })}>
     <devtools-button
       .iconName=${'arrow-up'}
       .variant=${Buttons.Button.Variant.ICON}
-      .title=${i18nString(UIStrings.decreasePriority)}
+      .title=${i18nString(UIStrings.decreasePriority, {PH1: constructorStringOrWildcardURL})}
       .jslogContext=${'decrease-priority'}
       ?disabled=${!editable || !originalOrUpgradedURLPattern}
       @click=${moveUp}>
@@ -427,7 +457,7 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
     <devtools-button
       .iconName=${'arrow-down'}
       .variant=${Buttons.Button.Variant.ICON}
-      .title=${i18nString(UIStrings.increasePriority)}
+      .title=${i18nString(UIStrings.increasePriority, {PH1: constructorStringOrWildcardURL})}
       .jslogContext=${'increase-priority'}
       ?disabled=${!editable || !originalOrUpgradedURLPattern}
       @click=${moveDown}></devtools-button>
@@ -492,15 +522,14 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
     <input class=blocked-url-checkbox
       @click=${toggle}
       type=checkbox
-      ?checked=${condition.enabled}
-      ?disabled=${!editable}
-      .jslog=${VisualLogging.toggle().track({ change: true })}>
+      .checked=${condition.enabled}
+      .disabled=${!editable}
+      jslog=${VisualLogging.toggle().track({ change: true })}>
     <div @click=${toggle} class=blocked-url-label>${wildcardURL}</div>
     <devtools-widget .widgetConfig=${widgetConfig(AffectedCountWidget, {condition, drawer: this})}></devtools-widget>`,
           // clang-format on
           element);
     }
-    return element;
   }
 
   private toggleEnabled(): void {
@@ -585,11 +614,26 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
 
   update(): void {
     const enabled = this.manager.requestConditions.conditionsEnabled;
-    this.list.clear();
-    for (const pattern of this.manager.requestConditions.conditions) {
-      if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled || pattern.wildcardURL) {
-        this.list.appendItem(pattern, enabled);
-      }
+    const newItems = Array.from(this.manager.requestConditions.conditions.filter(
+        pattern => Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled || pattern.wildcardURL));
+
+    let oldIndex = 0;
+    for (; oldIndex < newItems.length; ++oldIndex) {
+      const pattern = newItems[oldIndex];
+      this.list.updateItem(
+          oldIndex,
+          pattern,
+          enabled,
+          /* focusable=*/ false,
+          {
+            edit: i18nString(UIStrings.editPattern, {PH1: pattern.constructorStringOrWildcardURL}),
+            delete: i18nString(UIStrings.removePattern, {PH1: pattern.constructorStringOrWildcardURL})
+          },
+      );
+    }
+
+    while (oldIndex < this.list.items.length) {
+      this.list.removeItem(oldIndex);
     }
     this.requestUpdate();
   }

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -434,7 +434,7 @@ export class HeapSnapshotGridNode extends
             }
 
             // Merge with the next range.
-            if (nextRange && newEndOfRange === nextRange.from) {
+            if (newEndOfRange === nextRange?.from) {
               range.to = nextRange.to;
               // Remove "show next" button if there is one.
               this.removeChildByIndex(insertionIndex);