chrome-devtools-frontend 1.0.1545096 → 1.0.1547147

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">style>
+      <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;
   }

package/front_end/panels/network/RequestConditionsDrawer.ts

@@ -14,6 +14,7 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -38,6 +39,10 @@ const UIStrings = {
    * @description Tooltip text that appears when hovering over the plus button in the Blocked URLs Pane of the Network panel
    */
   addPattern: 'Add pattern',
+  /**
+   * @description Tooltip text that appears when hovering over the plus button in the Blocked URLs Pane of the Network panel
+   */
+  addRule: 'Add rule',
   /**
    * @description Accessible label for the button to add request blocking patterns in the network request blocking tool
    */
@@ -53,7 +58,13 @@ const UIStrings = {
   /**
    * @description Text that shows in the network request blocking panel if no pattern has yet been added.
    */
-  noPattern: 'No request throttling or blocking patterns',
+  noPattern: 'Nothing throttled or blocked',
+  /**
+   * @description Text that shows in the network request blocking panel if no pattern has yet been added.
+   * @example {Learn more} PH1
+   */
+  noThrottlingOrBlockingPattern:
+      `To throttle or block a network request, add a rule here manually or via the network panel's context menu. {PH1}`,
   /**
    * @description Text that shows  in the network request blocking panel if no pattern has yet been added.
    * @example {Add pattern} PH1
@@ -75,8 +86,9 @@ const UIStrings = {
   textPatternToBlockMatching: 'Text pattern to block matching requests; use * for wildcard',
   /**
    * @description Text in Blocked URLs Pane of the Network panel
+   * @example {Learn more} PH1
    */
-  textEditPattern: 'Text pattern to block or throttle matching requests; use URLPattern syntax.',
+  textEditPattern: 'Text pattern to block or throttle matching requests; use URL Pattern syntax. {PH1}',
   /**
    * @description Error text for empty list widget input in Request Blocking tool
    */
@@ -106,6 +118,10 @@ const UIStrings = {
    * @description Message to be announced for a when list item is removed from list widget
    */
   learnMore: 'Learn more',
+  /**
+   * @description Accessibility label on a `Learn more` link
+   */
+  learnMoreLabel: 'Learn more about URL pattern syntax',
   /**
    * @description Aria label on a button moving an entry up
    */
@@ -114,6 +130,15 @@ const UIStrings = {
    * @description Aria label on a button moving an entry down
    */
   decreasePriority: 'Move down (higher patterns are checked first)',
+  /**
+   * @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
+   */
+  requestConditionsLabel: 'Request conditions',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/RequestConditionsDrawer.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -155,23 +180,19 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                                        ? i18nString(UIStrings.noPattern)
                                        : i18nString(UIStrings.noNetworkRequestsBlocked)}</span>
       <div class=empty-state-description>
-        <span>${i18nString(UIStrings.addPatternToBlock, {PH1: i18nString(UIStrings.addPattern)})}</span>
-        <x-link
-          href=${NETWORK_REQUEST_BLOCKING_EXPLANATION_URL}
-          tabindex=0
-          class=devtools-link
-          jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('learn-more')}>
-            ${i18nString(UIStrings.learnMore)}
-        </x-link>
+        ${individualThrottlingEnabled
+        ? uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.noThrottlingOrBlockingPattern, {PH1: learnMore()})
+        : html`<span>${i18nString(UIStrings.addPatternToBlock,
+                                  {PH1: i18nString(UIStrings.addPattern)})}</span>${learnMore()}`}
       </div>
       <devtools-button
         @click=${input.addPattern}
         class=add-button
         .jslogContext=${'network.add-network-request-blocking-pattern'}
-        aria-label=${individualThrottlingEnabled ? i18nString(UIStrings.addPatternLabel)
+        title=${individualThrottlingEnabled ? i18nString(UIStrings.addPatternLabel)
                                                  : i18nString(UIStrings.addNetworkRequestBlockingPattern)}
         .variant=${Buttons.Button.Variant.TONAL}>
-          ${i18nString(UIStrings.addPattern)}
+          ${individualThrottlingEnabled ? i18nString(UIStrings.addRule) : i18nString(UIStrings.addPattern)}
       </devtools-button>
     </div>
     <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(UI.Widget.VBox)}>${input.list.element}</devtools-widget>
@@ -391,22 +412,25 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
     <input class=blocked-url-checkbox
       @click=${toggle}
       type=checkbox
+      title=${i18nString(UIStrings.enableThrottlingToggleLabel, {PH1: constructorStringOrWildcardURL})}
       ?checked=${enabled}
       ?disabled=${!editable || !originalOrUpgradedURLPattern}
       .jslog=${VisualLogging.toggle().track({ change: true })}>
-    <devtools-button
-      .iconName=${'arrow-down'}
-      .variant=${Buttons.Button.Variant.ICON}
-      .title=${i18nString(UIStrings.increasePriority)}
-      .jslogContext=${'increase-priority'}
-      @click=${moveDown}></devtools-button>
     <devtools-button
       .iconName=${'arrow-up'}
       .variant=${Buttons.Button.Variant.ICON}
       .title=${i18nString(UIStrings.decreasePriority)}
       .jslogContext=${'decrease-priority'}
+      ?disabled=${!editable || !originalOrUpgradedURLPattern}
       @click=${moveUp}>
     </devtools-button>
+    <devtools-button
+      .iconName=${'arrow-down'}
+      .variant=${Buttons.Button.Variant.ICON}
+      .title=${i18nString(UIStrings.increasePriority)}
+      .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>
@@ -439,22 +463,26 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
       </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
-       ?disabled=${!editable}
+       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 .widgetConfig=${widgetConfig(AffectedCountWidget, {condition, drawer: this})}></devtools-widget>`,
+    <devtools-widget
+      ?disabled=${!editable || !originalOrUpgradedURLPattern}
+      .widgetConfig=${widgetConfig(AffectedCountWidget, {condition, drawer: this})}></devtools-widget>`,
           // clang-format on
           element);
     } else {
@@ -517,11 +545,12 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
     const editor = new UI.ListWidget.Editor<SDK.NetworkManager.RequestCondition>();
     const content = editor.contentElement();
     const titles = content.createChild('div', 'blocked-url-edit-row');
-    const label = titles.createChild('div');
+    const label = titles.createChild('label');
     if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
-      label.textContent = i18nString(UIStrings.textEditPattern);
-      label.append(UI.XLink.XLink.create(
-          PATTERN_API_DOCS_URL, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more'));
+      const learnMore = UI.XLink.XLink.create(
+          PATTERN_API_DOCS_URL, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more');
+      learnMore.title = i18nString(UIStrings.learnMoreLabel);
+      label.append(uiI18n.getFormatLocalizedString(str_, UIStrings.textEditPattern, {PH1: learnMore}));
     } else {
       label.textContent = i18nString(UIStrings.textPatternToBlockMatching);
     }
@@ -549,6 +578,7 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
           return {valid: true, errorMessage: undefined};
         };
     const urlInput = editor.createInput('url', 'text', '', validator);
+    label.htmlFor = urlInput.id = 'editor-url-input';
     fields.createChild('div', 'blocked-url-edit-value').appendChild(urlInput);
     return editor;
   }

package/front_end/panels/network/networkLogView.css

@@ -175,6 +175,13 @@
   color: var(--sys-color-on-tonal-container);
 }
 
+.network-log-grid.data-grid tr.selected.network-throttled-row,
+.network-log-grid.data-grid tr.selected.network-throttled-row .devtools-link,
+.network-log-grid.data-grid tr.selected.network-throttled-row .network-cell-subtitle,
+.network-log-grid.data-grid tr.selected.network-throttled-row .network-dim-cell {
+  color: var(--sys-color-yellow);
+}
+
 .network-header-subtitle {
   color: var(--sys-color-token-subtle);
 }
@@ -250,6 +257,10 @@
   }
 }
 
+td.time-column {
+  vertical-align: middle;
+}
+
 .data-grid-data-grid-node devtools-icon[name="arrow-up-down-circle"],
 .network-log-grid.data-grid.small .icon {
   width: 16px;

package/front_end/panels/network/networkTimingTable.css

@@ -191,14 +191,16 @@ tr:has([aria-checked].network-fetch-timing-bar-clickable) ~ .network-fetch-timin
   background-color: var(--network-overview-waiting); /* stylelint-disable-line plugin/use_theme_colors */
 }
 
-.throttled devtools-icon {
-  vertical-align: middle;
-  margin-right: var(--sys-size-3);
-  color: var(--sys-color-yellow);
-}
-
 td.throttled {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--sys-size-3);
   color: var(--sys-color-yellow);
+
+  devtools-icon {
+    color: var(--sys-color-yellow);
+  }
 }
 
 .network-timing-bar.receiving,

package/front_end/panels/network/requestConditionsDrawer.css

@@ -32,6 +32,10 @@
   flex-direction: row;
   align-items: center;
   flex: auto;
+
+  devtools-button {
+    flex: none;
+  }
 }
 
 .blocked-url-count {
@@ -76,6 +80,11 @@
 }
 
 .conditions-selector {
-  max-width: 120px;
+  width: max-content;
+  flex: none;
   margin: var(--sys-size-3);
 }
+
+[disabled] {
+  opacity: 50%;
+}

package/front_end/panels/profiler/ProfilesPanel.ts

@@ -32,7 +32,6 @@ import '../../ui/legacy/legacy.js';
 
 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 * as SDK from '../../core/sdk/sdk.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 // eslint-disable-next-line @devtools/es-modules-import
@@ -241,7 +240,7 @@ export class ProfilesPanel extends UI.Panel.PanelWithSidebar implements DataDisp
     if (!this.toggleRecordAction.enabled()) {
       return true;
     }
-    const toggleButton = Platform.DOMUtilities.deepActiveElement(this.element.ownerDocument);
+    const toggleButton = UI.DOMUtilities.deepActiveElement(this.element.ownerDocument);
     const type = this.selectedProfileType;
     if (!type) {
       return true;

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -271,30 +271,29 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
   }
 
   private createListItems(): KeybindsItem[] {
-    const actions = UI.ActionRegistry.ActionRegistry.instance().actions().sort((actionA, actionB) => {
-      if (actionA.category() < actionB.category()) {
-        return -1;
-      }
-      if (actionA.category() > actionB.category()) {
-        return 1;
-      }
-      if (actionA.id() < actionB.id()) {
-        return -1;
-      }
-      if (actionA.id() > actionB.id()) {
-        return 1;
-      }
-      return 0;
-    });
+    const actions = UI.ActionRegistry.ActionRegistry.instance()
+                        .actions()
+                        .filter(action => action.configurableBindings())
+                        .sort((actionA, actionB) => {
+                          if (actionA.category() < actionB.category()) {
+                            return -1;
+                          }
+                          if (actionA.category() > actionB.category()) {
+                            return 1;
+                          }
+                          if (actionA.id() < actionB.id()) {
+                            return -1;
+                          }
+                          if (actionA.id() > actionB.id()) {
+                            return 1;
+                          }
+                          return 0;
+                        });
 
     const items: KeybindsItem[] = [];
 
     let currentCategory: UI.ActionRegistration.ActionCategory;
     actions.forEach(action => {
-      if (action.id() === 'elements.toggle-element-search') {
-        return;
-      }
-
       if (currentCategory !== action.category()) {
         items.push(action.category());
       }
@@ -305,7 +304,7 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
   }
 
   onEscapeKeyPressed(event: Event): void {
-    const deepActiveElement = Platform.DOMUtilities.deepActiveElement(document);
+    const deepActiveElement = UI.DOMUtilities.deepActiveElement(document);
     if (this.editingRow && deepActiveElement && deepActiveElement.nodeName === 'INPUT') {
       this.editingRow.onEscapeKeyPressed(event);
     }
@@ -595,7 +594,7 @@ export class ShortcutListItem {
   }
 
   onEscapeKeyPressed(event: Event): void {
-    const activeElement = Platform.DOMUtilities.deepActiveElement(document);
+    const activeElement = UI.DOMUtilities.deepActiveElement(document);
     for (const [shortcut, shortcutInput] of this.shortcutInputs.entries()) {
       if (activeElement === shortcutInput) {
         this.onShortcutInputKeyDown(shortcut, shortcutInput as HTMLInputElement, event);