chrome-devtools-frontend 1.0.976570 → 1.0.977952

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -831,6 +831,7 @@ export class BackgroundServiceTreeElement extends ApplicationPanelTreeElement {
     }
     this.showView(this.view);
     UI.Context.Context.instance().setFlavor(BackgroundServiceView, this.view);
+    Host.userMetrics.panelShown('background_service_' + this.serviceName);
     return false;
   }
 }
@@ -854,6 +855,7 @@ export class DatabaseTreeElement extends ApplicationPanelTreeElement {
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     this.sidebar.showDatabase(this.database);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.web_sql]);
     return false;
   }
 
@@ -891,6 +893,7 @@ export class DatabaseTableTreeElement extends ApplicationPanelTreeElement {
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     this.sidebar.showDatabase(this.database, this.tableName);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.web_sql]);
     return false;
   }
 }
@@ -914,6 +917,7 @@ export class ServiceWorkersTreeElement extends ApplicationPanelTreeElement {
       this.view = new ServiceWorkersView();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.service_workers]);
     return false;
   }
 }
@@ -936,6 +940,7 @@ export class AppManifestTreeElement extends ApplicationPanelTreeElement {
       this.view = new AppManifestView();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.app_manifest]);
     return false;
   }
 }
@@ -958,6 +963,7 @@ export class ClearStorageTreeElement extends ApplicationPanelTreeElement {
       this.view = new StorageView();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.storage]);
     return false;
   }
 }
@@ -1170,6 +1176,7 @@ export class IDBDatabaseTreeElement extends ApplicationPanelTreeElement {
     }
 
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.indexed_db]);
     return false;
   }
 
@@ -1302,6 +1309,7 @@ export class IDBObjectStoreTreeElement extends ApplicationPanelTreeElement {
     }
 
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.indexed_db]);
     return false;
   }
 
@@ -1391,6 +1399,7 @@ export class IDBIndexTreeElement extends ApplicationPanelTreeElement {
     }
 
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.indexed_db]);
     return false;
   }
 
@@ -1417,6 +1426,7 @@ export class DOMStorageTreeElement extends ApplicationPanelTreeElement {
 
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.dom_storage]);
     this.resourcesPanel.showDOMStorage(this.domStorage);
     return false;
   }
@@ -1469,6 +1479,7 @@ export class CookieTreeElement extends ApplicationPanelTreeElement {
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     this.resourcesPanel.showCookies(this.target, this.cookieDomainInternal);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.cookies]);
     return false;
   }
 }
@@ -1810,6 +1821,7 @@ export class FrameTreeElement extends ApplicationPanelTreeElement {
     } else {
       this.view.update();
     }
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.frame_details]);
     this.showView(this.view);
 
     this.listItemElement.classList.remove('hovered');
@@ -1978,6 +1990,7 @@ export class FrameResourceTreeElement extends ApplicationPanelTreeElement {
     } else {
       void this.panel.scheduleShowView(this.preparePreview());
     }
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.frame_resource]);
     return false;
   }
 
@@ -2065,6 +2078,7 @@ class FrameWindowTreeElement extends ApplicationPanelTreeElement {
       this.view.update();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.frame_window]);
     return false;
   }
 
@@ -2093,6 +2107,7 @@ class WorkerTreeElement extends ApplicationPanelTreeElement {
       this.view.update();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.frame_worker]);
     return false;
   }
 

package/front_end/panels/application/InterestGroupTreeElement.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+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 UI from '../../ui/legacy/legacy.js';
@@ -51,6 +52,7 @@ export class InterestGroupTreeElement extends ApplicationPanelTreeElement {
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.interest_groups]);
     return false;
   }
 

package/front_end/panels/application/ReportingApiTreeElement.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -37,6 +38,7 @@ export class ReportingApiTreeElement extends ApplicationPanelTreeElement {
       this.view = new ReportingApiView();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.reporting_api]);
     return false;
   }
 }

package/front_end/panels/application/TrustTokensTreeElement.ts

@@ -9,6 +9,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import * as ApplicationComponents from './components/components.js';
 import type {ResourcesPanel} from './ResourcesPanel.js';
+import * as Host from '../../core/host/host.js';
 
 const UIStrings = {
   /**
@@ -41,6 +42,7 @@ export class TrustTokensTreeElement extends ApplicationPanelTreeElement {
       this.view = new TrustTokensViewWidgetWrapper();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.trust_tokens]);
     return false;
   }
 }

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

@@ -13,6 +13,7 @@ import * as Protocol from '../../../generated/protocol.js';
 import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as ChromeLink from '../../../ui/components/chrome_link/chrome_link.js';
 
 import {NotRestoredReasonDescription} from './BackForwardCacheStrings.js';
 import backForwardCacheViewStyles from './backForwardCacheView.css.js';
@@ -97,6 +98,10 @@ const UIStrings = {
    */
   supportPendingExplanation:
       'Chrome support for these reasons is pending i.e. they will not prevent the page from being eligible for back/forward cache in a future version of Chrome.',
+  /**
+   * @description Text that precedes displaying a link to the extension which blocked the page from being eligible for back/forward cache.
+   */
+  blockingExtensionId: 'Extension id: ',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/BackForwardCacheView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -370,6 +375,20 @@ export class BackForwardCacheView extends HTMLElement {
     // clang-format on
   }
 
+  #maybeRenderReasonContext(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): LitHtml.TemplateResult|
+      {} {
+    if (explanation.reason ===
+            Protocol.Page.BackForwardCacheNotRestoredReason.EmbedderExtensionSentMessageToCachedFrame &&
+        explanation.context) {
+      const link = 'chrome://extensions/?id=' + explanation.context;
+      // clang-format off
+    return LitHtml.html`${i18nString(UIStrings.blockingExtensionId)}
+      <${ChromeLink.ChromeLink.ChromeLink.litTagName} .href=${link}>${explanation.context}</${ChromeLink.ChromeLink.ChromeLink.litTagName}>`;
+      // clang-format on
+    }
+    return LitHtml.nothing;
+  }
+
   #renderReason(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): LitHtml.TemplateResult {
     // clang-format off
     return LitHtml.html`
@@ -385,7 +404,10 @@ export class BackForwardCacheView extends HTMLElement {
               } as IconButton.Icon.IconData}>
               </${IconButton.Icon.Icon.litTagName}>
             </div>
-            ${NotRestoredReasonDescription[explanation.reason].name()}` :
+            <div>
+              ${NotRestoredReasonDescription[explanation.reason].name()}
+             ${this.#maybeRenderReasonContext(explanation)}
+           </div>` :
             LitHtml.nothing}
       </${ReportView.ReportView.ReportSection.litTagName}>
       <div class='gray-text'>

package/front_end/panels/elements/ClassesPaneWidget.ts

@@ -313,7 +313,7 @@ export class ClassNamePrompt extends UI.TextPrompt.TextPrompt {
       if (stylesheet.frameId !== this.selectedFrameId) {
         continue;
       }
-      const cssPromise = cssModel.classNamesPromise(stylesheet.id).then(classes => {
+      const cssPromise = cssModel.getClassNames(stylesheet.id).then(classes => {
         for (const className of classes) {
           completions.add(className);
         }

package/front_end/panels/elements/ComputedStyleModel.ts

@@ -106,7 +106,7 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     }
 
     if (!this.computedStylePromise) {
-      this.computedStylePromise = cssModel.computedStylePromise(nodeId).then(verifyOutdated.bind(this, elementNode));
+      this.computedStylePromise = cssModel.getComputedStyle(nodeId).then(verifyOutdated.bind(this, elementNode));
     }
 
     return this.computedStylePromise;

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1996,7 +1996,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
-    const styles = await node.domModel().cssModel().computedStylePromise(nodeId);
+    const styles = await node.domModel().cssModel().getComputedStyle(nodeId);
     for (const styleAdorner of this.styleAdorners) {
       this.removeAdorner(styleAdorner);
     }

package/front_end/panels/elements/LayersWidget.ts

@@ -97,7 +97,7 @@ export class LayersWidget extends UI.Widget.Widget {
                 Promise.resolve(subLayers.sort((layer1, layer2) => layer1.order - layer2.order).map(makeTreeNode(id))),
           };
         };
-    const rootLayer = await this.cssModel.rootLayerPromise(node.id);
+    const rootLayer = await this.cssModel.getRootLayer(node.id);
     this.layerTreeComponent.data = {
       defaultRenderer: TreeOutline.TreeOutline.defaultRenderer,
       tree: [makeTreeNode('')(rootLayer)],

package/front_end/panels/elements/MetricsSidebarPane.ts

@@ -88,8 +88,8 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
     }
 
     const promises = [
-      cssModel.computedStylePromise(node.id).then(callback.bind(this)),
-      cssModel.inlineStylesPromise(node.id).then(inlineStyleResult => {
+      cssModel.getComputedStyle(node.id).then(callback.bind(this)),
+      cssModel.getInlineStyles(node.id).then(inlineStyleResult => {
         if (inlineStyleResult && this.node() === node) {
           this.inlineStyle = inlineStyleResult.inlineStyle;
         }

package/front_end/panels/elements/PlatformFontsWidget.ts

@@ -88,7 +88,7 @@ export class PlatformFontsWidget extends UI.ThrottledWidget.ThrottledWidget {
       return Promise.resolve();
     }
 
-    return cssModel.platformFontsPromise(node.id).then(this.refreshUI.bind(this, node));
+    return cssModel.getPlatformFonts(node.id).then(this.refreshUI.bind(this, node));
   }
 
   private refreshUI(node: SDK.DOMModel.DOMNode, platformFonts: Protocol.CSS.PlatformFontUsage[]|null): void {

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -278,7 +278,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     const cssModel = this.parentPaneInternal.cssModel();
     const node = this.node();
     if (cssModel && node && typeof node.id !== 'undefined') {
-      const contrastInfo = new ColorPicker.ContrastInfo.ContrastInfo(await cssModel.backgroundColorsPromise(node.id));
+      const contrastInfo = new ColorPicker.ContrastInfo.ContrastInfo(await cssModel.getBackgroundColors(node.id));
       swatchIcon.setContrastInfo(contrastInfo);
     }
   }

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -3195,13 +3195,12 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
       if (!node || this.selectedNodeComputedStyles) {
         return;
       }
-      this.selectedNodeComputedStyles = await node.domModel().cssModel().computedStylePromise(node.id);
+      this.selectedNodeComputedStyles = await node.domModel().cssModel().getComputedStyle(node.id);
       const parentNode = node.parentNode;
       if (parentNode) {
-        this.parentNodeComputedStyles = await parentNode.domModel().cssModel().computedStylePromise(parentNode.id);
+        this.parentNodeComputedStyles = await parentNode.domModel().cssModel().getComputedStyle(parentNode.id);
       }
     };
-
     for (const result of results) {
       await ensureComputedStyles();
       // Using parent node's computed styles does not work in all cases. For example:

package/front_end/panels/emulation/MediaQueryInspector.ts

@@ -165,7 +165,7 @@ export class MediaQueryInspector extends UI.Widget.Widget implements
       return Promise.resolve();
     }
 
-    return this.cssModel.mediaQueriesPromise().then(this.rebuildMediaQueries.bind(this));
+    return this.cssModel.getMediaQueries().then(this.rebuildMediaQueries.bind(this));
   }
 
   private squashAdjacentEqual(models: MediaQueryUIModel[]): MediaQueryUIModel[] {

package/front_end/panels/issues/IssueView.ts

@@ -131,7 +131,7 @@ class AffectedRequestsView extends AffectedResourcesView {
 const issueTypeToNetworkHeaderMap =
     new Map<IssuesManager.Issue.IssueCategory, NetworkForward.UIRequestLocation.UIRequestTabs>([
       [
-        IssuesManager.Issue.IssueCategory.SameSiteCookie,
+        IssuesManager.Issue.IssueCategory.Cookie,
         NetworkForward.UIRequestLocation.UIRequestTabs.Cookies,
       ],
       [

package/front_end/panels/issues/IssuesPane.ts

@@ -127,7 +127,7 @@ class IssueCategoryView extends UI.TreeOutline.TreeElement {
         return i18nString(UIStrings.crossOriginEmbedderPolicy);
       case IssuesManager.Issue.IssueCategory.MixedContent:
         return i18nString(UIStrings.mixedContent);
-      case IssuesManager.Issue.IssueCategory.SameSiteCookie:
+      case IssuesManager.Issue.IssueCategory.Cookie:
         return i18nString(UIStrings.samesiteCookie);
       case IssuesManager.Issue.IssueCategory.HeavyAd:
         return i18nString(UIStrings.heavyAds);

package/front_end/panels/network/NetworkLogView.ts

@@ -1716,7 +1716,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       return false;
     }
     if (this.onlyIssuesFilterUI.checked() &&
-        !IssuesManager.RelatedIssue.hasIssueOfCategory(request, IssuesManager.Issue.IssueCategory.SameSiteCookie)) {
+        !IssuesManager.RelatedIssue.hasIssueOfCategory(request, IssuesManager.Issue.IssueCategory.Cookie)) {
       return false;
     }
     if (this.onlyBlockedRequestsUI.checked() && !request.wasBlocked() && !request.corsErrorStatus()) {

package/front_end/panels/sources/CSSPlugin.ts

@@ -69,7 +69,7 @@ async function specificCssCompletion(
     assertNotNullOrUndefined(cssModel);
 
     const currentStyleSheet = getCurrentStyleSheet(uiSourceCode.url(), cssModel);
-    const existingClassNames = await cssModel.classNamesPromise(currentStyleSheet);
+    const existingClassNames = await cssModel.getClassNames(currentStyleSheet);
 
     return {
       from: node.from,

package/front_end/panels/sources/SourcesView.ts

@@ -12,6 +12,7 @@ import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js'
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import * as Components from './components/components.js';
 import {EditingLocationHistoryManager} from './EditingLocationHistoryManager.js';
 import sourcesViewStyles from './sourcesView.css.js';
 
@@ -377,6 +378,10 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
       sourceView = new SourceFrame.ImageView.ImageView(uiSourceCode.mimeType(), uiSourceCode);
     } else if (contentType === Common.ResourceType.resourceTypes.Font) {
       sourceView = new SourceFrame.FontView.FontView(uiSourceCode.mimeType(), uiSourceCode);
+    } else if (
+        uiSourceCode.name() === HEADER_OVERRIDES_FILENAME &&
+        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES)) {
+      sourceView = new Components.HeadersView.HeadersView(uiSourceCode);
     } else {
       sourceFrame = new UISourceCodeFrame(uiSourceCode);
     }
@@ -399,10 +404,18 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     if (widget instanceof SourceFrame.FontView.FontView) {
       return SourceViewType.FontView;
     }
+    if (widget instanceof Components.HeadersView.HeadersView) {
+      return SourceViewType.HeadersView;
+    }
     return SourceViewType.SourceView;
   }
 
-  #sourceViewTypeForContentType(contentType: Common.ResourceType.ResourceType): SourceViewType {
+  #sourceViewTypeForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): SourceViewType {
+    if (uiSourceCode.name() === HEADER_OVERRIDES_FILENAME &&
+        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES)) {
+      return SourceViewType.HeadersView;
+    }
+    const contentType = uiSourceCode.contentType();
     switch (contentType) {
       case Common.ResourceType.resourceTypes.Image:
         return SourceViewType.ImageView;
@@ -417,8 +430,7 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     const uiSourceCode = event.data;
     const widget = this.sourceViewByUISourceCode.get(uiSourceCode);
     if (widget) {
-      const contentType = uiSourceCode.contentType();
-      if (this.#sourceViewTypeForWidget(widget) !== this.#sourceViewTypeForContentType(contentType)) {
+      if (this.#sourceViewTypeForWidget(widget) !== this.#sourceViewTypeForUISourceCode(uiSourceCode)) {
         // Remove the exisiting editor tab and create a new one of the correct type.
         this.removeUISourceCodes([uiSourceCode]);
         this.showSourceLocation(uiSourceCode);
@@ -602,20 +614,18 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   }
 
   save(): void {
-    this.saveSourceFrame(this.currentSourceFrame());
+    this.saveSourceView(this.visibleView());
   }
 
   saveAll(): void {
     const sourceFrames = this.editorContainer.fileViews();
-    sourceFrames.forEach(this.saveSourceFrame.bind(this));
+    sourceFrames.forEach(this.saveSourceView.bind(this));
   }
 
-  private saveSourceFrame(sourceFrame: UI.Widget.Widget|null): void {
-    if (!(sourceFrame instanceof UISourceCodeFrame)) {
-      return;
+  private saveSourceView(sourceView: UI.Widget.Widget|null): void {
+    if (sourceView instanceof UISourceCodeFrame || sourceView instanceof Components.HeadersView.HeadersView) {
+      sourceView.commitEditing();
     }
-    const uiSourceCodeFrame = (sourceFrame as UISourceCodeFrame);
-    uiSourceCodeFrame.commitEditing();
   }
 
   toggleBreakpointsActiveState(active: boolean): void {
@@ -764,9 +774,12 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   }
 }
 
+const HEADER_OVERRIDES_FILENAME = '.headers';
+
 // eslint-disable-next-line rulesdir/const_enum
 enum SourceViewType {
   ImageView = 'ImageView',
   FontView = 'FontView',
+  HeadersView = 'HeadersView',
   SourceView = 'SourceView',
 }

package/front_end/panels/sources/components/HeadersView.css

@@ -0,0 +1,84 @@
+/*
+ * Copyright 2022 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+:host {
+  flex-grow: 1;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  color: var(--color-syntax-1);
+  font-family: var(--monospace-font-family);
+  font-size: var(--monospace-font-size);
+  align-items: center;
+  line-height: 18px;
+  margin: 2em 0 0 0.5em;
+}
+
+.row:first-child {
+  margin-top: 0.5em;
+}
+
+.row devtools-button {
+  line-height: 1;
+  margin-left: 0.5em;
+}
+
+.padded {
+  margin: 0.25em 0 0 2em;
+}
+
+.separator {
+  margin-right: 0.5em;
+  color: var(--color-text-primary);
+}
+
+.editable {
+  cursor: text;
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+  min-height: 18px;
+  line-height: 18px;
+  min-width: 0.5em;
+  background: transparent;
+  border: none;
+  outline: none;
+  display: inline-block;
+}
+
+.editable.red {
+  color: var(--color-syntax-1);
+}
+
+.editable:hover,
+.editable:focus {
+  box-shadow: 0 0 0 1px var(--color-details-hairline);
+  border-radius: 2px;
+}
+
+.center-wrapper {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.centered {
+  margin: 1em;
+  max-width: 300px;
+  text-align: center;
+}
+
+.error-header {
+  font-weight: bold;
+  margin-bottom: 1em;
+}
+
+.error-body {
+  line-height: 1.5em;
+  color: var(--color-text-secondary);
+}