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);