From b09ad6a1275588c0463f372ccce2c9cc457821ba Mon Sep 17 00:00:00 2001 From: Daisuke Akatsuka Date: Tue, 15 Oct 2019 07:27:25 +0000 Subject: [PATCH] Bug 1587690: Implement simple issue list UI. r=rcaliman,ladybenko Depends on D48948 Differential Revision: https://phabricator.services.mozilla.com/D48949 --HG-- extra : moz-landing-system : lando --- .../compatibility/CompatibilityView.js | 1 + .../components/CompatibilityApp.js | 31 +++++++++++++++-- .../compatibility/components/IssueItem.js | 29 ++++++++++++++++ .../compatibility/components/IssueList.js | 32 +++++++++++++++++ .../compatibility/components/moz.build | 2 ++ .../client/inspector/compatibility/moz.build | 1 + .../client/inspector/compatibility/types.js | 34 +++++++++++++++++++ 7 files changed, 127 insertions(+), 3 deletions(-) create mode 100644 devtools/client/inspector/compatibility/components/IssueItem.js create mode 100644 devtools/client/inspector/compatibility/components/IssueList.js create mode 100644 devtools/client/inspector/compatibility/types.js diff --git a/devtools/client/inspector/compatibility/CompatibilityView.js b/devtools/client/inspector/compatibility/CompatibilityView.js index 1bfab80f0d0b..913d64563ca1 100644 --- a/devtools/client/inspector/compatibility/CompatibilityView.js +++ b/devtools/client/inspector/compatibility/CompatibilityView.js @@ -32,6 +32,7 @@ class CompatibilityView { Provider, { id: "compatibilityview", + store: this.inspector.store, }, compatibilityApp ); diff --git a/devtools/client/inspector/compatibility/components/CompatibilityApp.js b/devtools/client/inspector/compatibility/components/CompatibilityApp.js index 7c880762afdc..4c3f1022b1fa 100644 --- a/devtools/client/inspector/compatibility/components/CompatibilityApp.js +++ b/devtools/client/inspector/compatibility/components/CompatibilityApp.js @@ -4,18 +4,43 @@ "use strict"; -const { PureComponent } = require("devtools/client/shared/vendor/react"); +const { connect } = require("devtools/client/shared/vendor/react-redux"); +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 Types = require("../types"); + +const IssueList = createFactory(require("./IssueList")); class CompatibilityApp extends PureComponent { + static get propTypes() { + return { + selectedNodeIssues: PropTypes.arrayOf(PropTypes.shape(Types.issue)) + .isRequired, + }; + } + render() { + const { selectedNodeIssues } = this.props; + return dom.div( { className: "theme-sidebar inspector-tabpanel", }, - "Compatibility View" + selectedNodeIssues.length + ? IssueList({ issues: selectedNodeIssues }) + : null ); } } -module.exports = CompatibilityApp; +const mapStateToProps = state => { + return { + selectedNodeIssues: state.compatibility.selectedNodeIssues, + }; +}; +module.exports = connect(mapStateToProps)(CompatibilityApp); diff --git a/devtools/client/inspector/compatibility/components/IssueItem.js b/devtools/client/inspector/compatibility/components/IssueItem.js new file mode 100644 index 000000000000..241773be3dab --- /dev/null +++ b/devtools/client/inspector/compatibility/components/IssueItem.js @@ -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/. */ + +"use strict"; + +const { PureComponent } = require("devtools/client/shared/vendor/react"); +const dom = require("devtools/client/shared/vendor/react-dom-factories"); + +const Types = require("../types"); + +class IssueItem extends PureComponent { + static get propTypes() { + return { + ...Types.issue, + }; + } + + render() { + return dom.li( + { key: `${this.props.property}:${this.props.type}` }, + Object.entries(this.props).map(([key, value]) => + dom.div({ key }, `${key}:${value}`) + ) + ); + } +} + +module.exports = IssueItem; diff --git a/devtools/client/inspector/compatibility/components/IssueList.js b/devtools/client/inspector/compatibility/components/IssueList.js new file mode 100644 index 000000000000..09a4c4950d2e --- /dev/null +++ b/devtools/client/inspector/compatibility/components/IssueList.js @@ -0,0 +1,32 @@ +/* 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 Types = require("../types"); + +const IssueItem = createFactory(require("./IssueItem")); + +class IssueList extends PureComponent { + static get propTypes() { + return { + issues: PropTypes.arrayOf(PropTypes.shape(Types.issue)).isRequired, + }; + } + + render() { + const { issues } = this.props; + + return dom.ul({}, issues.map(issue => IssueItem({ ...issue }))); + } +} + +module.exports = IssueList; diff --git a/devtools/client/inspector/compatibility/components/moz.build b/devtools/client/inspector/compatibility/components/moz.build index 0a02373618ea..fcd2fdd07cd2 100644 --- a/devtools/client/inspector/compatibility/components/moz.build +++ b/devtools/client/inspector/compatibility/components/moz.build @@ -6,4 +6,6 @@ DevToolsModules( "CompatibilityApp.js", + "IssueItem.js", + "IssueList.js", ) diff --git a/devtools/client/inspector/compatibility/moz.build b/devtools/client/inspector/compatibility/moz.build index 8f81c2dceb3a..70db7925bb7e 100644 --- a/devtools/client/inspector/compatibility/moz.build +++ b/devtools/client/inspector/compatibility/moz.build @@ -16,6 +16,7 @@ XPCSHELL_TESTS_MANIFESTS += ['test/unit/xpcshell.ini'] DevToolsModules( 'CompatibilityView.js', + 'types.js', ) with Files('**'): diff --git a/devtools/client/inspector/compatibility/types.js b/devtools/client/inspector/compatibility/types.js new file mode 100644 index 000000000000..cdcfd5e28050 --- /dev/null +++ b/devtools/client/inspector/compatibility/types.js @@ -0,0 +1,34 @@ +/* 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 browser = { + // The id of the browser which is defined in MDN compatibility dataset. + // e.g. "firefox" + // https://github.com/mdn/browser-compat-data/tree/master/browsers + id: PropTypes.string.isRequired, + // The version of this browser. + // e.g. "70.0" + version: PropTypes.string.isRequired, +}; + +const issue = { + // Type of this issue. The type should be one of MDNCompatibility.ISSUE_TYPE. + type: PropTypes.string.isRequired, + // The CSS property which caused this issue. + property: PropTypes.string.isRequired, + // The url of MDN documentation for the CSS property. + url: PropTypes.string.isRequired, + // Whether the CSS property is deprecated or not. + deprecated: PropTypes.bool.isRequired, + // Whether the CSS property is experimental or not. + experimental: PropTypes.bool.isRequired, + // The browsers which do not support the CSS property. + unsupportedBrowsers: PropTypes.arrayOf(PropTypes.shape(browser)).isRequired, +}; + +exports.issue = issue;