chrome-devtools-frontend 1.0.1593959 → 1.0.1595090

package/front_end/panels/application/preloading/PreloadingView.ts

@@ -13,6 +13,7 @@ import * as Platform from '../../../core/platform/platform.js';
 import {assertNotNullOrUndefined} from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
+import * as TextUtils from '../../../models/text_utils/text_utils.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import emptyWidgetStyles from '../../../ui/legacy/emptyWidget.css.js';
@@ -21,7 +22,7 @@ import {Directives, html, render} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import * as PreloadingComponents from './components/components.js';
-import {ruleSetTagOrLocationShort} from './components/PreloadingString.js';
+import {capitalizedAction, ruleSetTagOrLocationShort} from './components/PreloadingString.js';
 import * as PreloadingHelper from './helper/helper.js';
 import preloadingViewStyles from './preloadingView.css.js';
 import preloadingViewDropDownStyles from './preloadingViewDropDown.css.js';
@@ -362,6 +363,78 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
   }
 }
 
+/**
+ * Pure filtering function for preloading grid rows.
+ * Exported for testability.
+ */
+export function applyFilterText(filterText: string, rows: PreloadingComponents.PreloadingGrid.PreloadingGridRow[]):
+    PreloadingComponents.PreloadingGrid.PreloadingGridRow[] {
+  const trimmedFilter = filterText.trim();
+  if (trimmedFilter === '') {
+    return rows;
+  }
+
+  const FILTER_KEYS = ['url', 'action', 'status'] as const;
+  const parser = new TextUtils.TextUtils.FilterParser([...FILTER_KEYS]);
+  // The match is case-insensitive. We handle the matching with everything lower cased,
+  // both keywords and values.
+  const query = parser.parse(filterText.toLowerCase());
+
+  // Drop the last term if it is an incomplete filter key (e.g., "action:" with no value).
+  // FilterParser parses "action:" as plain text since KEY_VALUE_FILTER_REGEXP requires a value.
+  // This lets users type "url:foo action:" and still see results for "url:foo".
+  const lastTerm = query.at(-1);
+
+  // If the parse result is empty, the query only contains spaces.
+  if (!lastTerm) {
+    return rows;
+  }
+
+  const isKeyWithNoValue =
+      (lastTerm.key === undefined || lastTerm.key === null) && FILTER_KEYS.some(key => lastTerm.text === `${key}:`);
+  if (isKeyWithNoValue) {
+    query.pop();
+  }
+
+  if (query.length === 0) {
+    return rows;
+  }
+
+  return rows.filter(row => {
+    const attempt = row.pipeline.getOriginallyTriggered();
+    const url = attempt.key.url.toLowerCase();
+    const action = capitalizedAction(attempt.action).toLowerCase();
+    const status = PreloadingUIUtils.status(attempt.status).toLowerCase();
+
+    // Each term must match (AND logic between terms)
+    return query.every(term => {
+      if (term.text === undefined || term.text === null || term.text === '') {
+        return true;
+      }
+      const searchText = term.text.toLowerCase();
+
+      // The query is lowercased before parsing, so keys are already normalized.
+      const key = term.key;
+      switch (key) {
+        case 'url':
+          return url.includes(searchText);
+        case 'action':
+          return action.includes(searchText);
+        case 'status': {
+          // Support multiple status values separated by comma (e.g., "status:ready,success")
+          const statusValues = searchText.split(',');
+          return statusValues.some(v => status.includes(v));
+        }
+        case undefined:
+          // No key specified: search across all columns (URL, action, status)
+          return url.includes(searchText) || action.includes(searchText) || status.includes(searchText);
+        default:
+          return false;
+      }
+    });
+  });
+}
+
 export class PreloadingAttemptView extends UI.Widget.VBox {
   private model: SDK.PreloadingModel.PreloadingModel;
   // Note that we use id of (representative) preloading attempt while we show pipelines in grid.
@@ -374,6 +447,7 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
   private readonly preloadingDetails =
       new PreloadingComponents.PreloadingDetailsReportView.PreloadingDetailsReportView();
   private readonly ruleSetSelector: PreloadingRuleSetSelector;
+  private readonly textFilterUI: UI.Toolbar.ToolbarFilter;
   private clearButton: UI.Toolbar.ToolbarButton;
 
   constructor(model: SDK.PreloadingModel.PreloadingModel) {
@@ -417,7 +491,19 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
     const toolbar = vbox.contentElement.createChild('devtools-toolbar', 'preloading-toolbar');
     toolbar.setAttribute('jslog', `${VisualLogging.toolbar()}`);
 
-    // Clear button first (leftmost)
+    // Rule set dropdown first
+    this.ruleSetSelector = new PreloadingRuleSetSelector(() => this.render());
+    toolbar.appendToolbarItem(this.ruleSetSelector.item());
+
+    // Text filter second
+    this.textFilterUI = new UI.Toolbar.ToolbarFilter(undefined, 1, 1);
+    this.textFilterUI.addEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, this.onTextFilterChanged, this);
+    toolbar.appendToolbarItem(this.textFilterUI);
+
+    // Separator between text filter and clear button
+    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarSeparator());
+
+    // Clear button last (rightmost)
     this.clearButton =
         new UI.Toolbar.ToolbarButton('Clear speculative loads', 'clear', undefined, 'clear-speculative-loads');
     this.clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
@@ -428,14 +514,13 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
       }
 
       model.reset();
+      // Reset UI state
+      this.textFilterUI.setValue('');
       this.ruleSetSelector.select(null);
+      this.render();
     });
     toolbar.appendToolbarItem(this.clearButton);
 
-    // Rule set dropdown
-    this.ruleSetSelector = new PreloadingRuleSetSelector(() => this.render());
-    toolbar.appendToolbarItem(this.ruleSetSelector.item());
-
     this.preloadingGrid.onSelect = this.onPreloadingGridCellFocused.bind(this);
 
     const preloadingGridContainer = document.createElement('div');
@@ -491,6 +576,14 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
     }
 
     this.ruleSetSelector.select(id);
+
+    // Reset text filter when navigating from Rules view to clear any existing filter
+    this.textFilterUI.setValue('');
+    this.render();
+  }
+
+  private onTextFilterChanged(): void {
+    this.render();
   }
 
   private updatePreloadingDetails(): void {
@@ -532,8 +625,13 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
         statusCode,
       };
     });
-    this.preloadingGrid.rows = rows;
+
+    // Apply text filter
+    const filteredRows = applyFilterText(this.textFilterUI.valueWithoutSuggestion(), rows);
+
+    this.preloadingGrid.rows = filteredRows;
     this.preloadingGrid.pageURL = pageURL();
+    // Only show empty state when there are truly no speculations (not when filter has no matches)
     this.contentElement.classList.toggle('empty', rows.length === 0);
 
     this.updatePreloadingDetails();

package/front_end/panels/application/preloading/preloadingView.css

@@ -25,6 +25,10 @@
   button.toolbar-has-dropdown {
     margin: var(--sys-size-2) 0;
   }
+
+  .toolbar-filter {
+    max-width: var(--sys-size-29);
+  }
 }
 
 devtools-split-view {

package/front_end/panels/console/ConsoleView.ts

@@ -107,11 +107,11 @@ const UIStrings = {
   /**
    * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
-  groupSimilarMessagesInConsole: 'Group similar messages in console',
+  groupSimilarMessagesInConsole: 'Group similar messages',
   /**
    * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
-  showCorsErrorsInConsole: 'Show `CORS` errors in console',
+  showCorsErrorsInConsole: 'CORS errors in console',
   /**
    * @description Tooltip for the the console sidebar toggle in the Console panel. Command to
    * open/show the sidebar.

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

@@ -62,11 +62,11 @@ const UIStrings = {
    */
   timestamps: 'Timestamps',
   /**
-   * @description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of an option under the Console category that can be invoked through the Command Menu
    */
   showTimestamps: 'Show timestamps',
   /**
-   * @description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of an option under the Console category that can be invoked through the Command Menu
    */
   hideTimestamps: 'Hide timestamps',
   /**
@@ -88,19 +88,23 @@ const UIStrings = {
   /**
    * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
-  groupSimilarMessagesInConsole: 'Group similar messages in console',
+  groupSimilarMessages: 'Group similar messages',
   /**
    * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
-  doNotGroupSimilarMessagesIn: 'Do not group similar messages in console',
+  doNotGroupSimilarMessages: 'Don\'t group similar messages',
   /**
-   * @description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of a setting under the Console category in Settings
    */
-  showCorsErrorsInConsole: 'Show `CORS` errors in console',
+  corsErrorsInConsole: 'CORS errors in console',
   /**
-   * @description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of an option under the Console category that can be invoked through the Command Menu
+   */
+  showCorsErrorsInConsole: 'Show CORS errors in console',
+  /**
+   * @description Title of an option under the Console category that can be invoked through the Command Menu
    */
-  doNotShowCorsErrorsIn: 'Do not show `CORS` errors in console',
+  doNotShowCorsErrorsIn: 'Don\'t show CORS errors in console',
   /**
    * @description Title of a setting under the Console category in Settings
    */
@@ -137,7 +141,7 @@ const UIStrings = {
    * @description Title of a setting under the Console category in Settings that controls whether AI summaries should
    * be shown for console warnings/errors.
    */
-  showConsoleInsightTeasers: 'Show AI summaries for console messages',
+  consoleInsightTeasers: 'AI summaries for console messages',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/console/console-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -342,25 +346,25 @@ Common.Settings.registerSettingExtension({
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.CONSOLE,
   storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.groupSimilarMessagesInConsole),
+  title: i18nLazyString(UIStrings.groupSimilarMessages),
   settingName: 'console-group-similar',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,
   options: [
     {
       value: true,
-      title: i18nLazyString(UIStrings.groupSimilarMessagesInConsole),
+      title: i18nLazyString(UIStrings.groupSimilarMessages),
     },
     {
       value: false,
-      title: i18nLazyString(UIStrings.doNotGroupSimilarMessagesIn),
+      title: i18nLazyString(UIStrings.doNotGroupSimilarMessages),
     },
   ],
 });
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.CONSOLE,
-  title: i18nLazyString(UIStrings.showCorsErrorsInConsole),
+  title: i18nLazyString(UIStrings.corsErrorsInConsole),
   settingName: 'console-shows-cors-errors',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,
@@ -436,7 +440,7 @@ Common.Settings.registerSettingExtension({
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.CONSOLE,
   storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.showConsoleInsightTeasers),
+  title: i18nLazyString(UIStrings.consoleInsightTeasers),
   settingName: 'console-insight-teasers-enabled',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -353,13 +353,18 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
 
     this.filterRegex = null;
     this.linkifier = new Components.Linkifier.Linkifier(maxLinkLength);
-    this.imagePreviewPopover = new ImagePreviewPopover(this.contentElement, event => {
-      const link = event.composedPath()[0];
-      if (link instanceof Element) {
-        return link;
-      }
-      return null;
-    }, () => this.#computedStyleModel ? this.#computedStyleModel.node : null);
+    this.imagePreviewPopover = new ImagePreviewPopover(
+        this.contentElement,
+        event => {
+          const link = event.composedPath()[0];
+          if (link instanceof Element) {
+            return link;
+          }
+          return null;
+        },
+        async () => {
+          return await Components.ImagePreview.loadPrecomputedFeatures(this.#computedStyleModel?.node);
+        });
 
     this.#updateView({hasMatches: true});
   }

package/front_end/panels/elements/ElementsPanel.ts

@@ -1556,7 +1556,7 @@ export class DOMNodeRevealer implements
         }
 
         if (resolvedNode) {
-          const opts: RevealAndSelectNodeOpts = {showPanel: true, focusNode: !omitFocus};
+          const opts: RevealAndSelectNodeOpts = omitFocus ? {showPanel: false} : {showPanel: true, focusNode: true};
           const promise = resolvedNode instanceof SDK.DOMModel.AdoptedStyleSheet ?
               panel.revealAndSelectAdoptedStyleSheet(resolvedNode, opts) :
               panel.revealAndSelectNode(resolvedNode, opts);

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -43,6 +43,7 @@ import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
+import * as UIComponentUtils from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -555,18 +556,15 @@ export class ElementsTreeOutline extends
           }
           return link;
         },
-        link => {
+        async link => {
           const listItem = UI.UIUtils.enclosingNodeOrSelfWithNodeName(link, 'li');
           if (!listItem) {
-            return null;
+            return undefined;
           }
 
           const treeElement =
               (UI.TreeOutline.TreeElement.getTreeElementBylistItemNode(listItem) as ElementsTreeElement | undefined);
-          if (!treeElement) {
-            return null;
-          }
-          return treeElement.node();
+          return await UIComponentUtils.ImagePreview.loadPrecomputedFeatures(treeElement?.node());
         });
 
     this.updateRecords = new Map();

package/front_end/panels/elements/ImagePreviewPopover.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import type * as Platform from '../../core/platform/platform.js';
-import type * as SDK from '../../core/sdk/sdk.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -15,13 +14,15 @@ import * as UI from '../../ui/legacy/legacy.js';
  */
 export class ImagePreviewPopover {
   private readonly getLinkElement: (arg0: Event) => Element | null;
-  private readonly getDOMNode: (arg0: Element) => SDK.DOMModel.DOMNode | null;
   private readonly popover: UI.PopoverHelper.PopoverHelper;
+
+  #getNodeFeatures: (link: Element) => Promise<Components.ImagePreview.PrecomputedFeatures|undefined>;
+
   constructor(
       container: HTMLElement, getLinkElement: (arg0: Event) => Element | null,
-      getDOMNode: (arg0: Element) => SDK.DOMModel.DOMNode | null) {
+      getNodeFeatures: (arg0: Element) => Promise<Components.ImagePreview.PrecomputedFeatures|undefined>) {
     this.getLinkElement = getLinkElement;
-    this.getDOMNode = getDOMNode;
+    this.#getNodeFeatures = getNodeFeatures;
     this.popover =
         new UI.PopoverHelper.PopoverHelper(container, this.handleRequest.bind(this), 'elements.image-preview');
     this.popover.setTimeout(0, 100);
@@ -39,11 +40,7 @@ export class ImagePreviewPopover {
     return {
       box: link.boxInWindow(),
       show: async (popover: UI.GlassPane.GlassPane) => {
-        const node = this.getDOMNode((link));
-        if (!node) {
-          return false;
-        }
-        const precomputedFeatures = await Components.ImagePreview.ImagePreview.loadDimensionsForNode(node);
+        const precomputedFeatures = await this.#getNodeFeatures(link);
         const preview = await Components.ImagePreview.ImagePreview.build(href, true, {
           precomputedFeatures,
           align: Components.ImagePreview.Align.CENTER,

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -807,6 +807,7 @@ export class StylePropertiesSection {
     let scopeIndex = 0;
     let supportsIndex = 0;
     let nestingIndex = 0;
+    let navigationsIndex = 0;
     this.nestingLevel = 0;
     for (const ruleType of rule.ruleTypes) {
       let ancestorRuleElement;
@@ -829,6 +830,9 @@ export class StylePropertiesSection {
         case Protocol.CSS.CSSRuleType.StartingStyleRule:
           ancestorRuleElement = this.createStartingStyleElement();
           break;
+        case Protocol.CSS.CSSRuleType.NavigationRule:
+          ancestorRuleElement = this.createNavigationElement(rule.navigations[navigationsIndex++]);
+          break;
       }
       if (ancestorRuleElement) {
         this.#ancestorRuleListElement.prepend(ancestorRuleElement);
@@ -1007,6 +1011,27 @@ export class StylePropertiesSection {
     return supportsElement;
   }
 
+  protected createNavigationElement(navigation: SDK.CSSNavigation.CSSNavigation): ElementsComponents.CSSQuery.CSSQuery
+      |undefined {
+    if (!navigation.text) {
+      return;
+    }
+
+    let onQueryTextClick;
+    if (navigation.styleSheetId) {
+      onQueryTextClick = this.handleQueryRuleClick.bind(this, navigation);
+    }
+
+    const navigationElement = new ElementsComponents.CSSQuery.CSSQuery();
+    navigationElement.data = {
+      queryPrefix: '@navigation',
+      queryText: navigation.text,
+      onQueryTextClick,
+      jslogContext: 'navigation',
+    };
+    return navigationElement;
+  }
+
   protected createNestingElement(nestingSelector?: string): HTMLElement|undefined {
     if (!nestingSelector) {
       return;
@@ -1419,6 +1444,8 @@ export class StylePropertiesSection {
         success = await cssModel.setSupportsText(query.styleSheetId, range, newContent);
       } else if (query instanceof SDK.CSSScope.CSSScope) {
         success = await cssModel.setScopeText(query.styleSheetId, range, newContent);
+      } else if (query instanceof SDK.CSSNavigation.CSSNavigation) {
+        success = await cssModel.setNavigationText(query.styleSheetId, range, newContent);
       } else {
         success = await cssModel.setMediaText(query.styleSheetId, range, newContent);
       }
@@ -1871,6 +1898,9 @@ export class FunctionRuleSection extends StylePropertiesSection {
     if ('supports' in condition) {
       return this.createSupportsElement(condition.supports);
     }
+    if ('navigation' in condition) {
+      return this.createNavigationElement(condition.navigation);
+    }
     return;
   }
 

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -236,13 +236,19 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.contentElement.addEventListener('copy', this.clipboardCopy.bind(this));
 
     this.boundOnScroll = this.onScroll.bind(this);
-    this.imagePreviewPopover = new ImagePreviewPopover(this.contentElement, event => {
-      const link = event.composedPath()[0];
-      if (link instanceof Element) {
-        return link;
-      }
-      return null;
-    }, () => this.node());
+    this.imagePreviewPopover = new ImagePreviewPopover(
+        this.contentElement,
+        event => {
+          const link = event.composedPath()[0];
+          if (link instanceof Element) {
+            return link;
+          }
+          return null;
+        },
+        async () => {
+          const features = await Components.ImagePreview.loadPrecomputedFeatures(this.node());
+          return features;
+        });
 
     UI.ViewManager.ViewManager.instance().addEventListener(UI.ViewManager.Events.VIEW_VISIBILITY_CHANGED, event => {
       if (event.data.revealedViewId === 'animations' || event.data.hiddenViewId === 'animations') {

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

@@ -110,9 +110,13 @@ const UIStrings = {
   /**
    * @description Title of a setting under the Elements category. Whether to show/hide code comments in HTML.
    */
+  htmlComments: 'HTML comments',
+  /**
+   * @description Title of an option under the Elements category that can be invoked through the Command Menu
+   */
   showHtmlComments: 'Show `HTML` comments',
   /**
-   * @description Title of a setting under the Elements category. Whether to show/hide code comments in HTML.
+   * @description Title of an option under the Elements category that can be invoked through the Command Menu
    */
   hideHtmlComments: 'Hide `HTML` comments',
   /**
@@ -126,12 +130,12 @@ const UIStrings = {
    * the inspect tooltip (an information pane that hovers next to selected DOM elements) has extra
    * detail.
    */
-  showDetailedInspectTooltip: 'Show detailed inspect tooltip',
+  detailedInspectTooltip: 'Detailed inspect tooltip',
   /**
    * @description Title of a setting under the Elements category in Settings. Turns on a mode where
    * hovering over CSS properties in the Styles pane will display a popover with documentation.
    */
-  showCSSDocumentationTooltip: 'Show CSS documentation tooltip',
+  CSSDocumentationTooltip: 'CSS documentation tooltip',
   /**
    * @description A context menu item (command) in the Elements panel that copy the styles of
    * the HTML element.
@@ -146,7 +150,7 @@ const UIStrings = {
    * @description Title of a setting under the Elements category. Whether to show/hide hide
    * the shadow DOM nodes of HTML elements that are built into the browser (e.g. the <input> element).
    */
-  showUserAgentShadowDOM: 'Show user agent shadow `DOM`',
+  userAgentShadowDOM: 'User agent shadow `DOM`',
   /**
    * @description Command for showing the 'Computed' tool. Displays computed CSS styles in Elements sidebar.
    */
@@ -489,7 +493,7 @@ Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.ELEMENTS,
   storageType: Common.Settings.SettingStorageType.SYNCED,
   order: 1,
-  title: i18nLazyString(UIStrings.showUserAgentShadowDOM),
+  title: i18nLazyString(UIStrings.userAgentShadowDOM),
   settingName: 'show-ua-shadow-dom',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: false,
@@ -528,7 +532,7 @@ Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.ELEMENTS,
   storageType: Common.Settings.SettingStorageType.SYNCED,
   order: 3,
-  title: i18nLazyString(UIStrings.showHtmlComments),
+  title: i18nLazyString(UIStrings.htmlComments),
   settingName: 'show-html-comments',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,
@@ -558,7 +562,7 @@ Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.ELEMENTS,
   storageType: Common.Settings.SettingStorageType.SYNCED,
   order: 5,
-  title: i18nLazyString(UIStrings.showDetailedInspectTooltip),
+  title: i18nLazyString(UIStrings.detailedInspectTooltip),
   settingName: 'show-detailed-inspect-tooltip',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,
@@ -581,7 +585,7 @@ Common.Settings.registerSettingExtension({
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.ELEMENTS,
   storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.showCSSDocumentationTooltip),
+  title: i18nLazyString(UIStrings.CSSDocumentationTooltip),
   settingName: 'show-css-property-documentation-on-hover',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,