DevTools: Improve warnings for web app manifest

This CL:

* Adds a warning that Richer PWA Install UI will not be available on
desktop/mobile unless at least one screenshot with a suitable
"form_factor" is added.

* Adds displaying of "form_factor", "platform", and "label" properties
for screenshots.

* Adds a warning that no more than 8 on desktop and no more than 5 on
mobile screenshots will be displayed. The rest will be ignored.

* Adds a waring that the maximum number of shortcuts on various
platforms vary. Some shortcuts may be not available.

* Makes labels for "name", "short_name", "description", and "url"
properties for shortcuts localizable.

Bug: 1474633
Change-Id: I60df035da02b627eb097010063084bfc80257458
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4799869
Reviewed-by: Dibyajyoti Pal <dibyapal@chromium.org>
Reviewed-by: Wolfgang Beyer <wolfi@chromium.org>
Commit-Queue: Wolfgang Beyer <wolfi@chromium.org>
Reviewed-by: Glenn Hartmann <hartmanng@chromium.org>
Reviewed-by: Vincent Scheib <scheib@chromium.org>

diff --git a/front_end/panels/application/AppManifestView.ts b/front_end/panels/application/AppManifestView.ts
index 36b6d07..f732594 100644
--- a/front_end/panels/application/AppManifestView.ts
+++ b/front_end/panels/application/AppManifestView.ts

@@ -47,14 +47,18 @@
    */
   windowControlsOverlay: 'Window Controls Overlay',
   /**
-   *@description Text for the name of something
+   *@description Label in the App Manifest View for the "name" property of web app or shortcut item
    */
   name: 'Name',
   /**
-   *@description Text in App Manifest View of the Application panel
+   *@description Label in the App Manifest View for the "short_name" property of web app or shortcut item
    */
   shortName: 'Short name',
   /**
+   *@description Label in the App Manifest View for the "url" property of shortcut item
+   */
+  url: 'URL',
+  /**
    *@description Label in the App Manifest View for the Computed App Id
    */
   computedAppId: 'Computed App Id',
@@ -92,7 +96,7 @@
    */
   copiedToClipboard: 'Copied suggested ID {PH1} to clipboard',
   /**
-   *@description Text for the description of something
+   *@description Label in the App Manifest View for the "description" property of web app or shortcut item
    */
   description: 'Description',
   /**
@@ -135,6 +139,11 @@
    */
   descriptionMayBeTruncated: 'Description may be truncated.',
   /**
+   *@description Warning text about too many shortcuts
+   */
+  shortcutsMayBeNotAvailable:
+      'The maximum number of shortcuts is platform dependent. Some shortcuts may be not available.',
+  /**
    *@description Text in App Manifest View of the Application panel
    */
   showOnlyTheMinimumSafeAreaFor: 'Show only the minimum safe area for maskable icons',
@@ -278,6 +287,18 @@
    */
   screenshot: 'Screenshot',
   /**
+   *@description Label in the App Manifest View for the "form_factor" property of screenshot
+   */
+  formFactor: 'Form factor',
+  /**
+   *@description Label in the App Manifest View for the "label" property of screenshot
+   */
+  label: 'Label',
+  /**
+   *@description Label in the App Manifest View for the "platform" property of screenshot
+   */
+  platform: 'Platform',
+  /**
    *@description Text in App Manifest View of the Application panel
    */
   icon: 'Icon',
@@ -375,6 +396,24 @@
   screenshotPixelSize:
       'Screenshot {url} should specify a pixel size `[width]x[height]` instead of `"any"` as first size.',
   /**
+   *@description Warning text about screenshots for Richer PWA Install UI on desktop
+   */
+  noScreenshotsForRicherPWAInstallOnDesktop:
+      'Richer PWA Install UI won’t be available on desktop. Please add at least one screenshot with the "form_factor" set to "wide".',
+  /**
+   *@description Warning text about screenshots for Richer PWA Install UI on mobile
+   */
+  noScreenshotsForRicherPWAInstallOnMobile:
+      'Richer PWA Install UI won’t be available on mobile. Please add at least one screenshot for which "form_factor" is not set or set to a value other than "wide".',
+  /**
+   *@description Warning text about too many screenshots for desktop
+   */
+  tooManyScreenshotsForDesktop: 'No more than 8 screenshots will be displayed on desktop. The rest will be ignored.',
+  /**
+   *@description Warning text about too many screenshots for mobile
+   */
+  tooManyScreenshotsForMobile: 'No more than 5 screenshots will be displayed on mobile. The rest will be ignored.',
+  /**
    *@description Message for Window Controls Overlay value succsessfully found with links to documnetation
    *@example {window-controls-overlay} PH1
    *@example {https://developer.mozilla.org/en-US/docs/Web/Manifest/display_override} PH2
@@ -409,6 +448,15 @@
   formatted: string,
 };
 
+type Screenshot = {
+  src: string,
+  type?: string,
+  sizes?: string,
+  label?: string,
+  form_factor?: string,  // eslint-disable-line @typescript-eslint/naming-convention
+  platform?: string,
+};
+
 export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager.Observer {
   private readonly emptyView: UI.EmptyWidget.EmptyWidget;
   private readonly reportView: UI.ReportView.ReportView;
@@ -756,7 +804,7 @@
       shortcutsSection.detach(/** overrideHideOnDetach= */ true);
     }
 
-    const screenshots = parsedManifest['screenshots'] || [];
+    const screenshots: Screenshot[] = parsedManifest['screenshots'] || [];
     for (const screenshotSection of this.screenshotsSections) {
       screenshotSection.detach(/** overrideHideOnDetach= */ true);
     }
@@ -784,19 +832,23 @@
       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}));
       this.shortcutSections.push(shortcutSection);
 
-      shortcutSection.appendFlexedField('Name', shortcut.name);
+      shortcutSection.appendFlexedField(i18nString(UIStrings.name), shortcut.name);
       if (shortcut.short_name) {
-        shortcutSection.appendFlexedField('Short name', shortcut.short_name);
+        shortcutSection.appendFlexedField(i18nString(UIStrings.shortName), shortcut.short_name);
       }
       if (shortcut.description) {
-        shortcutSection.appendFlexedField('Description', shortcut.description);
+        shortcutSection.appendFlexedField(i18nString(UIStrings.description), shortcut.description);
       }
-      const urlField = shortcutSection.appendFlexedField('URL');
+      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));
@@ -827,12 +879,39 @@
       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} =
           await this.appendImageResourceToSection(url, screenshot, screenshotSection, /** isScreenshot= */ true);
       imageErrors.push(...screenshotErrors);
       screenshotIndex++;
     }
 
+    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));
+    }
+
     this.installabilitySection.clearContent();
     this.installabilitySection.element.classList.toggle('hidden', !installabilityErrors.length);
     const errorMessages = this.getInstallabilityErrorMessages(installabilityErrors);