chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/front_end/panels/application/AppManifestView.ts

@@ -1,26 +1,40 @@
 // Copyright 2016 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
+/* eslint-disable @devtools/no-imperative-dom-api, @devtools/no-lit-render-outside-of-view */
+
+import '../../ui/kit/kit.js';
+import '../../ui/legacy/components/inline_editor/inline_editor.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 type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
-import * as uiI18n from '../../ui/i18n/i18n.js';
-import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, i18nTemplate, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import appManifestViewStyles from './appManifestView.css.js';
 import * as ApplicationComponents from './components/components.js';
 
 const UIStrings = {
+  /**
+   * @description Text in App Manifest View of the Application panel
+   */
+  noManifestDetected: 'No manifest detected',
+  /**
+   * @description Description text on manifests in App Manifest View of the Application panel which describes the app manifest view tab
+   */
+  manifestDescription:
+      'A manifest defines how your app appears on phone’s home screens and what the app looks like on launch.',
+  /**
+   * @description Text in App Manifest View of the Application panel
+   */
+  appManifest: 'Manifest',
   /**
    * @description Text in App Manifest View of the Application panel
    */
@@ -454,6 +468,655 @@ interface Screenshot {
   platform?: string;
 }
 
+/* eslint-disable @typescript-eslint/naming-convention */
+interface Manifest {
+  background_color?: string;
+  description?: string;
+  display?: string;
+  display_override?: string[];
+  icons?: Array<{
+    src: string,
+    sizes?: string,
+    type?: string,
+    purpose?: string,
+  }>;
+  id?: string;
+  name?: string;
+  note_taking?: {
+    new_note_url?: string,
+  };
+  orientation?: string;
+  protocol_handlers?: Protocol.Page.ProtocolHandler[];
+  screenshots?: Screenshot[];
+  short_name?: string;
+  shortcuts?: Array<{
+    name: string,
+    url: string,
+    description?: string,
+    short_name?: string,
+    icons?: Array<{
+           src: string,
+           sizes?: string,
+           type?: string,
+           purpose?: string,
+         }>,
+  }>;
+  start_url?: string;
+  theme_color?: string;
+}
+/* eslint-enable @typescript-eslint/naming-convention */
+
+interface ReportSectionItem {
+  content: LitTemplate|LitTemplate[]|string|HTMLElement;
+  title?: string;
+  label?: string;
+  flexed?: boolean;
+}
+
+interface IdentitySectionData {
+  name: string;
+  shortName: string;
+  description: string;
+  appId: string|null;
+  recommendedId: string|null;
+  hasId: boolean;
+  warnings: Platform.UIString.LocalizedString[];
+}
+
+interface PresentationSectionData {
+  startUrl: string;
+  completeStartUrl: Platform.DevToolsPath.UrlString|null;
+  themeColor: Common.Color.Color|null;
+  backgroundColor: Common.Color.Color|null;
+  orientation: string;
+  display: string;
+  newNoteUrl?: string;
+  hasNewNoteUrl: boolean;
+  completeNewNoteUrl: Platform.DevToolsPath.UrlString|null;
+}
+
+interface ProtocolHandlersSectionData {
+  protocolHandlers: Protocol.Page.ProtocolHandler[];
+  manifestLink: Platform.DevToolsPath.UrlString;
+}
+
+interface IconsSectionData {
+  icons: Map<string, ProcessedImageResource[]>;
+  imageResourceErrors: Platform.UIString.LocalizedString[];
+}
+
+interface ProcessedShortcut {
+  name: string;
+  shortName?: string;
+  description?: string;
+  url: string;
+  shortcutUrl: Platform.DevToolsPath.UrlString;
+  icons: Map<string, ProcessedImageResource[]>;
+}
+
+interface ShortcutsSectionData {
+  shortcuts: ProcessedShortcut[];
+  warnings: Platform.UIString.LocalizedString[];
+  imageResourceErrors: Platform.UIString.LocalizedString[];
+}
+
+interface ProcessedScreenshot {
+  screenshot: Screenshot;
+  processedImage: ProcessedImageResource;
+}
+
+interface ScreenshotsSectionData {
+  screenshots: ProcessedScreenshot[];
+  warnings: Platform.UIString.LocalizedString[];
+  imageResourceErrors: Platform.UIString.LocalizedString[];
+}
+
+interface WindowControlsSectionData {
+  hasWco: boolean;
+  themeColor: string;
+  wcoStyleSheetText: boolean;
+  url: Platform.DevToolsPath.UrlString;
+}
+
+type ProcessedImageResource = {
+  imageResourceErrors: Platform.UIString.LocalizedString[],
+  imageUrl?: string,
+  squareSizedIconAvailable?: boolean,
+}|{
+  imageResourceErrors: Platform.UIString.LocalizedString[],
+  imageUrl: string,
+  squareSizedIconAvailable: boolean,
+  title: string,
+  naturalWidth: number,
+  naturalHeight: number,
+  imageSrc: string,
+};
+
+function renderErrors(
+    errorsSection: UI.ReportView.Section, warnings?: Platform.UIString.LocalizedString[],
+    manifestErrors?: Protocol.Page.AppManifestError[], imageErrors?: Platform.UIString.LocalizedString[]): void {
+  errorsSection.clearContent();
+  errorsSection.element.classList.toggle(
+      'hidden', !manifestErrors?.length && !warnings?.length && !imageErrors?.length);
+
+  for (const error of manifestErrors ?? []) {
+    const icon = UI.UIUtils.createIconLabel({
+      title: error.message,
+      iconName: error.critical ? 'cross-circle-filled' : 'warning-filled',
+      color: error.critical ? 'var(--icon-error)' : 'var(--icon-warning)',
+    });
+    errorsSection.appendRow().appendChild(icon);
+  }
+
+  for (const warning of warnings ?? []) {
+    const msgElement = document.createTextNode(warning);
+    errorsSection.appendRow().appendChild(msgElement);
+  }
+  for (const error of imageErrors ?? []) {
+    const msgElement = document.createTextNode(error);
+    errorsSection.appendRow().appendChild(msgElement);
+  }
+}
+
+function renderIdentity(identitySection: UI.ReportView.Section, identityData: IdentitySectionData): void {
+  const {name, shortName, description, appId, recommendedId, hasId} = identityData;
+  const fields: ReportSectionItem[] = [];
+  fields.push({title: i18nString(UIStrings.name), content: name});
+  fields.push({title: i18nString(UIStrings.shortName), content: shortName});
+  fields.push({title: i18nString(UIStrings.description), content: description});
+
+  if (appId && recommendedId) {
+    const onCopy = (): void => {
+      UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.copiedToClipboard, {PH1: recommendedId}));
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(recommendedId);
+    };
+    // clang-format off
+    fields.push({title: i18nString(UIStrings.computedAppId), label: 'App Id', content: html`
+      ${appId}
+      <devtools-icon class="inline-icon" name="help" title=${i18nString(UIStrings.appIdExplainer)}
+          jslog=${VisualLogging.action('help').track({hover: true})}>
+      </devtools-icon>
+      <devtools-link href="https://developer.chrome.com/blog/pwa-manifest-id/"
+                    .jslogContext=${'learn-more'}>
+        ${i18nString(UIStrings.learnMore)}
+      </devtools-link>
+      ${!hasId ? html`
+        <div class="multiline-value">
+          ${i18nTemplate(str_, UIStrings.appIdNote, {
+            PH1: html`<code>${recommendedId}</code>`,
+            PH2: html`<devtools-button class="inline-button" @click=${onCopy}
+                        .iconName=${'copy'}
+                        .variant=${Buttons.Button.Variant.ICON}
+                        .size=${Buttons.Button.Size.SMALL}
+                        .jslogContext=${'manifest.copy-id'}
+                        .title=${i18nString(UIStrings.copyToClipboard)}>
+                      </devtools-button>`,
+          })}
+      </div>` : nothing}`});
+    // clang-format on
+  } else {
+    identitySection.removeField(i18nString(UIStrings.computedAppId));
+  }
+  setSectionContents(fields, identitySection);
+}
+
+function renderPresentation(
+    presentationSection: UI.ReportView.Section, presentationData: PresentationSectionData): void {
+  const {
+    startUrl,
+    completeStartUrl,
+    themeColor,
+    backgroundColor,
+    orientation,
+    display,
+    newNoteUrl,
+    hasNewNoteUrl,
+    completeNewNoteUrl,
+  } = presentationData;
+  const fields: ReportSectionItem[] = [
+    {
+      title: i18nString(UIStrings.startUrl),
+      label: i18nString(UIStrings.startUrl),
+      content: completeStartUrl ? Components.Linkifier.Linkifier.linkifyURL(
+                                      completeStartUrl, ({text: startUrl, tabStop: true, jslogContext: 'start-url'})) :
+                                  nothing,
+    },
+    {
+      title: i18nString(UIStrings.themeColor),
+      content: themeColor ? html`<devtools-color-swatch .color=${themeColor}></devtools-color-swatch>` : nothing,
+    },
+    {
+      title: i18nString(UIStrings.backgroundColor),
+      content: backgroundColor ? html`<devtools-color-swatch .color=${backgroundColor}></devtools-color-swatch>` :
+                                 nothing,
+    },
+    {title: i18nString(UIStrings.orientation), content: orientation},
+    {title: i18nString(UIStrings.display), content: display},
+  ];
+  if (completeNewNoteUrl) {
+    fields.push({
+      title: i18nString(UIStrings.newNoteUrl),
+      content: hasNewNoteUrl ?
+          Components.Linkifier.Linkifier.linkifyURL(completeNewNoteUrl, ({text: newNoteUrl, tabStop: true})) :
+          nothing,
+    });
+  }
+  setSectionContents(fields, presentationSection);
+}
+
+function renderProtocolHandlers(
+    protocolHandlersView: ApplicationComponents.ProtocolHandlersView.ProtocolHandlersView,
+    data: ProtocolHandlersSectionData): void {
+  protocolHandlersView.protocolHandlers = data.protocolHandlers;
+  protocolHandlersView.manifestLink = data.manifestLink;
+}
+
+function renderImage(imageSrc: string, imageUrl: string, naturalWidth: number): LitTemplate {
+  // clang-format off
+  return html`
+    <div class="image-wrapper">
+      <img src=${imageSrc} alt=${i18nString(UIStrings.imageFromS, {PH1: imageUrl})}
+          width=${naturalWidth}>
+    </div>`;
+  // clang-format on
+}
+
+function renderIcons(iconsSection: UI.ReportView.Section, data: IconsSectionData): void {
+  iconsSection.clearContent();
+
+  const contents: ReportSectionItem[] = [
+    // clang-format off
+    {
+      content: html`<devtools-checkbox class="mask-checkbox"
+        jslog=${VisualLogging.toggle('show-minimal-safe-area-for-maskable-icons')
+                              .track({change: true})}
+        @click=${(event: Event) => {
+        iconsSection.setIconMasked((event.target as HTMLInputElement).checked);
+      }}>
+      ${i18nString(UIStrings.showOnlyTheMinimumSafeAreaFor)}
+    </devtools-checkbox>`},
+    // clang-format on
+    {
+      content: i18nTemplate(str_, UIStrings.needHelpReadOurS, {
+        PH1: html`
+          <devtools-link href="https://web.dev/maskable-icon/" .jslogContext=${'learn-more'}>
+            ${i18nString(UIStrings.documentationOnMaskableIcons)}
+          </devtools-link>`,
+      }),
+    },
+  ];
+  for (const [title, images] of data.icons) {
+    const content = images.filter(icon => 'imageSrc' in icon)
+                        .map(icon => renderImage(icon.imageSrc, icon.imageUrl, icon.naturalWidth));
+    contents.push({title, content, flexed: true});
+  }
+  setSectionContents(contents, iconsSection);
+}
+
+function renderShortcuts(
+    reportView: UI.ReportView.ReportView, shortcutSections: UI.ReportView.Section[], data: ShortcutsSectionData): void {
+  for (const shortcutsSection of shortcutSections) {
+    shortcutsSection.detach(/** overrideHideOnDetach= */ true);
+  }
+  shortcutSections.length = 0;
+
+  let shortcutIndex = 1;
+  for (const shortcut of data.shortcuts) {
+    const shortcutSection = reportView.appendSection(i18nString(UIStrings.shortcutS, {PH1: shortcutIndex}));
+    shortcutSection.element.setAttribute('jslog', `${VisualLogging.section('shortcuts')}`);
+    shortcutSections.push(shortcutSection);
+
+    const fields: ReportSectionItem[] = [
+      {title: i18nString(UIStrings.name), flexed: true, content: shortcut.name},
+    ];
+    if (shortcut.shortName) {
+      fields.push({title: i18nString(UIStrings.shortName), flexed: true, content: shortcut.shortName});
+    }
+    if (shortcut.description) {
+      fields.push({title: i18nString(UIStrings.description), flexed: true, content: shortcut.description});
+    }
+    fields.push({
+      title: i18nString(UIStrings.url),
+      flexed: true,
+      content: Components.Linkifier.Linkifier.linkifyURL(
+          shortcut.shortcutUrl, ({text: shortcut.url, tabStop: true, jslogContext: 'shortcut'})),
+    });
+
+    for (const [title, images] of shortcut.icons) {
+      const content = images.filter(icon => 'imageSrc' in icon)
+                          .map(icon => renderImage(icon.imageSrc, icon.imageUrl, icon.naturalWidth));
+      fields.push({title, content, flexed: true});
+    }
+    setSectionContents(fields, shortcutSection);
+    shortcutIndex++;
+  }
+}
+
+function renderScreenshots(
+    reportView: UI.ReportView.ReportView, screenshotsSections: UI.ReportView.Section[],
+    data: ScreenshotsSectionData): void {
+  for (const screenshotSection of screenshotsSections) {
+    screenshotSection.detach(/** overrideHideOnDetach= */ true);
+  }
+  screenshotsSections.length = 0;
+
+  let screenshotIndex = 1;
+  for (const processedScreenshot of data.screenshots) {
+    const {screenshot, processedImage} = processedScreenshot;
+    const screenshotSection = reportView.appendSection(i18nString(UIStrings.screenshotS, {PH1: screenshotIndex}));
+    screenshotsSections.push(screenshotSection);
+    const fields: ReportSectionItem[] = [];
+
+    if (screenshot.form_factor) {
+      fields.push({title: i18nString(UIStrings.formFactor), flexed: true, content: screenshot.form_factor});
+    }
+    if (screenshot.label) {
+      fields.push({title: i18nString(UIStrings.label), flexed: true, content: screenshot.label});
+    }
+    if (screenshot.platform) {
+      fields.push({title: i18nString(UIStrings.platform), flexed: true, content: screenshot.platform});
+    }
+
+    if ('imageSrc' in processedImage) {
+      const content = renderImage(processedImage.imageSrc, processedImage.imageUrl, processedImage.naturalWidth);
+      fields.push({title: processedImage.title, content, flexed: true});
+    }
+    setSectionContents(fields, screenshotSection);
+    screenshotIndex++;
+  }
+}
+
+function renderInstallability(
+    installabilitySection: UI.ReportView.Section, installabilityErrors: Protocol.Page.InstallabilityError[]): void {
+  installabilitySection.clearContent();
+  installabilitySection.element.classList.toggle('hidden', !installabilityErrors.length);
+  const errorMessages = getInstallabilityErrorMessages(installabilityErrors);
+  setSectionContents(errorMessages.map(content => ({content})), installabilitySection);
+}
+
+function renderWindowControlsSection(
+    windowControlsSection: UI.ReportView.Section, data: WindowControlsSectionData, selectedPlatform?: string,
+    onSelectOs?: (selectedOS: SDK.OverlayModel.EmulatedOSType) => Promise<void>,
+    onToggleWcoToolbar?: (enabled: boolean) => Promise<void>): void {
+  const {hasWco, url} = data;
+  const contents: ReportSectionItem[] = [];
+  if (hasWco) {
+    // clang-format off
+    contents.push({content: html`
+      <devtools-icon class="inline-icon" name="check-circle"></devtools-icon>
+      ${i18nTemplate(str_, UIStrings.wcoFound, {
+        PH1: html`<code class="wco">window-controls-overlay</code>`,
+        PH2: html`<code>
+          <devtools-link href="https://developer.mozilla.org/en-US/docs/Web/Manifest/display_override"
+                        .jslogContext=${'display-override'}>
+            display-override
+          </devtools-link>
+        </code>`,
+        PH3: html`${Components.Linkifier.Linkifier.linkifyURL(url)}`,
+      })}`});
+    // clang-format on
+    if (selectedPlatform && onSelectOs && onToggleWcoToolbar) {
+      const controls = renderWindowControls(selectedPlatform, onSelectOs, onToggleWcoToolbar);
+      contents.push(controls);
+    }
+  } else {
+    // clang-format off
+    contents.push({content: html`
+      <devtools-icon class="inline-icon" name="info"></devtools-icon>
+      ${i18nTemplate(str_, UIStrings.wcoNotFound, {
+        PH1: html`<code>
+            <devtools-link href="https://developer.mozilla.org/en-US/docs/Web/Manifest/display_override"
+                          .jslogContext=${'display-override'}>
+              display-override
+          </devtools-link>
+        </code>`})}`});
+    // clang-format on
+  }
+  // clang-format off
+  contents.push({content: i18nTemplate(str_, UIStrings.wcoNeedHelpReadMore, { PH1: html`<devtools-link
+      href="https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay"
+      .jslogContext=${'customize-pwa-tittle-bar'}>
+    ${i18nString(UIStrings.customizePwaTitleBar)}
+  </devtools-link>`})});
+  // clang-format on
+  windowControlsSection.clearContent();
+  setSectionContents(contents, windowControlsSection);
+}
+
+function getInstallabilityErrorMessages(installabilityErrors: Protocol.Page.InstallabilityError[]): string[] {
+  const errorMessages = [];
+  for (const installabilityError of installabilityErrors) {
+    let errorMessage;
+    switch (installabilityError.errorId) {
+      case 'not-in-main-frame':
+        errorMessage = i18nString(UIStrings.pageIsNotLoadedInTheMainFrame);
+        break;
+      case 'not-from-secure-origin':
+        errorMessage = i18nString(UIStrings.pageIsNotServedFromASecureOrigin);
+        break;
+      case 'no-manifest':
+        errorMessage = i18nString(UIStrings.pageHasNoManifestLinkUrl);
+        break;
+      case 'manifest-empty':
+        errorMessage = i18nString(UIStrings.manifestCouldNotBeFetchedIsEmpty);
+        break;
+      case 'start-url-not-valid':
+        errorMessage = i18nString(UIStrings.manifestStartUrlIsNotValid);
+        break;
+      case 'manifest-missing-name-or-short-name':
+        errorMessage = i18nString(UIStrings.manifestDoesNotContainANameOr);
+        break;
+      case 'manifest-display-not-supported':
+        errorMessage = i18nString(UIStrings.manifestDisplayPropertyMustBeOne);
+        break;
+      case 'manifest-missing-suitable-icon':
+        if (installabilityError.errorArguments.length !== 1 ||
+            installabilityError.errorArguments[0].name !== 'minimum-icon-size-in-pixels') {
+          console.error('Installability error does not have the correct errorArguments');
+          break;
+        }
+        errorMessage =
+            i18nString(UIStrings.manifestDoesNotContainASuitable, {PH1: installabilityError.errorArguments[0].value});
+        break;
+      case 'no-acceptable-icon':
+        if (installabilityError.errorArguments.length !== 1 ||
+            installabilityError.errorArguments[0].name !== 'minimum-icon-size-in-pixels') {
+          console.error('Installability error does not have the correct errorArguments');
+          break;
+        }
+        errorMessage =
+            i18nString(UIStrings.noSuppliedIconIsAtLeastSpxSquare, {PH1: installabilityError.errorArguments[0].value});
+        break;
+      case 'cannot-download-icon':
+        errorMessage = i18nString(UIStrings.couldNotDownloadARequiredIcon);
+        break;
+      case 'no-icon-available':
+        errorMessage = i18nString(UIStrings.downloadedIconWasEmptyOr);
+        break;
+      case 'platform-not-supported-on-android':
+        errorMessage = i18nString(UIStrings.theSpecifiedApplicationPlatform);
+        break;
+      case 'no-id-specified':
+        errorMessage = i18nString(UIStrings.noPlayStoreIdProvided);
+        break;
+      case 'ids-do-not-match':
+        errorMessage = i18nString(UIStrings.thePlayStoreAppUrlAndPlayStoreId);
+        break;
+      case 'already-installed':
+        errorMessage = i18nString(UIStrings.theAppIsAlreadyInstalled);
+        break;
+      case 'url-not-supported-for-webapk':
+        errorMessage = i18nString(UIStrings.aUrlInTheManifestContainsA);
+        break;
+      case 'in-incognito':
+        errorMessage = i18nString(UIStrings.pageIsLoadedInAnIncognitoWindow);
+        break;
+      case 'not-offline-capable':
+        errorMessage = i18nString(UIStrings.pageDoesNotWorkOffline);
+        break;
+      case 'no-url-for-service-worker':
+        errorMessage = i18nString(UIStrings.couldNotCheckServiceWorker);
+        break;
+      case 'prefer-related-applications':
+        errorMessage = i18nString(UIStrings.manifestSpecifies);
+        break;
+      case 'prefer-related-applications-only-beta-stable':
+        errorMessage = i18nString(UIStrings.preferrelatedapplicationsIsOnly);
+        break;
+      case 'manifest-display-override-not-supported':
+        errorMessage = i18nString(UIStrings.manifestContainsDisplayoverride);
+        break;
+      case 'warn-not-offline-capable':
+        errorMessage = i18nString(
+            UIStrings.pageDoesNotWorkOfflineThePage,
+            {PH1: 'https://developer.chrome.com/blog/improved-pwa-offline-detection/'});
+        break;
+      default:
+        console.error(`Installability error id '${installabilityError.errorId}' is not recognized`);
+        break;
+    }
+    if (errorMessage) {
+      errorMessages.push(errorMessage);
+    }
+  }
+  return errorMessages;
+}
+
+function renderWindowControls(
+    selectedPlatform: string, onSelectOs: (selectedOS: SDK.OverlayModel.EmulatedOSType) => Promise<void>,
+    onToggleWcoToolbar: (enabled: boolean) => Promise<void>): ReportSectionItem {
+  // clang-format off
+    return {content: html`
+      <devtools-checkbox @click=${(event: Event) => onToggleWcoToolbar((event.target as HTMLInputElement).checked)}
+          title=${i18nString(UIStrings.selectWindowControlsOverlayEmulationOs)}>
+        ${i18nString(UIStrings.selectWindowControlsOverlayEmulationOs)}
+      </devtools-checkbox>
+      <select value=${selectedPlatform}
+              @change=${(event: Event): void => {
+                const target = event.target as HTMLSelectElement;
+                const selectedOS = target.options[target.selectedIndex].value;
+                void onSelectOs(selectedOS as SDK.OverlayModel.EmulatedOSType);
+              }}
+             .selectedIndex=${0}>
+        <option value=${SDK.OverlayModel.EmulatedOSType.WINDOWS}
+                jslog=${VisualLogging.item('windows').track({click: true})}>
+          Windows
+        </option>
+        <option value=${SDK.OverlayModel.EmulatedOSType.MAC}
+                jslog=${VisualLogging.item('macos').track({click: true })}>
+          macOS
+        </option>
+        <option value=${SDK.OverlayModel.EmulatedOSType.LINUX}
+                jslog=${VisualLogging.item('linux').track({click: true})}>
+          Linux
+        </option>
+      </select>`};
+  // clang-format on
+}
+
+function setSectionContents(items: ReportSectionItem[], section: UI.ReportView.Section): void {
+  for (const item of items) {
+    if (!item.title) {
+      render(item.content, section.appendRow());
+      continue;
+    }
+    const element = item.flexed ? section.appendFlexedField(item.title) : section.appendField(item.title);
+    if (item.label) {
+      UI.ARIAUtils.setLabel(element, item.label);
+    }
+    render(item.content, element);
+  }
+}
+
+interface ViewInput {
+  emptyView: UI.EmptyWidget.EmptyWidget;
+  reportView: UI.ReportView.ReportView;
+  errorsSection?: UI.ReportView.Section;
+  installabilitySection?: UI.ReportView.Section;
+  identitySection?: UI.ReportView.Section;
+  presentationSection?: UI.ReportView.Section;
+  protocolHandlersView?: ApplicationComponents.ProtocolHandlersView.ProtocolHandlersView;
+  iconsSection?: UI.ReportView.Section;
+  windowControlsSection?: UI.ReportView.Section;
+  shortcutSections?: UI.ReportView.Section[];
+  screenshotsSections?: UI.ReportView.Section[];
+  parsedManifest?: Manifest;
+  url?: Platform.DevToolsPath.UrlString;
+  identityData?: IdentitySectionData;
+  presentationData?: PresentationSectionData;
+  protocolHandlersData?: ProtocolHandlersSectionData;
+  iconsData?: IconsSectionData;
+  shortcutsData?: ShortcutsSectionData;
+  screenshotsData?: ScreenshotsSectionData;
+  installabilityErrors?: Protocol.Page.InstallabilityError[];
+  warnings?: Platform.UIString.LocalizedString[];
+  errors?: Protocol.Page.AppManifestError[];
+  imageErrors?: Platform.UIString.LocalizedString[];
+  windowControlsData?: WindowControlsSectionData;
+  selectedPlatform?: string;
+  onSelectOs?: (selectedOS: SDK.OverlayModel.EmulatedOSType) => Promise<void>;
+  onToggleWcoToolbar?: (enabled: boolean) => Promise<void>;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, _target) => {
+  const {
+    reportView,
+    errorsSection,
+    installabilitySection,
+    identitySection,
+    presentationSection,
+    protocolHandlersView,
+    iconsSection,
+    windowControlsSection,
+    shortcutSections,
+    screenshotsSections,
+    identityData,
+    presentationData,
+    protocolHandlersData,
+    iconsData,
+    shortcutsData,
+    screenshotsData,
+    installabilityErrors,
+    warnings,
+    errors,
+    imageErrors,
+    windowControlsData,
+    selectedPlatform,
+    onSelectOs,
+    onToggleWcoToolbar,
+  } = input;
+  if (identitySection && identityData) {
+    renderIdentity(identitySection, identityData);
+  }
+  if (presentationSection && presentationData) {
+    renderPresentation(presentationSection, presentationData);
+  }
+  if (protocolHandlersView && protocolHandlersData) {
+    renderProtocolHandlers(protocolHandlersView, protocolHandlersData);
+  }
+  if (iconsSection && iconsData) {
+    renderIcons(iconsSection, iconsData);
+  }
+  if (shortcutSections && shortcutsData) {
+    renderShortcuts(reportView, shortcutSections, shortcutsData);
+  }
+  if (screenshotsSections && screenshotsData) {
+    renderScreenshots(reportView, screenshotsSections, screenshotsData);
+  }
+  if (installabilitySection && installabilityErrors) {
+    renderInstallability(installabilitySection, installabilityErrors);
+  }
+  if (windowControlsSection && windowControlsData) {
+    renderWindowControlsSection(
+        windowControlsSection, windowControlsData, selectedPlatform, onSelectOs, onToggleWcoToolbar);
+  }
+  if (errorsSection) {
+    renderErrors(errorsSection, warnings, errors, imageErrors);
+  }
+};
+
 export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
     implements SDK.TargetManager.Observer {
   private readonly emptyView: UI.EmptyWidget.EmptyWidget;
@@ -467,41 +1130,38 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
   private readonly protocolHandlersSection: UI.ReportView.Section;
   private readonly shortcutSections: UI.ReportView.Section[];
   private readonly screenshotsSections: UI.ReportView.Section[];
-  private nameField: HTMLElement;
-  private shortNameField: HTMLElement;
-  private descriptionField: Element;
-  private readonly startURLField: HTMLElement;
-  private readonly themeColorSwatch: InlineEditor.ColorSwatch.ColorSwatch;
-  private readonly backgroundColorSwatch: InlineEditor.ColorSwatch.ColorSwatch;
-  private orientationField: HTMLElement;
-  private displayField: HTMLElement;
-  private readonly newNoteUrlField: HTMLElement;
-  private readonly throttler: Common.Throttler.Throttler;
   private registeredListeners: Common.EventTarget.EventDescriptor[];
   private target?: SDK.Target.Target;
   private resourceTreeModel?: SDK.ResourceTreeModel.ResourceTreeModel|null;
   private serviceWorkerManager?: SDK.ServiceWorkerManager.ServiceWorkerManager|null;
   private overlayModel?: SDK.OverlayModel.OverlayModel|null;
   private protocolHandlersView: ApplicationComponents.ProtocolHandlersView.ProtocolHandlersView;
-
-  constructor(
-      emptyView: UI.EmptyWidget.EmptyWidget, reportView: UI.ReportView.ReportView,
-      throttler: Common.Throttler.Throttler) {
+  private manifestUrl: Platform.DevToolsPath.UrlString;
+  private manifestData: string|null;
+  private manifestErrors: Protocol.Page.AppManifestError[];
+  private installabilityErrors: Protocol.Page.InstallabilityError[];
+  private appIdResponse: Protocol.Page.GetAppIdResponse|null;
+  private wcoToolbarEnabled = false;
+  private readonly view: View;
+
+  constructor(view: View = DEFAULT_VIEW) {
     super({
       jslog: `${VisualLogging.pane('manifest')}`,
       useShadowDom: true,
     });
+    this.view = view;
     this.registerRequiredCSS(appManifestViewStyles);
 
     this.contentElement.classList.add('manifest-container');
 
-    this.emptyView = emptyView;
+    this.emptyView = new UI.EmptyWidget.EmptyWidget(
+        i18nString(UIStrings.noManifestDetected), i18nString(UIStrings.manifestDescription));
     this.emptyView.link = 'https://web.dev/add-manifest/' as Platform.DevToolsPath.UrlString;
 
     this.emptyView.show(this.contentElement);
     this.emptyView.hideWidget();
 
-    this.reportView = reportView;
+    this.reportView = new UI.ReportView.ReportView(i18nString(UIStrings.appManifest));
     this.reportView.registerRequiredCSS(appManifestViewStyles);
     this.reportView.element.classList.add('manifest-view-header');
     this.reportView.show(this.contentElement);
@@ -524,29 +1184,14 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.shortcutSections = [];
     this.screenshotsSections = [];
 
-    this.nameField = this.identitySection.appendField(i18nString(UIStrings.name));
-    this.shortNameField = this.identitySection.appendField(i18nString(UIStrings.shortName));
-    this.descriptionField = this.identitySection.appendFlexedField(i18nString(UIStrings.description));
-
-    this.startURLField = this.presentationSection.appendField(i18nString(UIStrings.startUrl));
-    UI.ARIAUtils.setLabel(this.startURLField, i18nString(UIStrings.startUrl));
-
-    const themeColorField = this.presentationSection.appendField(i18nString(UIStrings.themeColor));
-    this.themeColorSwatch = new InlineEditor.ColorSwatch.ColorSwatch();
-    themeColorField.appendChild(this.themeColorSwatch);
-
-    const backgroundColorField = this.presentationSection.appendField(i18nString(UIStrings.backgroundColor));
-    this.backgroundColorSwatch = new InlineEditor.ColorSwatch.ColorSwatch();
-    backgroundColorField.appendChild(this.backgroundColorSwatch);
-
-    this.orientationField = this.presentationSection.appendField(i18nString(UIStrings.orientation));
-    this.displayField = this.presentationSection.appendField(i18nString(UIStrings.display));
-
-    this.newNoteUrlField = this.presentationSection.appendField(i18nString(UIStrings.newNoteUrl));
-
-    this.throttler = throttler;
     SDK.TargetManager.TargetManager.instance().observeTargets(this);
     this.registeredListeners = [];
+
+    this.manifestUrl = Platform.DevToolsPath.EmptyUrlString;
+    this.manifestData = null;
+    this.manifestErrors = [];
+    this.installabilityErrors = [];
+    this.appIdResponse = null;
   }
 
   getStaticSections(): UI.ReportView.Section[] {
@@ -614,20 +1259,32 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
       this.resourceTreeModel.getAppId(),
     ]);
 
-    void this.throttler.schedule(
-        () => this.renderManifest(url, data, errors, installabilityErrors, appId),
-        immediately ? Common.Throttler.Scheduling.AS_SOON_AS_POSSIBLE : Common.Throttler.Scheduling.DEFAULT);
+    this.manifestUrl = url;
+    this.manifestData = data;
+    this.manifestErrors = errors;
+    this.installabilityErrors = installabilityErrors;
+    this.appIdResponse = appId;
+
+    if (immediately) {
+      await this.performUpdate();
+    } else {
+      await this.requestUpdate();
+    }
   }
 
-  private async renderManifest(
-      url: Platform.DevToolsPath.UrlString, data: string|null, errors: Protocol.Page.AppManifestError[],
-      installabilityErrors: Protocol.Page.InstallabilityError[],
-      appIdResponse: Protocol.Page.GetAppIdResponse): Promise<void> {
+  override async performUpdate(): Promise<void> {
+    const url = this.manifestUrl;
+    let data = this.manifestData;
+    const errors = this.manifestErrors;
+    const installabilityErrors = this.installabilityErrors;
+    const appIdResponse = this.appIdResponse;
+
     const appId = appIdResponse?.appId || null;
     const recommendedId = appIdResponse?.recommendedId || null;
     if ((!data || data === '{}') && !errors.length) {
       this.emptyView.showWidget();
       this.reportView.hideWidget();
+      this.view({emptyView: this.emptyView, reportView: this.reportView}, undefined, this.contentElement);
       this.dispatchEventToListeners(Events.MANIFEST_DETECTED, false);
       return;
     }
@@ -635,21 +1292,13 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.reportView.showWidget();
     this.dispatchEventToListeners(Events.MANIFEST_DETECTED, true);
 
-    const link = Components.Linkifier.Linkifier.linkifyURL(url);
-    link.tabIndex = 0;
+    const link = Components.Linkifier.Linkifier.linkifyURL(url, {tabStop: true});
     this.reportView.setURL(link);
-    this.errorsSection.clearContent();
-    this.errorsSection.element.classList.toggle('hidden', !errors.length);
-    for (const error of errors) {
-      const icon = UI.UIUtils.createIconLabel({
-        title: error.message,
-        iconName: error.critical ? 'cross-circle-filled' : 'warning-filled',
-        color: error.critical ? 'var(--icon-error)' : 'var(--icon-warning)',
-      });
-      this.errorsSection.appendRow().appendChild(icon);
-    }
 
     if (!data) {
+      this.view(
+          {emptyView: this.emptyView, reportView: this.reportView, errorsSection: this.errorsSection, errors},
+          undefined, this.contentElement);
       return;
     }
 
@@ -658,414 +1307,80 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
     }  // Trim the BOM as per https://tools.ietf.org/html/rfc7159#section-8.1.
 
     const parsedManifest = JSON.parse(data);
-    this.nameField.textContent = stringProperty('name');
-    this.shortNameField.textContent = stringProperty('short_name');
-
-    const warnings = [];
-
-    const description = stringProperty('description');
-    this.descriptionField.textContent = description;
-    // See https://crbug.com/1354304 for details.
-    if (description.length > 300) {
-      warnings.push(i18nString(UIStrings.descriptionMayBeTruncated));
-    }
-
-    const startURL = stringProperty('start_url');
-    if (appId && recommendedId) {
-      const appIdField = this.identitySection.appendField(i18nString(UIStrings.computedAppId));
-      UI.ARIAUtils.setLabel(appIdField, 'App Id');
-      appIdField.textContent = appId;
-
-      const helpIcon = IconButton.Icon.create('help', 'inline-icon');
-      helpIcon.title = i18nString(UIStrings.appIdExplainer);
-      helpIcon.setAttribute('jslog', `${VisualLogging.action('help').track({hover: true})}`);
-      appIdField.appendChild(helpIcon);
-
-      const learnMoreLink = UI.XLink.XLink.create(
-          'https://developer.chrome.com/blog/pwa-manifest-id/', i18nString(UIStrings.learnMore), undefined, undefined,
-          'learn-more');
-      appIdField.appendChild(learnMoreLink);
-
-      if (!stringProperty('id')) {
-        const suggestedIdNote = appIdField.createChild('div', 'multiline-value');
-        const suggestedIdSpan = document.createElement('code');
-        suggestedIdSpan.textContent = recommendedId;
-
-        const copyButton = new Buttons.Button.Button();
-        copyButton.data = {
-          variant: Buttons.Button.Variant.ICON,
-          iconName: 'copy',
-          size: Buttons.Button.Size.SMALL,
-          jslogContext: 'manifest.copy-id',
-          title: i18nString(UIStrings.copyToClipboard),
-        };
-        copyButton.className = 'inline-button';
-        copyButton.addEventListener('click', () => {
-          UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.copiedToClipboard, {PH1: recommendedId}));
-          Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(recommendedId);
-        });
-        suggestedIdNote.appendChild(
-            uiI18n.getFormatLocalizedString(str_, UIStrings.appIdNote, {PH1: suggestedIdSpan, PH2: copyButton}));
-      }
-    } else {
-      this.identitySection.removeField(i18nString(UIStrings.computedAppId));
-    }
-
-    this.startURLField.removeChildren();
-    if (startURL) {
-      const completeURL = Common.ParsedURL.ParsedURL.completeURL(url, startURL);
-      if (completeURL) {
-        const link = Components.Linkifier.Linkifier.linkifyURL(
-            completeURL, ({text: startURL} as Components.Linkifier.LinkifyURLOptions));
-        link.tabIndex = 0;
-        link.setAttribute('jslog', `${VisualLogging.link('start-url').track({click: true})}`);
-        this.startURLField.appendChild(link);
-      }
-    }
-
-    this.themeColorSwatch.classList.toggle('hidden', !stringProperty('theme_color'));
-    const themeColor = Common.Color.parse(stringProperty('theme_color') || 'white') || Common.Color.parse('white');
-    if (themeColor) {
-      this.themeColorSwatch.renderColor(themeColor);
-    }
-    this.backgroundColorSwatch.classList.toggle('hidden', !stringProperty('background_color'));
-    const backgroundColor =
-        Common.Color.parse(stringProperty('background_color') || 'white') || Common.Color.parse('white');
-    if (backgroundColor) {
-      this.backgroundColorSwatch.renderColor(backgroundColor);
-    }
-
-    this.orientationField.textContent = stringProperty('orientation');
-    const displayType = stringProperty('display');
-    this.displayField.textContent = displayType;
-
-    const noteTaking = parsedManifest['note_taking'] || {};
-    const newNoteUrl = noteTaking['new_note_url'];
-    const hasNewNoteUrl = typeof newNoteUrl === 'string';
-    this.newNoteUrlField.parentElement?.classList.toggle('hidden', !hasNewNoteUrl);
-    this.newNoteUrlField.removeChildren();
-    if (hasNewNoteUrl) {
-      const completeURL = (Common.ParsedURL.ParsedURL.completeURL(url, newNoteUrl) as Platform.DevToolsPath.UrlString);
-      const link = Components.Linkifier.Linkifier.linkifyURL(
-          completeURL, ({text: newNoteUrl} as Components.Linkifier.LinkifyURLOptions));
-      link.tabIndex = 0;
-      this.newNoteUrlField.appendChild(link);
-    }
-
-    const protocolHandlers = parsedManifest['protocol_handlers'] || [];
-    this.protocolHandlersView.protocolHandlers = protocolHandlers;
-    this.protocolHandlersView.manifestLink = url;
-
-    const icons = parsedManifest['icons'] || [];
-    this.iconsSection.clearContent();
-
-    const shortcuts = parsedManifest['shortcuts'] || [];
-    for (const shortcutsSection of this.shortcutSections) {
-      shortcutsSection.detach(/** overrideHideOnDetach= */ true);
-    }
-
-    const screenshots: Screenshot[] = parsedManifest['screenshots'] || [];
-    for (const screenshotSection of this.screenshotsSections) {
-      screenshotSection.detach(/** overrideHideOnDetach= */ true);
-    }
-
-    const imageErrors: Platform.UIString.LocalizedString[] = [];
-
-    const setIconMaskedCheckbox = UI.UIUtils.CheckboxLabel.create(i18nString(UIStrings.showOnlyTheMinimumSafeAreaFor));
-    setIconMaskedCheckbox.classList.add('mask-checkbox');
-    setIconMaskedCheckbox.setAttribute(
-        'jslog', `${VisualLogging.toggle('show-minimal-safe-area-for-maskable-icons').track({change: true})}`);
-    setIconMaskedCheckbox.addEventListener('click', () => {
-      this.iconsSection.setIconMasked(setIconMaskedCheckbox.checked);
-    });
-    this.iconsSection.appendRow().appendChild(setIconMaskedCheckbox);
-    const documentationLink = UI.XLink.XLink.create(
-        'https://web.dev/maskable-icon/', i18nString(UIStrings.documentationOnMaskableIcons), undefined, undefined,
-        'learn-more');
-    this.iconsSection.appendRow().appendChild(
-        uiI18n.getFormatLocalizedString(str_, UIStrings.needHelpReadOurS, {PH1: documentationLink}));
-
-    let squareSizedIconAvailable = false;
-    for (const icon of icons) {
-      const result = await this.appendImageResourceToSection(url, icon, this.iconsSection, /** isScreenshot= */ false);
-      imageErrors.push(...result.imageResourceErrors);
-      squareSizedIconAvailable = result.squareSizedIconAvailable || squareSizedIconAvailable;
-    }
-    if (!squareSizedIconAvailable) {
-      imageErrors.push(i18nString(UIStrings.sSShouldHaveSquareIcon));
-    }
-
-    if (shortcuts.length > 4) {
-      warnings.push(i18nString(UIStrings.shortcutsMayBeNotAvailable));
-    }
-
-    let shortcutIndex = 1;
-    for (const shortcut of shortcuts) {
-      const shortcutSection = this.reportView.appendSection(i18nString(UIStrings.shortcutS, {PH1: shortcutIndex}));
-      shortcutSection.element.setAttribute('jslog', `${VisualLogging.section('shortcuts')}`);
-      this.shortcutSections.push(shortcutSection);
-
-      shortcutSection.appendFlexedField(i18nString(UIStrings.name), shortcut.name);
-      if (shortcut.short_name) {
-        shortcutSection.appendFlexedField(i18nString(UIStrings.shortName), shortcut.short_name);
-      }
-      if (shortcut.description) {
-        shortcutSection.appendFlexedField(i18nString(UIStrings.description), shortcut.description);
-      }
-      const urlField = shortcutSection.appendFlexedField(i18nString(UIStrings.url));
-      const shortcutUrl = Common.ParsedURL.ParsedURL.completeURL(url, shortcut.url) as Platform.DevToolsPath.UrlString;
-      const link = Components.Linkifier.Linkifier.linkifyURL(
-          shortcutUrl, ({text: shortcut.url} as Components.Linkifier.LinkifyURLOptions));
-      link.setAttribute('jslog', `${VisualLogging.link('shortcut').track({click: true})}`);
-      link.tabIndex = 0;
-      urlField.appendChild(link);
-
-      const shortcutIcons = shortcut.icons || [];
-      let hasShortcutIconLargeEnough = false;
-      for (const shortcutIcon of shortcutIcons) {
-        const {imageResourceErrors: shortcutIconErrors} =
-            await this.appendImageResourceToSection(url, shortcutIcon, shortcutSection, /** isScreenshot= */ false);
-        imageErrors.push(...shortcutIconErrors);
-        if (!hasShortcutIconLargeEnough && shortcutIcon.sizes) {
-          const shortcutIconSize = shortcutIcon.sizes.match(/^(\d+)x(\d+)$/);
-          if (shortcutIconSize && shortcutIconSize[1] >= 96 && shortcutIconSize[2] >= 96) {
-            hasShortcutIconLargeEnough = true;
-          }
-        }
-      }
-      if (!hasShortcutIconLargeEnough) {
-        imageErrors.push(i18nString(UIStrings.shortcutSShouldIncludeAXPixel, {PH1: shortcutIndex}));
-      }
-      shortcutIndex++;
-    }
 
-    let screenshotIndex = 1;
-    const formFactorScreenshotDimensions = new Map<string, {width: number, height: number}>();
-    let haveScreenshotsDifferentAspectRatio = false;
-    for (const screenshot of screenshots) {
-      const screenshotSection =
-          this.reportView.appendSection(i18nString(UIStrings.screenshotS, {PH1: screenshotIndex}));
-      this.screenshotsSections.push(screenshotSection);
-
-      if (screenshot.form_factor) {
-        screenshotSection.appendFlexedField(i18nString(UIStrings.formFactor), screenshot.form_factor);
-      }
-      if (screenshot.label) {
-        screenshotSection.appendFlexedField(i18nString(UIStrings.label), screenshot.label);
-      }
-      if (screenshot.platform) {
-        screenshotSection.appendFlexedField(i18nString(UIStrings.platform), screenshot.platform);
-      }
-
-      const {imageResourceErrors: screenshotErrors, naturalWidth: width, naturalHeight: height} =
-          await this.appendImageResourceToSection(url, screenshot, screenshotSection, /** isScreenshot= */ true);
-      imageErrors.push(...screenshotErrors);
-
-      if (screenshot.form_factor && width && height) {
-        formFactorScreenshotDimensions.has(screenshot.form_factor) ||
-            formFactorScreenshotDimensions.set(screenshot.form_factor, {width, height});
-        const formFactorFirstScreenshotDimensions = formFactorScreenshotDimensions.get(screenshot.form_factor);
-        if (formFactorFirstScreenshotDimensions) {
-          haveScreenshotsDifferentAspectRatio = haveScreenshotsDifferentAspectRatio ||
-              (width * formFactorFirstScreenshotDimensions.height !==
-               height * formFactorFirstScreenshotDimensions.width);
-        }
-      }
-
-      screenshotIndex++;
-    }
-
-    if (haveScreenshotsDifferentAspectRatio) {
-      warnings.push(i18nString(UIStrings.screenshotsMustHaveSameAspectRatio));
-    }
-
-    const screenshotsForDesktop = screenshots.filter(screenshot => screenshot.form_factor === 'wide');
-    const screenshotsForMobile = screenshots.filter(screenshot => screenshot.form_factor !== 'wide');
+    const identityData = this.processIdentity(parsedManifest, appId, recommendedId);
 
-    if (screenshotsForDesktop.length < 1) {
-      warnings.push(i18nString(UIStrings.noScreenshotsForRicherPWAInstallOnDesktop));
-    }
-    if (screenshotsForMobile.length < 1) {
-      warnings.push(i18nString(UIStrings.noScreenshotsForRicherPWAInstallOnMobile));
-    }
-    if (screenshotsForDesktop.length > 8) {
-      warnings.push(i18nString(UIStrings.tooManyScreenshotsForDesktop));
-    }
-    if (screenshotsForMobile.length > 5) {
-      warnings.push(i18nString(UIStrings.tooManyScreenshotsForMobile));
-    }
-
-    this.installabilitySection.clearContent();
-    this.installabilitySection.element.classList.toggle('hidden', !installabilityErrors.length);
-    const errorMessages = this.getInstallabilityErrorMessages(installabilityErrors);
-    for (const error of errorMessages) {
-      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 msgElement = document.createTextNode(warning);
-      this.errorsSection.appendRow().appendChild(msgElement);
-    }
-    for (const error of imageErrors) {
-      const msgElement = document.createTextNode(error);
-      this.errorsSection.appendRow().appendChild(msgElement);
-    }
-
-    function stringProperty(name: string): string {
-      const value = parsedManifest[name];
-      if (typeof value !== 'string') {
-        return '';
-      }
-      return value;
-    }
-
-    this.windowControlsSection.clearContent();
-    const displayOverride = parsedManifest['display_override'] || [];
-    const hasWco = displayOverride.includes('window-controls-overlay');
+    const presentationData = this.processPresentation(parsedManifest, url);
+    const protocolHandlersData = this.processProtocolHandlers(parsedManifest, url);
 
-    const displayOverrideLink = UI.XLink.XLink.create(
-        'https://developer.mozilla.org/en-US/docs/Web/Manifest/display_override', 'display-override', undefined,
-        undefined, 'display-override');
-    const displayOverrideText = document.createElement('code');
-    displayOverrideText.appendChild(displayOverrideLink);
+    const iconsData = await this.processIcons(parsedManifest, url);
+    const shortcutsData = await this.processShortcuts(parsedManifest, url);
 
-    const wcoStatusMessage = this.windowControlsSection.appendRow();
+    const screenshotsData = await this.processScreenshots(parsedManifest, url);
 
-    if (hasWco) {
-      const checkmarkIcon = IconButton.Icon.create('check-circle', 'inline-icon');
-      wcoStatusMessage.appendChild(checkmarkIcon);
-
-      const wco = document.createElement('code');
-      wco.classList.add('wco');
-      wco.textContent = 'window-controls-overlay';
-      wcoStatusMessage.appendChild(
-          uiI18n.getFormatLocalizedString(str_, UIStrings.wcoFound, {PH1: wco, PH2: displayOverrideText, PH3: link}));
-
-      if (this.overlayModel) {
-        await this.appendWindowControlsToSection(this.overlayModel, url, stringProperty('theme_color'));
-      }
-    } else {
-      const infoIcon = IconButton.Icon.create('info', 'inline-icon');
-
-      wcoStatusMessage.appendChild(infoIcon);
-
-      wcoStatusMessage.appendChild(
-          uiI18n.getFormatLocalizedString(str_, UIStrings.wcoNotFound, {PH1: displayOverrideText}));
-    }
+    const warnings = [
+      ...identityData.warnings,
+      ...shortcutsData.warnings,
+      ...screenshotsData.warnings,
+    ];
 
-    const wcoDocumentationLink = UI.XLink.XLink.create(
-        'https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay',
-        i18nString(UIStrings.customizePwaTitleBar), undefined, undefined, 'customize-pwa-tittle-bar');
-    this.windowControlsSection.appendRow().appendChild(
-        uiI18n.getFormatLocalizedString(str_, UIStrings.wcoNeedHelpReadMore, {PH1: wcoDocumentationLink}));
+    const imageErrors = [
+      ...iconsData.imageResourceErrors,
+      ...shortcutsData.imageResourceErrors,
+      ...screenshotsData.imageResourceErrors,
+    ];
 
-    this.dispatchEventToListeners(Events.MANIFEST_RENDERED);
+    const windowControlsData = await this.processWindowControls(parsedManifest, url);
+    const selectedPlatform = this.overlayModel?.getWindowControlsConfig().selectedPlatform;
+    const onSelectOs = this.overlayModel ?
+        (selectedOS: SDK.OverlayModel.EmulatedOSType) => this.onSelectOs(selectedOS, windowControlsData.themeColor) :
+        undefined;
+    const onToggleWcoToolbar = this.overlayModel ? (enabled: boolean) => this.onToggleWcoToolbar(enabled) : undefined;
+    this.view(
+        {
+          emptyView: this.emptyView,
+          reportView: this.reportView,
+          errorsSection: this.errorsSection,
+          installabilitySection: this.installabilitySection,
+          identitySection: this.identitySection,
+          presentationSection: this.presentationSection,
+          protocolHandlersView: this.protocolHandlersView,
+          iconsSection: this.iconsSection,
+          windowControlsSection: this.windowControlsSection,
+          shortcutSections: this.shortcutSections,
+          screenshotsSections: this.screenshotsSections,
+          parsedManifest,
+          url,
+          identityData,
+          presentationData,
+          protocolHandlersData,
+          iconsData,
+          shortcutsData,
+          screenshotsData,
+          installabilityErrors,
+          warnings,
+          errors,
+          imageErrors,
+          windowControlsData,
+          selectedPlatform,
+          onSelectOs,
+          onToggleWcoToolbar,
+        },
+        undefined, this.contentElement);
   }
 
-  getInstallabilityErrorMessages(installabilityErrors: Protocol.Page.InstallabilityError[]): string[] {
-    const errorMessages = [];
-    for (const installabilityError of installabilityErrors) {
-      let errorMessage;
-      switch (installabilityError.errorId) {
-        case 'not-in-main-frame':
-          errorMessage = i18nString(UIStrings.pageIsNotLoadedInTheMainFrame);
-          break;
-        case 'not-from-secure-origin':
-          errorMessage = i18nString(UIStrings.pageIsNotServedFromASecureOrigin);
-          break;
-        case 'no-manifest':
-          errorMessage = i18nString(UIStrings.pageHasNoManifestLinkUrl);
-          break;
-        case 'manifest-empty':
-          errorMessage = i18nString(UIStrings.manifestCouldNotBeFetchedIsEmpty);
-          break;
-        case 'start-url-not-valid':
-          errorMessage = i18nString(UIStrings.manifestStartUrlIsNotValid);
-          break;
-        case 'manifest-missing-name-or-short-name':
-          errorMessage = i18nString(UIStrings.manifestDoesNotContainANameOr);
-          break;
-        case 'manifest-display-not-supported':
-          errorMessage = i18nString(UIStrings.manifestDisplayPropertyMustBeOne);
-          break;
-        case 'manifest-missing-suitable-icon':
-          if (installabilityError.errorArguments.length !== 1 ||
-              installabilityError.errorArguments[0].name !== 'minimum-icon-size-in-pixels') {
-            console.error('Installability error does not have the correct errorArguments');
-            break;
-          }
-          errorMessage =
-              i18nString(UIStrings.manifestDoesNotContainASuitable, {PH1: installabilityError.errorArguments[0].value});
-          break;
-        case 'no-acceptable-icon':
-          if (installabilityError.errorArguments.length !== 1 ||
-              installabilityError.errorArguments[0].name !== 'minimum-icon-size-in-pixels') {
-            console.error('Installability error does not have the correct errorArguments');
-            break;
-          }
-          errorMessage = i18nString(
-              UIStrings.noSuppliedIconIsAtLeastSpxSquare, {PH1: installabilityError.errorArguments[0].value});
-          break;
-        case 'cannot-download-icon':
-          errorMessage = i18nString(UIStrings.couldNotDownloadARequiredIcon);
-          break;
-        case 'no-icon-available':
-          errorMessage = i18nString(UIStrings.downloadedIconWasEmptyOr);
-          break;
-        case 'platform-not-supported-on-android':
-          errorMessage = i18nString(UIStrings.theSpecifiedApplicationPlatform);
-          break;
-        case 'no-id-specified':
-          errorMessage = i18nString(UIStrings.noPlayStoreIdProvided);
-          break;
-        case 'ids-do-not-match':
-          errorMessage = i18nString(UIStrings.thePlayStoreAppUrlAndPlayStoreId);
-          break;
-        case 'already-installed':
-          errorMessage = i18nString(UIStrings.theAppIsAlreadyInstalled);
-          break;
-        case 'url-not-supported-for-webapk':
-          errorMessage = i18nString(UIStrings.aUrlInTheManifestContainsA);
-          break;
-        case 'in-incognito':
-          errorMessage = i18nString(UIStrings.pageIsLoadedInAnIncognitoWindow);
-          break;
-        case 'not-offline-capable':
-          errorMessage = i18nString(UIStrings.pageDoesNotWorkOffline);
-          break;
-        case 'no-url-for-service-worker':
-          errorMessage = i18nString(UIStrings.couldNotCheckServiceWorker);
-          break;
-        case 'prefer-related-applications':
-          errorMessage = i18nString(UIStrings.manifestSpecifies);
-          break;
-        case 'prefer-related-applications-only-beta-stable':
-          errorMessage = i18nString(UIStrings.preferrelatedapplicationsIsOnly);
-          break;
-        case 'manifest-display-override-not-supported':
-          errorMessage = i18nString(UIStrings.manifestContainsDisplayoverride);
-          break;
-        case 'warn-not-offline-capable':
-          errorMessage = i18nString(
-              UIStrings.pageDoesNotWorkOfflineThePage,
-              {PH1: 'https://developer.chrome.com/blog/improved-pwa-offline-detection/'});
-          break;
-        default:
-          console.error(`Installability error id '${installabilityError.errorId}' is not recognized`);
-          break;
-      }
-      if (errorMessage) {
-        errorMessages.push(errorMessage);
-      }
+  private stringProperty(parsedManifest: Manifest, name: keyof Manifest): string {
+    const value = parsedManifest[name];
+    if (typeof value !== 'string') {
+      return '';
     }
-    return errorMessages;
+    return value;
   }
 
   private async loadImage(url: Platform.DevToolsPath.UrlString): Promise<{
-    image: HTMLImageElement,
-    wrapper: Element,
+    naturalWidth: number,
+    naturalHeight: number,
+    src: string,
   }|null> {
     const frameId = this.resourceTreeModel?.mainFrame?.id;
     if (!this.target) {
@@ -1081,8 +1396,6 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
           initiatorUrl: this.target.inspectedURL(),
         },
         /* isBinary=*/ true);
-    const wrapper = document.createElement('div');
-    wrapper.classList.add('image-wrapper');
     const image = document.createElement('img');
     const result = new Promise((resolve, reject) => {
       image.onload = resolve;
@@ -1092,11 +1405,9 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
     // does not work, we can parse mimeType out of the response headers
     // using front_end/core/platform/MimeType.ts.
     image.src = 'data:application/octet-stream;base64,' + await Common.Base64.encode(content);
-    image.alt = i18nString(UIStrings.imageFromS, {PH1: url});
-    wrapper.appendChild(image);
     try {
       await result;
-      return {wrapper, image};
+      return {naturalWidth: image.naturalWidth, naturalHeight: image.naturalHeight, src: image.src};
     } catch {
     }
     return null;
@@ -1128,17 +1439,17 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   checkSizeProblem(
-      size: ParsedSize, image: HTMLImageElement, resourceName: Platform.UIString.LocalizedString,
+      size: ParsedSize, naturalWidth: number, naturalHeight: number, resourceName: Platform.UIString.LocalizedString,
       imageUrl: string): {hasSquareSize: boolean, error?: Platform.UIString.LocalizedString} {
     if ('any' in size) {
-      return {hasSquareSize: image.naturalWidth === image.naturalHeight};
+      return {hasSquareSize: naturalWidth === naturalHeight};
     }
     const hasSquareSize = size.width === size.height;
-    if (image.naturalWidth !== size.width && image.naturalHeight !== size.height) {
+    if (naturalWidth !== size.width && naturalHeight !== size.height) {
       return {
         error: i18nString(UIStrings.actualSizeSspxOfSSDoesNotMatch, {
-          PH1: image.naturalWidth,
-          PH2: image.naturalHeight,
+          PH1: naturalWidth,
+          PH2: naturalHeight,
           PH3: resourceName,
           PH4: imageUrl,
           PH5: size.width,
@@ -1147,35 +1458,29 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
         hasSquareSize,
       };
     }
-    if (image.naturalWidth !== size.width) {
+    if (naturalWidth !== size.width) {
       return {
         error: i18nString(
             UIStrings.actualWidthSpxOfSSDoesNotMatch,
-            {PH1: image.naturalWidth, PH2: resourceName, PH3: imageUrl, PH4: size.width}),
+            {PH1: naturalWidth, PH2: resourceName, PH3: imageUrl, PH4: size.width}),
         hasSquareSize,
       };
     }
-    if (image.naturalHeight !== size.height) {
+    if (naturalHeight !== size.height) {
       return {
         error: i18nString(
             UIStrings.actualHeightSpxOfSSDoesNotMatch,
-            {PH1: image.naturalHeight, PH2: resourceName, PH3: imageUrl, PH4: size.height}),
+            {PH1: naturalHeight, PH2: resourceName, PH3: imageUrl, PH4: size.height}),
         hasSquareSize,
       };
     }
     return {hasSquareSize};
   }
 
-  private async appendImageResourceToSection(
-      // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      baseUrl: Platform.DevToolsPath.UrlString, imageResource: any, section: UI.ReportView.Section,
-      isScreenshot: boolean): Promise<{
-    imageResourceErrors: Platform.UIString.LocalizedString[],
-    squareSizedIconAvailable?: boolean,
-    naturalWidth?: number,
-    naturalHeight?: number,
-  }> {
+  private async processImageResource(
+      baseUrl: Platform.DevToolsPath.UrlString,
+      imageResource: any,  // eslint-disable-line @typescript-eslint/no-explicit-any
+      isScreenshot: boolean): Promise<ProcessedImageResource> {
     const imageResourceErrors: Platform.UIString.LocalizedString[] = [];
     const resourceName = isScreenshot ? i18nString(UIStrings.screenshot) : i18nString(UIStrings.icon);
     if (!imageResource.src) {
@@ -1186,18 +1491,16 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
     if (!imageUrl) {
       imageResourceErrors.push(
           i18nString(UIStrings.sUrlSFailedToParse, {PH1: resourceName, PH2: imageResource['src']}));
-      return {imageResourceErrors};
+      return {imageResourceErrors, imageUrl: imageResource['src']};
     }
     const result = await this.loadImage(imageUrl);
     if (!result) {
       imageResourceErrors.push(i18nString(UIStrings.sSFailedToLoad, {PH1: resourceName, PH2: imageUrl}));
-      return {imageResourceErrors};
+      return {imageResourceErrors, imageUrl};
     }
-    const {wrapper, image} = result;
-    const {naturalWidth, naturalHeight} = image;
+    const {src, naturalWidth, naturalHeight} = result;
     const sizes = this.parseSizes(imageResource['sizes'], resourceName, imageUrl, imageResourceErrors);
     const title = sizes.map(x => x.formatted).join(' ') + '\n' + (imageResource['type'] || '');
-    const field = section.appendFlexedField(title);
     let squareSizedIconAvailable = false;
     if (!imageResource.sizes) {
       imageResourceErrors.push(i18nString(UIStrings.sSDoesNotSpecifyItsSizeInThe, {PH1: resourceName, PH2: imageUrl}));
@@ -1206,13 +1509,13 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
         imageResourceErrors.push(i18nString(UIStrings.screenshotPixelSize, {url: imageUrl}));
       }
       for (const size of sizes) {
-        const {error, hasSquareSize} = this.checkSizeProblem(size, image, resourceName, imageUrl);
+        const {error, hasSquareSize} = this.checkSizeProblem(size, naturalWidth, naturalHeight, resourceName, imageUrl);
         squareSizedIconAvailable = squareSizedIconAvailable || hasSquareSize;
         if (error) {
           imageResourceErrors.push(error);
         } else if (isScreenshot) {
-          const width = 'any' in size ? image.naturalWidth : size.width;
-          const height = 'any' in size ? image.naturalHeight : size.height;
+          const width = 'any' in size ? naturalWidth : size.width;
+          const height = 'any' in size ? naturalHeight : size.height;
           if (width < 320 || height < 320) {
             imageResourceErrors.push(
                 i18nString(UIStrings.sSSizeShouldBeAtLeast320, {PH1: resourceName, PH2: imageUrl}));
@@ -1229,66 +1532,249 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
         }
       }
     }
-    image.width = image.naturalWidth;
 
     const purpose = typeof imageResource['purpose'] === 'string' ? imageResource['purpose'].toLowerCase() : '';
     if (purpose.includes('any') && purpose.includes('maskable')) {
       imageResourceErrors.push(i18nString(UIStrings.avoidPurposeAnyAndMaskable));
     }
 
-    field.appendChild(wrapper);
-    return {imageResourceErrors, squareSizedIconAvailable, naturalWidth, naturalHeight};
+    return {
+      imageResourceErrors,
+      squareSizedIconAvailable,
+      naturalWidth,
+      naturalHeight,
+      title,
+      imageSrc: src,
+      imageUrl,
+    };
+  }
+
+  private async onToggleWcoToolbar(enabled: boolean): Promise<void> {
+    this.wcoToolbarEnabled = enabled;
+    if (this.overlayModel) {
+      await this.overlayModel.toggleWindowControlsToolbar(this.wcoToolbarEnabled);
+    }
   }
 
-  private async appendWindowControlsToSection(
-      overlayModel: SDK.OverlayModel.OverlayModel, url: Platform.DevToolsPath.UrlString,
-      themeColor: string): Promise<void> {
-    const wcoStyleSheetText = await overlayModel.hasStyleSheetText(url);
+  private async onSelectOs(selectedOS: SDK.OverlayModel.EmulatedOSType, themeColor: string): Promise<void> {
+    if (this.overlayModel) {
+      this.overlayModel.setWindowControlsPlatform(selectedOS);
+      this.overlayModel.setWindowControlsThemeColor(themeColor);
+      await this.overlayModel.toggleWindowControlsToolbar(this.wcoToolbarEnabled);
+    }
+  }
 
-    if (!wcoStyleSheetText) {
-      return;
+  private processIdentity(parsedManifest: Manifest, appId: string|null, recommendedId: string|null):
+      IdentitySectionData {
+    const description = this.stringProperty(parsedManifest, 'description');
+    const warnings: Platform.UIString.LocalizedString[] = [];
+    // See https://crbug.com/1354304 for details.
+    if (description.length > 300) {
+      warnings.push(i18nString(UIStrings.descriptionMayBeTruncated));
     }
+    return {
+      name: this.stringProperty(parsedManifest, 'name'),
+      shortName: this.stringProperty(parsedManifest, 'short_name'),
+      description: this.stringProperty(parsedManifest, 'description'),
+      appId,
+      recommendedId,
+      hasId: Boolean(this.stringProperty(parsedManifest, 'id')),
+      warnings,
+    };
+  }
 
-    await overlayModel.toggleWindowControlsToolbar(false);
+  private async processIcons(parsedManifest: Manifest, url: Platform.DevToolsPath.UrlString):
+      Promise<IconsSectionData> {
+    const icons = parsedManifest['icons'] || [];
+    const imageErrors: Platform.UIString.LocalizedString[] = [];
+    const processedIcons: ProcessedImageResource[] = [];
+    let squareSizedIconAvailable = false;
 
-    const wcoOsCheckbox =
-        UI.UIUtils.CheckboxLabel.create(i18nString(UIStrings.selectWindowControlsOverlayEmulationOs), false);
+    for (const icon of icons) {
+      const result = await this.processImageResource(url, icon, /** isScreenshot= */ false);
+      processedIcons.push(result);
+      imageErrors.push(...result.imageResourceErrors);
 
-    wcoOsCheckbox.addEventListener('click', async () => {
-      await this.overlayModel?.toggleWindowControlsToolbar(wcoOsCheckbox.checked);
-    });
+      if (result.squareSizedIconAvailable) {
+        squareSizedIconAvailable = true;
+      }
+    }
 
-    const osSelectElement = wcoOsCheckbox.createChild('select');
-    osSelectElement.appendChild(UI.UIUtils.createOption('Windows', SDK.OverlayModel.EmulatedOSType.WINDOWS, 'windows'));
-    osSelectElement.appendChild(UI.UIUtils.createOption('macOS', SDK.OverlayModel.EmulatedOSType.MAC, 'macos'));
-    osSelectElement.appendChild(UI.UIUtils.createOption('Linux', SDK.OverlayModel.EmulatedOSType.LINUX, 'linux'));
-    osSelectElement.selectedIndex = 0;
+    const processedIconsByTitle = Map.groupBy(
+        processedIcons.filter((icon): icon is ProcessedImageResource&{title: string} => 'title' in icon),
+        img => img.title,
+    );
 
-    if (this.overlayModel) {
-      osSelectElement.value = this.overlayModel?.getWindowControlsConfig().selectedPlatform;
+    if (!squareSizedIconAvailable) {
+      imageErrors.push(i18nString(UIStrings.sSShouldHaveSquareIcon));
+    }
+    return {icons: processedIconsByTitle, imageResourceErrors: imageErrors};
+  }
+
+  private async processShortcuts(parsedManifest: Manifest, url: Platform.DevToolsPath.UrlString):
+      Promise<ShortcutsSectionData> {
+    const shortcuts = parsedManifest['shortcuts'] || [];
+    const processedShortcuts: ProcessedShortcut[] = [];
+
+    const warnings: Platform.UIString.LocalizedString[] = [];
+    const imageErrors: Platform.UIString.LocalizedString[] = [];
+
+    if (shortcuts.length > 4) {
+      warnings.push(i18nString(UIStrings.shortcutsMayBeNotAvailable));
     }
 
-    osSelectElement.addEventListener('change', async () => {
-      const selectedOS =
-          osSelectElement.options[osSelectElement.selectedIndex].value as SDK.OverlayModel.EmulatedOSType;
-      if (this.overlayModel) {
-        this.overlayModel.setWindowControlsPlatform(selectedOS);
-        await this.overlayModel.toggleWindowControlsToolbar(wcoOsCheckbox.checked);
+    let shortcutIndex = 1;
+    for (const shortcut of shortcuts) {
+      const shortcutUrl = Common.ParsedURL.ParsedURL.completeURL(url, shortcut.url) as Platform.DevToolsPath.UrlString;
+      const shortcutIcons = shortcut.icons || [];
+      const processedIcons: ProcessedImageResource[] = [];
+      let hasShortcutIconLargeEnough = false;
+
+      for (const shortcutIcon of shortcutIcons) {
+        const result = await this.processImageResource(url, shortcutIcon, /** isScreenshot= */ false);
+        processedIcons.push(result);
+        imageErrors.push(...result.imageResourceErrors);
+
+        if (!hasShortcutIconLargeEnough && shortcutIcon.sizes) {
+          const shortcutIconSize = shortcutIcon.sizes.match(/^(\d+)x(\d+)$/);
+          if (shortcutIconSize && Number(shortcutIconSize[1]) >= 96 && Number(shortcutIconSize[2]) >= 96) {
+            hasShortcutIconLargeEnough = true;
+          }
+        }
       }
-    });
 
-    this.windowControlsSection.appendRow().appendChild(wcoOsCheckbox);
+      const iconsByTitle = Map.groupBy(
+          processedIcons.filter(icon => 'title' in icon),
+          img => img.title,
+      );
+
+      processedShortcuts.push({
+        name: shortcut.name,
+        shortName: shortcut.short_name,
+        description: shortcut.description,
+        url: shortcut.url,
+        shortcutUrl,
+        icons: iconsByTitle,
+      });
+
+      if (!hasShortcutIconLargeEnough) {
+        imageErrors.push(i18nString(UIStrings.shortcutSShouldIncludeAXPixel, {PH1: shortcutIndex}));
+      }
+      shortcutIndex++;
+    }
+    return {shortcuts: processedShortcuts, warnings, imageResourceErrors: imageErrors};
+  }
+
+  private async processScreenshots(parsedManifest: Manifest, url: Platform.DevToolsPath.UrlString):
+      Promise<ScreenshotsSectionData> {
+    const screenshots: Screenshot[] = parsedManifest['screenshots'] || [];
+    const processedScreenshots: ProcessedScreenshot[] = [];
+
+    const warnings: Platform.UIString.LocalizedString[] = [];
+    const imageErrors: Platform.UIString.LocalizedString[] = [];
+
+    let haveScreenshotsDifferentAspectRatio = false;
+    const formFactorScreenshotDimensions = new Map<string, {width: number, height: number}>();
+    for (const screenshot of screenshots) {
+      const result = await this.processImageResource(url, screenshot, /** isScreenshot= */ true);
+      processedScreenshots.push({screenshot, processedImage: result});
+      imageErrors.push(...result.imageResourceErrors);
+
+      if (screenshot.form_factor && 'naturalWidth' in result) {
+        const width = result.naturalWidth;
+        const height = result.naturalHeight;
+        formFactorScreenshotDimensions.has(screenshot.form_factor) ||
+            formFactorScreenshotDimensions.set(screenshot.form_factor, {width, height});
+        const formFactorFirstScreenshotDimensions = formFactorScreenshotDimensions.get(screenshot.form_factor);
+        if (formFactorFirstScreenshotDimensions) {
+          haveScreenshotsDifferentAspectRatio = haveScreenshotsDifferentAspectRatio ||
+              (width * formFactorFirstScreenshotDimensions.height !==
+               height * formFactorFirstScreenshotDimensions.width);
+        }
+      }
+    }
+
+    if (haveScreenshotsDifferentAspectRatio) {
+      warnings.push(i18nString(UIStrings.screenshotsMustHaveSameAspectRatio));
+    }
+
+    const screenshotsForDesktop = screenshots.filter(screenshot => screenshot.form_factor === 'wide');
+    const screenshotsForMobile = screenshots.filter(screenshot => screenshot.form_factor !== 'wide');
+
+    if (screenshotsForDesktop.length < 1) {
+      warnings.push(i18nString(UIStrings.noScreenshotsForRicherPWAInstallOnDesktop));
+    }
+    if (screenshotsForMobile.length < 1) {
+      warnings.push(i18nString(UIStrings.noScreenshotsForRicherPWAInstallOnMobile));
+    }
+    if (screenshotsForDesktop.length > 8) {
+      warnings.push(i18nString(UIStrings.tooManyScreenshotsForDesktop));
+    }
+    if (screenshotsForMobile.length > 5) {
+      warnings.push(i18nString(UIStrings.tooManyScreenshotsForMobile));
+    }
+
+    return {screenshots: processedScreenshots, warnings, imageResourceErrors: imageErrors};
+  }
+
+  private async processWindowControls(parsedManifest: Manifest, url: Platform.DevToolsPath.UrlString):
+      Promise<WindowControlsSectionData> {
+    const displayOverride = parsedManifest['display_override'] || [];
+    const hasWco = displayOverride.includes('window-controls-overlay');
+    const themeColor = this.stringProperty(parsedManifest, 'theme_color');
+    let wcoStyleSheetText = false;
+    if (this.overlayModel) {
+      wcoStyleSheetText = await this.overlayModel.hasStyleSheetText(url);
+    }
+    return {
+      hasWco,
+      themeColor,
+      wcoStyleSheetText,
+      url,
+    };
+  }
+
+  private processPresentation(parsedManifest: Manifest, url: Platform.DevToolsPath.UrlString): PresentationSectionData {
+    const startURL = this.stringProperty(parsedManifest, 'start_url');
+    const completeURL = startURL ? Common.ParsedURL.ParsedURL.completeURL(url, startURL) : null;
+    const themeColorString = this.stringProperty(parsedManifest, 'theme_color');
+    const themeColor = themeColorString ? Common.Color.parse(themeColorString) ?? Common.Color.parse('white') : null;
+    const backgroundColorString = this.stringProperty(parsedManifest, 'background_color');
+    const backgroundColor =
+        backgroundColorString ? Common.Color.parse(backgroundColorString) ?? Common.Color.parse('white') : null;
+    const noteTaking = parsedManifest['note_taking'] || {};
+    const newNoteUrl = noteTaking['new_note_url'];
+    const hasNewNoteUrl = typeof newNoteUrl === 'string';
+    const completeNewNoteUrl = hasNewNoteUrl ?
+        (Common.ParsedURL.ParsedURL.completeURL(url, newNoteUrl) as Platform.DevToolsPath.UrlString) :
+        null;
+
+    return {
+      startUrl: startURL,
+      completeStartUrl: completeURL,
+      themeColor,
+      backgroundColor,
+      orientation: this.stringProperty(parsedManifest, 'orientation'),
+      display: this.stringProperty(parsedManifest, 'display'),
+      newNoteUrl,
+      hasNewNoteUrl,
+      completeNewNoteUrl,
+    };
+  }
 
-    overlayModel.setWindowControlsThemeColor(themeColor);
+  private processProtocolHandlers(parsedManifest: Manifest, url: Platform.DevToolsPath.UrlString):
+      ProtocolHandlersSectionData {
+    return {
+      protocolHandlers: parsedManifest['protocol_handlers'] || [],
+      manifestLink: url,
+    };
   }
 }
 
 export const enum Events {
   MANIFEST_DETECTED = 'ManifestDetected',
-  MANIFEST_RENDERED = 'ManifestRendered',
 }
 
 export interface EventTypes {
   [Events.MANIFEST_DETECTED]: boolean;
-  [Events.MANIFEST_RENDERED]: void;
 }