diff --git a/devtools/client/application/application.css b/devtools/client/application/application.css
index 14a46e2c14da..cb89d60cc3de 100644
--- a/devtools/client/application/application.css
+++ b/devtools/client/application/application.css
@@ -11,7 +11,8 @@
* Components
*/
@import "resource://devtools/client/application/src/components/App.css";
-@import "resource://devtools/client/application/src/components/manifest/ManifestPage.css";
+@import "resource://devtools/client/application/src/components/manifest/ManifestView.css";
+@import "resource://devtools/client/application/src/components/routing/PageSwitcher.css";
@import "resource://devtools/client/application/src/components/service-workers/Worker.css";
@import "resource://devtools/client/application/src/components/service-workers/WorkerList.css";
@import "resource://devtools/client/application/src/components/service-workers/WorkerListEmpty.css";
diff --git a/devtools/client/application/src/base.css b/devtools/client/application/src/base.css
index 4640d19e4453..8e91bc4a1e1b 100644
--- a/devtools/client/application/src/base.css
+++ b/devtools/client/application/src/base.css
@@ -12,6 +12,8 @@
--body-20-font-size: 15px;
--body-20-font-weight: 400;
--body-20-font-weight-bold: 700;
+ --title-10-font-size: 13px;
+ --title-10-font-weight: 400;
--title-20-font-size: 17px;
--title-20-font-weight: 600;
--title-30-font-size: 22px;
diff --git a/devtools/client/application/src/components/manifest/ManifestItemIcon.js b/devtools/client/application/src/components/manifest/ManifestItemIcon.js
new file mode 100644
index 000000000000..b8b9cfcc4a0c
--- /dev/null
+++ b/devtools/client/application/src/components/manifest/ManifestItemIcon.js
@@ -0,0 +1,36 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const { PureComponent } = require("devtools/client/shared/vendor/react");
+const {
+ tr,
+ td,
+ th,
+} = require("devtools/client/shared/vendor/react-dom-factories");
+
+/**
+ * This component
+ */
+class ManifestItemIcon extends PureComponent {
+ static get propTypes() {
+ return {
+ icon: PropTypes.object.isRequired,
+ };
+ }
+ render() {
+ const { icon } = this.props;
+
+ return tr(
+ { className: "manifest-view__row" },
+ th({ className: "manifest-view__col-label", scope: "row" }, icon.size),
+ td({ className: "manifest-view__col-value" }, icon.src)
+ );
+ }
+}
+
+// Exports
+module.exports = ManifestItemIcon;
diff --git a/devtools/client/application/src/components/manifest/ManifestItemText.js b/devtools/client/application/src/components/manifest/ManifestItemText.js
new file mode 100644
index 000000000000..6ccddd504892
--- /dev/null
+++ b/devtools/client/application/src/components/manifest/ManifestItemText.js
@@ -0,0 +1,37 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const { PureComponent } = require("devtools/client/shared/vendor/react");
+const {
+ tr,
+ td,
+ th,
+} = require("devtools/client/shared/vendor/react-dom-factories");
+
+/**
+ * This component
+ */
+class ManifestItemText extends PureComponent {
+ static get propTypes() {
+ return {
+ name: PropTypes.string.isRequired,
+ val: PropTypes.string.isRequired,
+ };
+ }
+ render() {
+ const { name, val } = this.props;
+
+ return tr(
+ { className: "manifest-view__row" },
+ th({ className: "manifest-view__col-label", scope: "row" }, name),
+ td({ className: "manifest-view__col-value" }, val)
+ );
+ }
+}
+
+// Exports
+module.exports = ManifestItemText;
diff --git a/devtools/client/application/src/components/manifest/ManifestItemWarning.js b/devtools/client/application/src/components/manifest/ManifestItemWarning.js
new file mode 100644
index 000000000000..46d9bdf66b87
--- /dev/null
+++ b/devtools/client/application/src/components/manifest/ManifestItemWarning.js
@@ -0,0 +1,43 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const { PureComponent } = require("devtools/client/shared/vendor/react");
+const {
+ tr,
+ td,
+ th,
+ img,
+} = require("devtools/client/shared/vendor/react-dom-factories");
+
+/**
+ * This component
+ */
+class ManifestItemWarning extends PureComponent {
+ static get propTypes() {
+ return {
+ warning: PropTypes.object.isRequired,
+ };
+ }
+ render() {
+ const { warning } = this.props;
+
+ return tr(
+ { className: "manifest-view__row manifest-view__row-error" },
+ th(
+ { className: "manifest-view__col-label", scope: "row" },
+ img({
+ src: "chrome://global/skin/icons/warning.svg",
+ alt: "Warning icon",
+ })
+ ),
+ td({ className: "manifest-view__col-value" }, warning.warn)
+ );
+ }
+}
+
+// Exports
+module.exports = ManifestItemWarning;
diff --git a/devtools/client/application/src/components/manifest/ManifestPage.js b/devtools/client/application/src/components/manifest/ManifestPage.js
index b552d2b78429..b9ab2dd7415f 100644
--- a/devtools/client/application/src/components/manifest/ManifestPage.js
+++ b/devtools/client/application/src/components/manifest/ManifestPage.js
@@ -14,9 +14,46 @@ const {
const ManifestLoader = createFactory(require("../manifest/ManifestLoader"));
+const ManifestView = createFactory(require("./ManifestView"));
+const ManifestViewEmpty = createFactory(require("./ManifestViewEmpty"));
+
+const { MANIFEST_DATA } = require("../../constants");
+
class ManifestPage extends PureComponent {
render() {
- return section({ className: `manifest-page` }, ManifestLoader({}));
+ const isManifestViewEmpty = !MANIFEST_DATA;
+
+ // needs to be replaced with data from ManifestLoader
+ const data = {
+ warnings: MANIFEST_DATA.moz_validation,
+ icons: MANIFEST_DATA.icons,
+ identity: {
+ name: MANIFEST_DATA.name,
+ short_name: MANIFEST_DATA.short_name,
+ },
+ presentation: {
+ display: MANIFEST_DATA.display,
+ orientation: MANIFEST_DATA.orientation,
+ start_url: MANIFEST_DATA.start_url,
+ theme_color: MANIFEST_DATA.theme_color,
+ background_color: MANIFEST_DATA.background_color,
+ },
+ };
+
+ return section(
+ {
+ className: `app-page ${isManifestViewEmpty ? "app-page--empty" : ""}`,
+ },
+ ManifestLoader({}),
+ isManifestViewEmpty
+ ? ManifestViewEmpty({})
+ : ManifestView({
+ identity: data.identity,
+ warnings: data.warnings,
+ icons: data.icons,
+ presentation: data.presentation,
+ })
+ );
}
}
diff --git a/devtools/client/application/src/components/manifest/ManifestView.css b/devtools/client/application/src/components/manifest/ManifestView.css
new file mode 100644
index 000000000000..51e2a1c58300
--- /dev/null
+++ b/devtools/client/application/src/components/manifest/ManifestView.css
@@ -0,0 +1,41 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.manifest-view {
+ padding: calc(var(--base-unit) * 2) calc(var(--base-unit) * 4);
+ border-bottom: 1px solid var(--grey-20);
+ display: table;
+ width: 100%;
+}
+
+.manifest-view:last-child {
+ border-bottom: 0;
+}
+
+.manifest-view__title {
+ font-size: var(--title-10-font-size);
+ font-weight: var(--title-20-font-weight);
+ text-align: left;
+ padding: calc(var(--base-unit) * 2) 0;
+}
+
+.manifest-view__row {
+ vertical-align: top;
+}
+
+.manifest-view__col-label {
+ color: var(--grey-50);
+ font-weight: var(--title-30-font-weight);
+ width: calc(var(--base-unit) * 28);
+ text-align: right;
+}
+
+.manifest-view__col-value {
+ word-break: break-all;
+}
+
+.manifest-view__row-error .manifest-view__col-label {
+ width: calc(var(--base-unit) * 6);
+ text-align: left;
+}
diff --git a/devtools/client/application/src/components/manifest/ManifestView.js b/devtools/client/application/src/components/manifest/ManifestView.js
new file mode 100644
index 000000000000..804cfbef7f66
--- /dev/null
+++ b/devtools/client/application/src/components/manifest/ManifestView.js
@@ -0,0 +1,106 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const {
+ createFactory,
+ PureComponent,
+} = require("devtools/client/shared/vendor/react");
+const {
+ article,
+ caption,
+ h1,
+ table,
+ tbody,
+} = require("devtools/client/shared/vendor/react-dom-factories");
+
+const FluentReact = require("devtools/client/shared/vendor/fluent-react");
+const Localized = createFactory(FluentReact.Localized);
+
+const ManifestItemIcon = createFactory(require("./ManifestItemIcon"));
+const ManifestItemText = createFactory(require("./ManifestItemText"));
+const ManifestItemWarning = createFactory(require("./ManifestItemWarning"));
+/**
+ * This component
+ */
+class ManifestView extends PureComponent {
+ static get propTypes() {
+ return {
+ identity: PropTypes.object.isRequired,
+ warnings: PropTypes.array.isRequired,
+ icons: PropTypes.array.isRequired,
+ presentation: PropTypes.object.isRequired,
+ };
+ }
+ render() {
+ const { identity, warnings, icons, presentation } = this.props;
+
+ return article(
+ {},
+ Localized(
+ {
+ id: "manifest-view-header",
+ },
+ h1({ className: "app-page__title" })
+ ),
+ table(
+ { className: "manifest-view", key: "errors-and-warnings" },
+ Localized(
+ { id: "manifest-item-warnings" },
+ caption({ className: "manifest-view__title" })
+ ),
+ tbody(
+ {},
+ warnings.map((warning, index) =>
+ ManifestItemWarning({ warning, key: `warning-${index}` })
+ )
+ )
+ ),
+ table(
+ { className: "manifest-view", key: "identity" },
+ Localized(
+ { id: "manifest-item-identity" },
+ caption({ className: "manifest-view__title" })
+ ),
+ tbody(
+ {},
+ Object.entries(identity).map(([key, value]) =>
+ ManifestItemText({ name: key, val: value, key: `${key}` })
+ )
+ )
+ ),
+ table(
+ { className: "manifest-view", key: "presentation" },
+ Localized(
+ { id: "manifest-item-presentation" },
+ caption({ className: "manifest-view__title" })
+ ),
+ tbody(
+ {},
+ Object.entries(presentation).map(([key, value]) =>
+ ManifestItemText({ name: key, val: value, key: `${key}` })
+ )
+ )
+ ),
+ table(
+ { className: "manifest-view", key: "icons" },
+ Localized(
+ { id: "manifest-item-icons" },
+ caption({ className: "manifest-view__title" })
+ ),
+ tbody(
+ {},
+ icons.map((icon, index) =>
+ ManifestItemIcon({ icon, key: `warning-${index}` })
+ )
+ )
+ )
+ );
+ }
+}
+
+// Exports
+module.exports = ManifestView;
diff --git a/devtools/client/application/src/components/manifest/ManifestViewEmpty.js b/devtools/client/application/src/components/manifest/ManifestViewEmpty.js
new file mode 100644
index 000000000000..6b6638efbe4a
--- /dev/null
+++ b/devtools/client/application/src/components/manifest/ManifestViewEmpty.js
@@ -0,0 +1,40 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+ createFactory,
+ PureComponent,
+} = require("devtools/client/shared/vendor/react");
+const {
+ article,
+ h1,
+ p,
+} = require("devtools/client/shared/vendor/react-dom-factories");
+
+const FluentReact = require("devtools/client/shared/vendor/fluent-react");
+const Localized = createFactory(FluentReact.Localized);
+
+/**
+ * This component displays help information when no manifest is found for the
+ * current target.
+ */
+class ManifestViewEmpty extends PureComponent {
+ render() {
+ return article(
+ { className: "manifest-view-empty" },
+ Localized(
+ {
+ id: "manifest-view-header",
+ },
+ h1({ className: "app-page__title" })
+ ),
+ Localized({ id: "manifest-empty-intro" }, p({}))
+ );
+ }
+}
+
+// Exports
+module.exports = ManifestViewEmpty;
diff --git a/devtools/client/application/src/components/manifest/moz.build b/devtools/client/application/src/components/manifest/moz.build
index 935a933665bb..3e9bcc03acb1 100644
--- a/devtools/client/application/src/components/manifest/moz.build
+++ b/devtools/client/application/src/components/manifest/moz.build
@@ -3,7 +3,12 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
DevToolsModules(
+ 'ManifestItemIcon.js',
+ 'ManifestItemText.js',
+ 'ManifestItemWarning.js',
'ManifestLoader.js',
- 'ManifestPage.css',
- 'ManifestPage.js'
+ 'ManifestPage.js',
+ 'ManifestView.css',
+ 'ManifestView.js',
+ 'ManifestViewEmpty.js'
)
diff --git a/devtools/client/application/src/components/manifest/ManifestPage.css b/devtools/client/application/src/components/routing/PageSwitcher.css
similarity index 54%
rename from devtools/client/application/src/components/manifest/ManifestPage.css
rename to devtools/client/application/src/components/routing/PageSwitcher.css
index e3a04ad484bf..e64cba9bf3d6 100644
--- a/devtools/client/application/src/components/manifest/ManifestPage.css
+++ b/devtools/client/application/src/components/routing/PageSwitcher.css
@@ -2,15 +2,28 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-.manifest-page {
- height: 100vh;
+
+/*
+ * Page container for worker + manifest views
+ */
+
+.app-page {
+ height: 100vh;
padding: 0 2rem;
display: grid;
+ grid-template-rows: 1fr auto;
-moz-user-select: none;
+}
- /* slipt up in components in https://bugzilla.mozilla.org/show_bug.cgi?id=1566011 */
+.app-page--empty {
align-items: center;
justify-content: center;
- font-size: var(--title-10-font-size);
+ font-size: var(--body-10-font-size);
color: var(--theme-toolbar-color);
}
+
+.app-page__title {
+ font-size: var(--title-30-font-size);
+ font-weight: var(--title-30-font-weight);
+ margin: 0;
+}
diff --git a/devtools/client/application/src/components/routing/moz.build b/devtools/client/application/src/components/routing/moz.build
index a7e5f1b6da70..d435f5655227 100644
--- a/devtools/client/application/src/components/routing/moz.build
+++ b/devtools/client/application/src/components/routing/moz.build
@@ -3,5 +3,6 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
DevToolsModules(
+ 'PageSwitcher.css',
'PageSwitcher.js',
)
diff --git a/devtools/client/application/src/components/service-workers/WorkerListEmpty.css b/devtools/client/application/src/components/service-workers/WorkerListEmpty.css
index 3822ee9923e2..996cacb79923 100644
--- a/devtools/client/application/src/components/service-workers/WorkerListEmpty.css
+++ b/devtools/client/application/src/components/service-workers/WorkerListEmpty.css
@@ -2,20 +2,9 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-.worker-list-empty {
- max-width: calc(var(--base-unit) * 179);
- font-size: var(--body-10-font-size);
- color: var(--theme-toolbar-color);
-}
-
-.worker-list-empty__title {
- font-size: var(--title-20-font-size);
- font-weight: var(--title-20-font-weight);
-}
-
-.worker-list-empty__title .external-link {
+.app-page__title .external-link {
font-weight: var(--title-30-font-weight);
-}
+}
.worker-list-empty__tips {
margin-inline-start: 2rem;
diff --git a/devtools/client/application/src/components/service-workers/WorkerListEmpty.js b/devtools/client/application/src/components/service-workers/WorkerListEmpty.js
index 1d0ffe784d87..da39ce71f863 100644
--- a/devtools/client/application/src/components/service-workers/WorkerListEmpty.js
+++ b/devtools/client/application/src/components/service-workers/WorkerListEmpty.js
@@ -12,6 +12,7 @@ const {
const {
a,
article,
+ h1,
li,
p,
ul,
@@ -58,7 +59,7 @@ class WorkerListEmpty extends PureComponent {
onClick: () => this.openDocumentation(),
}),
},
- p({ className: "worker-list-empty__title" })
+ h1({ className: "app-page__title" })
),
Localized({ id: "serviceworker-empty-suggestions" }, p({})),
ul(
diff --git a/devtools/client/application/src/components/service-workers/WorkersPage.css b/devtools/client/application/src/components/service-workers/WorkersPage.css
index ed6190dad76e..397959f5a1ac 100644
--- a/devtools/client/application/src/components/service-workers/WorkersPage.css
+++ b/devtools/client/application/src/components/service-workers/WorkersPage.css
@@ -15,18 +15,3 @@
* | Link to about:debugging |
* +---------------------------------------------+
*/
-.workers-page {
- height: 100vh;
- padding: 0 2rem;
- display: grid;
- -moz-user-select: none;
-}
-
-.workers-page--empty {
- align-items: center;
- justify-content: center;
-}
-
-.workers-page:not(.workers-page--empty) {
- grid-template-rows: 1fr auto;
-}
diff --git a/devtools/client/application/src/components/service-workers/WorkersPage.js b/devtools/client/application/src/components/service-workers/WorkersPage.js
index 93ee9ecace9d..def0fdc0cb48 100644
--- a/devtools/client/application/src/components/service-workers/WorkersPage.js
+++ b/devtools/client/application/src/components/service-workers/WorkersPage.js
@@ -38,9 +38,7 @@ class WorkersPage extends PureComponent {
return section(
{
- className: `workers-page ${
- isWorkerListEmpty ? "workers-page--empty" : ""
- }`,
+ className: `app-page ${isWorkerListEmpty ? "app-page--empty" : ""}`,
},
isWorkerListEmpty
? WorkerListEmpty({})
diff --git a/devtools/client/application/src/constants.js b/devtools/client/application/src/constants.js
index 429c929ca946..8ff8b6483e01 100644
--- a/devtools/client/application/src/constants.js
+++ b/devtools/client/application/src/constants.js
@@ -23,5 +23,51 @@ const PAGE_TYPES = {
const DEFAULT_PAGE = PAGE_TYPES.MANIFEST;
+const MANIFEST_DATA = {
+ background_color: "#F9D",
+ dir: "auto",
+ display: "browser",
+ icons: [
+ {
+ src:
+ "https://design.firefox.com/icons/icons/desktop/default-browser-16.svg",
+ type: "type/png",
+ size: "16x16",
+ },
+ {
+ src:
+ "https://design.firefox.com/icons/icons/desktop/default-browser-16.svg",
+ type: "type/png",
+ size: "32x32",
+ },
+ {
+ src:
+ "https://design.firefox.com/icons/icons/desktop/default-browser-16.svg",
+ type: "type/png",
+ size: "64x64",
+ },
+ ],
+ lang: "en-US",
+ moz_manifest_url: "",
+ moz_validation: [
+ { warn: "Icons item at index 0 is invalid." },
+ {
+ warn:
+ "Icons item at index 2 is invalid. Icons item at index 2 is invalid. Icons item at index 2 is invalid. Icons item at index 2 is invalid.",
+ },
+ ],
+ name:
+ "Name is a verrry long name and the name is longer tha you thinnk because it is loooooooooooooooooooooooooooooooooooooooooooooooong",
+ orientation: "landscape",
+ scope: "./",
+ short_name: "Na",
+ start_url: "root",
+ theme_color: "#345",
+};
+
// flatten constants
-module.exports = Object.assign({}, { DEFAULT_PAGE, PAGE_TYPES }, actionTypes);
+module.exports = Object.assign(
+ {},
+ { DEFAULT_PAGE, PAGE_TYPES, MANIFEST_DATA },
+ actionTypes
+);
diff --git a/devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestPage.test.js.snap b/devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestPage.test.js.snap
index a6d4deb117d5..ba2d2a112ed1 100644
--- a/devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestPage.test.js.snap
+++ b/devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestPage.test.js.snap
@@ -2,8 +2,54 @@
exports[`ManifestPage renders the expected snapshot 1`] = `
`;
diff --git a/devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestView.test.js.snap b/devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestView.test.js.snap
new file mode 100644
index 000000000000..564e5ae350a0
--- /dev/null
+++ b/devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestView.test.js.snap
@@ -0,0 +1,150 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ManifestView renders the expected snapshot 1`] = `
+
+
+
+
+
+
+
+`;
diff --git a/devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestViewEmpty.test.js.snap b/devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestViewEmpty.test.js.snap
new file mode 100644
index 000000000000..0b5ded80b7b7
--- /dev/null
+++ b/devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestViewEmpty.test.js.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ManifestViewEmpty renders the expected snapshot 1`] = `
+
+
+
+
+
+
+`;
diff --git a/devtools/client/application/test/components/manifest/components_application_panel-ManifestView.test.js b/devtools/client/application/test/components/manifest/components_application_panel-ManifestView.test.js
new file mode 100644
index 000000000000..ed0115f0e02a
--- /dev/null
+++ b/devtools/client/application/test/components/manifest/components_application_panel-ManifestView.test.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Import libs
+const { shallow } = require("enzyme");
+const { createFactory } = require("react");
+
+const ManifestView = createFactory(
+ require("devtools/client/application/src/components/manifest/ManifestView")
+);
+
+const { MANIFEST_DATA } = require("../../../src/constants");
+
+// needs to move to reducer
+const data = {
+ warnings: MANIFEST_DATA.moz_validation,
+ icons: MANIFEST_DATA.icons,
+ identity: {
+ name: MANIFEST_DATA.name,
+ short_name: MANIFEST_DATA.short_name,
+ },
+ presentation: {
+ display: MANIFEST_DATA.display,
+ orientation: MANIFEST_DATA.orientation,
+ start_url: MANIFEST_DATA.start_url,
+ theme_color: MANIFEST_DATA.theme_color,
+ background_color: MANIFEST_DATA.background_color,
+ },
+};
+
+/**
+ * Test for ManifestView.js component
+ */
+
+describe("ManifestView", () => {
+ it("renders the expected snapshot", () => {
+ const wrapper = shallow(
+ ManifestView({
+ identity: data.identity,
+ warnings: data.warnings,
+ icons: data.icons,
+ presentation: data.presentation,
+ })
+ );
+ expect(wrapper).toMatchSnapshot();
+ });
+});
diff --git a/devtools/client/application/test/components/manifest/components_application_panel-ManifestViewEmpty.test.js b/devtools/client/application/test/components/manifest/components_application_panel-ManifestViewEmpty.test.js
new file mode 100644
index 000000000000..ce6bd4177e4a
--- /dev/null
+++ b/devtools/client/application/test/components/manifest/components_application_panel-ManifestViewEmpty.test.js
@@ -0,0 +1,23 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Import libs
+const { shallow } = require("enzyme");
+const { createFactory } = require("react");
+
+const ManifestViewEmpty = createFactory(
+ require("devtools/client/application/src/components/manifest/ManifestViewEmpty")
+);
+
+/**
+ * Test for ManifestPage.js component
+ */
+
+describe("ManifestViewEmpty", () => {
+ it("renders the expected snapshot", () => {
+ const wrapper = shallow(ManifestViewEmpty({}));
+ expect(wrapper).toMatchSnapshot();
+ });
+});
diff --git a/devtools/client/application/test/components/service-workers/__snapshots__/components_application_panel-WorkerListEmpty.test.js.snap b/devtools/client/application/test/components/service-workers/__snapshots__/components_application_panel-WorkerListEmpty.test.js.snap
index 8f236b866d32..625d1ccc26de 100644
--- a/devtools/client/application/test/components/service-workers/__snapshots__/components_application_panel-WorkerListEmpty.test.js.snap
+++ b/devtools/client/application/test/components/service-workers/__snapshots__/components_application_panel-WorkerListEmpty.test.js.snap
@@ -13,8 +13,8 @@ exports[`WorkerListEmpty renders the expected snapshot 1`] = `
}
id="serviceworker-empty-intro"
>
-
@@ -40,7 +40,7 @@ exports[`WorkersPage filters out workers from different domains and renders an e
exports[`WorkersPage it renders a list with a single element if there's just 1 worker 1`] = `
diff --git a/devtools/client/locales/en-US/application.ftl b/devtools/client/locales/en-US/application.ftl
index 315394f0758f..073579cec40c 100644
--- a/devtools/client/locales/en-US/application.ftl
+++ b/devtools/client/locales/en-US/application.ftl
@@ -80,6 +80,24 @@ serviceworker-empty-suggestions-debugger = Step through your Service Worker regi
# Clicking on the link will open about:debugging in a new tab.
serviceworker-empty-suggestions-aboutdebugging = Inspect Service Workers from other domains. Open about:debugging
+# Header for the view of Manifest displayed in the application panel for the current page.
+manifest-view-header = App Manifest
+
+# Header for the Errors and Warnings section of Manifest inspection displayed in the application panel.
+manifest-item-warnings = Errors and Warnings
+
+# Header for the Identity section of Manifest inspection displayed in the application panel.
+manifest-item-identity = Identity
+
+# Header for the Presentation section of Manifest inspection displayed in the application panel.
+manifest-item-presentation = Presentation
+
+# Header for the Icon section of Manifest inspection displayed in the application panel.
+manifest-item-icons = Icons
+
+# Text displayed when no manifest was found for the current page.
+manifest-empty-intro = No manifest found to inspect.
+
# Text displayed while we are loading the manifest file
manifest-loading = Loading manifest…
@@ -91,3 +109,4 @@ manifest-loaded-error = There was an error while loading the manifest:
# Text displayed when the page has no manifest available
manifest-non-existing = No manifest found to inspect.
+