[GM3Restyling] Update legacy report view

This affects pages in the Application Panel (Manifest, Storage,
Open Window, Service Workers).

Screenshot: https://imgur.com/a/tXwkUqX
Bug: 325443308
Change-Id: Id1377c0446e7c5df73f3d24a7d014113297b542f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6357119
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/application/AppManifestView.ts

@@ -74,19 +74,12 @@ const UIStrings = {
   learnMore: 'Learn more',
   /**
    *@description Explanation why it is advisable to specify an 'id' field in the manifest.
-   *@example {Note:} PH1
-   *@example {id} PH2
-   *@example {start_url} PH3
-   *@example {id} PH4
-   *@example {/index.html} PH5
-   *@example {(button for copying suggested value into clipboard)} PH6
+   *@example {/index.html} PH1
+   *@example {(button for copying suggested value into clipboard)} PH2
    */
   appIdNote:
-      '{PH1} {PH2} is not specified in the manifest, {PH3} is used instead. To specify an App ID that matches the current identity, set the {PH4} field to {PH5} {PH6}.',
-  /**
-   *@description Label for reminding the user of something important. Is shown in bold and followed by the actual note to show the user.
-   */
-  note: 'Note:',
+      'Note: `id` is not specified in the manifest, `start_url` is used instead. To specify an App ID that matches the current identity, set the `id` field to {PH1} {PH2}.',
+
   /**
    *@description Tooltip text that appears when hovering over a button which copies the previous text to the clipboard.
    */
@@ -691,14 +684,6 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
 
       if (!stringProperty('id')) {
         const suggestedIdNote = appIdField.createChild('div', 'multiline-value');
-        const noteSpan = document.createElement('b');
-        noteSpan.textContent = i18nString(UIStrings.note);
-        const idSpan = document.createElement('code');
-        idSpan.textContent = 'id';
-        const idSpan2 = document.createElement('code');
-        idSpan2.textContent = 'id';
-        const startUrlSpan = document.createElement('code');
-        startUrlSpan.textContent = 'start_url';
         const suggestedIdSpan = document.createElement('code');
         suggestedIdSpan.textContent = recommendedId;
 
@@ -715,9 +700,8 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
           UI.ARIAUtils.alert(i18nString(UIStrings.copiedToClipboard, {PH1: recommendedId}));
           Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(recommendedId);
         });
-        suggestedIdNote.appendChild(i18n.i18n.getFormatLocalizedString(
-            str_, UIStrings.appIdNote,
-            {PH1: noteSpan, PH2: idSpan, PH3: startUrlSpan, PH4: idSpan2, PH5: suggestedIdSpan, PH6: copyButton}));
+        suggestedIdNote.appendChild(
+            i18n.i18n.getFormatLocalizedString(str_, UIStrings.appIdNote, {PH1: suggestedIdSpan, PH2: copyButton}));
       }
     } else {
       this.identitySection.removeField(i18nString(UIStrings.computedAppId));
@@ -910,19 +894,18 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.installabilitySection.element.classList.toggle('hidden', !installabilityErrors.length);
     const errorMessages = this.getInstallabilityErrorMessages(installabilityErrors);
     for (const error of errorMessages) {
-      const icon = UI.UIUtils.createIconLabel({title: error, iconName: 'warning-filled', color: 'var(--icon-warning)'});
-      this.installabilitySection.appendRow().appendChild(icon);
+      const msgElement = document.createTextNode(error);
+      this.installabilitySection.appendRow().appendChild(msgElement);
     }
 
     this.errorsSection.element.classList.toggle('hidden', !errors.length && !imageErrors.length && !warnings.length);
     for (const warning of warnings) {
-      const icon =
-          UI.UIUtils.createIconLabel({title: warning, iconName: 'warning-filled', color: 'var(--icon-warning)'});
-      this.errorsSection.appendRow().appendChild(icon);
+      const msgElement = document.createTextNode(warning);
+      this.errorsSection.appendRow().appendChild(msgElement);
     }
     for (const error of imageErrors) {
-      const icon = UI.UIUtils.createIconLabel({title: error, iconName: 'warning-filled', color: 'var(--icon-warning)'});
-      this.errorsSection.appendRow().appendChild(icon);
+      const msgElement = document.createTextNode(error);
+      this.errorsSection.appendRow().appendChild(msgElement);
     }
 
     function stringProperty(name: string): string {

front_end/panels/application/ApplicationPanelSidebar.ts

@@ -187,7 +187,7 @@ const UIStrings = {
   /**
    *@description Text in App Manifest View of the Application panel
    */
-  appManifest: 'App Manifest',
+  appManifest: 'Manifest',
   /**
    *@description Text in Application Panel Sidebar of the Application panel
    */

front_end/panels/application/appManifestView.css

@@ -18,16 +18,17 @@
 }
 
 .inline-icon {
-  margin-inline: 4px;
   width: 16px;
   height: 16px;
+  margin-inline: var(--sys-size-3);
 
   &[name="check-circle"] {
     color: var(--icon-checkmark-green);
   }
 }
 
 .multiline-value {
+  padding-top: var(--sys-size-5);
   white-space: normal;
 }
 

front_end/panels/application/components/protocolHandlersView.css

@@ -4,6 +4,11 @@
  * found in the LICENSE file.
  */
 
+:host {
+  display: flex;
+  flex-direction: column;
+}
+
 .devtools-link {
   color: var(--sys-color-primary);
   text-decoration: underline;
@@ -28,11 +33,10 @@ input.devtools-text-input[type="text"]::placeholder {
 }
 
 .protocol-handlers-row {
-  margin: 10px 0 2px 18px;
+  margin: var(--sys-size-3) 0;
 }
 
 .inline-icon {
-  margin-inline: 4px;
   width: 16px;
   height: 16px;
 

front_end/panels/application/serviceWorkersView.css

@@ -7,6 +7,7 @@
 .service-worker-version {
   display: flex;
   /* The status string can be long, allow this line of the report to wrap. */
+  align-items: center;
   flex-wrap: wrap;
 
   devtools-button {
@@ -140,11 +141,6 @@
   flex-grow: 0;
 }
 
-.service-worker-has-current .service-workers-other-origin {
-  margin-top: 16px;
-  border-top: 1px solid var(--sys-color-divider);
-}
-
 .devtools-link {
   line-height: 14px;
   align-self: center;

front_end/panels/application/storageView.css

@@ -8,10 +8,13 @@
   display: flex;
   align-items: center;
   white-space: normal;
+
+  &:has(.quota-override-error:empty) {
+    margin: 0;
+  }
 }
 
 .clear-storage-button .report-row {
-  margin: 0 0 0 17px;
   display: flex;
 }
 
@@ -49,7 +52,7 @@
   }
 }
 
-.quota-override-error {
+.quota-override-error:not(:empty) {
   padding-top: 10px;
   color: var(--sys-color-error);
 }

front_end/ui/legacy/reportView.css

@@ -19,7 +19,7 @@
 
 .report-header {
   border-bottom: 1px solid var(--sys-color-divider);
-  padding: 12px 24px;
+  padding: var(--sys-size-7) var(--sys-size-9);
 }
 
 .report-header devtools-toolbar {
@@ -29,7 +29,7 @@
 }
 
 .report-title {
-  font-size: 15px;
+  font: var(--sys-typescale-headline4);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -38,64 +38,73 @@
 
 .report-url,
 .report-subtitle {
-  font-size: 12px;
-  margin-top: 10px;
+  font: var(--sys-typescale-body4-regular);
 }
 
 .report-section {
   display: flex;
-  padding: 12px;
+  padding: var(--sys-size-7) var(--sys-size-9) 11px var(--sys-size-9);
   border-bottom: 1px solid var(--sys-color-divider);
   flex-direction: column;
 }
 
 .report-section-header {
-  margin-left: 18px;
+  padding-bottom: var(--sys-size-5);
   display: flex;
   flex-direction: row;
   align-items: center;
 
   devtools-button {
     flex: 0 0 auto;
   }
+
+  &:has(.report-section-title:empty) {
+    padding: 0;
+  }
 }
 
 .report-section-title {
+  font: var(--sys-typescale-headline5);
   flex: 1 1 auto;
   text-overflow: ellipsis;
   overflow: hidden;
   line-height: 16px;
-  font-weight: bold;
   color: var(--sys-color-on-surface);
   min-width: var(--sys-size-21);
   white-space: nowrap;
 }
 
 .report-field {
-  margin-top: 8px;
   display: flex;
-  line-height: 28px;
+  padding: var(--sys-size-3) 0;
 }
 
 .report-row {
-  margin: 10px 0 2px 18px;
+  font: var(--sys-typescale-body4-regular);
+  margin: var(--sys-size-3) 0;
+
+  > dt-checkbox:first-child {
+    margin-left: calc(var(--sys-size-4) * -1);
+  }
 
-  &:has(dt-checkbox) {
-    margin-top: 7px;
+  > devtools-icon:first-child {
+    /* We have inline icons that would otherwise be mis-aligned */
+    margin-inline-start: 0;
   }
 }
 
 .report-field-name {
+  font: var(--sys-typescale-body5-regular);
   color: var(--sys-color-on-surface-subtle);
   flex: 0 0 128px;
-  text-align: right;
-  padding: 0 6px;
+  text-align: left;
   white-space: pre-wrap;
 }
 
 .report-field-value {
+  font: var(--sys-typescale-body4-regular);
   flex: auto;
-  padding: 0 6px;
+  padding: 0 var(--sys-size-6);
   white-space: pre;
   user-select: text;
 }