chrome-devtools-frontend 1.0.1583146 → 1.0.1585538

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -73,6 +73,7 @@ import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {getRegisteredDecorators, type MarkerDecorator, type MarkerDecoratorRegistration} from './MarkerDecorator.js';
 
 const {html, nothing, render, Directives: {ref}} = Lit;
+const {animateOn} = UI.UIUtils;
 
 const UIStrings = {
   /**
@@ -465,6 +466,8 @@ export interface Decoration {
   color: string;
 }
 
+const DOM_UPDATE_ANIMATION_CLASS_NAME = 'dom-update-highlight';
+
 function handleAdornerKeydown(cb: (event: Event) => void): (event: KeyboardEvent) => void {
   return (event: KeyboardEvent) => {
     if (event.code === 'Enter' || event.code === 'Space') {
@@ -525,14 +528,6 @@ function renderTitle(
         const result = convertUnicodeCharsToHTMLEntities(firstChild.nodeValue());
         const textContent = Platform.StringUtilities.collapseWhitespace(result.text);
 
-        const highlightAnimation = (updateRecord?.hasChangedChildren() || updateRecord?.isCharDataModified()) ?
-            ref(el => {
-              if (el) {
-                UI.UIUtils.runCSSAnimationOnce(el, 'dom-update-highlight');
-              }
-            }) :
-            nothing;
-
         const renderTextNode = ref(el => {
           if (el) {
             el.textContent = textContent;
@@ -541,8 +536,11 @@ function renderTitle(
         });
 
         return html`${openingTag}<span class="webkit-html-text-node" jslog=${
-            VisualLogging.value('text-node').track({change: true, dblclick: true})} ${highlightAnimation} ${
-            renderTextNode}></span>\u200B${renderTag(node, tagName, true, expanded, false, updateRecord)}`;
+            VisualLogging.value('text-node').track({change: true, dblclick: true})} ${
+            animateOn(
+                Boolean((updateRecord?.hasChangedChildren() || updateRecord?.isCharDataModified())),
+                DOM_UPDATE_ANIMATION_CLASS_NAME)} ${renderTextNode}></span>\u200B${
+            renderTag(node, tagName, true, expanded, false, updateRecord)}`;
       }
 
       if (isXMLMimeType || !ForbiddenClosingTagElements.has(tagName)) {
@@ -577,12 +575,6 @@ function renderTitle(
 
       const result = convertUnicodeCharsToHTMLEntities(node.nodeValue());
       const textContent = Platform.StringUtilities.collapseWhitespace(result.text);
-      const highlightAnimation = updateRecord?.isCharDataModified() ? ref(el => {
-        if (el) {
-          UI.UIUtils.runCSSAnimationOnce(el, 'dom-update-highlight');
-        }
-      }) :
-                                                                      nothing;
       const renderTextNode = ref(el => {
         if (el) {
           el.textContent = textContent;
@@ -592,7 +584,8 @@ function renderTitle(
       return html`"<span class="webkit-html-text-node" jslog=${VisualLogging.value('text-node').track({
         change: true,
         dblclick: true
-      })} ${highlightAnimation} ${renderTextNode}></span>"`;
+      })} ${animateOn(Boolean(updateRecord?.isCharDataModified()), DOM_UPDATE_ANIMATION_CLASS_NAME)} ${
+          renderTextNode}></span>"`;
     }
 
     case Node.COMMENT_NODE: {
@@ -622,18 +615,12 @@ function renderTitle(
 
     case Node.DOCUMENT_NODE: {
       const text = (node as SDK.DOMModel.DOMDocument).documentURL;
-      const linkify = ref(el => {
-        if (el) {
-          el.removeChildren();
-          el.appendChild(Components.Linkifier.Linkifier.linkifyURL(text, {
-            text,
-            preventClick: true,
-            showColumnNumber: false,
-            inlineFrameIndex: 0,
-          }));
-        }
-      });
-      return html`<span>#document (<span ${linkify}></span>)</span>`;
+      return html`<span>#document (<span>${Components.Linkifier.Linkifier.renderLinkifiedUrl(text, {
+        text,
+        preventClick: true,
+        showColumnNumber: false,
+        inlineFrameIndex: 0,
+      })}</span>)</span>`;
     }
 
     case Node.DOCUMENT_FRAGMENT_NODE: {
@@ -684,20 +671,6 @@ function renderAttribute(
     dblclick: true,
   });
 
-  const highlightNameAnimation = updateRecord?.isAttributeModified(name) && !hasText ? ref(el => {
-    if (el) {
-      UI.UIUtils.runCSSAnimationOnce(el, 'dom-update-highlight');
-    }
-  }) :
-                                                                                       nothing;
-
-  const highlightValueAnimation = updateRecord?.isAttributeModified(name) && hasText ? ref(el => {
-    if (el) {
-      UI.UIUtils.runCSSAnimationOnce(el, 'dom-update-highlight');
-    }
-  }) :
-                                                                                       nothing;
-
   function linkifyValue(value: string): Element {
     const rewrittenHref = node ? node.resolveURL(value) : null;
     if (rewrittenHref === null) {
@@ -831,10 +804,13 @@ function renderAttribute(
     }
   }
 
-  return html`<span class="webkit-html-attribute" jslog=${jslog}><span class="webkit-html-attribute-name" ${
-      highlightNameAnimation} ${relationRefDirective}>${name}</span>${
-      hasText ? html`=\u200B"<span class="webkit-html-attribute-value" ${highlightValueAnimation} ${setAttrValue} ${
-                    valueRelationRefDirective}></span>"` :
+  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)} ${setAttrValue} ${valueRelationRefDirective}></span>"` :
                 nothing}</span>`;
 }
 
@@ -855,13 +831,6 @@ function renderTag(
     hasUpdates = hasUpdates || (!expanded && updateRecord.hasChangedChildren());
   }
 
-  const highlightAnimation = hasUpdates ? ref(el => {
-    if (el) {
-      UI.UIUtils.runCSSAnimationOnce(el, 'dom-update-highlight');
-    }
-  }) :
-                                          nothing;
-
   // We are taking full text content of the tag, including attributes and children, to set the aria label.
   // FIXME: we should compute the aria label ourselves if it is event needed.
   const setAriaLabel = ref(el => {
@@ -876,7 +845,8 @@ function renderTag(
 
   return html`<span
       class=${Lit.Directives.classMap(classMap)} ${setAriaLabel}
-      >&lt;<span class=${tagNameClass} jslog=${jslog || nothing} ${highlightAnimation}>${tagString}</span>${
+      >&lt;<span class=${tagNameClass} jslog=${jslog || nothing} ${
+      animateOn(hasUpdates, DOM_UPDATE_ANIMATION_CLASS_NAME)}>${tagString}</span>${
       attributes.map(attr => html` ${renderAttribute(attr, updateRecord, false, node)}`)}&gt;</span>\u200B`;
 }
 
@@ -1189,7 +1159,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
 
   static animateOnDOMUpdate(treeElement: ElementsTreeElement): void {
     const tagName = treeElement.listItemElement.querySelector('.webkit-html-tag-name');
-    UI.UIUtils.runCSSAnimationOnce(tagName || treeElement.listItemElement, 'dom-update-highlight');
+    UI.UIUtils.runCSSAnimationOnce(tagName || treeElement.listItemElement, DOM_UPDATE_ANIMATION_CLASS_NAME);
   }
 
   static visibleShadowRoots(node: SDK.DOMModel.DOMNode): SDK.DOMModel.DOMNode[] {
@@ -1420,7 +1390,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         }
       }
     }
-    UI.UIUtils.runCSSAnimationOnce(animationElement, 'dom-update-highlight');
+    UI.UIUtils.runCSSAnimationOnce(animationElement, DOM_UPDATE_ANIMATION_CLASS_NAME);
   }
 
   isClosingTag(): boolean {
@@ -1726,13 +1696,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     if (this.editing) {
       return false;
     }
-    const handledByFloaty = UI.Floaty.onFloatyClick({
-      type: UI.Floaty.FloatyContextTypes.ELEMENT_NODE_ID,
-      data: {nodeId: this.nodeInternal.id},
-    });
-    if (handledByFloaty) {
-      return false;
-    }
     return super.select(omitFocus, selectedByUser);
   }
 

package/front_end/panels/elements/NodeStackTraceWidget.ts

@@ -45,7 +45,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 };
 
 export class NodeStackTraceWidget extends UI.Widget.VBox {
-  readonly #linkifier = new Components.Linkifier.Linkifier(MaxLengthForLinks);
+  readonly #linkifier = new Components.Linkifier.Linkifier(UI.UIUtils.MaxLengthForDisplayedURLsInConsole);
   readonly #view: View;
 
   constructor(view = DEFAULT_VIEW) {
@@ -81,5 +81,3 @@ export class NodeStackTraceWidget extends UI.Widget.VBox {
     this.#view(input, {}, this.contentElement);
   }
 }
-
-export const MaxLengthForLinks = 40;

package/front_end/panels/elements/computedStyleWidget.css

@@ -14,12 +14,7 @@
     width: 100%;
   }
 
-  .styles-sidebar-computed-style-widget {
-    min-height: auto;
-  }
-
-  .computed-style-tree-outline-container {
-    flex-grow: 1;
+  devtools-tree-outline {
     flex-shrink: 0;
   }
 

package/front_end/panels/issues/AffectedResourcesView.ts

@@ -253,8 +253,7 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
     const sourceCodeLocation = document.createElement('td');
     sourceCodeLocation.classList.add('affected-source-location');
     if (sourceLocation) {
-      const maxLengthForDisplayedURLs = 40;  // Same as console messages.
-      const linkifier = new Components.Linkifier.Linkifier(maxLengthForDisplayedURLs);
+      const linkifier = new Components.Linkifier.Linkifier(UI.UIUtils.MaxLengthForDisplayedURLsInConsole);
       const sourceAnchor = linkifier.linkifyScriptLocation(
           target || null, sourceLocation.scriptId || null, sourceLocation.url as Platform.DevToolsPath.UrlString,
           sourceLocation.lineNumber, {columnNumber: sourceLocation.columnNumber, inlineFrameIndex: 0});

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -1185,14 +1185,6 @@ export class NetworkRequestNode extends NetworkNode {
   }
 
   override select(suppressSelectedEvent?: boolean): void {
-    const id = this.request()?.requestId();
-    if (id) {
-      const floatyHandled =
-          UI.Floaty.onFloatyClick({type: UI.Floaty.FloatyContextTypes.NETWORK_REQUEST, data: {requestId: id}});
-      if (floatyHandled) {
-        return;
-      }
-    }
     super.select(suppressSelectedEvent);
     this.parentView().dispatchEventToListeners(Events.RequestSelected, this.requestInternal);
   }

package/front_end/panels/network/RequestConditionsDrawer.ts

@@ -183,6 +183,109 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       target);
 };
 
+function renderItem(
+    condition: SDK.NetworkManager.RequestCondition, editable: boolean, index: number,
+    onToggle: (condition: SDK.NetworkManager.RequestCondition) => void,
+    onConditionsChanged: (
+        condition: SDK.NetworkManager.RequestCondition, conditions: SDK.NetworkManager.ThrottlingConditions) => void,
+    onIncreasePriority: (condition: SDK.NetworkManager.RequestCondition) => void,
+    onDecreasePriority: (condition: SDK.NetworkManager.RequestCondition) => void,
+    lookUpRequestCount: (condition: SDK.NetworkManager.RequestCondition) => number): LitTemplate {
+  const {enabled, originalOrUpgradedURLPattern, constructorStringOrWildcardURL, wildcardURL} = condition;
+  const toggle = (e: Event): void => {
+    e.consume(true);
+    onToggle(condition);
+  };
+
+  const moveUp = (e: Event): void => {
+    e.consume(true);
+    onIncreasePriority(condition);
+  };
+
+  const moveDown = (e: Event): void => {
+    e.consume(true);
+    onDecreasePriority(condition);
+  };
+
+  // clang-format off
+  return html`
+    <input class=blocked-url-checkbox
+      @change=${toggle}
+      type=checkbox
+      title=${i18nString(UIStrings.enableThrottlingToggleLabel, {PH1: constructorStringOrWildcardURL})}
+      .checked=${live(enabled)}
+      .disabled=${!editable || !originalOrUpgradedURLPattern}
+      jslog=${VisualLogging.toggle().track({ change: true })}>
+    <devtools-button
+      .iconName=${'arrow-up'}
+      .variant=${Buttons.Button.Variant.ICON}
+      .title=${i18nString(UIStrings.increasePriority, {PH1: constructorStringOrWildcardURL})}
+      .jslogContext=${'decrease-priority'}
+      ?disabled=${!editable || !originalOrUpgradedURLPattern}
+      @click=${moveUp}>
+    </devtools-button>
+    <devtools-button
+      .iconName=${'arrow-down'}
+      .variant=${Buttons.Button.Variant.ICON}
+      .title=${i18nString(UIStrings.decreasePriority, {PH1: constructorStringOrWildcardURL})}
+      .jslogContext=${'increase-priority'}
+      ?disabled=${!editable || !originalOrUpgradedURLPattern}
+      @click=${moveDown}></devtools-button>
+    ${originalOrUpgradedURLPattern ? html`
+      <devtools-tooltip variant=rich jslogcontext=url-pattern id=url-pattern-${index}>
+        <div>hash: ${originalOrUpgradedURLPattern.hash}</div>
+        <div>hostname: ${originalOrUpgradedURLPattern.hostname}</div>
+        <div>password: ${originalOrUpgradedURLPattern.password}</div>
+        <div>pathname: ${originalOrUpgradedURLPattern.pathname}</div>
+        <div>port: ${originalOrUpgradedURLPattern.port}</div>
+        <div>protocol: ${originalOrUpgradedURLPattern.protocol}</div>
+        <div>search: ${originalOrUpgradedURLPattern.search}</div>
+        <div>username: ${originalOrUpgradedURLPattern.username}</div>
+        <hr />
+        ${learnMore()}
+      </devtools-tooltip>` : nothing}
+    ${wildcardURL ? html`
+      <devtools-icon name=warning-filled class="small warning" aria-details=url-pattern-warning-${index}>
+      </devtools-icon>
+      <devtools-tooltip variant=rich jslogcontext=url-pattern-warning id=url-pattern-warning-${index}>
+        ${i18nString(UIStrings.patternWasUpgraded, {PH1: wildcardURL})}
+      </devtools-tooltip>
+      `: nothing}
+    ${!originalOrUpgradedURLPattern ? html`
+      <devtools-icon name=cross-circle-filled class=small aria-details=url-pattern-error-${index}>
+      </devtools-icon>
+      <devtools-tooltip variant=rich jslogcontext=url-pattern-warning id=url-pattern-error-${index}>
+        ${SDK.NetworkManager.RequestURLPattern.isValidPattern(constructorStringOrWildcardURL) ===
+            SDK.NetworkManager.RequestURLPatternValidity.HAS_REGEXP_GROUPS
+            ? i18nString(UIStrings.patternFailedWithRegExpGroups)
+            : i18nString(UIStrings.patternFailedToParse)}
+        ${learnMore()}
+      </devtools-tooltip>`: nothing}
+    <div
+      @click=${toggle}
+      ?disabled=${!editable || !originalOrUpgradedURLPattern}
+      class=blocked-url-label
+      aria-details=url-pattern-${index}>
+        ${constructorStringOrWildcardURL}
+    </div>
+    <devtools-widget
+       class=conditions-selector
+       title=${i18nString(UIStrings.requestConditionsLabel)}
+       .widgetConfig=${UI.Widget.widgetConfig(
+         MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelectorWidget, {
+           variant:
+             MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect.Variant.INDIVIDUAL_REQUEST_CONDITIONS,
+           jslogContext: 'request-conditions',
+           disabled: !editable,
+           onConditionsChanged: conditions => onConditionsChanged(condition, conditions),
+           currentConditions: condition.conditions,
+         })}></devtools-widget>
+    <devtools-widget
+      ?disabled=${!editable || !originalOrUpgradedURLPattern}
+      .widgetConfig=${widgetConfig(AffectedCountWidget, {condition, lookUpRequestCount})}></devtools-widget>`;
+  // clang-format on
+}
+
 interface AffectedCountViewInput {
   count: number;
 }
@@ -198,39 +301,36 @@ function matchesUrl(conditions: SDK.NetworkManager.RequestCondition, url: string
 export class AffectedCountWidget extends UI.Widget.Widget {
   readonly #view: AffectedCountView;
   #condition?: SDK.NetworkManager.RequestCondition;
-  #drawer?: RequestConditionsDrawer;
+  #lookUpRequestCount?: (condition: SDK.NetworkManager.RequestCondition) => number;
+
   constructor(target?: HTMLElement, view = AFFECTED_COUNT_DEFAULT_VIEW) {
     super(target, {classes: ['blocked-url-count']});
     this.#view = view;
   }
 
-  get condition(): SDK.NetworkManager.RequestCondition|undefined {
-    return this.#condition;
+  get lookUpRequestCount(): ((condition: SDK.NetworkManager.RequestCondition) => number)|undefined {
+    return this.#lookUpRequestCount;
   }
 
-  set condition(conditions: SDK.NetworkManager.RequestCondition) {
-    this.#condition = conditions;
-    this.requestUpdate();
+  set lookUpRequestCount(val: (condition: SDK.NetworkManager.RequestCondition) => number) {
+    this.#lookUpRequestCount = val;
   }
 
-  get drawer(): RequestConditionsDrawer|undefined {
-    return this.#drawer;
+  get condition(): SDK.NetworkManager.RequestCondition|undefined {
+    return this.#condition;
   }
 
-  set drawer(drawer: RequestConditionsDrawer) {
-    this.#drawer = drawer;
+  set condition(conditions: SDK.NetworkManager.RequestCondition) {
+    this.#condition = conditions;
     this.requestUpdate();
   }
 
   override performUpdate(): void {
-    if (!this.#condition || !this.#drawer) {
+    if (!this.#condition || !this.#lookUpRequestCount) {
       return;
     }
 
-    const count = this.#condition.isBlocking ? this.#drawer.blockedRequestsCount(this.#condition) :
-                                               this.#drawer.throttledRequestsCount(this.#condition);
-
-    this.#view({count}, {}, this.element);
+    this.#view({count: this.#lookUpRequestCount(this.#condition)}, {}, this.element);
   }
 
   override wasShown(): void {
@@ -342,112 +442,38 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
 
   updateItem(element: HTMLElement, condition: SDK.NetworkManager.RequestCondition, editable: boolean, index: number):
       void {
-    const toggle = (e: Event): void => {
+    const onToggle = (condition: {enabled: boolean}): void => {
       if (editable) {
-        e.consume(true);
         condition.enabled = !condition.enabled;
       }
     };
-    const onConditionsChanged = (conditions: SDK.NetworkManager.ThrottlingConditions): void => {
-      if (editable) {
-        condition.conditions = conditions;
-      }
-    };
 
-    const {enabled, originalOrUpgradedURLPattern, constructorStringOrWildcardURL, wildcardURL} = condition;
+    const onConditionsChanged =
+        (condition: {conditions: SDK.NetworkManager.ThrottlingConditions},
+         conditions: SDK.NetworkManager.ThrottlingConditions): void => {
+          if (editable) {
+            condition.conditions = conditions;
+          }
+        };
 
-    const moveUp = (e: Event): void => {
+    const onIncreasePriority = (condition: SDK.NetworkManager.RequestCondition): 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 => {
+
+    const onDecreasePriority = (condition: SDK.NetworkManager.RequestCondition): void => {
       if (this.manager.requestConditions.conditionsEnabled) {
         UI.ARIAUtils.LiveAnnouncer.status(i18nString(UIStrings.patternMovedDown));
-        e.consume(true);
         this.manager.requestConditions.decreasePriority(condition);
       }
     };
+
     render(
-        // clang-format off
-        html`
-    <input class=blocked-url-checkbox
-      @change=${toggle}
-      type=checkbox
-      title=${i18nString(UIStrings.enableThrottlingToggleLabel, {PH1: constructorStringOrWildcardURL})}
-      .checked=${live(enabled)}
-      .disabled=${!editable || !originalOrUpgradedURLPattern}
-      jslog=${VisualLogging.toggle().track({ change: true })}>
-    <devtools-button
-      .iconName=${'arrow-up'}
-      .variant=${Buttons.Button.Variant.ICON}
-      .title=${i18nString(UIStrings.increasePriority, {PH1: constructorStringOrWildcardURL})}
-      .jslogContext=${'decrease-priority'}
-      ?disabled=${!editable || !originalOrUpgradedURLPattern}
-      @click=${moveUp}>
-    </devtools-button>
-    <devtools-button
-      .iconName=${'arrow-down'}
-      .variant=${Buttons.Button.Variant.ICON}
-      .title=${i18nString(UIStrings.decreasePriority, {PH1: constructorStringOrWildcardURL})}
-      .jslogContext=${'increase-priority'}
-      ?disabled=${!editable || !originalOrUpgradedURLPattern}
-      @click=${moveDown}></devtools-button>
-    ${originalOrUpgradedURLPattern ? html`
-      <devtools-tooltip variant=rich jslogcontext=url-pattern id=url-pattern-${index}>
-        <div>hash: ${originalOrUpgradedURLPattern.hash}</div>
-        <div>hostname: ${originalOrUpgradedURLPattern.hostname}</div>
-        <div>password: ${originalOrUpgradedURLPattern.password}</div>
-        <div>pathname: ${originalOrUpgradedURLPattern.pathname}</div>
-        <div>port: ${originalOrUpgradedURLPattern.port}</div>
-        <div>protocol: ${originalOrUpgradedURLPattern.protocol}</div>
-        <div>search: ${originalOrUpgradedURLPattern.search}</div>
-        <div>username: ${originalOrUpgradedURLPattern.username}</div>
-        <hr />
-        ${learnMore()}
-      </devtools-tooltip>` : nothing}
-    ${wildcardURL ? html`
-      <devtools-icon name=warning-filled class="small warning" aria-details=url-pattern-warning-${index}>
-      </devtools-icon>
-      <devtools-tooltip variant=rich jslogcontext=url-pattern-warning id=url-pattern-warning-${index}>
-        ${i18nString(UIStrings.patternWasUpgraded, {PH1: wildcardURL})}
-      </devtools-tooltip>
-      `: nothing}
-    ${!originalOrUpgradedURLPattern ? html`
-      <devtools-icon name=cross-circle-filled class=small aria-details=url-pattern-error-${index}>
-      </devtools-icon>
-      <devtools-tooltip variant=rich jslogcontext=url-pattern-warning id=url-pattern-error-${index}>
-        ${SDK.NetworkManager.RequestURLPattern.isValidPattern(constructorStringOrWildcardURL) ===
-            SDK.NetworkManager.RequestURLPatternValidity.HAS_REGEXP_GROUPS
-            ? i18nString(UIStrings.patternFailedWithRegExpGroups)
-            : i18nString(UIStrings.patternFailedToParse)}
-        ${learnMore()}
-      </devtools-tooltip>`: nothing}
-    <div
-      @click=${toggle}
-      ?disabled=${!editable || !originalOrUpgradedURLPattern}
-      class=blocked-url-label
-      aria-details=url-pattern-${index}>
-        ${constructorStringOrWildcardURL}
-    </div>
-    <devtools-widget
-       class=conditions-selector
-       title=${i18nString(UIStrings.requestConditionsLabel)}
-       .widgetConfig=${UI.Widget.widgetConfig(
-         MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelectorWidget, {
-           variant:
-             MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect.Variant.INDIVIDUAL_REQUEST_CONDITIONS,
-           jslogContext: 'request-conditions',
-           disabled: !editable,
-           onConditionsChanged,
-           currentConditions: condition.conditions,
-         })}></devtools-widget>
-    <devtools-widget
-      ?disabled=${!editable || !originalOrUpgradedURLPattern}
-      .widgetConfig=${widgetConfig(AffectedCountWidget, {condition, drawer: this})}></devtools-widget>`,
-        // clang-format on
+        renderItem(
+            condition, editable, index, onToggle, onConditionsChanged, onIncreasePriority, onDecreasePriority,
+            this.#getRequestCount.bind(this)),
         element);
   }
 
@@ -546,17 +572,17 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
     this.requestUpdate();
   }
 
-  blockedRequestsCount(condition: SDK.NetworkManager.RequestCondition): number {
-    let result = 0;
-    for (const blockedUrl of this.blockedCountForUrl.keys()) {
-      if (matchesUrl(condition, blockedUrl)) {
-        result += (this.blockedCountForUrl.get(blockedUrl) as number);
+  #getRequestCount(condition: SDK.NetworkManager.RequestCondition): number {
+    if (condition.isBlocking) {
+      let result = 0;
+      for (const blockedUrl of this.blockedCountForUrl.keys()) {
+        if (matchesUrl(condition, blockedUrl)) {
+          result += (this.blockedCountForUrl.get(blockedUrl) as number);
+        }
       }
+      return result;
     }
-    return result;
-  }
 
-  throttledRequestsCount(condition: SDK.NetworkManager.RequestCondition): number {
     let result = 0;
     for (const ruleId of condition.ruleIds) {
       result += this.#throttledCount.get(ruleId) ?? 0;

package/front_end/panels/settings/SettingsScreen.ts

@@ -60,6 +60,10 @@ const UIStrings = {
    * @description Message to display if a setting change requires a reload of DevTools
    */
   settingsChangedReloadDevTools: 'Settings changed. To apply, reload DevTools.',
+  /**
+   * @description Message to display if a setting change requires a reload of DevTools
+   */
+  settingsChangedRestartChrome: 'Settings changed. To apply, restart Chrome.',
   /**
    * @description Warning text shown when the user has entered text to filter the
    * list of experiments, but no experiments match the filter.
@@ -464,8 +468,13 @@ export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTa
       }
       experiment.setEnabled(checkbox.checked);
       Host.userMetrics.experimentChanged(experiment.name, experiment.isEnabled());
-      UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(
-          i18nString(UIStrings.settingsChangedReloadDevTools));
+      if (experiment instanceof Root.Runtime.HostExperiment && experiment.requiresChromeRestart) {
+        UI.InspectorView.InspectorView.instance().displayChromeRestartRequiredWarning(
+            i18nString(UIStrings.settingsChangedRestartChrome));
+      } else {
+        UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(
+            i18nString(UIStrings.settingsChangedReloadDevTools));
+      }
     }
     checkbox.addEventListener('click', listener, false);
 
@@ -628,7 +637,7 @@ const GREENDEV_VIEW: View = (input, _output, target) => {
               <span>${i18nString(UIStrings.greenDevUnstable)}</span>
              </div>
              <div class="settings-experiments-block">
-               ${renderPrototypeCheckboxes(input.settings, ['aiAnnotations', 'inDevToolsFloaty', 'copyToGemini'])}
+               ${renderPrototypeCheckboxes(input.settings, ['aiAnnotations', 'copyToGemini'])}
              </div>
            </devtools-card>
          </div>
@@ -637,7 +646,6 @@ const GREENDEV_VIEW: View = (input, _output, target) => {
 };
 
 const GREENDEV_PROTOTYPE_NAMES: Record<keyof GreenDev.GreenDevSettings, string> = {
-  inDevToolsFloaty: 'In DevTools context picker',
   aiAnnotations: 'AI auto-annotations',
   copyToGemini: 'Copy changes to AI Prompt'
 };

package/front_end/panels/snippets/SnippetsQuickOpen.ts

@@ -37,16 +37,12 @@ const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined
 let snippetsQuickOpenInstance: SnippetsQuickOpen;
 
 export class SnippetsQuickOpen extends QuickOpen.FilteredListWidget.Provider {
-  private snippets: Workspace.UISourceCode.UISourceCode[];
-  private constructor() {
-    super('snippet');
-    this.snippets = [];
-  }
+  private snippets: Workspace.UISourceCode.UISourceCode[] = [];
 
-  static instance(opts: {forceNew: boolean|null} = {forceNew: null}): SnippetsQuickOpen {
-    const {forceNew} = opts;
+  static instance(opts: {forceNew: boolean|null, jslogContext: string}): SnippetsQuickOpen {
+    const {forceNew, jslogContext} = opts;
     if (!snippetsQuickOpenInstance || forceNew) {
-      snippetsQuickOpenInstance = new SnippetsQuickOpen();
+      snippetsQuickOpenInstance = new SnippetsQuickOpen(jslogContext);
     }
 
     return snippetsQuickOpenInstance;
@@ -102,8 +98,9 @@ export class SnippetsQuickOpen extends QuickOpen.FilteredListWidget.Provider {
 QuickOpen.FilteredListWidget.registerProvider({
   prefix: '!',
   iconName: 'exclamation',
-  provider: () => Promise.resolve(SnippetsQuickOpen.instance()),
+  provider: jslogContext => Promise.resolve(SnippetsQuickOpen.instance({forceNew: null, jslogContext})),
   helpTitle: i18nLazyString(UIStrings.runSnippet),
   titlePrefix: i18nLazyString(UIStrings.run),
   titleSuggestion: i18nLazyString(UIStrings.snippet),
+  jslogContext: 'snippet'
 });