App Id: move explainer note from tooltip into main UI

Screenshot: https://i.imgur.com/egg72jf.png Bug: 1222571 Change-Id: I41b30942273f3cad73e3bd843cba9d1e56b0b8b2 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3172980 Commit-Queue: Wolfgang Beyer <wolfi@chromium.org> Reviewed-by: Simon Zünd <szuend@chromium.org> Reviewed-by: Phillis Tang <phillis@chromium.org>
2026-10-07 04:26:32 +08:00 · 2021-09-22 13:19:31 +00:00
parent 574cf2dc19
commit cd7c3815fe
8 changed files with 86 additions and 86 deletions
@@ -52,7 +52,6 @@ grd_files_release_sources = [
  "front_end/Images/elements_panel_icon.svg",
  "front_end/Images/errorWave.svg",
  "front_end/Images/error_icon.svg",
-  "front_end/Images/exclamation_mark_circle_icon.svg",
  "front_end/Images/feedback_thin_16x16_icon.svg",
  "front_end/Images/flex-direction-icon.svg",
  "front_end/Images/flex-nowrap-icon.svg",
@@ -64,7 +64,6 @@ devtools_svg_sources = [
  "elements_panel_icon.svg",
  "errorWave.svg",
  "error_icon.svg",
-  "exclamation_mark_circle_icon.svg",
  "feedback_thin_16x16_icon.svg",
  "flex-direction-icon.svg",
  "flex-nowrap-icon.svg",
@@ -1,65 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="90.708664"
-   height="90.708664"
-   viewBox="0 0 24 24"
-   version="1.1"
-   id="svg231"
-   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
-   sodipodi:docname="exclamation-mark-circle-icon.svg">
-  <defs
-     id="defs225" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="9.162384"
-     inkscape:cx="28.346432"
-     inkscape:cy="50.174849"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
-     inkscape:document-rotation="0"
-     showgrid="false"
-     units="px"
-     inkscape:window-width="1506"
-     inkscape:window-height="967"
-     inkscape:window-x="292"
-     inkscape:window-y="462"
-     inkscape:window-maximized="0" />
-  <metadata
-     id="metadata228">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(120.66889,143.34748)">
-    <g
-       transform="matrix(1.3333333,0,0,1.3333333,-119.33556,-142.01415)"
-       id="g249"
-       style="fill:#000000">
-      <path
-         d="m 7.25,10.25 h 1.5 v 1.5 h -1.5 z m 0,-6 h 1.5 v 4.5 H 7.25 Z M 7.9925,0.5 C 3.8525,0.5 0.5,3.86 0.5,8 c 0,4.14 3.3525,7.5 7.4925,7.5 C 12.14,15.5 15.5,12.14 15.5,8 15.5,3.86 12.14,0.5 7.9925,0.5 Z M 8,14 C 4.685,14 2,11.315 2,8 2,4.685 4.685,2 8,2 c 3.315,0 6,2.685 6,6 0,3.315 -2.685,6 -6,6 z"
-         id="path237" />
-    </g>
-  </g>
-</svg>
@@ -2103,7 +2103,7 @@
    "message": "This is used by the browser to know whether the manifest should be updating an existing application, or whether it refers to a new web app that can be installed."
  },
  "panels/application/AppManifestView.ts | appIdNote": {
-    "message": "Note: 'id' is not specified in the manifest, 'start_url' is used instead. To specify an App Id that matches the current identity, set the 'id' field to ''{PH1}''."
+    "message": "{PH1} {PH2} is not specified in the manifest, {PH3} is used instead. To specify an App Id that matches the current identity, set the {PH4} field to {PH5} {PH6}."
  },
  "panels/application/AppManifestView.ts | appManifest": {
    "message": "App Manifest"
@@ -2117,6 +2117,9 @@
  "panels/application/AppManifestView.ts | backgroundColor": {
    "message": "Background color"
  },
+  "panels/application/AppManifestView.ts | copyToClipboard": {
+    "message": "Copy to clipboard"
+  },
  "panels/application/AppManifestView.ts | couldNotCheckServiceWorker": {
    "message": "Could not check service worker without a 'start_url' field in the manifest"
  },
@@ -2156,6 +2159,9 @@
  "panels/application/AppManifestView.ts | installability": {
    "message": "Installability"
  },
+  "panels/application/AppManifestView.ts | learnMore": {
+    "message": "Learn more"
+  },
  "panels/application/AppManifestView.ts | manifestContainsDisplayoverride": {
    "message": "Manifest contains 'display_override' field, and the first supported display mode must be one of 'standalone', 'fullscreen', or 'minimal-ui'"
  },
@@ -2198,6 +2204,9 @@
  "panels/application/AppManifestView.ts | noSuppliedIconIsAtLeastSpxSquare": {
    "message": "No supplied icon is at least {PH1} pixels square in PNG, SVG or WebP format, with the purpose attribute unset or set to \"any\"."
  },
+  "panels/application/AppManifestView.ts | note": {
+    "message": "Note:"
+  },
  "panels/application/AppManifestView.ts | orientation": {
    "message": "Orientation"
  },
@@ -2103,7 +2103,7 @@
    "message": "T̂h́îś îś ûśêd́ b̂ý t̂h́ê b́r̂óŵśêŕ t̂ó k̂ńôẃ ŵh́êt́ĥér̂ t́ĥé m̂án̂íf̂éŝt́ ŝh́ôúl̂d́ b̂é ûṕd̂át̂ín̂ǵ âń êx́îśt̂ín̂ǵ âṕp̂ĺîćât́îón̂, ór̂ ẃĥét̂h́êŕ ît́ r̂éf̂ér̂ś t̂ó â ńêẃ ŵéb̂ áp̂ṕ t̂h́ât́ ĉán̂ b́ê ín̂śt̂ál̂ĺêd́."
  },
  "panels/application/AppManifestView.ts | appIdNote": {
-    "message": "N̂ót̂é: 'îd́' îś n̂ót̂ śp̂éĉíf̂íêd́ îń t̂h́ê ḿâńîf́êśt̂, 'śt̂ár̂t́_ûŕl̂' íŝ úŝéd̂ ín̂śt̂éâd́. T̂ó ŝṕêćîf́ŷ án̂ Áp̂ṕ Îd́ t̂h́ât́ m̂át̂ćĥéŝ t́ĥé ĉúr̂ŕêńt̂ íd̂én̂t́ît́ŷ, śêt́ t̂h́ê 'íd̂' f́îél̂d́ t̂ó ''{PH1}''."
+    "message": "{PH1} {PH2} îś n̂ót̂ śp̂éĉíf̂íêd́ îń t̂h́ê ḿâńîf́êśt̂, {PH3} íŝ úŝéd̂ ín̂śt̂éâd́. T̂ó ŝṕêćîf́ŷ án̂ Áp̂ṕ Îd́ t̂h́ât́ m̂át̂ćĥéŝ t́ĥé ĉúr̂ŕêńt̂ íd̂én̂t́ît́ŷ, śêt́ t̂h́ê {PH4} f́îél̂d́ t̂ó {PH5} {PH6}."
  },
  "panels/application/AppManifestView.ts | appManifest": {
    "message": "Âṕp̂ Ḿâńîf́êśt̂"
@@ -2117,6 +2117,9 @@
  "panels/application/AppManifestView.ts | backgroundColor": {
    "message": "B̂áĉḱĝŕôún̂d́ ĉól̂ór̂"
  },
+  "panels/application/AppManifestView.ts | copyToClipboard": {
+    "message": "Ĉóp̂ý t̂ó ĉĺîṕb̂óâŕd̂"
+  },
  "panels/application/AppManifestView.ts | couldNotCheckServiceWorker": {
    "message": "Ĉóûĺd̂ ńôt́ ĉh́êćk̂ service worker ẃît́ĥóût́ â 'start_url' f́îél̂d́ îń t̂h́ê ḿâńîf́êśt̂"
  },
@@ -2156,6 +2159,9 @@
  "panels/application/AppManifestView.ts | installability": {
    "message": "Îńŝt́âĺl̂áb̂íl̂ít̂ý"
  },
+  "panels/application/AppManifestView.ts | learnMore": {
+    "message": "L̂éâŕn̂ ḿôŕê"
+  },
  "panels/application/AppManifestView.ts | manifestContainsDisplayoverride": {
    "message": "M̂án̂íf̂éŝt́ ĉón̂t́âín̂ś 'display_override' f̂íêĺd̂, án̂d́ t̂h́ê f́îŕŝt́ ŝúp̂ṕôŕt̂éd̂ d́îśp̂ĺâý m̂ód̂é m̂úŝt́ b̂é ôńê óf̂ 'standalone', 'fullscreen', ór̂ 'minimal-ui'"
  },
@@ -2198,6 +2204,9 @@
  "panels/application/AppManifestView.ts | noSuppliedIconIsAtLeastSpxSquare": {
    "message": "N̂ó ŝúp̂ṕl̂íêd́ îćôń îś ât́ l̂éâśt̂ {PH1} ṕîx́êĺŝ śq̂úâŕê ín̂ PNG, SVG ór̂ WebP f́ôŕm̂át̂, ẃît́ĥ t́ĥé p̂úr̂ṕôśê át̂t́r̂íb̂út̂é ûńŝét̂ ór̂ śêt́ t̂ó \"any\"."
  },
+  "panels/application/AppManifestView.ts | note": {
+    "message": "N̂ót̂é:"
+  },
  "panels/application/AppManifestView.ts | orientation": {
    "message": "Ôŕîén̂t́ât́îón̂"
  },
@@ -3,6 +3,7 @@
 // found in the LICENSE file.

 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 appManifestViewStyles from './appManifestView.css.js';
@@ -62,11 +63,28 @@ const UIStrings = {
  appIdExplainer:
      'This is used by the browser to know whether the manifest should be updating an existing application, or whether it refers to a new web app that can be installed.',
  /**
+  *@description Text which is a hyperlink to more documentation
+  */
+  learnMore: 'Learn more',
+  /**
  *@description Explanation why it is advisable to specify an 'id' field in the manifest.
-  *@example {https://example.com/} PH1
+  *@example {Note:} PH1
+  *@example {id} PH2
+  *@example {start_url} PH3
+  *@example {id} PH4
+  *@example {/index.html} PH5
+  *@example {(button for copying suggested value into clipboard)} PH6
  */
  appIdNote:
-      'Note: \'id\' is not specified in the manifest, \'start_url\' is used instead. To specify an App Id that matches the current identity, set the \'id\' field to \'\'{PH1}\'\'.',
+      '{PH1} {PH2} is not specified in the manifest, {PH3} is used instead. To specify an App Id that matches the current identity, set the {PH4} field to {PH5} {PH6}.',
+  /**
+  *@description Label for reminding the user of something important. Is shown in bold and followed by the actual note to show the user.
+  */
+  note: 'Note:',
+  /**
+  *@description Tooltip text that appears when hovering over a button which copies the previous text to the clipboard.
+  */
+  copyToClipboard: 'Copy to clipboard',
  /**
  *@description Text for the description of something
  */
@@ -552,24 +570,42 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
      UI.ARIAUtils.setAccessibleName(appIdField, 'App Id');
      appIdField.textContent = appId;

-      if (!stringProperty('id')) {
-        const exclamationIcon = new IconButton.Icon.Icon();
-        exclamationIcon.data = {
-          iconName: 'exclamation_mark_circle_icon',
-          color: 'var(--color-text-secondary)',
-          width: '16px',
-          height: '16px',
-        };
-        exclamationIcon.classList.add('inline-icon');
-        exclamationIcon.title = i18nString(UIStrings.appIdNote, {PH1: startURL});
-        appIdField.appendChild(exclamationIcon);
-      }
-
      const helpIcon = new IconButton.Icon.Icon();
      helpIcon.data = {iconName: 'help_outline', color: 'var(--color-text-secondary)', width: '16px', height: '16px'};
      helpIcon.classList.add('inline-icon');
      helpIcon.title = i18nString(UIStrings.appIdExplainer);
      appIdField.appendChild(helpIcon);
+
+      appIdField.appendChild(UI.XLink.XLink.create(
+          'https://developer.chrome.com/blog/pwa-manifest-id/', i18nString(UIStrings.learnMore), 'learn-more'));
+
+      if (!stringProperty('id')) {
+        const suggestedIdNote = appIdField.createChild('div', 'multiline-value');
+        const noteSpan = document.createElement('b');
+        noteSpan.textContent = i18nString(UIStrings.note);
+        const idSpan = document.createElement('code');
+        idSpan.textContent = 'id';
+        const idSpan2 = document.createElement('code');
+        idSpan2.textContent = 'id';
+        const startUrlSpan = document.createElement('code');
+        startUrlSpan.textContent = 'start_url';
+        const suggestedIdSpan = document.createElement('code');
+        suggestedIdSpan.textContent = startURL;
+
+        const copyButton = new IconButton.IconButton.IconButton();
+        copyButton.title = i18nString(UIStrings.copyToClipboard);
+        copyButton.data = {
+          groups: [{iconName: 'copy_icon', iconHeight: '12px', iconWidth: '12px', text: ''}],
+          clickHandler: (): void => {
+            Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(startURL);
+          },
+          compact: true,
+        };
+
+        suggestedIdNote.appendChild(i18n.i18n.getFormatLocalizedString(
+            str_, UIStrings.appIdNote,
+            {PH1: noteSpan, PH2: idSpan, PH3: startUrlSpan, PH4: idSpan2, PH5: suggestedIdSpan, PH6: copyButton}));
+      }
    }

    this.startURLField.removeChildren();
@@ -21,3 +21,11 @@
  margin-left: 4px;
  vertical-align: middle;
 }
+
+.multiline-value {
+  white-space: normal;
+}
+
+.learn-more {
+  padding-left: 4px;
+}
@@ -30,7 +30,7 @@ describe.skip('The Manifest Page', async () => {
    const fieldNames = await getTrimmedTextContent(FIELD_NAMES_SELECTOR);
    const fieldValues = await getTrimmedTextContent(FIELD_VALUES_SELECTOR);
    assert.strictEqual(fieldNames[3], 'App Id');
-    assert.strictEqual(fieldValues[3], `https://localhost:${getTestServerPort()}/some_id`);
+    assert.strictEqual(fieldValues[3], `https://localhost:${getTestServerPort()}/some_idLearn more`);
  });

  it('shows start id as app id', async () => {
@@ -43,6 +43,11 @@ describe.skip('The Manifest Page', async () => {
    const fieldValues = await getTrimmedTextContent(FIELD_VALUES_SELECTOR);
    assert.strictEqual(fieldNames[3], 'App Id');
    assert.strictEqual(
-        fieldValues[3], `https://localhost:${getTestServerPort()}/test/e2e/resources/application/some_start_url`);
+        fieldValues[3],
+        `https://localhost:${getTestServerPort()}/test/e2e/resources/application/some_start_url` +
+            'Learn moreNote: id is not specified in the manifest, start_url is used instead. To specify an ' +
+            'App Id that matches the current identity, set the id field to some_start_url .',
+    );
+    await waitFor('icon-button[title="Copy to clipboard"]');
  });
 });