[GM3Restyling] Update Headers key value pairs

Changes the key-value pair styles in the Headers tab of the Network
panel.

Before: https://i.imgur.com/mradPDQ.png
After: https://i.imgur.com/KlwZuue.png
Bug: 325443308
Change-Id: Ic613c567c366ab440445d7f4069dcc3111e73924
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6372906
Commit-Queue: Kim-Anh Tran <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>

Author: ktran

front_end/panels/network/components/HeaderSectionRow.css

@@ -10,10 +10,11 @@
 
 .row {
   display: flex;
-  line-height: 20px;
+  line-height: 18px;
   padding-left: 8px;
-  gap: 12px;
+  gap: var(--sys-size-6);
   user-select: text;
+  margin: var(--sys-size-3) 0;
 }
 
 .row.header-editable {
@@ -22,8 +23,8 @@
 }
 
 .header-name {
-  color: var(--sys-color-on-surface);
-  font-weight: 400;
+  font: var(--sys-typescale-body5-medium);
+  color: var(--sys-color-on-surface-subtle);
   width: 30%;
   min-width: 160px;
   max-width: 240px;
@@ -56,6 +57,7 @@
   display: flex;
   overflow-wrap: anywhere;
   margin-inline-end: 14px;
+  font: var(--sys-typescale-body4-regular);
 }
 
 .header-badge-text {

front_end/panels/network/components/HeaderSectionRow.test.ts

@@ -109,7 +109,7 @@ describeWithEnvironment('HeaderSectionRow', () => {
 
     const headerName = component.shadowRoot.querySelector('.header-name');
     assert.instanceOf(headerName, HTMLDivElement);
-    const regex = /^\s*not-set\s*cross-origin-resource-policy:\s*$/;
+    const regex = /^\s*not-set\s*cross-origin-resource-policy\s*$/;
     assert.isTrue(regex.test(headerName.textContent || ''));
 
     const headerValue = component.shadowRoot.querySelector('.header-value');
@@ -137,7 +137,7 @@ describeWithEnvironment('HeaderSectionRow', () => {
 
     const headerName = component.shadowRoot.querySelector('.header-name');
     assert.instanceOf(headerName, HTMLDivElement);
-    assert.strictEqual(headerName.textContent?.trim(), 'x-client-data:');
+    assert.strictEqual(headerName.textContent?.trim(), 'x-client-data');
 
     const headerValue = component.shadowRoot.querySelector('.header-value');
     assert.instanceOf(headerValue, HTMLDivElement);
@@ -165,7 +165,7 @@ describeWithEnvironment('HeaderSectionRow', () => {
 
     const headerName = component.shadowRoot.querySelector('.header-name');
     assert.instanceOf(headerName, HTMLDivElement);
-    assert.strictEqual(headerName.textContent?.trim(), 'set-cookie:');
+    assert.strictEqual(headerName.textContent?.trim(), 'set-cookie');
 
     const headerValue = component.shadowRoot.querySelector('.header-value');
     assert.instanceOf(headerValue, HTMLDivElement);

front_end/panels/network/components/HeaderSectionRow.ts

@@ -203,7 +203,7 @@ export class HeaderSectionRow extends HTMLElement {
               @paste=${this.#onHeaderNamePaste}
               .data=${{value: this.#header.name}}
             ></devtools-editable-span>` :
-            this.#header.name}:
+            this.#header.name}
         </div>
         <div
           class=${headerValueClasses}

front_end/panels/network/components/RequestHeaderSection.test.ts

@@ -69,11 +69,11 @@ describeWithEnvironment('RequestHeaderSection', () => {
       ];
     });
     assert.deepEqual(sorted, [
-      ['aa:', 'first'],
-      ['ab:', 'second'],
-      ['abc:', 'third'],
-      ['name:', 'fourth'],
-      ['test:', 'fifth'],
+      ['aa', 'first'],
+      ['ab', 'second'],
+      ['abc', 'third'],
+      ['name', 'fourth'],
+      ['test', 'fifth'],
     ]);
   });
 

front_end/panels/network/components/RequestHeadersView.css

@@ -39,27 +39,28 @@ details summary input {
 
 .row {
   display: flex;
-  line-height: 20px;
+  line-height: 18px;
   padding-left: 8px;
-  gap: 12px;
+  gap: var(--sys-size-6);
   user-select: text;
+  margin: var(--sys-size-3) 0;
 }
 
 div.raw-headers-row {
   display: block;
 }
 
 .row:first-of-type {
-  margin-top: 2px;
+  margin-top: var(--sys-size-5);
 }
 
 .row:last-child {
-  margin-bottom: 10px;
+  margin-bottom: var(--sys-size-5);
 }
 
 .header-name {
-  color: var(--sys-color-on-surface);
-  font-weight: 400;
+  color: var(--sys-color-on-surface-subtle);
+  font: var(--sys-typescale-body5-medium);
   width: 30%;
   min-width: 160px;
   max-width: 240px;
@@ -72,6 +73,7 @@ div.raw-headers-row {
   display: flex;
   align-items: center;
   gap: 2px;
+  font: var(--sys-typescale-body4-regular);
 }
 
 .header-name,

front_end/panels/network/components/RequestHeadersView.test.ts

@@ -132,11 +132,11 @@ describeWithMockConnection('RequestHeadersView', () => {
 
     const names = getCleanTextContentFromElements(generalCategory, '.header-name');
     assert.deepEqual(names, [
-      'Request URL:',
-      'Request Method:',
-      'Status Code:',
-      'Remote Address:',
-      'Referrer Policy:',
+      'Request URL',
+      'Request Method',
+      'Status Code',
+      'Remote Address',
+      'Referrer Policy',
     ]);
 
     const values = getCleanTextContentFromElements(generalCategory, '.header-value');
@@ -170,13 +170,13 @@ describeWithMockConnection('RequestHeadersView', () => {
     assert.instanceOf(responseHeadersCategory, HTMLElement);
     assert.deepEqual(
         getRowsTextFromCategory(responseHeadersCategory),
-        [['age:', '0'], ['cache-control:', 'max-age=600'], ['content-encoding:', 'gzip'], ['content-length:', '661']]);
+        [['age', '0'], ['cache-control', 'max-age=600'], ['content-encoding', 'gzip'], ['content-length', '661']]);
 
     const requestHeadersCategory = component.shadowRoot.querySelector('[aria-label="Request Headers"]');
     assert.instanceOf(requestHeadersCategory, HTMLElement);
     assert.deepEqual(
         getRowsTextFromCategory(requestHeadersCategory),
-        [[':method:', 'GET'], ['accept-encoding:', 'gzip, deflate, br'], ['cache-control:', 'no-cache']]);
+        [[':method', 'GET'], ['accept-encoding', 'gzip, deflate, br'], ['cache-control', 'no-cache']]);
   });
 
   it('renders early hints headers', async () => {
@@ -185,7 +185,7 @@ describeWithMockConnection('RequestHeadersView', () => {
 
     const earlyHintsCategory = component.shadowRoot.querySelector('[aria-label="Early Hints Headers"]');
     assert.instanceOf(earlyHintsCategory, HTMLElement);
-    assert.deepEqual(getRowsTextFromCategory(earlyHintsCategory), [['link:', '<src="/script.js" as="script">']]);
+    assert.deepEqual(getRowsTextFromCategory(earlyHintsCategory), [['link', '<src="/script.js" as="script">']]);
   });
 
   it('emits UMA event when a header value is being copied', async () => {
@@ -228,7 +228,7 @@ describeWithMockConnection('RequestHeadersView', () => {
 
     assert.deepEqual(
         getRowsTextFromCategory(responseHeadersCategory),
-        [['age:', '0'], ['cache-control:', 'max-age=600'], ['content-encoding:', 'gzip'], ['content-length:', '661']]);
+        [['age', '0'], ['cache-control', 'max-age=600'], ['content-encoding', 'gzip'], ['content-length', '661']]);
   });
 
   it('cuts off long raw headers and shows full content on button click', async () => {
@@ -282,12 +282,12 @@ describeWithMockConnection('RequestHeadersView', () => {
 
     const spy = sinon.spy(component, 'render');
     assert.isTrue(spy.notCalled);
-    assert.deepEqual(getRowsTextFromCategory(responseHeadersCategory), [['originalname:', 'originalValue']]);
+    assert.deepEqual(getRowsTextFromCategory(responseHeadersCategory), [['originalname', 'originalValue']]);
 
     request.responseHeaders = [{name: 'updatedName', value: 'updatedValue'}];
     assert.isTrue(spy.calledOnce);
     await RenderCoordinator.done();
-    assert.deepEqual(getRowsTextFromCategory(responseHeadersCategory), [['updatedname:', 'updatedValue']]);
+    assert.deepEqual(getRowsTextFromCategory(responseHeadersCategory), [['updatedname', 'updatedValue']]);
   });
 
   it('can highlight individual response headers', async () => {
@@ -307,7 +307,7 @@ describeWithMockConnection('RequestHeadersView', () => {
     assert.instanceOf(responseHeadersCategory, HTMLElement);
     assert.deepEqual(
         getRowsTextFromCategory(responseHeadersCategory),
-        [['devtools:', 'rock'], ['foo:', 'bar'], ['highlightme:', 'some value']]);
+        [['devtools', 'rock'], ['foo', 'bar'], ['highlightme', 'some value']]);
 
     assert.deepEqual(getRowHighlightStatus(responseHeadersCategory), [false, false, false]);
     component.revealHeader(NetworkForward.UIRequestLocation.UIHeaderSection.RESPONSE, 'HiGhLiGhTmE');
@@ -332,7 +332,7 @@ describeWithMockConnection('RequestHeadersView', () => {
     assert.instanceOf(requestHeadersCategory, HTMLElement);
     assert.deepEqual(
         getRowsTextFromCategory(requestHeadersCategory),
-        [['devtools:', 'rock'], ['foo:', 'bar'], ['highlightme:', 'some value']]);
+        [['devtools', 'rock'], ['foo', 'bar'], ['highlightme', 'some value']]);
 
     assert.deepEqual(getRowHighlightStatus(requestHeadersCategory), [false, false, false]);
     component.revealHeader(NetworkForward.UIRequestLocation.UIHeaderSection.REQUEST, 'HiGhLiGhTmE');
@@ -428,14 +428,14 @@ describeWithMockConnection('RequestHeadersView', () => {
       }
     };
 
-    checkRow(headerRow.shadowRoot, 'foo:', 'bar', false);
+    checkRow(headerRow.shadowRoot, 'foo', 'bar', false);
 
     const pencilButton = headerRow.shadowRoot.querySelector('.enable-editing');
     assert.instanceOf(pencilButton, HTMLElement);
     pencilButton.click();
     await RenderCoordinator.done();
 
-    checkRow(headerRow.shadowRoot, 'foo:', 'bar', true);
+    checkRow(headerRow.shadowRoot, 'foo', 'bar', true);
     assert.isTrue(recordedMetricsContain(
         Host.InspectorFrontendHostAPI.EnumeratedHistogram.ActionTaken,
         Host.UserMetrics.Action.HeaderOverrideEnableEditingClicked));

front_end/panels/network/components/RequestHeadersView.ts

@@ -505,7 +505,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
         name.toLowerCase() === this.#toReveal?.header?.toLowerCase();
     return html`
       <div class="row ${isHighlighted ? 'header-highlight' : ''}">
-        <div class="header-name">${name}:</div>
+        <div class="header-name">${name}</div>
         <div
           class="header-value ${classNames?.join(' ')}"
           @copy=${() => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}

front_end/panels/network/components/ResponseHeaderSection.css

@@ -9,11 +9,11 @@
 }
 
 devtools-header-section-row:last-of-type {
-  margin-bottom: 10px;
+  margin-bottom: var(--sys-size-5);
 }
 
 devtools-header-section-row:first-of-type {
-  margin-top: 2px;
+  margin-top: var(--sys-size-5);
 }
 
 .add-header-button {