chrome-devtools-frontend 1.0.1681091 → 1.0.1682249

package/front_end/panels/application/ServiceWorkersView.ts

@@ -738,7 +738,7 @@ export const DEFAULT_SECTION_VIEW: SectionView =
         <span style="flex: 1 1 auto">${input.title}</span>
         ${renderHeaderButtons(input)}
       </devtools-report-section-header>
-      <div class="service-worker-section">
+      <div class="service-worker-section" jslog=${VisualLogging.section('service-worker')}>
          ${renderSourceField(input, input.activeVersion ?? input.redundantVersion)}
          ${renderStatusField(input, input.activeVersion, input.waitingVersion, input.installingVersion, input.redundantVersion)}
          ${renderClientsField(input, input.activeVersion ?? input.redundantVersion)}

package/front_end/panels/application/StorageView.ts

@@ -274,6 +274,7 @@ export class StorageView extends UI.Widget.VBox {
     quota.element.setAttribute('jslog', `${VisualLogging.section('usage')}`);
     this.quotaRow = quota.appendSelectableRow();
     this.quotaRow.classList.add('quota-usage-row');
+    this.quotaRow.setAttribute('jslog', `${VisualLogging.item('storage-usage')}`);
     const learnMoreRow = quota.appendRow();
     const learnMore = Link.create(
         'https://developer.chrome.com/docs/devtools/progressive-web-apps#opaque-responses',
@@ -286,6 +287,7 @@ export class StorageView extends UI.Widget.VBox {
     this.populatePieChart(0, []);
     const usageBreakdownRow = quota.appendRow();
     usageBreakdownRow.classList.add('usage-breakdown-row');
+    usageBreakdownRow.setAttribute('jslog', `${VisualLogging.item('usage-breakdown')}`);
     usageBreakdownRow.appendChild(this.pieChart);
 
     this.previousOverrideFieldValue = '';

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

@@ -22,7 +22,6 @@ 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 {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';
@@ -404,7 +403,11 @@ export function applyFilterText(filterText: string, rows: PreloadingComponents.P
   return rows.filter(row => {
     const attempt = row.pipeline.getOriginallyTriggered();
     const url = attempt.key.url.toLowerCase();
-    const action = capitalizedAction(attempt.action).toLowerCase();
+    const action = PreloadingComponents.PreloadingString
+                       .capitalizedAction(
+                           attempt.action,
+                           )
+                       .toLowerCase();
     const status = PreloadingUIUtils.status(attempt.status).toLowerCase();
 
     // Each term must match (AND logic between terms)
@@ -845,7 +848,10 @@ class PreloadingRuleSetSelector implements
       return i18n.i18n.lockedString('Internal error');
     }
 
-    return ruleSetTagOrLocationShort(ruleSet, pageURL());
+    return PreloadingComponents.PreloadingString.ruleSetTagOrLocationShort(
+        ruleSet,
+        pageURL(),
+    );
   }
 
   subtitleFor(id: Protocol.Preload.RuleSetId|typeof AllRuleSetRootId): string {

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

@@ -6,6 +6,7 @@ import * as MismatchedPreloadingGrid from './MismatchedPreloadingGrid.js';
 import * as PreloadingDetailsReportView from './PreloadingDetailsReportView.js';
 import * as PreloadingDisabledInfobar from './PreloadingDisabledInfobar.js';
 import * as PreloadingGrid from './PreloadingGrid.js';
+import * as PreloadingString from './PreloadingString.js';
 import * as RuleSetDetailsView from './RuleSetDetailsView.js';
 import * as RuleSetGrid from './RuleSetGrid.js';
 import * as UsedPreloadingView from './UsedPreloadingView.js';
@@ -15,6 +16,7 @@ export {
   PreloadingDetailsReportView,
   PreloadingDisabledInfobar,
   PreloadingGrid,
+  PreloadingString,
   RuleSetDetailsView,
   RuleSetGrid,
   UsedPreloadingView,

package/front_end/panels/browser_debugger/ObjectEventListenersSidebarPane.ts

@@ -43,17 +43,16 @@ export class ObjectEventListenersSidebarPane extends UI.Widget.VBox implements U
     const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     if (executionContext) {
       this.#lastRequestedContext = executionContext;
-      const result = await executionContext.evaluate(
-          {
-            expression: 'self',
-            objectGroup: objectGroupName,
-            includeCommandLineAPI: false,
-            silent: true,
-            returnByValue: false,
-            generatePreview: false,
-          },
-          /* userGesture */ false,
-          /* awaitPromise */ false);
+      const result = await executionContext.evaluateWithSelectedFrameFallback({
+        expression: 'self',
+        objectGroup: objectGroupName,
+        includeCommandLineAPI: false,
+        silent: true,
+        returnByValue: false,
+        generatePreview: false,
+      },
+                                                                              /* userGesture */ false,
+                                                                              /* awaitPromise */ false);
       if (!('error' in result) && !result.exceptionDetails) {
         windowObjects.push(result.object);
       }

package/front_end/panels/changes/CombinedDiffView.ts

@@ -71,7 +71,7 @@ function renderSingleDiffView(singleDiffViewInput: SingleDiffViewInput): Lit.Tem
 
   // clang-format off
   return html`
-    <details open class=${classes}>
+    <details open class=${classes} jslog=${VisualLogging.section('diff-view')}>
       <summary>
         <div class="summary-left">
           <devtools-icon class="drop-down-icon" name="arrow-drop-down"></devtools-icon>

package/front_end/panels/common/BadgeNotification.ts

@@ -139,7 +139,7 @@ const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement)
 type View = typeof DEFAULT_VIEW;
 
 function revealBadgeSettings(): void {
-  void Common.Revealer.reveal(Common.Settings.Settings.instance().moduleSetting('receive-gdp-badges'));
+  void Common.Revealer.reveal(Common.Settings.Settings.instance().resolve(Badges.receiveGdpBadgesSettingDescriptor));
 }
 
 export class BadgeNotification extends UI.Widget.Widget {

package/front_end/panels/common/ExtensionPanel.ts

@@ -200,14 +200,19 @@ export class ExtensionSidebarPane extends UI.View.SimpleView {
       callback('operation cancelled');
       return;
     }
-    objectPropertiesView.element.removeChildren();
-    const section = new ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection(object, title, undefined, undefined,
-                                                                                 /* editable: */ false);
-    if (!title) {
-      section.titleLessMode();
+    objectPropertiesView.detachChildWidgets();
+    const section = new ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionWidget();
+    section.objectTree = new ObjectUI.ObjectPropertiesSection.ObjectTree(object, {
+      readOnly: true,
+      propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+    });
+    section.objectTree.expanded = true;
+    if (title) {
+      const span = document.createElement('span');
+      span.textContent = title;
+      section.title = span;
     }
-    section.firstChild()?.expand();
-    objectPropertiesView.element.appendChild(section.element);
+    section.show(objectPropertiesView.element);
     callback();
   }
 }

package/front_end/panels/common/ExtensionServer.ts

@@ -1349,15 +1349,76 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       return this.status.E_BADARG(
           'command', `expected ${Extensions.ExtensionAPI.PrivateAPI.Commands.ForwardKeyboardEvent}`);
     }
-    message.entries.forEach(handleEventEntry);
+    if (!Array.isArray(message.entries)) {
+      return this.status.E_BADARG('entries', 'expected array');
+    }
+
+    const globalShortcutKeys = new Set(UI.ShortcutRegistry.ShortcutRegistry.instance().globalShortcutKeys());
+    const validEvents: Array<{event: KeyboardEvent, keyCode: number}> = [];
+
+    for (const entry of message.entries) {
+      if (!entry || typeof entry !== 'object') {
+        return this.status.E_BADARG('entries', 'expected object');
+      }
+      if (entry.eventType !== 'keydown') {
+        return this.status.E_BADARG('eventType', 'expected "keydown"');
+      }
+      if (typeof entry.key !== 'string') {
+        return this.status.E_BADARGTYPE('key', typeof entry.key, 'string');
+      }
+      if (typeof entry.code !== 'string') {
+        return this.status.E_BADARGTYPE('code', typeof entry.code, 'string');
+      }
+      if (typeof entry.keyCode !== 'number' || !Number.isFinite(entry.keyCode)) {
+        return this.status.E_BADARGTYPE('keyCode', typeof entry.keyCode, 'number');
+      }
+      if (typeof entry.location !== 'number' || !Number.isFinite(entry.location)) {
+        return this.status.E_BADARGTYPE('location', typeof entry.location, 'number');
+      }
+      if (typeof entry.ctrlKey !== 'boolean') {
+        return this.status.E_BADARGTYPE('ctrlKey', typeof entry.ctrlKey, 'boolean');
+      }
+      if (typeof entry.altKey !== 'boolean') {
+        return this.status.E_BADARGTYPE('altKey', typeof entry.altKey, 'boolean');
+      }
+      if (typeof entry.shiftKey !== 'boolean') {
+        return this.status.E_BADARGTYPE('shiftKey', typeof entry.shiftKey, 'boolean');
+      }
+      if (typeof entry.metaKey !== 'boolean') {
+        return this.status.E_BADARGTYPE('metaKey', typeof entry.metaKey, 'boolean');
+      }
+
+      let keyCode = entry.keyCode;
+      if (!keyCode && entry.key === Platform.KeyboardUtilities.ESCAPE_KEY) {
+        keyCode = 27;
+      }
+      if (!Number.isInteger(keyCode) || keyCode < 0 || keyCode > 255) {
+        return this.status.E_BADARG('keyCode', 'invalid keyCode');
+      }
+
+      let modifiers = 0;
+      if (entry.shiftKey) {
+        modifiers |= UI.KeyboardShortcut.Modifiers.Shift.value;
+      }
+      if (entry.ctrlKey) {
+        modifiers |= UI.KeyboardShortcut.Modifiers.Ctrl.value;
+      }
+      if (entry.altKey) {
+        modifiers |= UI.KeyboardShortcut.Modifiers.Alt.value;
+      }
+      if (entry.metaKey) {
+        modifiers |= UI.KeyboardShortcut.Modifiers.Meta.value;
+      }
+
+      const keyCombination = (keyCode & 255) | (modifiers << 8);
+      if (!globalShortcutKeys.has(keyCombination)) {
+        return this.status.E_BADARG('entries', 'unexpected shortcut key');
+      }
 
-    function handleEventEntry(entry: KeyboardEventInit&{eventType: string}): void {
-      // Fool around closure compiler -- it has its own notion of both KeyboardEvent constructor
-      // and initKeyboardEvent methods and overriding these in externs.js does not have effect.
       const event = new window.KeyboardEvent(entry.eventType, {
         key: entry.key,
         code: entry.code,
-        keyCode: entry.keyCode,
+        keyCode,
         location: entry.location,
         ctrlKey: entry.ctrlKey,
         altKey: entry.altKey,
@@ -1365,24 +1426,23 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
         metaKey: entry.metaKey,
       });
 
+      validEvents.push({event, keyCode});
+    }
+
+    for (const {event, keyCode} of validEvents) {
       // @ts-expect-error
-      event.__keyCode = keyCodeForEntry(entry);
+      event.__keyCode = keyCode;
       document.dispatchEvent(event);
     }
 
-    function keyCodeForEntry(entry: KeyboardEventInit): unknown {
-      let keyCode = entry.keyCode;
-      if (!keyCode) {
-        // This is required only for synthetic events (e.g. dispatched in tests).
-        if (entry.key === Platform.KeyboardUtilities.ESCAPE_KEY) {
-          keyCode = 27;
-        }
-      }
-      return keyCode || 0;
-    }
     return undefined;
   }
 
+  onForwardKeyboardEventForTest(message: Extensions.ExtensionAPI.PrivateAPI.ExtensionServerRequestMessage): Record
+      |undefined {
+    return this.onForwardKeyboardEvent(message);
+  }
+
   private dispatchCallback(requestId: unknown, port: MessagePort, result: unknown): void {
     if (requestId) {
       port.postMessage({command: 'callback', requestId, result});
@@ -1735,16 +1795,15 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
 
     void context
-        .evaluate(
-            {
-              expression,
-              objectGroup: 'extension',
-              includeCommandLineAPI: exposeCommandLineAPI,
-              silent: true,
-              returnByValue,
-              generatePreview: false,
-            },
-            /* userGesture */ false, /* awaitPromise */ false)
+        .evaluate({
+          expression,
+          objectGroup: 'extension',
+          includeCommandLineAPI: exposeCommandLineAPI,
+          silent: true,
+          returnByValue,
+          generatePreview: false,
+        },
+                  /* userGesture */ false, /* awaitPromise */ false)
         .then(onEvaluate);
 
     function onEvaluate(result: SDK.RuntimeModel.EvaluationResult): void {

package/front_end/panels/common/GdpSignUpDialog.ts

@@ -222,7 +222,7 @@ export class GdpSignUpDialog extends UI.Widget.VBox {
         this.#keepMeUpdated ? Host.GdpClient.EmailPreference.ENABLED : Host.GdpClient.EmailPreference.DISABLED;
     const result = await Host.GdpClient.GdpClient.instance().createProfile({user, emailPreference});
     if (result) {
-      Common.Settings.Settings.instance().moduleSetting('receive-gdp-badges').set(true);
+      Common.Settings.Settings.instance().resolve(Badges.receiveGdpBadgesSettingDescriptor).set(true);
       await Badges.UserBadges.instance().initialize();
       Badges.UserBadges.instance().recordAction(Badges.BadgeAction.GDP_SIGN_UP_COMPLETE);
       this.#onSuccess?.();

package/front_end/panels/console/ConsoleView.ts

@@ -481,7 +481,8 @@ export class ConsoleView extends UI.Widget.VBox implements
     toolbar.appendToolbarItem(this.filterStatusText);
     toolbar.appendToolbarItem(this.showSettingsPaneButton);
 
-    const monitoringXHREnabledSetting = Common.Settings.Settings.instance().moduleSetting('monitoring-xhr-enabled');
+    const monitoringXHREnabledSetting =
+        Common.Settings.Settings.instance().resolve(SDK.SDKSettings.monitoringXHREnabledSettingDescriptor);
     this.timestampsSetting = Common.Settings.Settings.instance().moduleSetting('console-timestamps-enabled');
     this.consoleHistoryAutocompleteSetting =
         Common.Settings.Settings.instance().moduleSetting('console-history-autocomplete');

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -895,8 +895,9 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       if (obj.preview) {
         titleElement.classList.add('console-object-preview');
 
-        render(this.previewFormatter.renderObjectPreview(obj.preview, includeNullOrUndefined), titleElement);
-        ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.appendMemoryIcon(titleElement, obj);
+        render(html`${this.previewFormatter.renderObjectPreview(obj.preview, includeNullOrUndefined)}${
+                   ObjectUI.ObjectPropertiesSection.getMemoryIcon(obj)}`,
+               titleElement);
       }
     };
 

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

@@ -23,6 +23,10 @@ const UIStrings = {
    * @description Title of a setting under the Console category in Settings.
    */
   customFormatters: 'Custom formatters',
+  /**
+   * @description Title of a setting under the Console category in Settings.
+   */
+  logXmlhttprequests: 'Log XMLHttpRequests',
   /**
    * @description Title of the Console tool.
    */
@@ -479,6 +483,11 @@ SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.customFormattersSettin
   title: i18nLazyString(UIStrings.customFormatters),
 });
 
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.monitoringXHREnabledSettingDescriptor, {
+  category: Common.Settings.SettingCategory.CONSOLE,
+  title: i18nLazyString(UIStrings.logXmlhttprequests),
+});
+
 Common.Revealer.registerRevealer({
   contextTypes() {
     return [

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -299,26 +299,31 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
             <!-- Dupe the styles into the main container because of the shadow root will prevent outer styles. -->
             <style>${cssOverviewCompletedViewStyles}</style>
             <div class="results-section horizontally-padded summary"
+                  jslog=${VisualLogging.section('summary')}
                   ${ref(e => { output.revealSection.set('summary', revealSection.bind(null, e));})}>
               <h1>${i18nString(UIStrings.overviewSummary)}</h1>
               ${renderSummary(input.elementCount, input.globalStyleStats, input.mediaQueries)}
             </div>
             <div class="results-section horizontally-padded colors"
+                jslog=${VisualLogging.section('colors')}
                 ${ref(e => { output.revealSection.set('colors', revealSection.bind(null, e));})}>
                 <h1>${i18nString(UIStrings.colors)}</h1>
                 ${renderColors(input.backgroundColors, input.textColors, input.textColorContrastIssues, input.fillColors, input.borderColors)}
               </div>
               <div class="results-section font-info"
+                    jslog=${VisualLogging.section('font-info')}
                     ${ref(e => { output.revealSection.set('font-info', revealSection.bind(null, e));})}>
                 <h1>${i18nString(UIStrings.fontInfo)}</h1>
                 ${renderFontInfo(input.fontInfo)}
               </div>
               <div class="results-section unused-declarations"
+                    jslog=${VisualLogging.section('unused-declarations')}
                     ${ref(e => { output.revealSection.set('unused-declarations', revealSection.bind(null, e));})}>
                 <h1>${i18nString(UIStrings.unusedDeclarations)}</h1>
                 ${renderUnusedDeclarations(input.unusedDeclarations)}
               </div>
               <div class="results-section media-queries"
+                    jslog=${VisualLogging.section('media-queries')}
                     ${ref(e => { output.revealSection.set('media-queries', revealSection.bind(null, e));})}>
               <h1>${i18nString(UIStrings.mediaQueries)}</h1>
               ${renderMediaQueries(input.mediaQueries)}
@@ -355,7 +360,7 @@ function renderSummary(
     elementCount: number, globalStyleStats: GlobalStyleStats,
     mediaQueries: Array<{title: string, nodes: Protocol.CSS.CSSMedia[]}>): TemplateResult {
   const renderSummaryItem = (label: string, value: number): TemplateResult => html`
-    <li>
+    <li jslog=${VisualLogging.item('summary-item')}>
       <div class="label">${label}</div>
       <div class="value">${formatter.format(value)}</div>
     </li>`;
@@ -440,7 +445,7 @@ function renderGroup(
           const width = 100 * nodes.length / total;
           const itemLabel = i18nString(UIStrings.nOccurrences, {n: nodes.length});
 
-          return html`<li>
+          return html`<li jslog=${VisualLogging.item('css-overview.group-item')}>
             <div class="title">${title}</div>
             <button data-type=${type} data-path=${path} data-label=${title}
             jslog=${VisualLogging.action().track({click: true}).context(`css-overview.${type}`)}
@@ -492,7 +497,7 @@ function renderContrastIssue(key: string, issues: ContrastIssue[]): TemplateResu
   const border = getBorderString(minContrastIssue.backgroundColor.asLegacyColor());
 
   // clang-format off
-  return html`<li>
+  return html`<li jslog=${VisualLogging.item('contrast-issue')}>
     <button
       title=${title} aria-label=${title}
       data-type="contrast" data-key=${key} data-section="contrast" class="block"
@@ -525,7 +530,7 @@ function renderColor(section: string, color: string): LitTemplate {
     return nothing;
   }
   // clang-format off
-  return html`<li>
+  return html`<li jslog=${VisualLogging.item('color-item')}>
     <button title=${color} data-type="color" data-color=${color}
       data-section=${section} class="block"
       style=${styleMap({backgroundColor: color, border: getBorderString(borderColor)})}

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -22,41 +22,41 @@ import {
 
 const UIStrings = {
   /**
-   * @description The message shown in the Style pane when the user hovers over a property that has no effect due to some other property.
+   * @description The message shown in the Styles tab when the user hovers over a property that has no effect due to some other property.
    * @example {flex-wrap: nowrap} REASON_PROPERTY_DECLARATION_CODE
    * @example {align-content} AFFECTED_PROPERTY_DECLARATION_CODE
    */
   ruleViolatedBySameElementRuleReason:
       'The {REASON_PROPERTY_DECLARATION_CODE} property prevents {AFFECTED_PROPERTY_DECLARATION_CODE} from having an effect.',
   /**
-   * @description The message shown in the Style pane when the user hovers over a property declaration that has no effect due to some other property.
+   * @description The message shown in the Styles tab when the user hovers over a property declaration that has no effect due to some other property.
    * @example {flex-wrap} PROPERTY_NAME
    * @example {nowrap} PROPERTY_VALUE
    */
   ruleViolatedBySameElementRuleFix: 'Try setting {PROPERTY_NAME} to something other than {PROPERTY_VALUE}.',
   /**
-   * @description The message shown in the Style pane when the user hovers over a property declaration that has no effect due to not being a flex or grid container.
+   * @description The message shown in the Styles tab when the user hovers over a property declaration that has no effect due to not being a flex or grid container.
    * @example {display: grid} DISPLAY_GRID_RULE
    * @example {display: flex} DISPLAY_FLEX_RULE
    */
   ruleViolatedBySameElementRuleChangeFlexOrGrid:
       'Try adding {DISPLAY_GRID_RULE} or {DISPLAY_FLEX_RULE} to make this element into a container.',
   /**
-   * @description The message shown in the Style pane when the user hovers over a property declaration that has no effect due to the current property value.
+   * @description The message shown in the Styles tab when the user hovers over a property declaration that has no effect due to the current property value.
    * @example {display: block} EXISTING_PROPERTY_DECLARATION
    * @example {display: flex} TARGET_PROPERTY_DECLARATION
    */
   ruleViolatedBySameElementRuleChangeSuggestion:
       'Try setting the {EXISTING_PROPERTY_DECLARATION} property to {TARGET_PROPERTY_DECLARATION}.',
   /**
-   * @description The message shown in the Style pane when the user hovers over a property declaration that has no effect due to properties of the parent element.
+   * @description The message shown in the Styles tab when the user hovers over a property declaration that has no effect due to properties of the parent element.
    * @example {display: block} REASON_PROPERTY_DECLARATION_CODE
    * @example {flex} AFFECTED_PROPERTY_DECLARATION_CODE
    */
   ruleViolatedByParentElementRuleReason:
       'The {REASON_PROPERTY_DECLARATION_CODE} property on the parent element prevents {AFFECTED_PROPERTY_DECLARATION_CODE} from having an effect.',
   /**
-   * @description The message shown in the Style pane when the user hovers over a property declaration that has no effect due to the properties of the parent element.
+   * @description The message shown in the Styles tab when the user hovers over a property declaration that has no effect due to the properties of the parent element.
    * @example {display: block} EXISTING_PARENT_ELEMENT_RULE
    * @example {display: flex} TARGET_PARENT_ELEMENT_RULE
    */
@@ -64,7 +64,7 @@ const UIStrings = {
       'Try setting the {EXISTING_PARENT_ELEMENT_RULE} property on the parent to {TARGET_PARENT_ELEMENT_RULE}.',
 
   /**
-   * @description The warning text shown in Elements panel when font-variation-settings don't match allowed values
+   * @description The warning text shown in the Elements panel when font-variation-settings don't match allowed values.
    * @example {wdth} PH1
    * @example {100} PH2
    * @example {10} PH3
@@ -74,31 +74,31 @@ const UIStrings = {
   fontVariationSettingsWarning:
       'Value for setting "{PH1}" {PH2} is outside the supported range [{PH3}, {PH4}] for font-family "{PH5}".',
   /**
-   * @description The message shown in the Style pane when the user hovers over a property declaration that has no effect on flex or grid child items.
+   * @description The message shown in the Styles tab when the user hovers over a property declaration that has no effect on flex or grid child items.
    * @example {flex} CONTAINER_DISPLAY_NAME
    * @example {align-contents} PROPERTY_NAME
    */
   flexGridContainerPropertyRuleReason:
       'This element is a {CONTAINER_DISPLAY_NAME} item, i.e. a child of a {CONTAINER_DISPLAY_NAME} container, but {PROPERTY_NAME} only applies to containers.',
   /**
-   * @description The message shown in the Style pane when the user hovers over a property declaration that has no effect on flex or grid child items.
+   * @description The message shown in the Styles tab when the user hovers over a property declaration that has no effect on flex or grid child items.
    * @example {align-contents} PROPERTY_NAME
    * @example {align-self} ALTERNATIVE_PROPERTY_NAME
    */
   flexGridContainerPropertyRuleFix:
       'Try setting the {PROPERTY_NAME} on the container element or use {ALTERNATIVE_PROPERTY_NAME} instead.',
   /**
-   * @description The messages shown in the Style pane when the user hovers over a position-anchor declaration that has no affect on a non-anchor-positioned element.
+   * @description The message shown in the Styles tab when the user hovers over a position-anchor declaration that has no effect on a non-anchor-positioned element.
    * @example {relative} POSITION
    */
   invalidAnchorPositioning:
       'An anchor was defined but the element was not anchor-positioned but positioned "{POSITION}".',
   /**
-   * @description The messages shown in the Style pane when the user hovers over a position-anchor declaration that has no affect on a non-anchor-positioned element.
+   * @description The message shown in the Styles tab when the user hovers over a position-anchor declaration that has no effect on a non-anchor-positioned element.
    */
   invalidAnchorPositioningFix: 'Set position to either "fixed" or "absolute".',
   /**
-   * @description The messages shown in the Style pane when the user hovers over a position-anchor declaration that has no affect on hidden element.
+   * @description The message shown in the Styles tab when the user hovers over a position-anchor declaration that has no effect on a hidden element.
    */
   unusedAnchorPositioning: 'An anchor was defined but the element is hidden.',
 } as const;

package/front_end/panels/elements/CSSSpecificityBreakdown.ts

@@ -7,7 +7,7 @@ import type * as Protocol from '../../generated/protocol.js';
 
 const UIStrings = {
   /**
-   * @description Summary line in a tooltip explaining a CSS selector specificity.
+   * @description Summary line in a tooltip explaining CSS selector specificity.
    * @example {1} PH1
    * @example {2} PH2
    * @example {3} PH3

package/front_end/panels/elements/ClassesPaneWidget.ts

@@ -15,25 +15,25 @@ import {ElementsPanel} from './ElementsPanel.js';
 
 const UIStrings = {
   /**
-   * @description Prompt text for a text field in the Classes Pane Widget of the Elements panel.
+   * @description Prompt text for a text field to add CSS classes to the selected element in the Styles tab of the Elements panel.
    * Class refers to a CSS class.
    */
   addNewClass: 'Add new class',
   /**
-   * @description Screen reader announcement string when adding a CSS class via the Classes Pane Widget.
+   * @description Screen reader announcement string when adding CSS classes to the selected element in the Styles tab of the Elements panel.
    * @example {vbox flex-auto} PH1
    */
   classesSAdded: 'Classes {PH1} added',
   /**
-   * @description Screen reader announcement string when adding a class via the Classes Pane Widget.
+   * @description Screen reader announcement string when adding a CSS class to the selected element in the Styles tab of the Elements panel.
    * @example {title-container} PH1
    */
   classSAdded: 'Class {PH1} added',
   /**
-   * @description Accessible title read by screen readers for the Classes Pane Widget of the Elements
-   * panel. Element is a HTML DOM Element and classes refers to CSS classes.
+   * @description Accessible title read by screen readers for the element classes widget in the Styles tab of the Elements
+   * panel. Element is an HTML DOM element and classes refers to CSS classes.
    */
-  elementClasses: 'Element Classes',
+  elementClasses: 'Element classes',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ClassesPaneWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/elements/ColorSwatchPopoverIcon.ts

@@ -20,7 +20,7 @@ const UIStrings = {
    */
   openCubicBezierEditor: 'Open cubic bezier editor',
   /**
-   * @description Tooltip text for an icon that opens shadow editor. The shadow editor is a tool
+   * @description Tooltip text for an icon that opens the shadow editor. The shadow editor is a tool
    * which allows the user to edit CSS shadow properties.
    */
   openShadowEditor: 'Open shadow editor',

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -58,17 +58,16 @@ const {bindToSetting} = UI.UIUtils;
 const UIStrings = {
   /**
    * @description Text for a checkbox setting that controls whether the user-supplied filter text
-   * excludes all CSS propreties which are filtered out, or just greys them out. In Computed Style
-   * Widget of the Elements panel
+   * excludes all CSS properties which are filtered out, or just grays them out. In the Computed styles
+   * tab of the Elements panel.
    */
   showAll: 'Show all',
   /**
    * @description Text for a checkbox setting that controls whether similar CSS properties should be
-   * grouped together or not. In Computed Style Widget of the Elements panel.
+   * grouped together or not. In the Computed styles tab of the Elements panel.
    */
   group: 'Group',
   /**
-   * [
    * @description Text shown to the user when a filter is applied to the computed CSS properties, but
    * no properties matched the filter and thus no results were returned.
    */
@@ -88,7 +87,7 @@ const UIStrings = {
    * @example {example} PH1
    * @example {5} PH2
    */
-  filterUpdateAriaText: `Filter applied: {PH1}. Total Results: {PH2}`,
+  filterUpdateAriaText: 'Filter applied: {PH1}. Total results: {PH2}',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ComputedStyleWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/elements/DOMTreeContextMenu.ts

@@ -440,7 +440,6 @@ export async function populateNodeContextMenu(contextMenu: UI.ContextMenu.Contex
 export async function showContextMenu(
     treeElement: ElementsTreeElement,
     event: Event,
-    onSaveNodeToTempVariable?: (node: SDK.DOMModel.DOMNode) => void,
     ): Promise<UI.ContextMenu.ContextMenu|undefined> {
   if (UI.UIUtils.isEditing()) {
     return;
@@ -472,11 +471,9 @@ export async function showContextMenu(
     textNode = null;
   }
   const commentNode = (node as Element).enclosingNodeOrSelfWithClass?.('webkit-html-comment');
-  if (onSaveNodeToTempVariable) {
-    contextMenu.saveSection().appendItem(i18nString(UIStrings.storeAsGlobalVariable),
-                                         () => onSaveNodeToTempVariable(domNode),
-                                         {jslogContext: 'store-as-global-variable'});
-  }
+  contextMenu.saveSection().appendItem(i18nString(UIStrings.storeAsGlobalVariable),
+                                       () => void domNode.saveNodeToTempVariable(),
+                                       {jslogContext: 'store-as-global-variable'});
   if (textNode) {
     if (!treeElement.isEditing) {
       contextMenu.editSection().appendItem(i18nString(UIStrings.editText),