diff options
Diffstat (limited to 'devtools/client/inspector/layout/components')
5 files changed, 201 insertions, 0 deletions
diff --git a/devtools/client/inspector/layout/components/Accordion.css b/devtools/client/inspector/layout/components/Accordion.css new file mode 100644 index 000000000..4076d30fa --- /dev/null +++ b/devtools/client/inspector/layout/components/Accordion.css @@ -0,0 +1,42 @@ +/* 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/. */ + +/** + * This file should not be modified and is a duplicate from the debugger.html project. + * Any changes to this file should be imported from the upstream debugger.html project. + */ + +.accordion { + background-color: var(--theme-body-background); + width: 100%; +} + +.accordion ._header { + background-color: var(--theme-toolbar-background); + border-bottom: 1px solid var(--theme-splitter-color); + cursor: pointer; + font-size: 11px; + padding: 5px; + transition: all 0.25s ease; + width: 100%; + -moz-user-select: none; +} + +.accordion ._header:hover { + background-color: var(--theme-selection-color); +} + +.accordion ._header:hover svg { + fill: var(--theme-comment-alt); +} + +.accordion ._content { + border-bottom: 1px solid var(--theme-splitter-color); + font-size: 11px; +} + +.arrow { + vertical-align: middle; + display: inline-block; +} diff --git a/devtools/client/inspector/layout/components/Accordion.js b/devtools/client/inspector/layout/components/Accordion.js new file mode 100644 index 000000000..d69dc3c7e --- /dev/null +++ b/devtools/client/inspector/layout/components/Accordion.js @@ -0,0 +1,82 @@ +/* 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/. */ + +/** + * This file should not be modified and is a duplicate from the debugger.html project. + * Any changes to this file should be imported from the upstream debugger.html project. + */ + +"use strict"; + +const React = require("devtools/client/shared/vendor/react"); +const { DOM: dom, PropTypes } = React; + +const { div, span } = dom; + +const Accordion = React.createClass({ + displayName: "Accordion", + + propTypes: { + items: PropTypes.array + }, + + getInitialState: function () { + return { opened: this.props.items.map(item => item.opened), + created: [] }; + }, + + handleHeaderClick: function (i) { + const opened = [...this.state.opened]; + const created = [...this.state.created]; + const item = this.props.items[i]; + + opened[i] = !opened[i]; + created[i] = true; + + if (opened[i] && item.onOpened) { + item.onOpened(); + } + + this.setState({ opened, created }); + }, + + renderContainer: function (item, i) { + const { opened, created } = this.state; + const containerClassName = + item.header.toLowerCase().replace(/\s/g, "-") + "-pane"; + let arrowClassName = "arrow theme-twisty"; + if (opened[i]) { + arrowClassName += " open"; + } + + return div( + { className: containerClassName, key: i }, + + div( + { className: "_header", + onClick: () => this.handleHeaderClick(i) }, + span({ className: arrowClassName }), + item.header + ), + + (created[i] || opened[i]) ? + div( + { className: "_content", + style: { display: opened[i] ? "block" : "none" } + }, + React.createElement(item.component, item.componentProps || {}) + ) : + null + ); + }, + + render: function () { + return div( + { className: "accordion" }, + this.props.items.map(this.renderContainer) + ); + } +}); + +module.exports = Accordion; diff --git a/devtools/client/inspector/layout/components/App.js b/devtools/client/inspector/layout/components/App.js new file mode 100644 index 000000000..887175b99 --- /dev/null +++ b/devtools/client/inspector/layout/components/App.js @@ -0,0 +1,35 @@ +/* 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 { getStr } = require("../utils/l10n"); +const { DOM: dom, createClass, createFactory } = require("devtools/client/shared/vendor/react"); +const { connect } = require("devtools/client/shared/vendor/react-redux"); + +const Accordion = createFactory(require("./Accordion")); +const Grid = createFactory(require("./Grid")); + +const App = createClass({ + + displayName: "App", + + render() { + return dom.div( + { + id: "layoutview-container", + }, + Accordion({ + items: [ + { header: getStr("layout.header"), + component: Grid, + opened: true } + ] + }) + ); + }, + +}); + +module.exports = connect(state => state)(App); diff --git a/devtools/client/inspector/layout/components/Grid.js b/devtools/client/inspector/layout/components/Grid.js new file mode 100644 index 000000000..8081ce9ef --- /dev/null +++ b/devtools/client/inspector/layout/components/Grid.js @@ -0,0 +1,30 @@ +/* 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 { getStr } = require("../utils/l10n"); +const { DOM: dom, createClass } = require("devtools/client/shared/vendor/react"); + +const Grid = createClass({ + + displayName: "Grid", + + render() { + return dom.div( + { + id: "layoutview-grid-container", + }, + dom.div( + { + className: "layoutview-no-grids" + }, + getStr("layout.noGrids") + ) + ); + }, + +}); + +module.exports = Grid; diff --git a/devtools/client/inspector/layout/components/moz.build b/devtools/client/inspector/layout/components/moz.build new file mode 100644 index 000000000..0ae19f4f6 --- /dev/null +++ b/devtools/client/inspector/layout/components/moz.build @@ -0,0 +1,12 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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( + 'Accordion.css', + 'Accordion.js', + 'App.js', + 'Grid.js', +) |