summaryrefslogtreecommitdiffstats
path: root/devtools/client/inspector/layout/components
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/inspector/layout/components')
-rw-r--r--devtools/client/inspector/layout/components/Accordion.css42
-rw-r--r--devtools/client/inspector/layout/components/Accordion.js82
-rw-r--r--devtools/client/inspector/layout/components/App.js35
-rw-r--r--devtools/client/inspector/layout/components/Grid.js30
-rw-r--r--devtools/client/inspector/layout/components/moz.build12
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',
+)