Bug 1315208 - Remove explicit call to `ReactDOM.render` in the LayoutView r=Honza

This commit is contained in:
Gabriel Luong 2016-11-12 22:00:48 +09:00
Родитель ec6fab657f
Коммит 12db19ad54
5 изменённых файлов: 29 добавлений и 37 удалений

Просмотреть файл

@ -534,6 +534,12 @@ Inspector.prototype = {
let defaultTab = Services.prefs.getCharPref("devtools.inspector.activeSidebar");
this._setDefaultSidebar = (event, toolId) => {
Services.prefs.setCharPref("devtools.inspector.activeSidebar", toolId);
};
this.sidebar.on("select", this._setDefaultSidebar);
if (!Services.prefs.getBoolPref("devtools.fontinspector.enabled") &&
defaultTab == "fontinspector") {
defaultTab = "ruleview";
@ -550,22 +556,10 @@ Inspector.prototype = {
INSPECTOR_L10N.getStr("inspector.sidebar.computedViewTitle"),
defaultTab == "computedview");
this._setDefaultSidebar = (event, toolId) => {
Services.prefs.setCharPref("devtools.inspector.activeSidebar", toolId);
};
this.sidebar.on("select", this._setDefaultSidebar);
this.ruleview = new RuleViewTool(this, this.panelWin);
this.computedview = new ComputedViewTool(this, this.panelWin);
if (Services.prefs.getBoolPref("devtools.layoutview.enabled")) {
this.sidebar.addExistingTab(
"layoutview",
INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle"),
defaultTab == "layoutview"
);
const {LayoutView} = require("devtools/client/inspector/layout/layout");
this.layoutview = new LayoutView(this, this.panelWin);
}

Просмотреть файл

@ -191,11 +191,6 @@
</div>
</div>
<div id="sidebar-panel-layoutview" class="devtools-monospace theme-sidebar inspector-tabpanel"
data-localization-bundle="devtools/client/locales/inspector.properties">
<div id="layoutview-container"></div>
</div>
<div id="sidebar-panel-fontinspector" class="devtools-monospace theme-sidebar inspector-tabpanel"
data-localization-bundle="devtools/client/locales/font-inspector.properties">
<div class="devtools-toolbar">

Просмотреть файл

@ -18,7 +18,7 @@ const App = createClass({
render() {
return dom.div(
{
id: "layoutview-container-focusable",
id: "layoutview-container",
},
Accordion({
items: [

Просмотреть файл

@ -4,14 +4,17 @@
"use strict";
const { createFactory, createElement } =
require("devtools/client/shared/vendor/react");
const ReactDOM = require("devtools/client/shared/vendor/react-dom");
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;
@ -24,8 +27,21 @@ LayoutView.prototype = {
init() {
let store = this.store = Store();
let provider = createElement(Provider, { store }, App());
ReactDOM.render(provider, this.document.querySelector("#layoutview-container"));
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() {

Просмотреть файл

@ -2,22 +2,9 @@
* 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/. */
#sidebar-panel-layoutview {
margin: 0;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
#layoutview-container {
height: 100%;
overflow: auto;
}
#layoutview-container-focusable {
height: 100%;
outline: none;
width: 100%;
}
.layoutview-no-grids {