chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

package/front_end/panels/network/RequestConditionsDrawer.ts

@@ -26,42 +26,42 @@ const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
-   * @description Text to enable blocking of network requests
+   * @description Text to enable blocking and throttling of network requests
    */
   enableBlockingAndThrottling: 'Enable blocking and throttling',
   /**
-   * @description Tooltip text for add button in request blocking tool of the Network panel.
+   * @description Tooltip text for add button in request conditions tool of the Network panel.
    */
   addRule: 'Add rule',
   /**
-   * @description Accessible label for the button to add request blocking patterns in the network request blocking tool.
+   * @description Accessible label for the button to add request blocking patterns in the request conditions tool.
    */
   addPatternLabel: 'Add network request throttling or blocking pattern',
   /**
-   * @description Text that shows in the network request blocking panel if no pattern has yet been added.
+   * @description Text that shows in the request conditions panel if no pattern has yet been added.
    */
   noPattern: 'Nothing throttled or blocked',
   /**
-   * @description Text that shows in the network request blocking panel if no pattern has yet been added.
+   * @description Text that shows in the request conditions 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 in request blocking tool of the Network panel.
+   * @description Text in request conditions tool of the Network panel.
    * @example {4} PH1
    */
   dAffected: '{PH1} affected',
   /**
-   * @description Tooltip text for pattern input in request blocking tool of the Network panel.
+   * @description Tooltip text for pattern input in request conditions tool of the Network panel.
    */
   textEditPattern: 'Text pattern to block or throttle matching requests; use URL Pattern syntax.',
   /**
-   * @description Error text for empty list widget input in Request Blocking tool
+   * @description Error text for empty list widget input in Request Conditions tool
    */
   patternInputCannotBeEmpty: 'Pattern input cannot be empty.',
   /**
-   * @description Error text for duplicate list widget input in Request Blocking tool
+   * @description Error text for duplicate list widget input in Request Conditions tool
    */
   patternAlreadyExists: 'Pattern already exists.',
   /**
@@ -116,8 +116,8 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/network/RequestConditionsDrawer.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const NETWORK_REQUEST_BLOCKING_EXPLANATION_URL =
-    'https://developer.chrome.com/docs/devtools/network-request-blocking' as Platform.DevToolsPath.UrlString;
+const REQUEST_CONDITIONS_EXPLANATION_URL =
+    'https://developer.chrome.com/docs/devtools/request-conditions' as Platform.DevToolsPath.UrlString;
 
 const {bindToAction} = UI.UIUtils;
 
@@ -443,7 +443,7 @@ export class AffectedCountWidget extends UI.Widget.Widget {
 
 function learnMore(): LitTemplate {
   return html`<devtools-link
-        href=${NETWORK_REQUEST_BLOCKING_EXPLANATION_URL}
+        href=${REQUEST_CONDITIONS_EXPLANATION_URL}
         tabindex=0
         class=devtools-link
         .jslogContext=${'learn-more'}>

package/front_end/panels/network/RequestPayloadView.ts

@@ -108,7 +108,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/network/RequestPayloadView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-interface ViewInput {
+export interface ViewInput {
   decodeQueryParameters: boolean;
   setDecodeQueryParameters(value: boolean): void;
   decodeFormParameters: boolean;
@@ -125,13 +125,16 @@ interface ViewInput {
   formParameters: SDK.NetworkRequest.NameValue[]|undefined;
   queryString: string|null;
   queryParameters: SDK.NetworkRequest.NameValue[]|null;
+  objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree|null;
+  onPayloadContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void;
+  onPayloadToggle(expanded: boolean): void;
 
   /** Raw binary content data for the request body (when base64-encoded by backend). */
   binaryPayloadContentData: TextUtils.ContentData.ContentData|null;
   requestUrl: Platform.DevToolsPath.UrlString;
 }
 
-type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 export const DEFAULT_VIEW: View = (input, output, target) => {
   const createViewSourceToggle = (viewSource: boolean, callback: (value: boolean) => void): LitTemplate =>
       html`<devtools-button
@@ -182,30 +185,22 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     // clang-format on
   });
 
-  const parsedFormData = (() => {
-    if (input.formData && !input.formParameters) {
-      try {
-        return JSON.parse(input.formData);
-      } catch {
-      }
-    }
-    return undefined;
-  })();
+  const createPayload = (objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree): LitTemplate => {
+    const onPayloadContextMenu = (event: Event): void => {
+      event.consume(true);
+      const contextMenu = new UI.ContextMenu.ContextMenu(event);
+      input.onPayloadContextMenu(contextMenu);
+      void contextMenu.show();
+    };
 
-  const createPayload = (parsedFormData: unknown): LitTemplate => {
-    if (!parsedFormData) {
-      return nothing;
-    }
-    const object = new SDK.RemoteObject.LocalJSONObject(parsedFormData);
-    const objectTree = new ObjectUI.ObjectPropertiesSection.ObjectTree(object, {
-      readOnly: true,
-      propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-    });
-    objectTree.expanded = true;
     return html`
-      <li role=treeitem class="source-code object-properties-section-root-element object-properties-section" toggle-on-click open>
-        ${object.description}
-        ${object.hasChildren ? ObjectUI.ObjectPropertiesSection.renderObjectTree(objectTree) : nothing}
+      <li role=treeitem class="source-code object-properties-section-root-element object-properties-section"
+          toggle-on-click
+          ?open=${objectTree.expanded}
+          @expand=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => input.onPayloadToggle(e.detail.expanded)}
+          @contextmenu=${onPayloadContextMenu}>
+        ${objectTree.object.description}
+        ${objectTree.object.hasChildren ? ObjectUI.ObjectPropertiesSection.renderObjectTree(objectTree) : nothing}
       </li>
     `;
   };
@@ -327,8 +322,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         <div class="selection fill"></div>${i18nString(UIStrings.requestPayload)}${
             createViewSourceToggle(input.viewJSONPayloadSource, input.setViewJSONPayloadSource)}
         <ul role=group>
-          ${ifExpanded(!parsedFormData || input.viewJSONPayloadSource ? createSourceText(input.formData ?? '')
-                                                                      : createPayload(parsedFormData))}
+          ${ifExpanded(!input.objectTree || input.viewJSONPayloadSource ? createSourceText(input.formData ?? '')
+                                                                        : createPayload(input.objectTree))}
         </ul>
       </li>
      </ul>
@@ -362,6 +357,7 @@ export class RequestPayloadView extends UI.Widget.VBox {
   #decodeFormParameters = true;
   #formData?: string;
   #formParameters?: SDK.NetworkRequest.NameValue[];
+  #objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree|null = null;
   #binaryPayloadContentData: TextUtils.ContentData.ContentData|null = null;
   #view: View;
   #viewJSONPayloadSource = false;
@@ -468,6 +464,38 @@ export class RequestPayloadView extends UI.Widget.VBox {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue);
         Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(value);
       },
+      objectTree: this.#objectTree,
+      onPayloadContextMenu: (contextMenu: UI.ContextMenu.ContextMenu): void => {
+        if (!this.#objectTree) {
+          return;
+        }
+        const objectTree = this.#objectTree;
+        ObjectUI.ObjectPropertiesSection.populateObjectTreeContextMenu(
+            contextMenu,
+            objectTree,
+            async () => {
+              await objectTree.expandRecursively(ObjectUI.ObjectPropertiesSection.EXPANDABLE_MAX_DEPTH);
+              this.requestUpdate();
+            },
+            () => {
+              objectTree.collapseRecursively();
+              this.requestUpdate();
+            },
+            () => {
+              objectTree.sortPropertiesAlphabetically = !objectTree.sortPropertiesAlphabetically;
+              this.requestUpdate();
+            },
+            () => {
+              objectTree.includeNullOrUndefinedValues = !objectTree.includeNullOrUndefinedValues;
+              this.requestUpdate();
+            },
+        );
+      },
+      onPayloadToggle: (expanded: boolean): void => {
+        if (this.#objectTree) {
+          this.#objectTree.expanded = expanded;
+        }
+      },
       binaryPayloadContentData: this.#binaryPayloadContentData,
       requestUrl: this.request?.url() ?? Platform.DevToolsPath.EmptyUrlString,
     };
@@ -484,6 +512,30 @@ export class RequestPayloadView extends UI.Widget.VBox {
       this.#formParameters = await this.request?.formParameters() ?? undefined;
     }
 
+    if (this.#objectTree) {
+      this.#objectTree.removeEventListener(ObjectUI.ObjectPropertiesSection.ObjectTreeNodeBase.Events.CHILDREN_CHANGED,
+                                           this.requestUpdate, this);
+      this.#objectTree.removeEventListener(ObjectUI.ObjectPropertiesSection.ObjectTreeNodeBase.Events.EXPANDED_CHANGED,
+                                           this.requestUpdate, this);
+      this.#objectTree = null;
+    }
+    if (this.#formData && !this.#formParameters) {
+      try {
+        const parsedFormData = JSON.parse(this.#formData);
+        const object = new SDK.RemoteObject.LocalJSONObject(parsedFormData);
+        this.#objectTree = new ObjectUI.ObjectPropertiesSection.ObjectTree(object, {
+          readOnly: true,
+          propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+        });
+        this.#objectTree.expanded = true;
+        this.#objectTree.addEventListener(ObjectUI.ObjectPropertiesSection.ObjectTreeNodeBase.Events.CHILDREN_CHANGED,
+                                          this.requestUpdate, this);
+        this.#objectTree.addEventListener(ObjectUI.ObjectPropertiesSection.ObjectTreeNodeBase.Events.EXPANDED_CHANGED,
+                                          this.requestUpdate, this);
+      } catch {
+      }
+    }
+
     // Fetch raw binary content data for the request body when the backend
     // returns base64-encoded data. This enables the binary viewer (hex,
     // base64, utf-8) in the Payload tab for compressed/binary bodies.

package/front_end/panels/network/binaryResourceView.css

@@ -6,7 +6,7 @@
 
 @scope to (devtools-widget > *) {
   .panel.network devtools-toolbar.binary-view-toolbar {
-    border-top: 1px solid var(--sys-color-divider);
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
     border-bottom: 0;
     padding-left: 5px;
     flex: none;

package/front_end/panels/network/components/EditableSpan.css

@@ -16,18 +16,18 @@
   min-width: 0.5em;
   background: transparent;
   border: none;
-  border-radius: 4px;
+  border-radius: var(--sys-shape-corner-extra-small);
   outline: none;
   display: inline-block;
   font-family: var(--monospace-font-family);
   font-size: var(--monospace-font-size);
 
   &:hover {
-    border: 1px solid var(--sys-color-neutral-outline);
+    border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
   }
 
   &:focus {
-    border: 1px solid var(--sys-color-state-focus-ring);
+    border: var(--sys-size-1) solid var(--sys-color-state-focus-ring);
   }
 }
 

package/front_end/panels/network/components/HeaderSectionRow.css

@@ -11,7 +11,7 @@
 .row {
   display: flex;
   line-height: 18px;
-  padding-left: 8px;
+  padding-left: var(--sys-size-5);
   gap: var(--sys-size-6);
   user-select: text;
   margin: var(--sys-size-3) 0;
@@ -25,8 +25,8 @@
   font: var(--sys-typescale-body5-medium);
   color: var(--sys-color-on-surface-subtle);
   width: 30%;
-  min-width: 160px;
-  max-width: 240px;
+  min-width: var(--sys-size-23);
+  max-width: var(--sys-size-28);
   flex-shrink: 0;
   text-transform: capitalize;
   overflow-wrap: break-word;
@@ -55,7 +55,7 @@
 .header-value {
   display: flex;
   overflow-wrap: anywhere;
-  margin-inline-end: 14px;
+  margin-inline-end: var(--sys-size-7);
   font-family: var(--monospace-font-family);
   font-size: var(--monospace-font-size);
 }
@@ -73,25 +73,25 @@
   background-color: var(--sys-color-error);
   color: var(--sys-color-on-error);
   border-radius: 100vh;
-  padding-left: 6px;
-  padding-right: 6px;
+  padding-left: var(--sys-size-4);
+  padding-right: var(--sys-size-4);
 }
 
 .call-to-action {
   background-color: var(--sys-color-neutral-container);
-  padding: 8px;
+  padding: var(--sys-size-5);
   border-radius: 5px;
-  margin: 4px;
+  margin: var(--sys-size-3);
 }
 
 .call-to-action-body {
   display: flex;
   gap: var(--sys-size-4);
-  padding: 6px 0;
+  padding: var(--sys-size-4) 0;
   margin-left: var(--sys-size-1);
-  border-left: 2px solid var(--issue-color-yellow);
+  border-left: var(--sys-size-2) solid var(--issue-color-yellow);
   padding-left: 11px;
-  line-height: 20px;
+  line-height: var(--sys-typescale-body3-line-height);
 }
 
 .call-to-action .explanation {
@@ -111,7 +111,7 @@
   color: var(--sys-color-primary);
   text-decoration: underline;
   cursor: pointer;
-  outline-offset: 2px;
+  outline-offset: var(--sys-size-2);
 }
 
 .explanation .link {
@@ -123,7 +123,7 @@
 }
 
 .row-flex-icon {
-  margin: 2px 5px 0;
+  margin: var(--sys-size-2) 5px 0;
 }
 
 .header-value code {
@@ -172,7 +172,7 @@ devtools-link .inline-icon {
   opacity: 0%;
   visibility: hidden;
   transition: opacity 200ms;
-  padding-left: 2px;
+  padding-left: var(--sys-size-2);
 }
 
 .row.header-overridden:focus-within .inline-button,

package/front_end/panels/network/components/RequestHeaderSection.css

@@ -13,24 +13,24 @@
   }
 
   devtools-header-section-row:first-of-type {
-    margin-top: 2px;
+    margin-top: var(--sys-size-2);
   }
 
   .call-to-action {
     background-color: var(--sys-color-neutral-container);
-    padding: 8px;
+    padding: var(--sys-size-5);
     border-radius: 5px;
-    margin: 4px;
+    margin: var(--sys-size-3);
   }
 
   .call-to-action-body {
     display: flex;
     gap: var(--sys-size-4);
-    padding: 6px 0;
+    padding: var(--sys-size-4) 0;
     margin-left: var(--sys-size-1);
-    border-left: 2px solid var(--issue-color-yellow);
+    border-left: var(--sys-size-2) solid var(--issue-color-yellow);
     padding-left: 11px;
-    line-height: 20px;
+    line-height: var(--sys-size-9);
   }
 
   .call-to-action .explanation {
@@ -50,7 +50,7 @@
     color: var(--sys-color-primary);
     text-decoration: underline;
     cursor: pointer;
-    outline-offset: 2px;
+    outline-offset: var(--sys-size-2);
   }
 
   .explanation .link {

package/front_end/panels/network/components/RequestHeadersView.css

@@ -6,14 +6,14 @@
 
 .header {
   background-color: var(--sys-color-surface1);
-  border-bottom: 1px solid var(--sys-color-divider);
-  border-top: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
   line-height: 25px;
   padding: 0 5px;
 }
 
 .header::marker {
-  font-size: 11px;
+  font-size: var(--sys-typescale-body5-size);
   line-height: 1;
 }
 
@@ -40,7 +40,7 @@ details summary input {
 .row {
   display: flex;
   line-height: 18px;
-  padding-left: 8px;
+  padding-left: var(--sys-size-5);
   gap: var(--sys-size-6);
   user-select: text;
   margin: var(--sys-size-3) 0;
@@ -62,8 +62,8 @@ div.raw-headers-row {
   color: var(--sys-color-on-surface-subtle);
   font: var(--sys-typescale-body5-medium);
   width: 30%;
-  min-width: 160px;
-  max-width: 240px;
+  min-width: var(--sys-size-23);
+  max-width: var(--sys-size-28);
   flex-shrink: 0;
   text-transform: capitalize;
 }
@@ -72,7 +72,7 @@ div.raw-headers-row {
   word-break: break-all;
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: var(--sys-size-2);
   font: var(--sys-typescale-body4-regular);
 }
 
@@ -89,11 +89,11 @@ div.raw-headers-row {
 .yellow-circle::before {
   content: '';
   display: inline-block;
-  width: 12px;
-  height: 12px;
-  border-radius: 6px;
+  width: var(--sys-size-6);
+  height: var(--sys-size-6);
+  border-radius: var(--sys-size-4);
   vertical-align: text-top;
-  margin-right: 2px;
+  margin-right: var(--sys-size-2);
 }
 
 .green-circle::before {
@@ -124,7 +124,7 @@ div.raw-headers-row {
   color: var(--sys-color-primary);
   text-decoration: underline;
   cursor: pointer;
-  outline-offset: 2px;
+  outline-offset: var(--sys-size-2);
 }
 
 .inline-icon {
@@ -134,7 +134,7 @@ div.raw-headers-row {
 .header-grid-container {
   display: inline-grid;
   grid-template-columns: 156px 50px 1fr;
-  gap: 4px;
+  gap: var(--sys-size-3);
   /* Make this fit into the same line as the summary marker */
   width: calc(100% - 15px);
 }
@@ -159,10 +159,10 @@ devtools-link .inline-icon {
 .purple.dot::before {
   background-color: var(--sys-color-purple-bright);
   content: var(--image-file-empty);
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  outline: 1px solid var(--icon-gap-toolbar);
+  width: var(--sys-size-4);
+  height: var(--sys-size-4);
+  border-radius: var(--sys-shape-corner-full);
+  outline: var(--sys-size-1) solid var(--icon-gap-toolbar);
   left: 9px;
   position: absolute;
   top: 11px;
@@ -177,5 +177,5 @@ summary label {
 }
 
 summary devtools-checkbox {
-  margin-top: 1px;
+  margin-top: var(--sys-size-1);
 }

package/front_end/panels/network/components/RequestTrustTokensView.css

@@ -18,7 +18,7 @@
   }
 
   .status-icon {
-    margin: 0 0.3em 2px 0;
+    margin: 0 0.3em var(--sys-size-2) 0;
     vertical-align: middle;
 
     &.failure {

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

@@ -69,15 +69,15 @@ const UIStrings = {
   /**
    * @description Title of a setting under the Network category.
    */
-  networkRequestBlocking: 'Network request blocking',
+  requestBlockingAndThrottling: 'Request blocking and throttling',
   /**
    * @description Title of a setting under the Network category that can be invoked through the Command Menu.
    */
-  enableNetworkRequestBlocking: 'Enable network request blocking',
+  enableRequestBlockingAndThrottling: 'Enable request blocking and throttling',
   /**
    * @description Title of a setting under the Network category that can be invoked through the Command Menu.
    */
-  disableNetworkRequestBlocking: 'Disable network request blocking',
+  disableRequestBlockingAndThrottling: 'Disable request blocking and throttling',
   /**
    * @description Command for showing the 'Network' tool
    */
@@ -87,7 +87,7 @@ const UIStrings = {
    */
   network: 'Network',
   /**
-   * @description Command for showing the 'Network request blocking' tool
+   * @description Command for showing the 'Request conditions' tool
    */
   showRequestConditions: 'Show request conditions',
   /**
@@ -179,11 +179,11 @@ const UIStrings = {
    */
   clear: 'Clear network log',
   /**
-   * @description Title of an action in the Network request blocking panel to add a new URL pattern to the blocklist.
+   * @description Title of an action in the Request conditions panel to add a new URL pattern to the blocklist.
    */
   addNetworkRequestBlockingOrThrottlingPattern: 'Add network request blocking or throttling pattern',
   /**
-   * @description Title of an action in the Network request blocking panel to clear all URL patterns.
+   * @description Title of an action in the Request conditions panel to clear all URL patterns.
    */
   removeAllNetworkRequestBlockingOrThrottlingPatterns: 'Remove all network request blocking or throttling patterns',
   /**
@@ -493,15 +493,15 @@ Common.Settings.registerSettingExtension({
 
 SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.requestBlockingEnabledSettingDescriptor, {
   category: Common.Settings.SettingCategory.NETWORK,
-  title: i18nLazyString(UIStrings.networkRequestBlocking),
+  title: i18nLazyString(UIStrings.requestBlockingAndThrottling),
   options: [
     {
       value: true,
-      title: i18nLazyString(UIStrings.enableNetworkRequestBlocking),
+      title: i18nLazyString(UIStrings.enableRequestBlockingAndThrottling),
     },
     {
       value: false,
-      title: i18nLazyString(UIStrings.disableNetworkRequestBlocking),
+      title: i18nLazyString(UIStrings.disableRequestBlockingAndThrottling),
     },
   ],
 });

package/front_end/panels/network/networkConfigView.css

@@ -5,7 +5,7 @@
  */
 
 .network-config {
-  padding: 12px;
+  padding: var(--sys-size-6);
   display: block;
 }
 
@@ -18,7 +18,7 @@
 }
 
 .network-config-title {
-  margin-right: 16px;
+  margin-right: var(--sys-size-8);
   width: 130px;
 }
 
@@ -31,14 +31,14 @@
 }
 
 .panel-section-separator {
-  height: 1px;
+  height: var(--sys-size-1);
   margin-bottom: 10px;
   background: var(--sys-color-divider);
 }
 /* Disable cache */
 
 .network-config-disable-cache {
-  line-height: 28px;
+  line-height: var(--sys-size-12);
   border-top: none;
   padding-top: 0;
 }
@@ -65,32 +65,32 @@
   }
 
   & > .network-config-title {
-    line-height: 24px;
+    line-height: var(--sys-size-11);
   }
 }
 /* User agent */
 
 .network-config-ua > .network-config-title {
-  line-height: 20px;
+  line-height: var(--sys-size-9);
 }
 
 .network-config-ua input {
   display: block;
-  width: calc(100% - 20px);
+  width: calc(100% - var(--sys-size-9));
 }
 
 .network-config-ua input[type="text"],
 .network-config-ua select {
-  margin-top: 8px;
+  margin-top: var(--sys-size-5);
 }
 
 .network-config-ua select {
-  width: calc(100% - 20px);
+  width: calc(100% - var(--sys-size-9));
   max-width: 250px;
 }
 
 .network-config-ua-custom {
-  padding-bottom: 8px;
+  padding-bottom: var(--sys-size-5);
 
   input,
   devtools-user-agent-client-hints-form {
@@ -107,7 +107,7 @@
 
 devtools-user-agent-client-hints-form {
   display: block;
-  margin-top: 14px;
+  margin-top: var(--sys-size-7);
   width: min(100%, 400px);
 }