summaryrefslogtreecommitdiffstats
path: root/devtools/client/inspector/layout
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/inspector/layout')
-rw-r--r--devtools/client/inspector/layout/actions/index.js5
-rw-r--r--devtools/client/inspector/layout/actions/moz.build5
-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
-rw-r--r--devtools/client/inspector/layout/layout.js55
-rw-r--r--devtools/client/inspector/layout/moz.build18
-rw-r--r--devtools/client/inspector/layout/reducers/grids.js21
-rw-r--r--devtools/client/inspector/layout/reducers/index.js7
-rw-r--r--devtools/client/inspector/layout/reducers/moz.build10
-rw-r--r--devtools/client/inspector/layout/store.js33
-rw-r--r--devtools/client/inspector/layout/types.js5
-rw-r--r--devtools/client/inspector/layout/utils/l10n.js15
-rw-r--r--devtools/client/inspector/layout/utils/moz.build9
16 files changed, 384 insertions, 0 deletions
diff --git a/devtools/client/inspector/layout/actions/index.js b/devtools/client/inspector/layout/actions/index.js
new file mode 100644
index 000000000..66735cddb
--- /dev/null
+++ b/devtools/client/inspector/layout/actions/index.js
@@ -0,0 +1,5 @@
+/* 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";
diff --git a/devtools/client/inspector/layout/actions/moz.build b/devtools/client/inspector/layout/actions/moz.build
new file mode 100644
index 000000000..568f361a5
--- /dev/null
+++ b/devtools/client/inspector/layout/actions/moz.build
@@ -0,0 +1,5 @@
+# -*- 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/.
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',
+)
diff --git a/devtools/client/inspector/layout/layout.js b/devtools/client/inspector/layout/layout.js
new file mode 100644
index 000000000..cf0955b27
--- /dev/null
+++ b/devtools/client/inspector/layout/layout.js
@@ -0,0 +1,55 @@
+/* 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 Services = require("Services");
+const { createFactory, createElement } = require("devtools/client/shared/vendor/react");
+const { Provider } = require("devtools/client/shared/vendor/react-redux");
+
+const App = createFactory(require("./components/App"));
+const Store = require("./store");
+
+const { LocalizationHelper } = require("devtools/shared/l10n");
+const INSPECTOR_L10N =
+ new LocalizationHelper("devtools/client/locales/inspector.properties");
+
+function LayoutView(inspector, window) {
+ this.inspector = inspector;
+ this.document = window.document;
+ this.store = null;
+
+ this.init();
+}
+
+LayoutView.prototype = {
+
+ init() {
+ let store = this.store = Store();
+ let provider = createElement(Provider, {
+ store,
+ id: "layoutview",
+ title: INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle"),
+ key: "layoutview",
+ }, App());
+
+ let defaultTab = Services.prefs.getCharPref("devtools.inspector.activeSidebar");
+
+ this.inspector.addSidebarTab(
+ "layoutview",
+ INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle"),
+ provider,
+ defaultTab == "layoutview"
+ );
+ },
+
+ destroy() {
+ this.inspector = null;
+ this.document = null;
+ this.store = null;
+ },
+};
+
+exports.LayoutView = LayoutView;
+
diff --git a/devtools/client/inspector/layout/moz.build b/devtools/client/inspector/layout/moz.build
new file mode 100644
index 000000000..8575deedf
--- /dev/null
+++ b/devtools/client/inspector/layout/moz.build
@@ -0,0 +1,18 @@
+# -*- 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/.
+
+DIRS += [
+ 'actions',
+ 'components',
+ 'reducers',
+ 'utils',
+]
+
+DevToolsModules(
+ 'layout.js',
+ 'store.js',
+ 'types.js',
+)
diff --git a/devtools/client/inspector/layout/reducers/grids.js b/devtools/client/inspector/layout/reducers/grids.js
new file mode 100644
index 000000000..3a1c26fd4
--- /dev/null
+++ b/devtools/client/inspector/layout/reducers/grids.js
@@ -0,0 +1,21 @@
+/* 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 INITIAL_GRIDS = {
+
+};
+
+let reducers = {
+
+};
+
+module.exports = function (grids = INITIAL_GRIDS, action) {
+ let reducer = reducers[action.type];
+ if (!reducer) {
+ return grids;
+ }
+ return reducer(grids, action);
+};
diff --git a/devtools/client/inspector/layout/reducers/index.js b/devtools/client/inspector/layout/reducers/index.js
new file mode 100644
index 000000000..3fed406d7
--- /dev/null
+++ b/devtools/client/inspector/layout/reducers/index.js
@@ -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/. */
+
+"use strict";
+
+exports.grids = require("./grids");
diff --git a/devtools/client/inspector/layout/reducers/moz.build b/devtools/client/inspector/layout/reducers/moz.build
new file mode 100644
index 000000000..7c6955914
--- /dev/null
+++ b/devtools/client/inspector/layout/reducers/moz.build
@@ -0,0 +1,10 @@
+# -*- 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(
+ 'grids.js',
+ 'index.js',
+)
diff --git a/devtools/client/inspector/layout/store.js b/devtools/client/inspector/layout/store.js
new file mode 100644
index 000000000..5069dda26
--- /dev/null
+++ b/devtools/client/inspector/layout/store.js
@@ -0,0 +1,33 @@
+/* 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 { combineReducers } = require("devtools/client/shared/vendor/redux");
+const createStore = require("devtools/client/shared/redux/create-store");
+const reducers = require("./reducers/index");
+const flags = require("devtools/shared/flags");
+
+module.exports = function () {
+ let shouldLog = false;
+ let history;
+
+ // If testing, store the action history in an array
+ // we'll later attach to the store
+ if (flags.testing) {
+ history = [];
+ shouldLog = true;
+ }
+
+ let store = createStore({
+ log: shouldLog,
+ history
+ })(combineReducers(reducers), {});
+
+ if (history) {
+ store.history = history;
+ }
+
+ return store;
+};
diff --git a/devtools/client/inspector/layout/types.js b/devtools/client/inspector/layout/types.js
new file mode 100644
index 000000000..66735cddb
--- /dev/null
+++ b/devtools/client/inspector/layout/types.js
@@ -0,0 +1,5 @@
+/* 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";
diff --git a/devtools/client/inspector/layout/utils/l10n.js b/devtools/client/inspector/layout/utils/l10n.js
new file mode 100644
index 000000000..96ab21768
--- /dev/null
+++ b/devtools/client/inspector/layout/utils/l10n.js
@@ -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/. */
+
+"use strict";
+
+const { LocalizationHelper } = require("devtools/shared/l10n");
+const L10N = new LocalizationHelper("devtools/client/locales/layout.properties");
+
+module.exports = {
+ getStr: (...args) => L10N.getStr(...args),
+ getFormatStr: (...args) => L10N.getFormatStr(...args),
+ getFormatStrWithNumbers: (...args) => L10N.getFormatStrWithNumbers(...args),
+ numberWithDecimals: (...args) => L10N.numberWithDecimals(...args),
+};
diff --git a/devtools/client/inspector/layout/utils/moz.build b/devtools/client/inspector/layout/utils/moz.build
new file mode 100644
index 000000000..e3053b63f
--- /dev/null
+++ b/devtools/client/inspector/layout/utils/moz.build
@@ -0,0 +1,9 @@
+# -*- 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(
+ 'l10n.js',
+)