diff options
Diffstat (limited to 'devtools/client/aboutdebugging/src/components/shared')
6 files changed, 334 insertions, 0 deletions
diff --git a/devtools/client/aboutdebugging/src/components/shared/DetailsLog.js b/devtools/client/aboutdebugging/src/components/shared/DetailsLog.js new file mode 100644 index 0000000000..2686407919 --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/shared/DetailsLog.js @@ -0,0 +1,64 @@ +/* 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 dom = require("devtools/client/shared/vendor/react-dom-factories"); +const PropTypes = require("devtools/client/shared/vendor/react-prop-types"); + +const FluentReact = require("devtools/client/shared/vendor/fluent-react"); +const Localized = createFactory(FluentReact.Localized); + +const { + MESSAGE_LEVEL, +} = require("devtools/client/aboutdebugging/src/constants"); + +/** + * This component is designed to wrap a warning / error log message + * in the details tag to hide long texts and make the message expendable + * out of the box. + */ +class DetailsLog extends PureComponent { + static get propTypes() { + return { + children: PropTypes.node.isRequired, + type: PropTypes.string, + }; + } + getLocalizationString() { + const { type } = this.props; + + switch (type) { + case MESSAGE_LEVEL.WARNING: + return "about-debugging-message-details-label-warning"; + case MESSAGE_LEVEL.ERROR: + return "about-debugging-message-details-label-error"; + default: + return "about-debugging-message-details-label"; + } + } + + render() { + const { children } = this.props; + + return dom.details( + { + className: "details--log", + }, + Localized( + { + id: this.getLocalizationString(), + }, + dom.summary({}, this.getLocalizationString()) + ), + children + ); + } +} + +module.exports = DetailsLog; diff --git a/devtools/client/aboutdebugging/src/components/shared/IconLabel.css b/devtools/client/aboutdebugging/src/components/shared/IconLabel.css new file mode 100644 index 0000000000..01470a2a8c --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/shared/IconLabel.css @@ -0,0 +1,27 @@ +/* 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/. */ + +.icon-label { + display: flex; + column-gap: var(--base-unit); + align-items: center; + margin: calc(var(--base-unit) * 2) 0; + -moz-context-properties: fill; + + font-size: var(--icon-label-font-size); +} + +.icon-label--ok { + --icon-color: var(--green-70); +} +.icon-label--info { + --icon-color: var(--grey-90); +} + +.icon-label__icon { + padding: var(--base-unit); + fill: var(--icon-color); + width: calc(var(--base-unit) * 4); + height: calc(var(--base-unit) * 4); +} diff --git a/devtools/client/aboutdebugging/src/components/shared/IconLabel.js b/devtools/client/aboutdebugging/src/components/shared/IconLabel.js new file mode 100644 index 0000000000..3b743ef2bf --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/shared/IconLabel.js @@ -0,0 +1,46 @@ +/* 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 { PureComponent } = require("devtools/client/shared/vendor/react"); +const dom = require("devtools/client/shared/vendor/react-dom-factories"); +const PropTypes = require("devtools/client/shared/vendor/react-prop-types"); + +const { + ICON_LABEL_LEVEL, +} = require("devtools/client/aboutdebugging/src/constants"); + +const ICONS = { + [ICON_LABEL_LEVEL.INFO]: "chrome://global/skin/icons/info.svg", + [ICON_LABEL_LEVEL.OK]: "chrome://global/skin/icons/check.svg", +}; + +/* This component displays an icon accompanied by some content. It's similar + to a message, but it's not interactive */ +class IconLabel extends PureComponent { + static get propTypes() { + return { + children: PropTypes.node.isRequired, + className: PropTypes.string, + level: PropTypes.oneOf(Object.values(ICON_LABEL_LEVEL)).isRequired, + }; + } + + render() { + const { children, className, level } = this.props; + return dom.span( + { + className: `icon-label icon-label--${level} ${className || ""}`, + }, + dom.img({ + className: "icon-label__icon", + src: ICONS[level], + }), + children + ); + } +} + +module.exports = IconLabel; diff --git a/devtools/client/aboutdebugging/src/components/shared/Message.css b/devtools/client/aboutdebugging/src/components/shared/Message.css new file mode 100644 index 0000000000..e2c71c50b4 --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/shared/Message.css @@ -0,0 +1,79 @@ +/* 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/. */ + +.message--level-error { + --message-background-color: var(--error-background); + --message-border-color: var(--error-border); + --message-color: var(--error-text); + --message-icon-color: var(--error-icon); +} + +.message--level-info { + --message-background-color: var(--grey-20); + --message-border-color: transparent; + --message-color: var(--grey-90); + --message-icon-color: var(--grey-90); +} + +.message--level-warning { + --message-background-color: var(--warning-background); + --message-border-color: var(--warning-border); + --message-color: var(--warning-text); + --message-icon-color: var(--warning-icon); +} + +/* + * Layout of the message + * + * +--------+-----------------+----------+ + * | Icon | Message content | closing | + * | | (several lines) | button | + * | | ( ... ) |(optional)| + * +--------+-----------------+----------+ + */ +.message { + background-color: var(--message-background-color); + border: 1px solid var(--message-border-color); + border-radius: var(--base-unit); + color: var(--message-color); + display: grid; + grid-column-gap: var(--base-unit); + grid-template-columns: calc(var(--base-unit) * 6) 1fr auto; + grid-template-areas: + "icon body button"; + margin: calc(var(--base-unit) * 2) 0; + padding: var(--base-unit); + -moz-context-properties: fill; +} + +.message__icon { + margin: var(--base-unit); + fill: var(--message-icon-color); + grid-area: icon; +} + +.message__body { + align-self: center; + font-size: var(--message-font-size); + font-weight: 400; + grid-area: body; + line-height: 1.6; +} + +.message__button { + grid-area: button; + fill: var(--message-icon-color); +} + +.message__button:hover { + /* reverse colors with icon when hover state */ + background-color: var(--message-icon-color); + fill: var(--message-background-color); +} + +.message__button:active { + /* reverse colors with text when active state */ + background-color: var(--message-color); + fill: var(--message-background-color); +} diff --git a/devtools/client/aboutdebugging/src/components/shared/Message.js b/devtools/client/aboutdebugging/src/components/shared/Message.js new file mode 100644 index 0000000000..7feea37983 --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/shared/Message.js @@ -0,0 +1,109 @@ +/* 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 dom = require("devtools/client/shared/vendor/react-dom-factories"); +const PropTypes = require("devtools/client/shared/vendor/react-prop-types"); + +const FluentReact = require("devtools/client/shared/vendor/fluent-react"); +const Localized = createFactory(FluentReact.Localized); + +const { + MESSAGE_LEVEL, +} = require("devtools/client/aboutdebugging/src/constants"); + +const ICONS = { + [MESSAGE_LEVEL.ERROR]: + "chrome://devtools/skin/images/aboutdebugging-error.svg", + [MESSAGE_LEVEL.INFO]: + "chrome://devtools/skin/images/aboutdebugging-information.svg", + [MESSAGE_LEVEL.WARNING]: "chrome://global/skin/icons/warning.svg", +}; +const CLOSE_ICON_SRC = "chrome://devtools/skin/images/close.svg"; + +/** + * This component is designed to display a photon-style message bar. The component is + * responsible for displaying the message container with the appropriate icon. The content + * of the message should be passed as the children of this component. + */ +class Message extends PureComponent { + static get propTypes() { + return { + children: PropTypes.node.isRequired, + className: PropTypes.string, + isCloseable: PropTypes.bool, + level: PropTypes.oneOf(Object.values(MESSAGE_LEVEL)).isRequired, + }; + } + + constructor(props) { + super(props); + this.state = { + isClosed: false, + }; + } + + closeMessage() { + this.setState({ isClosed: true }); + } + + renderButton(level) { + return dom.button( + { + className: + `ghost-button message__button message__button--${level} ` + + `qa-message-button-close-button`, + onClick: () => this.closeMessage(), + }, + Localized( + { + id: "about-debugging-message-close-icon", + attrs: { + alt: true, + }, + }, + dom.img({ + className: "qa-message-button-close-icon", + src: CLOSE_ICON_SRC, + }) + ) + ); + } + + render() { + const { children, className, level, isCloseable } = this.props; + const { isClosed } = this.state; + + if (isClosed) { + return null; + } + + return dom.aside( + { + className: + `message message--level-${level} qa-message` + + (className ? ` ${className}` : ""), + }, + dom.img({ + className: "message__icon", + src: ICONS[level], + }), + dom.div( + { + className: "message__body", + }, + children + ), + // if the message is closeable, render a closing button + isCloseable ? this.renderButton(level) : null + ); + } +} + +module.exports = Message; diff --git a/devtools/client/aboutdebugging/src/components/shared/moz.build b/devtools/client/aboutdebugging/src/components/shared/moz.build new file mode 100644 index 0000000000..7e0e89f2a0 --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/shared/moz.build @@ -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/. + +DevToolsModules( + "DetailsLog.js", + "IconLabel.js", + "Message.js", +) |