chrome-devtools-frontend 1.0.948359 → 1.0.950001

package/front_end/models/issues_manager/descriptions/arInvalidTriggerPriority.md

@@ -0,0 +1,5 @@
+# Ensure the "priority" query parameter for an attribution redirect is a valid number
+
+The priority associated with an attribution was defaulted to `0`.
+This happens if the `priority` query parameter provided in the `.well-known` redirect is not a
+valid 64-bit signed integer.

package/front_end/models/issues_manager/descriptions/corsPreflightResponseInvalid.md

@@ -1,5 +1,5 @@
 # Ensure preflight responses are valid
 
-A cross-origin resource sharing (CORS) request was blocked because the response to the associated [preflight request](issueCorsPreflightRequest) had an unsuccessful HTTP status code and/or was a redirect.
+A cross-origin resource sharing (CORS) request was blocked because the response to the associated [preflight request](issueCorsPreflightRequest) failed, had an unsuccessful HTTP status code, and/or was a redirect.
 
-To fix this issue, ensure all CORS preflight `OPTION` requests are answered with a successful HTTP status code (2xx) and do not redirect.
+To fix this issue, ensure all CORS preflight `OPTIONS` requests are answered with a successful HTTP status code (2xx) and do not redirect.

package/front_end/panels/accessibility/AXBreadcrumbsPane.ts

@@ -3,8 +3,11 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Feedback from '../../ui/components/panel_feedback/panel_feedback.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import axBreadcrumbsStyles from './axBreadcrumbs.css.js';
@@ -27,6 +30,18 @@ const UIStrings = {
   *@description Ignored node element text content in AXBreadcrumbs Pane of the Accessibility panel
   */
   ignored: 'Ignored',
+  /**
+  *@description Name for experimental tree toggle.
+  */
+  fullTreeExperimentName: 'Enable full-page accessibility tree',
+  /**
+  *@description Description text for experimental tree toggle.
+  */
+  fullTreeExperimentDescription: 'The accessibility tree moved to the top right corner of the DOM tree.',
+  /**
+  *@description Message saying that DevTools must be restarted before the experiment is enabled.
+  */
+  reloadRequired: 'Reload required before the change takes effect.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/accessibility/AXBreadcrumbsPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -37,24 +52,48 @@ export class AXBreadcrumbsPane extends AccessibilitySubPane {
   private collapsingBreadcrumbId: number;
   private hoveredBreadcrumb: AXBreadcrumb|null;
   private readonly rootElement: HTMLElement;
+  #legacyTreeDisabled = false;
 
   constructor(axSidebarView: AccessibilitySidebarView) {
     super(i18nString(UIStrings.accessibilityTree));
 
     this.element.classList.add('ax-subpane');
-    UI.ARIAUtils.markAsTree(this.element);
     this.element.tabIndex = -1;
 
     this.axSidebarView = axSidebarView;
-
     this.preselectedBreadcrumb = null;
     this.inspectedNodeBreadcrumb = null;
 
     this.collapsingBreadcrumbId = -1;
 
-    this.hoveredBreadcrumb = null;
     this.rootElement = this.element.createChild('div', 'ax-breadcrumbs');
 
+    this.hoveredBreadcrumb = null;
+    const previewToggle = new Feedback.PreviewToggle.PreviewToggle();
+    const name = i18nString(UIStrings.fullTreeExperimentName);
+    const experiment = Root.Runtime.ExperimentName.FULL_ACCESSIBILITY_TREE;
+    const onChangeCallback: (checked: boolean) => void = checked => {
+      Host.userMetrics.experimentChanged(experiment, checked);
+      UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(i18nString(UIStrings.reloadRequired));
+    };
+    if (Root.Runtime.experiments.isEnabled(experiment)) {
+      this.#legacyTreeDisabled = true;
+      const feedbackURL = 'https://goo.gle/devtools-a11y-tree-feedback';
+      previewToggle.data = {
+        name,
+        helperText: i18nString(UIStrings.fullTreeExperimentDescription),
+        feedbackURL,
+        experiment,
+        onChangeCallback,
+      };
+      this.element.appendChild(previewToggle);
+      return;
+    }
+    previewToggle.data = {name, helperText: null, feedbackURL: null, experiment, onChangeCallback};
+    this.element.prepend(previewToggle);
+
+    UI.ARIAUtils.markAsTree(this.rootElement);
+
     this.rootElement.addEventListener('keydown', this.onKeyDown.bind(this), true);
     this.rootElement.addEventListener('mousemove', this.onMouseMove.bind(this), false);
     this.rootElement.addEventListener('mouseleave', this.onMouseLeave.bind(this), false);
@@ -72,6 +111,9 @@ export class AXBreadcrumbsPane extends AccessibilitySubPane {
   }
 
   setAXNode(axNode: SDK.AccessibilityModel.AccessibilityNode|null): void {
+    if (this.#legacyTreeDisabled) {
+      return;
+    }
     const hadFocus = this.element.hasFocus();
     super.setAXNode(axNode);
 

package/front_end/panels/accessibility/AccessibilitySidebarView.ts

@@ -31,10 +31,8 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
     this.axNodeInternal = null;
     this.skipNextPullNode = false;
     this.sidebarPaneStack = UI.ViewManager.ViewManager.instance().createStackLocation();
-    if (!Root.Runtime.experiments.isEnabled('fullAccessibilityTree')) {
-      this.breadcrumbsSubPane = new AXBreadcrumbsPane(this);
-      this.sidebarPaneStack.showView(this.breadcrumbsSubPane);
-    }
+    this.breadcrumbsSubPane = new AXBreadcrumbsPane(this);
+    this.sidebarPaneStack.showView(this.breadcrumbsSubPane);
     this.ariaSubPane = new ARIAAttributesPane();
     this.sidebarPaneStack.showView(this.ariaSubPane);
     this.axNodeSubPane = new AXNodeSubPane();

package/front_end/panels/accessibility/axBreadcrumbs.css

@@ -99,6 +99,10 @@
   background-color: var(--color-background-elevation-0);
 }
 
+.ax-breadcrumbs .ax-node:not(.inspected):focus {
+  background-color: var(--color-background-elevation-1);
+}
+
 .ax-breadcrumbs .ax-node.inspected:focus * {
   color: inherit;
 }

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

@@ -47,6 +47,11 @@ const UIStrings = {
   */
   document: 'Document',
   /**
+  *@description A web URL (for a lot of languages this does not need to be translated, please translate only where necessary)
+  */
+  url: 'URL',
+  /**
+  /**
   *@description Title for a link to the Sources panel
   */
   clickToRevealInSourcesPanel: 'Click to reveal in Sources panel',
@@ -63,6 +68,12 @@ const UIStrings = {
   */
   clickToRevealInNetworkPanelMight: 'Click to reveal in Network panel (might require page reload)',
   /**
+  *@description The origin of a URL (https://web.dev/same-site-same-origin/#origin)
+  *(for a lot of languages this does not need to be translated, please translate only where necessary)
+  */
+  origin: 'Origin',
+  /**
+  /**
   *@description Related node label in Timeline UIUtils of the Performance panel
   */
   ownerElement: 'Owner Element',
@@ -107,9 +118,11 @@ const UIStrings = {
   */
   no: 'No',
   /**
-  *@description Row title for in the Frame Details view
+  *@description Label for whether a frame is cross-origin isolated
+  *(https://developer.chrome.com/docs/extensions/mv3/cross-origin-isolation/)
+  *(for a lot of languages this does not need to be translated, please translate only where necessary)
   */
-  crossoriginIsolated: '`Cross-Origin` Isolated',
+  crossoriginIsolated: 'Cross-Origin Isolated',
   /**
   *@description Explanatory text in the Frame Details view
   */
@@ -132,10 +145,11 @@ const UIStrings = {
   */
   apiAvailability: 'API availability',
   /**
-  *@description Explanatory text in the Frame Details view for the API availability section
+  *@description Explanation of why cross-origin isolation is important
+  *(https://web.dev/why-coop-coep/)
+  *(for a lot of languages 'cross-origin isolation' does not need to be translated, please translate only where necessary)
   */
-  availabilityOfCertainApisDepends:
-      'Availability of certain APIs depends on the document being `cross-origin` isolated.',
+  availabilityOfCertainApisDepends: 'Availability of certain APIs depends on the document being cross-origin isolated.',
   /**
   *@description Description of the SharedArrayBuffer status
   */
@@ -159,13 +173,17 @@ const UIStrings = {
   sharedarraybufferConstructorIsAvailable:
       '`SharedArrayBuffer` constructor is available but `SABs` cannot be transferred via `postMessage`',
   /**
-  *@description Explanation for the SharedArrayBuffer availability status
+  *@description Explanation why SharedArrayBuffer will not be available in the future
+  *(https://developer.chrome.com/docs/extensions/mv3/cross-origin-isolation/)
+  *(for a lot of languages 'cross-origin isolation' does not need to be translated, please translate only where necessary)
   */
-  willRequireCrossoriginIsolated: '⚠️ will require `cross-origin` isolated context in the future',
+  willRequireCrossoriginIsolated: '⚠️ will require cross-origin isolated context in the future',
   /**
-  *@description Explanation for the SharedArrayBuffer availability status
+  *@description Explanation why SharedArrayBuffer is not available
+  *(https://developer.chrome.com/docs/extensions/mv3/cross-origin-isolation/)
+  *(for a lot of languages 'cross-origin isolation' does not need to be translated, please translate only where necessary).
   */
-  requiresCrossoriginIsolated: 'requires `cross-origin` isolated context',
+  requiresCrossoriginIsolated: 'requires cross-origin isolated context',
   /**
    *@description Explanation for the SharedArrayBuffer availability status in case the transfer of a SAB requires the
    * permission policy `cross-origin-isolated` to be enabled (e.g. because the message refers to the situation in an iframe).
@@ -218,10 +236,6 @@ const UIStrings = {
   */
   createdByAdScriptExplanation:
       'There was an ad script in the `(async) stack` when this frame was created. Examining the creation `stack trace` of this frame might provide more insight.',
-  /**
-   *@description Label for a list of origin trials that associated with at least one token.
-   */
-  // originTrials: 'Origin Trials',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/FrameDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -343,7 +357,7 @@ export class FrameDetailsReportView extends HTMLElement {
     return LitHtml.html`
       <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.document)}</${
         ReportView.ReportView.ReportSectionHeader.litTagName}>
-      <${ReportView.ReportView.ReportKey.litTagName}>${i18n.i18n.lockedString('URL')}</${
+      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.url)}</${
         ReportView.ReportView.ReportKey.litTagName}>
       <${ReportView.ReportView.ReportValue.litTagName}>
         <div class="inline-items">
@@ -449,7 +463,7 @@ export class FrameDetailsReportView extends HTMLElement {
   private maybeRenderOrigin(): LitHtml.TemplateResult|{} {
     if (this.frame && this.frame.securityOrigin && this.frame.securityOrigin !== '://') {
       return LitHtml.html`
-        <${ReportView.ReportView.ReportKey.litTagName}>${i18n.i18n.lockedString('Origin')}</${
+        <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.origin)}</${
           ReportView.ReportView.ReportKey.litTagName}>
         <${ReportView.ReportView.ReportValue.litTagName}>
           <div class="text-ellipsis" title=${this.frame.securityOrigin}>${this.frame.securityOrigin}</div>

package/front_end/panels/console/ConsolePrompt.ts

@@ -259,7 +259,6 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     } else {
       this.editor.dispatch({scrollIntoView: true});
     }
-    this.enterProcessedForTest();
     return true;
   }
 
@@ -283,9 +282,6 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     }
   }
 
-  private enterProcessedForTest(): void {
-  }
-
   private editorUpdate(update: CodeMirror.ViewUpdate): void {
     if (update.docChanged ||
         CodeMirror.selectedCompletion(update.state) !== CodeMirror.selectedCompletion(update.startState)) {

package/front_end/panels/elements/AccessibilityTreeUtils.ts

@@ -86,13 +86,7 @@ async function getChildren(node: SDK.AccessibilityModel.AccessibilityNode):
     const localRoot = await getRootNode(frameId);
     return [localRoot];
   }
-  if (node.hasUnloadedChildren()) {
-    await node.accessibilityModel().requestAXChildren(node.id(), node.getFrameId() || undefined);
-    if (node.numChildren() !== node.children().length) {
-      throw new Error('Once loaded, number of children and length of children must match.');
-    }
-  }
-  return node.children();
+  return node.accessibilityModel().requestAXChildren(node.id(), node.getFrameId() || undefined);
 }
 
 export async function sdkNodeToAXTreeNodes(sdkNode: SDK.AccessibilityModel.AccessibilityNode): Promise<AXTreeNode[]> {

package/front_end/panels/elements/AccessibilityTreeView.ts

@@ -120,16 +120,14 @@ export class AccessibilityTreeView extends UI.Widget.VBox implements
 
   // Selected node in the DOM tree has changed.
   async selectedNodeChanged(inspectedNode: SDK.DOMModel.DOMNode): Promise<void> {
-    if (this.isShowing()) {
+    if (this.isShowing() || (inspectedNode === this.inspectedDOMNode)) {
       return;
     }
     if (inspectedNode.ownerDocument && (inspectedNode.nodeName() === 'HTML' || inspectedNode.nodeName() === 'BODY')) {
-      inspectedNode = inspectedNode.ownerDocument;
+      this.inspectedDOMNode = inspectedNode.ownerDocument;
+    } else {
+      this.inspectedDOMNode = inspectedNode;
     }
-    if (inspectedNode === this.inspectedDOMNode) {
-      return;
-    }
-    this.inspectedDOMNode = inspectedNode;
   }
 
   treeUpdated({data}: Common.EventTarget

package/front_end/panels/elements/PropertiesWidget.ts

@@ -31,25 +31,67 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import propertiesWidgetStyles from './propertiesWidget.css.js';
-import type * as Common from '../../core/common/common.js';
+import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
+import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Protocol from '../../generated/protocol.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import propertiesWidgetStyles from './propertiesWidget.css.js';
+import {StylesSidebarPane} from './StylesSidebarPane.js';
+
 const OBJECT_GROUP_NAME = 'properties-sidebar-pane';
 
+const UIStrings = {
+  /**
+  * @description Placeholder text for a text input used to filter which DOM element properties show up in
+  * the Properties tab of the Elements panel.
+  */
+  filter: 'Filter',
+  /**
+  * @description ARIA accessible name for the text input used to filter which DOM element properties show up
+  * in the Properties tab of the Elements panel.
+  */
+  filterProperties: 'Filter Properties',
+  /**
+  * @description Text on the checkbox in the Properties tab of the Elements panel, which controls whether
+  * all properties of the currently selected DOM element are shown, or only meaningful properties (i.e.
+  * excluding properties whose values aren't set for example).
+  */
+  showAll: 'Show all',
+  /**
+   * @description Tooltip on the checkbox in the Properties tab of the Elements panel, which controls whether
+  * all properties of the currently selected DOM element are shown, or only meaningful properties (i.e.
+  * excluding properties whose values aren't set for example).
+   */
+  showAllTooltip: 'When unchecked, only properties whose values are neither null nor undefined will be shown',
+  /**
+  * @description Text shown to the user when a filter is applied in the Properties tab of the Elements panel, but
+  * no properties matched the filter and thus no results were returned.
+  */
+  noMatchingProperty: 'No matching property',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/elements/PropertiesWidget.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 let propertiesWidgetInstance: PropertiesWidget;
 
 export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
   private node: SDK.DOMModel.DOMNode|null;
+  private readonly showAllPropertiesSetting: Common.Settings.Setting<boolean>;
+  private filterRegex: RegExp|null = null;
+  private readonly noMatchesElement: HTMLElement;
   private readonly treeOutline: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline;
   private readonly expandController: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController;
   private lastRequestedNode?: SDK.DOMModel.DOMNode;
   constructor() {
     super(true /* isWebComponent */);
 
+    this.showAllPropertiesSetting = Common.Settings.Settings.instance().createSetting('showAllProperties', false);
+    this.showAllPropertiesSetting.addChangeListener(this.filterList.bind(this));
+
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DOMModel.DOMModel, SDK.DOMModel.Events.AttrModified, this.onNodeChange, this);
     SDK.TargetManager.TargetManager.instance().addModelListener(
@@ -61,6 +103,20 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.setNode, this);
     this.node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
 
+    const hbox = this.contentElement.createChild('div', 'hbox properties-widget-toolbar');
+    const filterContainerElement = hbox.createChild('div', 'properties-widget-filter-box');
+    const filterInput = StylesSidebarPane.createPropertyFilterElement(
+        i18nString(UIStrings.filter), hbox, this.filterProperties.bind(this));
+    UI.ARIAUtils.setAccessibleName(filterInput, i18nString(UIStrings.filterProperties));
+    filterContainerElement.appendChild(filterInput);
+
+    const toolbar = new UI.Toolbar.Toolbar('styles-pane-toolbar', hbox);
+    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(
+        this.showAllPropertiesSetting, i18nString(UIStrings.showAllTooltip), i18nString(UIStrings.showAll)));
+
+    this.noMatchesElement = this.contentElement.createChild('div', 'gray-info-message hidden');
+    this.noMatchesElement.textContent = i18nString(UIStrings.noMatchingProperty);
+
     this.treeOutline = new ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline({readOnly: true});
     this.treeOutline.setShowSelectionOnKeyboardFocus(/* show */ true, /* preventTabOrder */ false);
     this.expandController =
@@ -73,6 +129,7 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
 
     this.update();
   }
+
   static instance(opts: {
     forceNew: boolean|null,
   }|undefined = {forceNew: null}): PropertiesWidget {
@@ -84,6 +141,46 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
     return propertiesWidgetInstance;
   }
 
+  private filterProperties(this: PropertiesWidget, regex: RegExp|null): void {
+    this.filterRegex = regex;
+    this.filterList();
+  }
+
+  private filterList(): void {
+    const isHidden = (property: SDK.RemoteObject.RemoteObjectProperty): boolean => {
+      if (!this.showAllPropertiesSetting.get()) {
+        if (SDK.RemoteObject.RemoteObject.isNullOrUndefined(property.value)) {
+          return true;
+        }
+        if (property.value?.type === Protocol.Runtime.RemoteObjectType.Undefined ||
+            (property.value?.type === Protocol.Runtime.RemoteObjectType.Object &&
+             property.value.subtype === Protocol.Runtime.RemoteObjectSubtype.Null)) {
+          return true;
+        }
+      }
+      if (this.filterRegex !== null) {
+        if (this.filterRegex.test(property.name)) {
+          return false;
+        }
+        if (this.filterRegex.test(property.value?.description ?? '')) {
+          return false;
+        }
+        return true;
+      }
+      return false;
+    };
+    let noMatches = true;
+    for (const element of this.treeOutline.rootElement().children()) {
+      const {property} = element as ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement;
+      const hidden = isHidden(property);
+      if (!hidden) {
+        noMatches = false;
+      }
+      element.hidden = hidden;
+    }
+    this.noMatchesElement.classList.toggle('hidden', !noMatches);
+  }
+
   private setNode(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode|null>): void {
     this.node = event.data;
     this.update();
@@ -106,8 +203,15 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
       return;
     }
 
-    await ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.populate(
-        this.treeOutline.rootElement(), object, true, true, undefined, undefined);
+    const treeElement = this.treeOutline.rootElement();
+    let {properties} = await SDK.RemoteObject.RemoteObject.loadFromObjectPerProto(object, true /* generatePreview */);
+    treeElement.removeChildren();
+    if (properties === null) {
+      properties = [];
+    }
+    ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.populateWithProperties(
+        treeElement, properties, null, true /* skipProto */, true /* skipGettersAndSetters */, object);
+    this.filterList();
   }
 
   private onNodeChange(event: Common.EventTarget
@@ -122,6 +226,7 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
     }
     this.update();
   }
+
   wasShown(): void {
     super.wasShown();
     this.registerCSSFiles([propertiesWidgetStyles]);

package/front_end/panels/elements/propertiesWidget.css

@@ -8,3 +8,37 @@
   padding: 2px 0 2px 5px;
   flex: none;
 }
+
+.properties-widget-toolbar {
+  border-bottom: 1px solid var(--color-details-hairline-light);
+  flex-shrink: 0;
+}
+
+.properties-widget-filter-box {
+  flex: auto;
+  display: flex;
+}
+
+.properties-widget-filter-box > input {
+  outline: none !important; /* stylelint-disable-line declaration-no-important */
+  border: none;
+  width: 100%;
+  background: var(--color-background);
+  padding-left: 4px;
+  margin: 3px;
+}
+
+.properties-widget-filter-box > input:focus,
+.properties-widget-filter-box > input:not(:placeholder-shown) {
+  box-shadow: var(--legacy-focus-ring-active-shadow);
+}
+
+.properties-widget-filter-box > input::placeholder {
+  color: var(--color-text-disabled);
+}
+
+@media (forced-colors: active) {
+  .properties-widget-filter-box > input {
+    border: 1px solid ButtonText;
+  }
+}

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -402,7 +402,7 @@ export class DeviceModeToolbar {
   private appendScaleMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
     if (this.model.type() === EmulationModel.DeviceModeModel.Type.Device) {
       contextMenu.footerSection().appendItem(
-          i18nString(UIStrings.fitToWindowF, {PH1: this.getPrettyZoomPercentage()}),
+          i18nString(UIStrings.fitToWindowF, {PH1: this.getPrettyFitZoomPercentage()}),
           this.onScaleMenuChanged.bind(this, this.model.fitScale()), false);
     }
     contextMenu.footerSection().appendCheckboxItem(
@@ -693,6 +693,10 @@ export class DeviceModeToolbar {
     }
   }
 
+  private getPrettyFitZoomPercentage(): string {
+    return `${(this.model.fitScale() * 100).toFixed(0)}`;
+  }
+
   private getPrettyZoomPercentage(): string {
     return `${(this.model.scale() * 100).toFixed(0)}`;
   }

package/front_end/panels/issues/AttributionReportingIssueDetailsView.ts

@@ -32,6 +32,16 @@ const UIStrings = {
    * on an anchor HTML element ("a link").
    */
   invalidSourceEventId: 'Invalid `attributionsourceeventid`',
+  /**
+   * @description Label for the column showing the invalid value used as the 'attributionexpiry' attribute
+   * on an anchor HTML element ("a link").
+   */
+  invalidSourceExpiry: 'Invalid `attributionexpiry`',
+  /**
+   * @description Label for the column showing the invalid value used as the 'attributionpriority' attribute
+   * on an anchor HTML element ("a link").
+   */
+  invalidSourcePriority: 'Invalid `attributionsourcepriority`',
   /**
    * @description Label for the column showing the invalid URL used in an HTML anchor element ("a link").
    * A origin is (roughly said) the front part of a URL.
@@ -47,6 +57,16 @@ const UIStrings = {
    * 'event-source-trigger-data' query parameter.
    */
   invalidEventSourceTriggerData: 'Invalid `event-source-trigger-data`',
+  /**
+   * @description Label for the column showing the invalid value used for the
+   * 'priority' query parameter.
+   */
+  invalidTriggerPriority: 'Invalid `priority`',
+  /**
+   * @description Label for the column showing the invalid value used for the
+   * 'dedup-key' query parameter.
+   */
+  invalidTriggerDedupKey: 'Invalid `dedup-key`',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/issues/AttributionReportingIssueDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -94,15 +114,34 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         this.appendColumnTitle(header, i18nString(UIStrings.request));
         this.appendColumnTitle(header, i18nString(UIStrings.invalidTriggerData));
         break;
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidEventSourceTriggerData:
       case IssuesManager.AttributionReportingIssue.IssueCode.AttributionEventSourceTriggerDataTooLarge:
         this.appendColumnTitle(header, i18nString(UIStrings.request));
         this.appendColumnTitle(header, i18nString(UIStrings.invalidEventSourceTriggerData));
         break;
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidTriggerPriority:
+        this.appendColumnTitle(header, i18nString(UIStrings.request));
+        this.appendColumnTitle(header, i18nString(UIStrings.invalidTriggerPriority));
+        break;
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidTriggerDedupKey:
+        this.appendColumnTitle(header, i18nString(UIStrings.request));
+        this.appendColumnTitle(header, i18nString(UIStrings.invalidTriggerDedupKey));
+        break;
       case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionSourceEventId:
         this.appendColumnTitle(header, i18nString(UIStrings.frame));
         this.appendColumnTitle(header, i18nString(UIStrings.element));
         this.appendColumnTitle(header, i18nString(UIStrings.invalidSourceEventId));
         break;
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionSourceExpiry:
+        this.appendColumnTitle(header, i18nString(UIStrings.frame));
+        this.appendColumnTitle(header, i18nString(UIStrings.element));
+        this.appendColumnTitle(header, i18nString(UIStrings.invalidSourceExpiry));
+        break;
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionSourcePriority:
+        this.appendColumnTitle(header, i18nString(UIStrings.frame));
+        this.appendColumnTitle(header, i18nString(UIStrings.element));
+        this.appendColumnTitle(header, i18nString(UIStrings.invalidSourcePriority));
+        break;
       case IssuesManager.AttributionReportingIssue.IssueCode.MissingAttributionData:
         this.appendColumnTitle(header, i18nString(UIStrings.request));
         break;
@@ -144,11 +183,16 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
       case IssuesManager.AttributionReportingIssue.IssueCode.AttributionEventSourceTriggerDataTooLarge:
       case IssuesManager.AttributionReportingIssue.IssueCode.AttributionUntrustworthyOrigin:
       case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionData:
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidEventSourceTriggerData:
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidTriggerPriority:
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidTriggerDedupKey:
         this.appendRequestOrEmptyCell(element, details.request);
         this.appendIssueDetailCell(element, details.invalidParameter || '');
         break;
       case IssuesManager.AttributionReportingIssue.IssueCode.AttributionSourceUntrustworthyFrameOrigin:
       case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionSourceEventId:
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionSourceExpiry:
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionSourcePriority:
         this.appendFrameOrEmptyCell(element, issue);
         await this.appendElementOrEmptyCell(element, issue);
         this.appendIssueDetailCell(element, details.invalidParameter || '');

package/front_end/panels/issues/CorsIssueDetailsView.ts

@@ -119,6 +119,10 @@ const UIStrings = {
   *@description Header for the column with the URL scheme that is not supported by fetch
   */
   unsupportedScheme: 'Unsupported Scheme',
+  /**
+  *@description A failed network request.
+  */
+  failedRequest: 'Failed Request',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/issues/CorsIssueDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -210,7 +214,6 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
       default:
         Platform.assertUnhandled<IssuesManager.CorsIssue.IssueCode.PreflightMissingAllowExternal|
                                  IssuesManager.CorsIssue.IssueCode.PreflightInvalidAllowExternal|
-                                 IssuesManager.CorsIssue.IssueCode.InvalidResponse|
                                  IssuesManager.CorsIssue.IssueCode.InvalidPrivateNetworkAccess|
                                  IssuesManager.CorsIssue.IssueCode.UnexpectedPrivateNetworkAccess>(issueCode);
     }
@@ -283,6 +286,8 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
         return i18nString(UIStrings.preflightInvalidStatus);
       case Protocol.Network.CorsError.PreflightDisallowedRedirect:
         return i18nString(UIStrings.preflightDisallowedRedirect);
+      case Protocol.Network.CorsError.InvalidResponse:
+        return i18nString(UIStrings.failedRequest);
     }
     throw new Error('Invalid Argument');
   }
@@ -447,7 +452,6 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
         this.appendStatus(element, details.isWarning);
         Platform.assertUnhandled<IssuesManager.CorsIssue.IssueCode.PreflightMissingAllowExternal|
                                  IssuesManager.CorsIssue.IssueCode.PreflightInvalidAllowExternal|
-                                 IssuesManager.CorsIssue.IssueCode.InvalidResponse|
                                  IssuesManager.CorsIssue.IssueCode.InvalidPrivateNetworkAccess|
                                  IssuesManager.CorsIssue.IssueCode.UnexpectedPrivateNetworkAccess>(issueCode);
         break;

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -554,6 +554,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
           aria-controls="form-container"
           @disabled=${this.isFormDisabled}
           aria-disabled=${this.isFormDisabled}
+          aria-label=${i18nString(UIStrings.title)}
         >
           <${IconButton.Icon.Icon.litTagName}
             class=${this.isFormOpened ? '' : 'rotate-icon'}