dom-view.js (1936B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 "use strict"; 5 6 // React & Redux 7 const React = require("resource://devtools/client/shared/vendor/react.mjs"); 8 const ReactDOM = require("resource://devtools/client/shared/vendor/react-dom.mjs"); 9 const { 10 Provider, 11 } = require("resource://devtools/client/shared/vendor/react-redux.js"); 12 13 // DOM Panel 14 const MainFrame = React.createFactory( 15 require("resource://devtools/client/dom/content/components/MainFrame.js") 16 ); 17 18 // Store 19 const createStore = require("resource://devtools/client/shared/redux/create-store.js"); 20 21 const { 22 reducers, 23 } = require("resource://devtools/client/dom/content/reducers/index.js"); 24 const store = createStore(reducers); 25 26 /** 27 * This object represents view of the DOM panel and is responsible 28 * for rendering the content. It renders the top level ReactJS 29 * component: the MainFrame. 30 */ 31 class DomView { 32 constructor(localStore) { 33 addEventListener( 34 "devtools/chrome/message", 35 this.onMessage.bind(this), 36 true 37 ); 38 39 // Make it local so, tests can access it. 40 this.store = localStore; 41 } 42 initialize(rootGrip) { 43 const content = document.querySelector("#content"); 44 const mainFrame = MainFrame({ 45 object: rootGrip, 46 }); 47 48 // Render top level component 49 const provider = React.createElement( 50 Provider, 51 { 52 store: this.store, 53 }, 54 mainFrame 55 ); 56 57 this.mainFrame = ReactDOM.render(provider, content); 58 } 59 60 onMessage(event) { 61 const data = event.data; 62 const method = data.type; 63 64 if (typeof this[method] == "function") { 65 this[method](data.args); 66 } 67 } 68 } 69 70 // Construct DOM panel view object and expose it to tests. 71 // Tests can access it through: |panel.panelWin.view| 72 window.view = new DomView(store);