From a311b37417529c7d8cfcf9eaedeaf61dcf9d255e Mon Sep 17 00:00:00 2001 From: Gabriel Luong Date: Thu, 16 Feb 2017 15:50:59 +0100 Subject: [PATCH] Bug 1336198 - Part 8: Use the react/redux box model in the computed view. r=jdescottes MozReview-Commit-ID: 8D53vJG3zda --HG-- extra : rebase_source : 3af751344d2ef4efbb23ef4dadf65515b2b8844b extra : histedit_source : f8998f66d6404951fda38b48555bd24f50bbdad3 --- .../client/inspector/boxmodel/box-model.js | 10 +++- .../boxmodel/components/BoxModelApp.js | 51 +++++++++++++++++++ .../inspector/boxmodel/components/moz.build | 1 + .../client/inspector/computed/computed.js | 32 ++++++++++++ devtools/client/inspector/inspector.js | 5 +- devtools/client/shared/browser-loader.js | 1 + 6 files changed, 96 insertions(+), 4 deletions(-) create mode 100644 devtools/client/inspector/boxmodel/components/BoxModelApp.js diff --git a/devtools/client/inspector/boxmodel/box-model.js b/devtools/client/inspector/boxmodel/box-model.js index 9edf3164c9c9..839b608f5ca2 100644 --- a/devtools/client/inspector/boxmodel/box-model.js +++ b/devtools/client/inspector/boxmodel/box-model.js @@ -75,12 +75,13 @@ BoxModel.prototype = { }, /** - * Returns true if the layout panel is visible, and false otherwise. + * Returns true if the computed or layout panel is visible, and false otherwise. */ isPanelVisible() { return this.inspector.toolbox.currentToolId === "inspector" && this.inspector.sidebar && - this.inspector.sidebar.getCurrentTabID() === "layoutview"; + (this.inspector.sidebar.getCurrentTabID() === "layoutview" || + this.inspector.sidebar.getCurrentTabID() === "computedview"); }, /** @@ -167,6 +168,11 @@ BoxModel.prototype = { return; } + if (this.inspector.selection.isConnected() && + this.inspector.selection.isElementNode()) { + this.trackReflows(); + } + this.updateBoxModel(); }, diff --git a/devtools/client/inspector/boxmodel/components/BoxModelApp.js b/devtools/client/inspector/boxmodel/components/BoxModelApp.js new file mode 100644 index 000000000000..2af27ac77c2f --- /dev/null +++ b/devtools/client/inspector/boxmodel/components/BoxModelApp.js @@ -0,0 +1,51 @@ +/* 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 { addons, createClass, createFactory, PropTypes } = + require("devtools/client/shared/vendor/react"); +const { connect } = require("devtools/client/shared/vendor/react-redux"); + +const { LocalizationHelper } = require("devtools/shared/l10n"); + +const Accordion = + createFactory(require("devtools/client/inspector/layout/components/Accordion")); +const BoxModel = createFactory(require("./BoxModel")); + +const Types = require("../types"); + +const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties"; +const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI); + +const BoxModelApp = createClass({ + + displayName: "BoxModelApp", + + propTypes: { + boxModel: PropTypes.shape(Types.boxModel).isRequired, + showBoxModelProperties: PropTypes.bool.isRequired, + onHideBoxModelHighlighter: PropTypes.func.isRequired, + onShowBoxModelEditor: PropTypes.func.isRequired, + onShowBoxModelHighlighter: PropTypes.func.isRequired, + }, + + mixins: [ addons.PureRenderMixin ], + + render() { + return Accordion({ + items: [ + { + header: BOXMODEL_L10N.getStr("boxmodel.title"), + component: BoxModel, + componentProps: this.props, + opened: true, + } + ] + }); + }, + +}); + +module.exports = connect(state => state)(BoxModelApp); diff --git a/devtools/client/inspector/boxmodel/components/moz.build b/devtools/client/inspector/boxmodel/components/moz.build index 562fd1a2cba8..02638ae7b291 100644 --- a/devtools/client/inspector/boxmodel/components/moz.build +++ b/devtools/client/inspector/boxmodel/components/moz.build @@ -6,6 +6,7 @@ DevToolsModules( 'BoxModel.js', + 'BoxModelApp.js', 'BoxModelEditable.js', 'BoxModelInfo.js', 'BoxModelMain.js', diff --git a/devtools/client/inspector/computed/computed.js b/devtools/client/inspector/computed/computed.js index 54c543c672ad..55fc88c4f916 100644 --- a/devtools/client/inspector/computed/computed.js +++ b/devtools/client/inspector/computed/computed.js @@ -28,6 +28,12 @@ const TooltipsOverlay = require("devtools/client/inspector/shared/tooltips-overl const KeyShortcuts = require("devtools/client/shared/key-shortcuts"); const clipboardHelper = require("devtools/shared/platform/clipboard"); +const { createElement, createFactory } = require("devtools/client/shared/vendor/react"); +const ReactDOM = require("devtools/client/shared/vendor/react-dom"); +const { Provider } = require("devtools/client/shared/vendor/react-redux"); + +const BoxModelApp = createFactory(require("devtools/client/inspector/boxmodel/components/BoxModelApp")); + const STYLE_INSPECTOR_PROPERTIES = "devtools/shared/locales/styleinspector.properties"; const {LocalizationHelper} = require("devtools/shared/l10n"); const STYLE_INSPECTOR_L10N = new LocalizationHelper(STYLE_INSPECTOR_PROPERTIES); @@ -153,6 +159,7 @@ UpdateProcess.prototype = { function CssComputedView(inspector, document, pageStyle) { this.inspector = inspector; this.highlighters = inspector.highlighters; + this.store = inspector.store; this.styleDocument = document; this.styleWindow = this.styleDocument.defaultView; this.pageStyle = pageStyle; @@ -208,6 +215,7 @@ function CssComputedView(inspector, document, pageStyle) { // The element that we're inspecting, and the document that it comes from. this._viewedElement = null; + this.createBoxModelView(); this.createStyleViews(); this._contextmenu = new StyleInspectorMenu(this, { isRuleView: false }); @@ -604,6 +612,29 @@ CssComputedView.prototype = { this.inspector.emit("computed-view-sourcelinks-updated"); }, + /** + * Render the box model view. + */ + createBoxModelView: function () { + let { + onHideBoxModelHighlighter, + onShowBoxModelEditor, + onShowBoxModelHighlighter, + } = this.inspector.boxmodelview.getComponentProps(); + + let provider = createElement( + Provider, + { store: this.store }, + BoxModelApp({ + showBoxModelProperties: false, + onHideBoxModelHighlighter, + onShowBoxModelEditor, + onShowBoxModelHighlighter, + }) + ); + ReactDOM.render(provider, this.styleDocument.getElementById("boxmodel-wrapper")); + }, + /** * The CSS as displayed by the UI. */ @@ -795,6 +826,7 @@ CssComputedView.prototype = { this.inspector = null; this.highlighters = null; + this.store = null; this.styleDocument = null; this.styleWindow = null; diff --git a/devtools/client/inspector/inspector.js b/devtools/client/inspector/inspector.js index c77a4bb6daed..7b251be95c84 100644 --- a/devtools/client/inspector/inspector.js +++ b/devtools/client/inspector/inspector.js @@ -24,7 +24,6 @@ const MenuItem = require("devtools/client/framework/menu-item"); const {HTMLBreadcrumbs} = require("devtools/client/inspector/breadcrumbs"); const BoxModelView = require("devtools/client/inspector/boxmodel/box-model"); -const {ComputedViewTool} = require("devtools/client/inspector/computed/computed"); const {FontInspector} = require("devtools/client/inspector/fonts/fonts"); const {InspectorSearch} = require("devtools/client/inspector/inspector-search"); const {RuleViewTool} = require("devtools/client/inspector/rules/rules"); @@ -573,8 +572,10 @@ Inspector.prototype = { defaultTab == "computedview"); this.ruleview = new RuleViewTool(this, this.panelWin); - this.computedview = new ComputedViewTool(this, this.panelWin); this.boxmodelview = new BoxModelView(this, this.panelWin); + const {ComputedViewTool} = + this.browserRequire("devtools/client/inspector/computed/computed"); + this.computedview = new ComputedViewTool(this, this.panelWin); if (Services.prefs.getBoolPref("devtools.layoutview.enabled")) { const LayoutView = this.browserRequire("devtools/client/inspector/layout/layout"); diff --git a/devtools/client/shared/browser-loader.js b/devtools/client/shared/browser-loader.js index e21a899044a3..3aef74a99bf9 100644 --- a/devtools/client/shared/browser-loader.js +++ b/devtools/client/shared/browser-loader.js @@ -13,6 +13,7 @@ const { AppConstants } = devtools.require("resource://gre/modules/AppConstants.j const BROWSER_BASED_DIRS = [ "resource://devtools/client/inspector/boxmodel", + "resource://devtools/client/inspector/computed", "resource://devtools/client/inspector/layout", "resource://devtools/client/jsonview", "resource://devtools/client/shared/vendor",