From 5f8de423f190bbb79a62f804151bc24824fa32d8 Mon Sep 17 00:00:00 2001 From: "Matt A. Tobin" Date: Fri, 2 Feb 2018 04:16:08 -0500 Subject: Add m-esr52 at 52.6.0 --- devtools/client/inspector/layout/actions/index.js | 5 ++ devtools/client/inspector/layout/actions/moz.build | 5 ++ .../inspector/layout/components/Accordion.css | 42 +++++++++++ .../inspector/layout/components/Accordion.js | 82 ++++++++++++++++++++++ devtools/client/inspector/layout/components/App.js | 35 +++++++++ .../client/inspector/layout/components/Grid.js | 30 ++++++++ .../client/inspector/layout/components/moz.build | 12 ++++ devtools/client/inspector/layout/layout.js | 55 +++++++++++++++ devtools/client/inspector/layout/moz.build | 18 +++++ devtools/client/inspector/layout/reducers/grids.js | 21 ++++++ devtools/client/inspector/layout/reducers/index.js | 7 ++ .../client/inspector/layout/reducers/moz.build | 10 +++ devtools/client/inspector/layout/store.js | 33 +++++++++ devtools/client/inspector/layout/types.js | 5 ++ devtools/client/inspector/layout/utils/l10n.js | 15 ++++ devtools/client/inspector/layout/utils/moz.build | 9 +++ 16 files changed, 384 insertions(+) create mode 100644 devtools/client/inspector/layout/actions/index.js create mode 100644 devtools/client/inspector/layout/actions/moz.build create mode 100644 devtools/client/inspector/layout/components/Accordion.css create mode 100644 devtools/client/inspector/layout/components/Accordion.js create mode 100644 devtools/client/inspector/layout/components/App.js create mode 100644 devtools/client/inspector/layout/components/Grid.js create mode 100644 devtools/client/inspector/layout/components/moz.build create mode 100644 devtools/client/inspector/layout/layout.js create mode 100644 devtools/client/inspector/layout/moz.build create mode 100644 devtools/client/inspector/layout/reducers/grids.js create mode 100644 devtools/client/inspector/layout/reducers/index.js create mode 100644 devtools/client/inspector/layout/reducers/moz.build create mode 100644 devtools/client/inspector/layout/store.js create mode 100644 devtools/client/inspector/layout/types.js create mode 100644 devtools/client/inspector/layout/utils/l10n.js create mode 100644 devtools/client/inspector/layout/utils/moz.build (limited to 'devtools/client/inspector/layout') 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', +) -- cgit v1.2.3