chrome-devtools-frontend 1.0.1545096 → 1.0.1547571

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/ElementIssueUtils.ts

@@ -124,11 +124,11 @@ function getTooltipFromGenericIssue(errorType: Protocol.Audits.GenericIssueError
       return i18nString(UIStrings.formAutocompleteAttributeEmptyError);
     case Protocol.Audits.GenericIssueErrorType.FormEmptyIdAndNameAttributesForInputError:
       return i18nString(UIStrings.formEmptyIdAndNameAttributesForInputError);
-    case Protocol.Audits.GenericIssueErrorType.FormAriaLabelledByToNonExistingId:
+    case Protocol.Audits.GenericIssueErrorType.FormAriaLabelledByToNonExistingIdError:
       return i18nString(UIStrings.formAriaLabelledByToNonExistingId);
     case Protocol.Audits.GenericIssueErrorType.FormInputAssignedAutocompleteValueToIdOrNameAttributeError:
       return i18nString(UIStrings.formInputAssignedAutocompleteValueToIdOrNameAttributeError);
-    case Protocol.Audits.GenericIssueErrorType.FormLabelHasNeitherForNorNestedInput:
+    case Protocol.Audits.GenericIssueErrorType.FormLabelHasNeitherForNorNestedInputError:
       return i18nString(UIStrings.formLabelHasNeitherForNorNestedInput);
     case Protocol.Audits.GenericIssueErrorType.FormLabelForMatchesNonExistingIdError:
       return i18nString(UIStrings.formLabelForMatchesNonExistingIdError);

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

@@ -1610,9 +1610,8 @@ export class LengthRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.L
     valueElement.tabIndex = -1;
     valueElement.textContent = match.text;
 
-    if (!context.tracing) {
-      void this.#attachPopover(valueElement, match, context);
-    }
+    const tooltip = this.#getTooltip(valueElement, match, context);
+
     const evaluation = context.tracing?.applyEvaluation([], () => {
       return {
         placeholder: [valueElement],
@@ -1620,7 +1619,11 @@ export class LengthRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.L
       };
     });
 
-    return evaluation ?? [valueElement];
+    if (evaluation) {
+      return evaluation;
+    }
+
+    return tooltip ? [valueElement, tooltip] : [valueElement];
   }
 
   async #applyEvaluation(
@@ -1635,25 +1638,26 @@ export class LengthRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.L
     return false;
   }
 
-  async #attachPopover(
-      valueElement: HTMLElement, match: SDK.CSSPropertyParser.Match, context: RenderingContext): Promise<void> {
-    const pixelValue = await resolveValues(this.#stylesPane, this.#propertyName, match, context, match.text);
-    if (!pixelValue) {
-      return;
-    }
-
+  #getTooltip(valueElement: HTMLElement, match: SDK.CSSPropertyParser.Match, context: RenderingContext):
+      Tooltips.Tooltip.Tooltip|undefined {
     const tooltipId = this.#treeElement?.getTooltipId('length');
-    if (tooltipId) {
-      valueElement.setAttribute('aria-details', tooltipId);
-      const tooltip = new Tooltips.Tooltip.Tooltip(
-          {anchor: valueElement, variant: 'rich', id: tooltipId, jslogContext: 'length-popover'});
-      tooltip.appendChild(document.createTextNode(pixelValue[0]));
-      valueElement.insertAdjacentElement('afterend', tooltip);
+    if (!tooltipId) {
+      return undefined;
     }
-    this.popOverAttachedForTest();
+    valueElement.setAttribute('aria-details', tooltipId);
+    const tooltip = new Tooltips.Tooltip.Tooltip(
+        {anchor: valueElement, variant: 'rich', id: tooltipId, jslogContext: 'length-popover'});
+    tooltip.addEventListener('beforetoggle', () => this.getTooltipValue(tooltip, match, context), {once: true});
+    return tooltip;
   }
 
-  popOverAttachedForTest(): void {
+  async getTooltipValue(
+      tooltip: Tooltips.Tooltip.Tooltip, match: SDK.CSSPropertyParser.Match, context: RenderingContext): Promise<void> {
+    const pixelValue = await resolveValues(this.#stylesPane, this.#propertyName, match, context, match.text);
+    if (!pixelValue) {
+      return;
+    }
+    tooltip.appendChild(document.createTextNode(pixelValue[0]));
   }
 }
 
@@ -2408,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/elements/StylesSidebarPane.ts

@@ -370,7 +370,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   }
 
   private sectionsContainerKeyDown(event: Event): void {
-    const activeElement = Platform.DOMUtilities.deepActiveElement(this.sectionsContainer.contentElement.ownerDocument);
+    const activeElement = UI.DOMUtilities.deepActiveElement(this.sectionsContainer.contentElement.ownerDocument);
     if (!activeElement) {
       return;
     }

package/front_end/panels/elements/cssValueTraceView.css

@@ -85,6 +85,6 @@
   }
 }
 
-::highlight(css-value-tracing) {
+:host::highlight(css-value-tracing) {
   background-color: var(--sys-color-tonal-container);
 }

package/front_end/panels/elements/elements-meta.ts

@@ -454,6 +454,7 @@ UI.ActionRegistration.registerActionExtension({
       platform: UI.ActionRegistration.Platforms.MAC,
     },
   ],
+  configurableBindings: false,
 });
 
 UI.ActionRegistration.registerActionExtension({

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

@@ -20,7 +20,6 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Console from '../../console/console.js';
 
 import styles from './consoleInsight.css.js';
-import listStyles from './consoleInsightSourcesList.css.js';
 
 // Note: privacy and legal notices are not localized so far.
 const UIStrings = {
@@ -189,12 +188,14 @@ const SIGN_IN_URL = 'https://accounts.google.com' as Platform.DevToolsPath.UrlSt
 
 interface ViewInput {
   state: StateData;
+  closing: boolean;
   disableAnimations: boolean;
   renderer: MarkdownView.MarkdownView.MarkdownInsightRenderer;
   selectedRating?: boolean;
   noLogging: boolean;
   callbacks: {
     onClose: () => void,
+    onAnimationEnd: () => void,
     onSearch: () => void,
     onRating: (isPositive: boolean) => void,
     onReport: () => void,
@@ -363,6 +364,26 @@ function renderLoading(): Lit.TemplateResult {
   // clang-format on
 }
 
+function renderInsightSourcesList(
+    sources: Console.PromptBuilder.Source[], isPageReloadRecommended: boolean): Lit.TemplateResult {
+  // clang-format off
+  return html`
+    <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})}>
+            <devtools-icon name="open-externally"></devtools-icon>
+            ${localizeType(item.type)}
+          </x-link></li>`;
+        })}
+        ${isPageReloadRecommended ? html`<li class="source-disclaimer">
+          <devtools-icon name="warning"></devtools-icon>
+          ${i18nString(UIStrings.reloadRecommendation)}</li>` : Lit.nothing}
+      </ul>
+    </div>`;
+  // clang-format on
+}
+
 function renderInsight(
     insight: Extract<StateData, {type: State.INSIGHT}>, renderer: ViewInput['renderer'],
     disableAnimations: ViewInput['disableAnimations'], callbacks: ViewInput['callbacks'],
@@ -384,8 +405,7 @@ function renderInsight(
         ` : Lit.nothing}
         <details jslog=${VisualLogging.expand('sources').track({click: true})}>
           <summary>${i18nString(UIStrings.inputData)}</summary>
-          <devtools-console-insight-sources-list .sources=${insight.sources} .isPageReloadRecommended=${insight.isPageReloadRecommended}>
-          </devtools-console-insight-sources-list>
+          ${renderInsightSourcesList(insight.sources, insight.isPageReloadRecommended)}
         </details>
         <div class="buttons">
           ${renderSearchButton(callbacks.onSearch)}
@@ -652,6 +672,8 @@ export class ConsoleInsight extends HTMLElement {
   #headerRef = Directives.createRef<HTMLHeadingElement>();
   #citationLinks: HTMLElement[] = [];
   #areReferenceDetailsOpen = false;
+  #stateChanging = false;
+  #closing = false;
 
   // Rating sub-form state.
   #selectedRating?: boolean;
@@ -818,12 +840,9 @@ export class ConsoleInsight extends HTMLElement {
   }
 
   #transitionTo(newState: StateData): void {
-    const previousState = this.#state;
+    this.#stateChanging = this.#state.type !== newState.type;
     this.#state = newState;
     this.#render();
-    if (newState.type !== previousState.type) {
-      this.#focusHeader();
-    }
   }
 
   async #generateInsightIfNeeded(): Promise<void> {
@@ -855,10 +874,18 @@ export class ConsoleInsight extends HTMLElement {
     if (this.#state.type === State.CONSENT_REMINDER) {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightsReminderTeaserCanceled);
     }
-    this.shadowRoot?.addEventListener('animationend', () => {
+    this.#closing = true;
+    this.#render();
+  }
+
+  #onAnimationEnd(): void {
+    if (this.#closing) {
       this.dispatchEvent(new CloseEvent());
-    }, {once: true});
-    this.classList.add('closing');
+      return;
+    }
+    if (this.#stateChanging) {
+      this.#headerRef.value?.focus();
+    }
   }
 
   #onRating(isPositive: boolean): void {
@@ -1074,12 +1101,6 @@ export class ConsoleInsight extends HTMLElement {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(SIGN_IN_URL);
   }
 
-  #focusHeader(): void {
-    this.addEventListener('animationend', () => {
-      this.#headerRef.value?.focus();
-    }, {once: true});
-  }
-
   #onToggleReferenceDetails(): void {
     if (this.#referenceDetailsRef.value) {
       this.#areReferenceDetailsOpen = this.#referenceDetailsRef.value.open;
@@ -1103,6 +1124,7 @@ export class ConsoleInsight extends HTMLElement {
   #render(): void {
     const input: ViewInput = {
       state: this.#state,
+      closing: this.#closing,
       disableAnimations: this.disableAnimations,
       renderer: this.#renderer,
       selectedRating: this.#selectedRating,
@@ -1110,6 +1132,7 @@ export class ConsoleInsight extends HTMLElement {
           Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING,
       callbacks: {
         onClose: this.#onClose.bind(this),
+        onAnimationEnd: this.#onAnimationEnd.bind(this),
         onSearch: this.#onSearch.bind(this),
         onRating: this.#onRating.bind(this),
         onReport: this.#onReport.bind(this),
@@ -1181,7 +1204,11 @@ export class ConsoleInsight extends HTMLElement {
     render(html`
       <style>${styles}</style>
       <style>${Input.checkboxStyles}</style>
-      <div class="wrapper" jslog=${VisualLogging.pane('console-insights').track({resize: true})}>
+      <div
+        class=${Directives.classMap({wrapper: true, closing: input.closing})}
+        jslog=${VisualLogging.pane('console-insights').track({resize: true})}
+        @animationend=${callbacks.onAnimationEnd}
+      >
         <div class="animation-wrapper">
           ${header}
           <main jslog=${jslog} class=${Directives.classMap(mainClasses)}>
@@ -1205,50 +1232,10 @@ export class ConsoleInsight extends HTMLElement {
   }
 }
 
-class ConsoleInsightSourcesList extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #sources: Console.PromptBuilder.Source[] = [];
-  #isPageReloadRecommended = false;
-
-  #render(): void {
-    // clang-format off
-     render(html`
-      <style>${listStyles}</style>
-      <style>${Input.checkboxStyles}</style>
-      <ul>
-        ${Directives.repeat(this.#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})}>
-            <devtools-icon name="open-externally"></devtools-icon>
-            ${localizeType(item.type)}
-          </x-link></li>`;
-        })}
-        ${this.#isPageReloadRecommended ? html`<li class="source-disclaimer">
-          <devtools-icon name="warning"></devtools-icon>
-          ${i18nString(UIStrings.reloadRecommendation)}</li>` : Lit.nothing}
-      </ul>
-    `, this.#shadow, {
-      host: this,
-    });
-    // clang-format on
-  }
-
-  set sources(values: Console.PromptBuilder.Source[]) {
-    this.#sources = values;
-    this.#render();
-  }
-
-  set isPageReloadRecommended(isPageReloadRecommended: boolean) {
-    this.#isPageReloadRecommended = isPageReloadRecommended;
-    this.#render();
-  }
-}
-
 customElements.define('devtools-console-insight', ConsoleInsight);
-customElements.define('devtools-console-insight-sources-list', ConsoleInsightSourcesList);
 
 declare global {
   interface HTMLElementTagNameMap {
     'devtools-console-insight': ConsoleInsight;
-    'devtools-console-insight-sources-list': ConsoleInsightSourcesList;
   }
 }

package/front_end/panels/explain/components/consoleInsight.css

@@ -24,7 +24,7 @@
   animation: expand var(--sys-motion-duration-medium2) var(--sys-motion-easing-emphasized) forwards;
 }
 
-:host-context(.closing) .wrapper {
+.wrapper.closing {
   animation: collapse var(--sys-motion-duration-medium2) var(--sys-motion-easing-emphasized) forwards;
 }
 
@@ -393,3 +393,48 @@ details h3 {
 .error-message {
   font: var(--sys-typescale-body4-bold);
 }
+
+@scope (.insight-sources) {
+  :root {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    display: block;
+  }
+
+  ul {
+    color: var(--sys-color-primary);
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 18px;
+    margin-top: 8px;
+    padding-left: var(--sys-size-6);
+  }
+
+  li {
+    list-style-type: none;
+  }
+
+  ul .link {
+    color: var(--sys-color-primary);
+    display: inline-flex !important; /* stylelint-disable-line declaration-no-important */
+    align-items: center;
+    gap: 4px;
+    text-decoration-line: underline;
+  }
+
+  devtools-icon {
+    height: 16px;
+    width: 16px;
+    margin-right: var(--sys-size-1);
+  }
+
+  devtools-icon[name="open-externally"] {
+    color: var(--icon-link);
+  }
+
+  .source-disclaimer {
+    color: var(--sys-color-on-surface-subtle);
+  }
+}

package/front_end/panels/layer_viewer/LayerTreeOutline.ts

@@ -6,7 +6,6 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Platform from '../../core/platform/platform.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -80,7 +79,7 @@ export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes
     wrapperElement.appendChild(this.treeOutline.element);
     wrapperElement.appendChild(summaryElement);
     this.element = wrapperElement;
-    Platform.DOMUtilities.appendStyle(this.element, layerTreeOutlineStyles);
+    UI.DOMUtilities.appendStyle(this.element, layerTreeOutlineStyles);
 
     this.layerViewHost.showInternalLayersSetting().addChangeListener(this.update, this);
   }

package/front_end/panels/mobile_throttling/NetworkThrottlingSelector.ts

@@ -64,6 +64,7 @@ interface ViewInput {
   customConditionsGroup: NetworkThrottlingConditionsGroup;
   jslogContext: string|undefined;
   title: string|undefined;
+  disabled: boolean;
   onSelect: (conditions: SDK.NetworkManager.ThrottlingConditions) => void;
   onAddCustomConditions: () => void;
 }
@@ -108,6 +109,7 @@ export const DEFAULT_VIEW: ViewFunction = (input, output, target) => {
   render(
       // clang-format off
     html`<select
+      ?disabled=${input.disabled}
       aria-label=${input.title ?? nothing}
       jslog=${VisualLogging.dropDown().track({change: true}).context(input.jslogContext)}
       @change=${onSelect}>
@@ -166,6 +168,7 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.ObjectWrapper<
   readonly #title?: string;
   readonly #view: ViewFunction;
   #variant: NetworkThrottlingSelect.Variant = NetworkThrottlingSelect.Variant.GLOBAL_CONDITIONS;
+  #disabled = false;
 
   static createForGlobalConditions(element: HTMLElement, title: string): NetworkThrottlingSelect {
     ThrottlingManager.instance();  // Instantiate the throttling manager to connect network manager with the setting
@@ -204,6 +207,14 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.ObjectWrapper<
     this.#performUpdate();
   }
 
+  get disabled(): boolean {
+    return this.#disabled;
+  }
+  set disabled(disabled: boolean) {
+    this.#disabled = disabled;
+    this.#performUpdate();
+  }
+
   get recommendedConditions(): SDK.NetworkManager.Conditions|null {
     return this.#recommendedConditions;
   }
@@ -284,6 +295,7 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.ObjectWrapper<
       selectedConditions: this.#currentConditions,
       jslogContext: this.#jslogContext,
       title: this.#title,
+      disabled: this.#disabled,
       onSelect,
       onAddCustomConditions,
       throttlingGroups,
@@ -308,6 +320,13 @@ export class NetworkThrottlingSelectorWidget extends UI.Widget.VBox {
     this.#select.addEventListener(Events.CONDITIONS_CHANGED, ({data}) => this.#conditionsChangedHandler?.(data));
   }
 
+  get disabled(): boolean {
+    return this.#select.disabled;
+  }
+  set disabled(disabled: boolean) {
+    this.#select.disabled = disabled;
+  }
+
   set variant(variant: NetworkThrottlingSelect.Variant) {
     this.#select.variant = variant;
   }