☠☠ backed out by 21c1ab065df1 ☠ ☠ | |
author | Gabriel Luong <gabriel.luong@gmail.com> |
Fri, 21 Dec 2018 14:05:46 -0500 | |
changeset 451736 | d5f22f6c8de8c96d46679399d60b453f4d98d57c |
parent 451735 | ddcc1ef993543f7bfb15e2d136c83fc721d54f09 |
child 451737 | 21c1ab065df1b2d9dce639fb814c42e23fa86034 |
push id | 35252 |
push user | ccoroiu@mozilla.com |
push date | Fri, 21 Dec 2018 21:56:22 +0000 |
treeherder | mozilla-central@b23630094b9c [default view] [failures only] |
perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
reviewers | pbro |
bugs | 1478894 |
milestone | 66.0a1 |
first release with | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
last release without | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
--- a/devtools/client/inspector/inspector.js +++ b/devtools/client/inspector/inspector.js @@ -876,16 +876,21 @@ Inspector.prototype = { this.browserRequire("devtools/client/inspector/fonts/fonts"); panel = new FontInspector(this, this.panelWin); break; case "layoutview": const LayoutView = this.browserRequire("devtools/client/inspector/layout/layout"); panel = new LayoutView(this, this.panelWin); break; + case "newruleview": + const RulesView = + this.browserRequire("devtools/client/inspector/rules/new-rules"); + panel = new RulesView(this, this.panelWin); + break; case "ruleview": const {RuleViewTool} = require("devtools/client/inspector/rules/rules"); panel = new RuleViewTool(this, this.panelWin); break; default: // This is a custom panel or a non lazy-loaded one. return null; } @@ -956,16 +961,23 @@ Inspector.prototype = { // Insert Changes as third tab, right after Computed. // TODO: move this inline to `sidebarPanels` above when addressing Bug 1491887. sidebarPanels.splice(2, 0, { id: "changesview", title: INSPECTOR_L10N.getStr("inspector.sidebar.changesViewTitle"), }); } + if (Services.prefs.getBoolPref("devtools.inspector.new-rulesview.enabled")) { + sidebarPanels.push({ + id: "newruleview", + title: INSPECTOR_L10N.getStr("inspector.sidebar.ruleViewTitle"), + }); + } + for (const { id, title } of sidebarPanels) { // The Computed panel is not a React-based panel. We pick its element container from // the DOM and wrap it in a React component (InspectorTabPanel) so it behaves like // other panels when using the Inspector's tool sidebar. if (id === "computedview") { this.sidebar.queueExistingTab(id, title, defaultTab === id); } else { // When `panel` is a function, it is called when the tab should render. It is
--- a/devtools/client/inspector/reducers.js +++ b/devtools/client/inspector/reducers.js @@ -12,8 +12,9 @@ exports.boxModel = require("devtools/cli exports.changes = require("devtools/client/inspector/changes/reducers/changes"); exports.extensionsSidebar = require("devtools/client/inspector/extensions/reducers/sidebar"); exports.flexbox = require("devtools/client/inspector/flexbox/reducers/flexbox"); exports.fontOptions = require("devtools/client/inspector/fonts/reducers/font-options"); exports.fontData = require("devtools/client/inspector/fonts/reducers/fonts"); exports.fontEditor = require("devtools/client/inspector/fonts/reducers/font-editor"); exports.grids = require("devtools/client/inspector/grids/reducers/grids"); exports.highlighterSettings = require("devtools/client/inspector/grids/reducers/highlighter-settings"); +exports.rules = require("devtools/client/inspector/rules/reducers/rules");
new file mode 100644 --- /dev/null +++ b/devtools/client/inspector/rules/actions/index.js @@ -0,0 +1,14 @@ +/* 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 { createEnum } = require("devtools/client/shared/enum"); + +createEnum([ + + // Update the entire rules state with the new list of rules. + "UPDATE_RULES", + +], module.exports);
new file mode 100644 --- /dev/null +++ b/devtools/client/inspector/rules/actions/moz.build @@ -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/. + +DevToolsModules( + 'index.js', +)
new file mode 100644 --- /dev/null +++ b/devtools/client/inspector/rules/components/RulesApp.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 { PureComponent } = require("devtools/client/shared/vendor/react"); +const dom = require("devtools/client/shared/vendor/react-dom-factories"); +const { connect } = require("devtools/client/shared/vendor/react-redux"); + +const { getStr } = require("../utils/l10n"); + +class RulesApp extends PureComponent { + static get propTypes() { + return {}; + } + + render() { + return dom.div( + { + id: "sidebar-panel-ruleview", + className: "theme-sidebar inspector-tabpanel", + }, + dom.div( + { + id: "ruleview-no-results", + className: "devtools-sidepanel-no-result", + }, + getStr("rule.empty") + ) + ); + } +} + +module.exports = connect(state => state)(RulesApp);
new file mode 100644 --- /dev/null +++ b/devtools/client/inspector/rules/components/moz.build @@ -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/. + +DevToolsModules( + 'RulesApp.js', +)
--- a/devtools/client/inspector/rules/moz.build +++ b/devtools/client/inspector/rules/moz.build @@ -1,19 +1,24 @@ # -*- 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', 'models', + 'reducers', + 'utils', 'views', ] DevToolsModules( + 'new-rules.js', 'rules.js', ) BROWSER_CHROME_MANIFESTS += ['test/browser.ini'] with Files('**'): BUG_COMPONENT = ('DevTools', 'CSS Rules Inspector')
new file mode 100644 --- /dev/null +++ b/devtools/client/inspector/rules/new-rules.js @@ -0,0 +1,50 @@ +/* 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, createElement } = require("devtools/client/shared/vendor/react"); +const { Provider } = require("devtools/client/shared/vendor/react-redux"); + +const RulesApp = createFactory(require("./components/RulesApp")); + +const { LocalizationHelper } = require("devtools/shared/l10n"); +const INSPECTOR_L10N = + new LocalizationHelper("devtools/client/locales/inspector.properties"); + +class RulesView { + constructor(inspector, window) { + this.document = window.document; + this.inspector = inspector; + this.store = inspector.store; + + this.init(); + } + + init() { + if (!this.inspector) { + return; + } + + const rulesApp = RulesApp({}); + + const provider = createElement(Provider, { + id: "ruleview", + key: "ruleview", + store: this.store, + title: INSPECTOR_L10N.getStr("inspector.sidebar.ruleViewTitle") + }, rulesApp); + + // Expose the provider to let inspector.js use it in setupSidebar. + this.provider = provider; + } + + destroy() { + this.document = null; + this.inspector = null; + this.store = null; + } +} + +module.exports = RulesView;
new file mode 100644 --- /dev/null +++ b/devtools/client/inspector/rules/reducers/moz.build @@ -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/. + +DevToolsModules( + 'rules.js', +)
new file mode 100644 --- /dev/null +++ b/devtools/client/inspector/rules/reducers/rules.js @@ -0,0 +1,19 @@ +/* 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_RULES = {}; + +const reducers = { + +}; + +module.exports = function(rules = INITIAL_RULES, action) { + const reducer = reducers[action.type]; + if (!reducer) { + return rules; + } + return reducer(rules, action); +};
new file mode 100644 --- /dev/null +++ b/devtools/client/inspector/rules/utils/l10n.js @@ -0,0 +1,13 @@ +/* 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/shared/locales/styleinspector.properties"); + +module.exports = { + getStr: (...args) => L10N.getStr(...args), + getFormatStr: (...args) => L10N.getFormatStr(...args), +};
new file mode 100644 --- /dev/null +++ b/devtools/client/inspector/rules/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', +)
--- a/devtools/client/preferences/devtools-client.js +++ b/devtools/client/preferences/devtools-client.js @@ -51,16 +51,18 @@ pref("devtools.inspector.showAllAnonymou // Show user agent shadow roots pref("devtools.inspector.showUserAgentShadowRoots", false); // Enable the CSS shapes highlighter pref("devtools.inspector.shapesHighlighter.enabled", true); // Enable the font highlight-on-hover feature pref("devtools.inspector.fonthighlighter.enabled", true); // Enable tracking of style changes and the Changes panel in the Inspector pref("devtools.inspector.changes.enabled", true); +// Enable the new Rules View +pref("devtools.inspector.new-rulesview.enabled", false); // Flexbox preferences pref("devtools.inspector.flexboxHighlighter.enabled", true); pref("devtools.flexboxinspector.enabled", true); // Grid highlighter preferences pref("devtools.gridinspector.gridOutlineMaxColumns", 50); pref("devtools.gridinspector.gridOutlineMaxRows", 50);