diff options
Diffstat (limited to 'devtools/client/application/src/components/manifest')
22 files changed, 1066 insertions, 0 deletions
diff --git a/devtools/client/application/src/components/manifest/Manifest.js b/devtools/client/application/src/components/manifest/Manifest.js new file mode 100644 index 0000000000..f6b5f19b37 --- /dev/null +++ b/devtools/client/application/src/components/manifest/Manifest.js @@ -0,0 +1,136 @@ +/* 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("resource://devtools/client/shared/vendor/react.js"); +const { + article, + h1, + table, + tbody, +} = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); + +const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js"); +const Localized = createFactory(FluentReact.Localized); +const { + l10n, +} = require("resource://devtools/client/application/src/modules/l10n.js"); + +const ManifestColorItem = createFactory( + require("resource://devtools/client/application/src/components/manifest/ManifestColorItem.js") +); +const ManifestIconItem = createFactory( + require("resource://devtools/client/application/src/components/manifest/ManifestIconItem.js") +); +const ManifestUrlItem = createFactory( + require("resource://devtools/client/application/src/components/manifest/ManifestUrlItem.js") +); +const ManifestItem = createFactory( + require("resource://devtools/client/application/src/components/manifest/ManifestItem.js") +); +const ManifestIssueList = createFactory( + require("resource://devtools/client/application/src/components/manifest/ManifestIssueList.js") +); +const ManifestSection = createFactory( + require("resource://devtools/client/application/src/components/manifest/ManifestSection.js") +); +const ManifestJsonLink = createFactory( + require("resource://devtools/client/application/src/components/manifest/ManifestJsonLink.js") +); + +const { + MANIFEST_MEMBER_VALUE_TYPES, +} = require("resource://devtools/client/application/src/constants.js"); +const Types = require("resource://devtools/client/application/src/types/index.js"); + +/** + * A canonical manifest, splitted in different sections + */ +class Manifest extends PureComponent { + static get propTypes() { + return { + ...Types.manifest, // { identity, presentation, icons, validation, url } + }; + } + + renderIssueSection() { + const { validation } = this.props; + const shouldRender = validation && !!validation.length; + + return shouldRender + ? ManifestSection( + { + key: `manifest-section-0`, + title: l10n.getString("manifest-item-warnings"), + }, + ManifestIssueList({ issues: validation }) + ) + : null; + } + + renderMember({ key, value, type }, index) { + let domKey = key; + switch (type) { + case MANIFEST_MEMBER_VALUE_TYPES.COLOR: + return ManifestColorItem({ label: key, key: domKey, value }); + case MANIFEST_MEMBER_VALUE_TYPES.ICON: + // since the manifest may have keys with empty size/contentType, + // we cannot use them as unique IDs + domKey = index; + return ManifestIconItem({ label: key, key: domKey, value }); + case MANIFEST_MEMBER_VALUE_TYPES.URL: + return ManifestUrlItem({ label: key, key: domKey, value }); + case MANIFEST_MEMBER_VALUE_TYPES.STRING: + default: + return ManifestItem({ label: key, key: domKey }, value); + } + } + + renderItemSections() { + const { identity, icons, presentation } = this.props; + + const manifestMembers = [ + { localizationId: "manifest-item-identity", items: identity }, + { localizationId: "manifest-item-presentation", items: presentation }, + { localizationId: "manifest-item-icons", items: icons }, + ]; + + return manifestMembers.map(({ localizationId, items }, index) => { + return ManifestSection( + { + key: `manifest-section-${index + 1}`, + title: l10n.getString(localizationId), + }, + // NOTE: this table should probably be its own component, to keep + // the same level of abstraction as with the validation issues + // Bug https://bugzilla.mozilla.org/show_bug.cgi?id=1577138 + table({}, tbody({}, items.map(this.renderMember))) + ); + }); + } + + render() { + const { url } = this.props; + + return article( + { className: "js-manifest" }, + Localized( + { + id: "manifest-view-header", + }, + h1({ className: "app-page__title" }) + ), + ManifestJsonLink({ url }), + this.renderIssueSection(), + this.renderItemSections() + ); + } +} + +// Exports +module.exports = Manifest; diff --git a/devtools/client/application/src/components/manifest/ManifestColorItem.css b/devtools/client/application/src/components/manifest/ManifestColorItem.css new file mode 100644 index 0000000000..92dadec271 --- /dev/null +++ b/devtools/client/application/src/components/manifest/ManifestColorItem.css @@ -0,0 +1,29 @@ +/* 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-item__color { + /* NOTE: platform converts any color format that is in the manifest to + hexadecimal, so we can uppercase */ + text-transform: uppercase; + direction: ltr; /* force LTR so the # stays at the beginning of the hex number */ + display: inline-block; +} + +.manifest-item__color::before { + display: inline-block; + content: ''; + background-color: #fff; + background-image: linear-gradient(var(--color-value), var(--color-value)), /* injected via React */ + linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), + linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); + background-size: 6px 6px; + background-position: 0 0, 3px 3px; + border-radius: 50%; + width: calc(var(--base-unit) * 3); + height: calc(var(--base-unit) * 3); + margin-block-start: calc(var(--base-unit) * -0.5); + margin-inline-end: var(--base-unit); + box-shadow: 0 0 0 1px var(--theme-splitter-color); + vertical-align: middle; +} diff --git a/devtools/client/application/src/components/manifest/ManifestColorItem.js b/devtools/client/application/src/components/manifest/ManifestColorItem.js new file mode 100644 index 0000000000..ac4b54e82f --- /dev/null +++ b/devtools/client/application/src/components/manifest/ManifestColorItem.js @@ -0,0 +1,57 @@ +/* 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("resource://devtools/client/shared/vendor/react.js"); +const { + div, +} = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); + +const Types = require("resource://devtools/client/application/src/types/index.js"); +const ManifestItem = createFactory( + require("resource://devtools/client/application/src/components/manifest/ManifestItem.js") +); + +/** + * This component displays a Manifest member which holds a color value + */ +class ManifestColorItem extends PureComponent { + static get propTypes() { + return { + ...Types.manifestItemColor, // { label, value } + }; + } + + renderColor() { + let { value } = this.props; + if (!value) { + return null; + } + + // Truncate colors in #rrggbbaa format to #rrggbb + if (value.length === 9 && value.toLowerCase().endsWith("ff")) { + value = value.slice(0, 7); + } + + /* div instead of span because CSS `direction` works with block elements */ + return div( + { + className: "manifest-item__color", + style: { "--color-value": value }, + }, + value + ); + } + + render() { + const { label } = this.props; + return ManifestItem({ label }, this.renderColor()); + } +} + +module.exports = ManifestColorItem; diff --git a/devtools/client/application/src/components/manifest/ManifestEmpty.js b/devtools/client/application/src/components/manifest/ManifestEmpty.js new file mode 100644 index 0000000000..3e0eb2de48 --- /dev/null +++ b/devtools/client/application/src/components/manifest/ManifestEmpty.js @@ -0,0 +1,81 @@ +/* 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 { openDocLink } = require("resource://devtools/client/shared/link.js"); + +const { + createFactory, + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const { + a, + article, + aside, + div, + h1, + img, + p, +} = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); + +const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js"); +const Localized = createFactory(FluentReact.Localized); + +const DOC_URL = + "https://developer.mozilla.org/en-US/docs/Web/Manifest" + + "?utm_source=devtools&utm_medium=sw-panel-blank"; + +/** + * This component displays help information when no manifest is found for the + * current target. + */ +class ManifestEmpty extends PureComponent { + openDocumentation() { + openDocLink(DOC_URL); + } + + render() { + return article( + { className: "app-page__icon-container js-manifest-empty" }, + aside( + {}, + Localized( + { + id: "sidebar-item-manifest", + attrs: { + alt: true, + }, + }, + img({ + className: "app-page__icon", + src: "chrome://devtools/skin/images/application-manifest.svg", + }) + ) + ), + div( + {}, + Localized( + { + id: "manifest-empty-intro2", + }, + h1({ className: "app-page__title" }) + ), + p( + {}, + Localized( + { id: "manifest-empty-intro-link" }, + a({ + onClick: () => this.openDocumentation(), + }) + ) + ), + Localized({ id: "manifest-non-existing" }, p({})) + ) + ); + } +} + +// Exports +module.exports = ManifestEmpty; diff --git a/devtools/client/application/src/components/manifest/ManifestIconItem.css b/devtools/client/application/src/components/manifest/ManifestIconItem.css new file mode 100644 index 0000000000..a2bbfd9d34 --- /dev/null +++ b/devtools/client/application/src/components/manifest/ManifestIconItem.css @@ -0,0 +1,7 @@ +/* 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-item__icon { + max-width: 100%; +} diff --git a/devtools/client/application/src/components/manifest/ManifestIconItem.js b/devtools/client/application/src/components/manifest/ManifestIconItem.js new file mode 100644 index 0000000000..a525fbcdb9 --- /dev/null +++ b/devtools/client/application/src/components/manifest/ManifestIconItem.js @@ -0,0 +1,98 @@ +/* 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("resource://devtools/client/shared/vendor/react.js"); +const { + br, + code, + img, + span, +} = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); + +const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js"); +const Localized = createFactory(FluentReact.Localized); +const { + l10n, +} = require("resource://devtools/client/application/src/modules/l10n.js"); + +const Types = require("resource://devtools/client/application/src/types/index.js"); +const ManifestItem = createFactory( + require("resource://devtools/client/application/src/components/manifest/ManifestItem.js") +); + +/** + * This component displays a Manifest member which holds a color value + */ +class ManifestIconItem extends PureComponent { + static get propTypes() { + return { + // { + // label: { contentType, sizes }, + // value: { src, purpose } + // } + ...Types.manifestItemIcon, + }; + } + + getLocalizedImgTitle() { + const { sizes } = this.props.label; + + return sizes && sizes.length + ? l10n.getString("manifest-icon-img-title", { sizes }) + : l10n.getString("manifest-icon-img-title-no-sizes"); + } + + renderLabel() { + const { contentType, sizes } = this.props.label; + + // sinze both `contentType` and `sizes` may be undefined, we don't need to + // render the <br> if one –or both– are not to be displayed + const shallRenderBr = contentType && sizes; + + return [ + sizes ? sizes : null, + shallRenderBr ? br({ key: "label-br" }) : null, + contentType ? contentType : null, + ]; + } + + render() { + const { src, purpose } = this.props.value; + + return ManifestItem( + { + label: this.renderLabel(), + }, + Localized( + { + id: "manifest-icon-img", + attrs: { + alt: true, + }, + }, + img({ + className: "manifest-item__icon", + src, + title: this.getLocalizedImgTitle(), + }) + ), + br({}), + Localized( + { + id: "manifest-icon-purpose", + code: code({}), + $purpose: purpose, + }, + span({}) + ) + ); + } +} + +module.exports = ManifestIconItem; diff --git a/devtools/client/application/src/components/manifest/ManifestIssue.css b/devtools/client/application/src/components/manifest/ManifestIssue.css new file mode 100644 index 0000000000..96bcdae5dd --- /dev/null +++ b/devtools/client/application/src/components/manifest/ManifestIssue.css @@ -0,0 +1,17 @@ +/* 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-issue__icon { + -moz-context-properties: fill; + width: calc(var(--base-unit) * 3); + height: calc(var(--base-unit) * 3); +} + +.manifest-issue__icon--warning { + fill: var(--theme-icon-warning-color); +} + +.manifest-issue__icon--error { + fill: var(--theme-icon-error-color); +} diff --git a/devtools/client/application/src/components/manifest/ManifestIssue.js b/devtools/client/application/src/components/manifest/ManifestIssue.js new file mode 100644 index 0000000000..1cdf62ff8f --- /dev/null +++ b/devtools/client/application/src/components/manifest/ManifestIssue.js @@ -0,0 +1,72 @@ +/* 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("resource://devtools/client/shared/vendor/react-prop-types.js"); +const { + createFactory, + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const { + img, + li, + span, +} = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); + +const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js"); +const Localized = createFactory(FluentReact.Localized); + +const { + MANIFEST_ISSUE_LEVELS, +} = require("resource://devtools/client/application/src/constants.js"); +const Types = require("resource://devtools/client/application/src/types/index.js"); + +/** + * A Manifest validation issue (warning, error) + */ +class ManifestIssue extends PureComponent { + static get propTypes() { + return { + className: PropTypes.string, + ...Types.manifestIssue, // { level, message } + }; + } + + getIconData(level) { + switch (level) { + case MANIFEST_ISSUE_LEVELS.WARNING: + return { + src: "chrome://devtools/skin/images/alert-small.svg", + localizationId: "icon-warning", + }; + case MANIFEST_ISSUE_LEVELS.ERROR: + default: + return { + src: "chrome://devtools/skin/images/error-small.svg", + localizationId: "icon-error", + }; + } + } + + render() { + const { level, message, className } = this.props; + const icon = this.getIconData(level); + + return li( + { className: `js-manifest-issue ${className ? className : ""}` }, + Localized( + { id: icon.localizationId, attrs: { alt: true, title: true } }, + img({ + className: `manifest-issue__icon manifest-issue__icon--${level}`, + src: icon.src, + }) + ), + span({}, message) + ); + } +} + +// Exports +module.exports = ManifestIssue; diff --git a/devtools/client/application/src/components/manifest/ManifestIssueList.css b/devtools/client/application/src/components/manifest/ManifestIssueList.css new file mode 100644 index 0000000000..ccb3f08df5 --- /dev/null +++ b/devtools/client/application/src/components/manifest/ManifestIssueList.css @@ -0,0 +1,15 @@ +/* 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-issues { + list-style-type: none; + padding-inline-start: 0; + display: grid; + grid-template-columns: auto 1fr; + grid-gap: var(--base-unit); +} + +.manifest-issues__item { + display: contents; +} diff --git a/devtools/client/application/src/components/manifest/ManifestIssueList.js b/devtools/client/application/src/components/manifest/ManifestIssueList.js new file mode 100644 index 0000000000..4b3d1f46c8 --- /dev/null +++ b/devtools/client/application/src/components/manifest/ManifestIssueList.js @@ -0,0 +1,68 @@ +/* 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("resource://devtools/client/shared/vendor/react.js"); +const { + ul, +} = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); + +const { + MANIFEST_ISSUE_LEVELS, +} = require("resource://devtools/client/application/src/constants.js"); +const Types = require("resource://devtools/client/application/src/types/index.js"); + +const ManifestIssue = createFactory( + require("resource://devtools/client/application/src/components/manifest/ManifestIssue.js") +); + +/** + * A collection of manifest issues (errors, warnings) + */ +class ManifestIssueList extends PureComponent { + static get propTypes() { + return { + issues: Types.manifestIssueArray.isRequired, + }; + } + + // group the errors by level, and order by severity + groupIssuesByLevel() { + const { issues } = this.props; + + const errors = issues.filter(x => x.level === MANIFEST_ISSUE_LEVELS.ERROR); + const warnings = issues.filter( + x => x.level === MANIFEST_ISSUE_LEVELS.WARNING + ); + + return [errors, warnings]; + } + + render() { + const groups = this.groupIssuesByLevel().filter(list => !!list.length); + + return groups.map((list, listIndex) => { + return ul( + { + className: "manifest-issues js-manifest-issues", + key: `issuelist-${listIndex}`, + }, + list.map((issue, issueIndex) => + ManifestIssue({ + className: "manifest-issues__item", + key: `issue-${issueIndex}`, + ...issue, + }) + ) + ); + }); + } +} + +// Exports +module.exports = ManifestIssueList; diff --git a/devtools/client/application/src/components/manifest/ManifestItem.css b/devtools/client/application/src/components/manifest/ManifestItem.css new file mode 100644 index 0000000000..94da03e9b9 --- /dev/null +++ b/devtools/client/application/src/components/manifest/ManifestItem.css @@ -0,0 +1,28 @@ +/* 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-item { + vertical-align: baseline; +} + +.manifest-item__label { + box-sizing: border-box; + min-width: calc(var(--base-unit) * 32); + padding-inline-end: calc(var(--base-unit) * 4); + padding-inline-start: 0; + vertical-align: top; + color: var(--theme-text-color-alt); + font-weight: inherit; + text-align: start; +} + +.manifest-item__value { + word-break: break-all; + vertical-align: top; +} + +.manifest-item__label, +.manifest-item__value { + padding-block: calc(var(--base-unit) * 1); +} diff --git a/devtools/client/application/src/components/manifest/ManifestItem.js b/devtools/client/application/src/components/manifest/ManifestItem.js new file mode 100644 index 0000000000..96c47a1a7f --- /dev/null +++ b/devtools/client/application/src/components/manifest/ManifestItem.js @@ -0,0 +1,50 @@ +/* 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("resource://devtools/client/shared/vendor/react-prop-types.js"); +const { + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const { + tr, + td, + th, +} = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); + +/** + * This component displays a key-value data pair from a manifest + */ +class ManifestItem extends PureComponent { + static get propTypes() { + return { + label: PropTypes.node.isRequired, + children: PropTypes.node, + }; + } + + render() { + const { children, label } = this.props; + return tr( + { + className: "manifest-item js-manifest-item", + }, + th( + { + className: "manifest-item__label js-manifest-item-label", + scope: "row", + }, + label + ), + td( + { className: "manifest-item__value js-manifest-item-content" }, + children + ) + ); + } +} + +// Exports +module.exports = ManifestItem; diff --git a/devtools/client/application/src/components/manifest/ManifestJsonLink.css b/devtools/client/application/src/components/manifest/ManifestJsonLink.css new file mode 100644 index 0000000000..52343226f9 --- /dev/null +++ b/devtools/client/application/src/components/manifest/ManifestJsonLink.css @@ -0,0 +1,9 @@ +/* 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-json-link { + /* this is so it has an implicit width and the link inside gets to truncate + with an ellipsis */ + display: grid; +} diff --git a/devtools/client/application/src/components/manifest/ManifestJsonLink.js b/devtools/client/application/src/components/manifest/ManifestJsonLink.js new file mode 100644 index 0000000000..d35924b5c3 --- /dev/null +++ b/devtools/client/application/src/components/manifest/ManifestJsonLink.js @@ -0,0 +1,67 @@ +/* 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 { openDocLink } = require("resource://devtools/client/shared/link.js"); + +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const { + createFactory, + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); + +const { + a, + p, +} = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); + +const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js"); +const Localized = createFactory(FluentReact.Localized); + +/** + * This component displays an "Open JSON" link for the Manifest + */ +class ManifestJsonLink extends PureComponent { + static get propTypes() { + return { + url: PropTypes.string.isRequired, + }; + } + + get shouldRenderLink() { + const { url } = this.props; + // Firefox blocks the loading of Data URLs with mimetypes manifest+json unless + // explicitly typed by the user in the address bar. + // So we are not showing the link in this case. + // See more details in this post: + // https://blog.mozilla.org/security/2017/11/27/blocking-top-level-navigations-data-urls-firefox-59/ + return !url.startsWith("data:"); + } + + renderLink() { + const { url } = this.props; + + return a( + { + className: "js-manifest-json-link devtools-ellipsis-text", + href: "#", + title: url, + onClick: () => openDocLink(url), + }, + url + ); + } + + render() { + return p( + { className: "manifest-json-link" }, + this.shouldRenderLink + ? this.renderLink() + : Localized({ id: "manifest-json-link-data-url" }) + ); + } +} + +module.exports = ManifestJsonLink; diff --git a/devtools/client/application/src/components/manifest/ManifestLoader.css b/devtools/client/application/src/components/manifest/ManifestLoader.css new file mode 100644 index 0000000000..4f728ff6e3 --- /dev/null +++ b/devtools/client/application/src/components/manifest/ManifestLoader.css @@ -0,0 +1,14 @@ +/* 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-loader { + font-size: var(--body-20-font-size); + font-weight: var(--body-20-font-weight); +} + +.manifest-loader__load { + /* TODO: implement a spinner when tackling the UX review bug + https://bugzilla.mozilla.org/show_bug.cgi?id=1566023 */ + text-align: center; +} diff --git a/devtools/client/application/src/components/manifest/ManifestLoader.js b/devtools/client/application/src/components/manifest/ManifestLoader.js new file mode 100644 index 0000000000..9183b50ff3 --- /dev/null +++ b/devtools/client/application/src/components/manifest/ManifestLoader.js @@ -0,0 +1,108 @@ +/* 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("resource://devtools/client/shared/vendor/react.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); + +const { + aside, + h1, + p, +} = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); + +const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js"); +const Localized = createFactory(FluentReact.Localized); + +const { + connect, +} = require("resource://devtools/client/shared/vendor/react-redux.js"); + +const { + fetchManifest, +} = require("resource://devtools/client/application/src/actions/manifest.js"); + +class ManifestLoader extends PureComponent { + static get propTypes() { + return { + // these props get automatically injected via `connect` + dispatch: PropTypes.func.isRequired, + error: PropTypes.string, + hasFetchedManifest: PropTypes.bool.isRequired, + isLoading: PropTypes.bool.isRequired, + }; + } + + componentDidMount() { + this.loadManifestIfNeeded(); + } + + componentDidUpdate() { + this.loadManifestIfNeeded(); + } + + loadManifestIfNeeded() { + const { isLoading, hasFetchedManifest } = this.props; + const shallLoad = !isLoading && !hasFetchedManifest; + if (shallLoad) { + this.props.dispatch(fetchManifest()); + } + } + + renderResult() { + return Localized( + { id: "manifest-loaded-ok" }, + p({ className: "js-manifest-loaded-ok" }) + ); + } + + renderError() { + const { error } = this.props; + + return [ + Localized( + { + id: "manifest-loaded-error", + key: "manifest-error-label", + }, + h1({ className: "js-manifest-loaded-error app-page__title" }) + ), + p({ className: "technical-text", key: "manifest-error-message" }, error), + ]; + } + + render() { + const { error, isLoading } = this.props; + + const loadingDOM = isLoading + ? Localized( + { id: "manifest-loading" }, + p({ className: "manifest-loader__load js-manifest-loading" }) + ) + : null; + + const errorDOM = error ? this.renderError() : null; + const resultDOM = !isLoading && !error ? this.renderResult() : null; + + return aside( + { className: "manifest-loader" }, + loadingDOM, + errorDOM, + resultDOM + ); + } +} + +const mapDispatchToProps = dispatch => ({ dispatch }); +const mapStateToProps = state => ({ + error: state.manifest.errorMessage, + hasFetchedManifest: typeof state.manifest.manifest !== "undefined", + isLoading: state.manifest.isLoading, +}); + +module.exports = connect(mapStateToProps, mapDispatchToProps)(ManifestLoader); diff --git a/devtools/client/application/src/components/manifest/ManifestPage.js b/devtools/client/application/src/components/manifest/ManifestPage.js new file mode 100644 index 0000000000..60caea591e --- /dev/null +++ b/devtools/client/application/src/components/manifest/ManifestPage.js @@ -0,0 +1,76 @@ +/* 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("resource://devtools/client/shared/vendor/react-prop-types.js"); +const { + createFactory, + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const { + section, +} = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); + +const { + connect, +} = require("resource://devtools/client/shared/vendor/react-redux.js"); + +const Types = require("resource://devtools/client/application/src/types/index.js"); + +const ManifestLoader = createFactory( + require("resource://devtools/client/application/src/components/manifest/ManifestLoader.js") +); +const Manifest = createFactory( + require("resource://devtools/client/application/src/components/manifest/Manifest.js") +); +const ManifestEmpty = createFactory( + require("resource://devtools/client/application/src/components/manifest/ManifestEmpty.js") +); + +class ManifestPage extends PureComponent { + static get propTypes() { + return { + // these props are automatically injected via connect + hasLoadingFailed: PropTypes.bool.isRequired, + isManifestLoading: PropTypes.bool.isRequired, + manifest: PropTypes.shape(Types.manifest), + }; + } + + get shouldShowLoader() { + const { isManifestLoading, hasLoadingFailed } = this.props; + const mustLoadManifest = typeof this.props.manifest === "undefined"; + return isManifestLoading || mustLoadManifest || hasLoadingFailed; + } + + renderManifest() { + const { manifest } = this.props; + return manifest ? Manifest({ ...manifest }) : ManifestEmpty({}); + } + + render() { + const { manifest } = this.props; + + return section( + { + className: `app-page js-manifest-page ${ + !manifest ? "app-page--empty" : "" + }`, + }, + this.shouldShowLoader ? ManifestLoader({}) : this.renderManifest() + ); + } +} + +function mapStateToProps(state) { + return { + hasLoadingFailed: !!state.manifest.errorMessage, + isManifestLoading: state.manifest.isLoading, + manifest: state.manifest.manifest, + }; +} + +// Exports +module.exports = connect(mapStateToProps)(ManifestPage); diff --git a/devtools/client/application/src/components/manifest/ManifestSection.css b/devtools/client/application/src/components/manifest/ManifestSection.css new file mode 100644 index 0000000000..479a6d1f79 --- /dev/null +++ b/devtools/client/application/src/components/manifest/ManifestSection.css @@ -0,0 +1,25 @@ +/* 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-section { + padding-block: calc(var(--base-unit) * 2); + width: 100%; + border-spacing: calc(var(--base-unit) * 2) 0; + font-size: var(--body-10-font-size); + font-weight: var(--body-10-font-weight); +} + +.manifest-section--empty { + padding-block-end: 0; +} + +.manifest-section:not(:last-child) { + border-bottom: 1px solid var(--separator-color); +} + +.manifest-section__title { + font-size: var(--title-10-font-size); + font-weight: var(--title-10-font-weight); + margin: 0; +} diff --git a/devtools/client/application/src/components/manifest/ManifestSection.js b/devtools/client/application/src/components/manifest/ManifestSection.js new file mode 100644 index 0000000000..4aa92c6a15 --- /dev/null +++ b/devtools/client/application/src/components/manifest/ManifestSection.js @@ -0,0 +1,44 @@ +/* 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("resource://devtools/client/shared/vendor/react-prop-types.js"); +const { + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const { + h2, + section, +} = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); + +/** + * A section of a manifest in the form of a captioned table. + */ +class ManifestSection extends PureComponent { + static get propTypes() { + return { + children: PropTypes.node, + title: PropTypes.string.isRequired, + }; + } + + render() { + const { children, title } = this.props; + const isEmpty = !children || children.length === 0; + + return section( + { + className: `manifest-section ${ + isEmpty ? "manifest-section--empty" : "" + }`, + }, + h2({ className: "manifest-section__title" }, title), + children + ); + } +} + +// Exports +module.exports = ManifestSection; diff --git a/devtools/client/application/src/components/manifest/ManifestUrlItem.css b/devtools/client/application/src/components/manifest/ManifestUrlItem.css new file mode 100644 index 0000000000..9702e7e261 --- /dev/null +++ b/devtools/client/application/src/components/manifest/ManifestUrlItem.css @@ -0,0 +1,8 @@ +/* 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-item__url { + direction: ltr; /* force LTR so the # stays at the beginning of the hex number */ + display: inline-block; +} diff --git a/devtools/client/application/src/components/manifest/ManifestUrlItem.js b/devtools/client/application/src/components/manifest/ManifestUrlItem.js new file mode 100644 index 0000000000..03705d441a --- /dev/null +++ b/devtools/client/application/src/components/manifest/ManifestUrlItem.js @@ -0,0 +1,39 @@ +/* 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("resource://devtools/client/shared/vendor/react.js"); +const { + div, +} = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); + +const Types = require("resource://devtools/client/application/src/types/index.js"); +const ManifestItem = createFactory( + require("resource://devtools/client/application/src/components/manifest/ManifestItem.js") +); + +/** + * This component displays a Manifest member which holds a URL + */ +class ManifestUrlItem extends PureComponent { + static get propTypes() { + return { + ...Types.manifestItemUrl, // { label, value } + }; + } + + render() { + const { label, value } = this.props; + return ManifestItem( + { label }, + div({ className: "manifest-item__url" }, value) + ); + } +} + +module.exports = ManifestUrlItem; diff --git a/devtools/client/application/src/components/manifest/moz.build b/devtools/client/application/src/components/manifest/moz.build new file mode 100644 index 0000000000..bb799cbfc4 --- /dev/null +++ b/devtools/client/application/src/components/manifest/moz.build @@ -0,0 +1,18 @@ +# 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/. + +DevToolsModules( + "Manifest.js", + "ManifestColorItem.js", + "ManifestEmpty.js", + "ManifestIconItem.js", + "ManifestIssue.js", + "ManifestIssueList.js", + "ManifestItem.js", + "ManifestJsonLink.js", + "ManifestLoader.js", + "ManifestPage.js", + "ManifestSection.js", + "ManifestUrlItem.js", +) |