mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-17 23:35:34 +00:00
Backed out changeset 044f5a964dc5 (bug 1369945) for Eslint failures client/shared/components/splitter/SplitBox.js and devtools failures test/browser_inspector_breadcrumbs_visibility.js r=backout on a CLOSED TREE
This commit is contained in:
Gurzau Raul
parent
cd554f1bcf
commit
ab047e4fb1
@ -117,6 +117,6 @@ const selectNodeAndWaitForAnimations = async function (data, inspector, reason =
|
||||
*/
|
||||
const setSidebarWidth = async function (width, inspector) {
|
||||
const onUpdated = inspector.toolbox.once("inspector-sidebar-resized");
|
||||
inspector.splitBox.setState({ width });
|
||||
inspector._splitter.setState({ width });
|
||||
await onUpdated;
|
||||
};
|
||||
|
||||
@ -13,7 +13,6 @@ const promise = require("promise");
|
||||
const EventEmitter = require("devtools/shared/old-event-emitter");
|
||||
const {executeSoon} = require("devtools/shared/DevToolsUtils");
|
||||
const {Task} = require("devtools/shared/task");
|
||||
const {PrefObserver} = require("devtools/client/shared/prefs");
|
||||
|
||||
// Use privileged promise in panel documents to prevent having them to freeze
|
||||
// during toolbox destruction. See bug 1402779.
|
||||
@ -51,9 +50,7 @@ const INITIAL_SIDEBAR_SIZE = 350;
|
||||
|
||||
// If the toolbox width is smaller than given amount of pixels,
|
||||
// the sidebar automatically switches from 'landscape' to 'portrait' mode.
|
||||
const PORTRAIT_MODE_WIDTH = 800;
|
||||
|
||||
const SPLIT_RULE_VIEW_PREF = "devtools.inspector.split-rule-enabled";
|
||||
const PORTRAIT_MODE_WIDTH = 700;
|
||||
|
||||
/**
|
||||
* Represents an open instance of the Inspector for a tab.
|
||||
@ -105,7 +102,6 @@ function Inspector(toolbox) {
|
||||
this._panels = new Map();
|
||||
|
||||
this.highlighters = new HighlightersOverlay(this);
|
||||
this.prefsObserver = new PrefObserver("devtools.");
|
||||
this.reflowTracker = new ReflowTracker(this._target);
|
||||
this.store = Store();
|
||||
this.telemetry = new Telemetry();
|
||||
@ -114,8 +110,6 @@ function Inspector(toolbox) {
|
||||
// telemetry counts in the Grid Inspector are not double counted on reload.
|
||||
this.previousURL = this.target.url;
|
||||
|
||||
this.isSplitRuleViewEnabled = Services.prefs.getBoolPref(SPLIT_RULE_VIEW_PREF);
|
||||
|
||||
this.nodeMenuTriggerInfo = null;
|
||||
|
||||
this._handleRejectionIfNotDestroyed = this._handleRejectionIfNotDestroyed.bind(this);
|
||||
@ -135,11 +129,8 @@ function Inspector(toolbox) {
|
||||
this.onSidebarResized = this.onSidebarResized.bind(this);
|
||||
this.onSidebarSelect = this.onSidebarSelect.bind(this);
|
||||
this.onSidebarShown = this.onSidebarShown.bind(this);
|
||||
this.onSidebarToggle = this.onSidebarToggle.bind(this);
|
||||
this.onSplitRuleViewPrefChanged = this.onSplitRuleViewPrefChanged.bind(this);
|
||||
|
||||
this._target.on("will-navigate", this._onBeforeNavigate);
|
||||
this.prefsObserver.on(SPLIT_RULE_VIEW_PREF, this.onSplitRuleViewPrefChanged);
|
||||
}
|
||||
|
||||
Inspector.prototype = {
|
||||
@ -462,40 +453,25 @@ Inspector.prototype = {
|
||||
setupSplitter: function () {
|
||||
let SplitBox = this.React.createFactory(this.browserRequire(
|
||||
"devtools/client/shared/components/splitter/SplitBox"));
|
||||
let { width, height, splitSidebarWidth } = this.getSidebarSize();
|
||||
|
||||
let { width, height } = this.getSidebarSize();
|
||||
let splitter = SplitBox({
|
||||
className: "inspector-sidebar-splitter",
|
||||
initialWidth: width,
|
||||
initialHeight: height,
|
||||
minSize: "10%",
|
||||
maxSize: "80%",
|
||||
splitterSize: 1,
|
||||
endPanelControl: true,
|
||||
startPanel: this.InspectorTabPanel({
|
||||
id: "inspector-main-content"
|
||||
}),
|
||||
endPanel: SplitBox({
|
||||
initialWidth: splitSidebarWidth,
|
||||
minSize: 10,
|
||||
maxSize: "80%",
|
||||
splitterSize: this.isSplitRuleViewEnabled ? 1 : 0,
|
||||
endPanelControl: false,
|
||||
startPanel: this.InspectorTabPanel({
|
||||
id: "inspector-rules-container"
|
||||
}),
|
||||
endPanel: this.InspectorTabPanel({
|
||||
id: "inspector-sidebar-container"
|
||||
}),
|
||||
ref: splitbox => {
|
||||
this.sidebarSplitBox = splitbox;
|
||||
},
|
||||
endPanel: this.InspectorTabPanel({
|
||||
id: "inspector-sidebar-container"
|
||||
}),
|
||||
vert: this.useLandscapeMode(),
|
||||
onControlledPanelResized: this.onSidebarResized,
|
||||
});
|
||||
|
||||
this.splitBox = this.ReactDOM.render(splitter,
|
||||
this._splitter = this.ReactDOM.render(splitter,
|
||||
this.panelDoc.getElementById("inspector-splitter-box"));
|
||||
|
||||
this.panelWin.addEventListener("resize", this.onPanelWindowResize, true);
|
||||
@ -517,7 +493,7 @@ Inspector.prototype = {
|
||||
* to `horizontal` to support portrait view.
|
||||
*/
|
||||
onPanelWindowResize: function () {
|
||||
this.splitBox.setState({
|
||||
this._splitter.setState({
|
||||
vert: this.useLandscapeMode(),
|
||||
});
|
||||
},
|
||||
@ -525,42 +501,31 @@ Inspector.prototype = {
|
||||
getSidebarSize: function () {
|
||||
let width;
|
||||
let height;
|
||||
let splitSidebarWidth;
|
||||
|
||||
// Initialize splitter size from preferences.
|
||||
try {
|
||||
width = Services.prefs.getIntPref("devtools.toolsidebar-width.inspector");
|
||||
height = Services.prefs.getIntPref("devtools.toolsidebar-height.inspector");
|
||||
splitSidebarWidth = Services.prefs.getIntPref(
|
||||
"devtools.toolsidebar-width.inspector.splitsidebar");
|
||||
} catch (e) {
|
||||
// Set width and height of the splitter. Only one
|
||||
// value is really useful at a time depending on the current
|
||||
// orientation (vertical/horizontal).
|
||||
// Having both is supported by the splitter component.
|
||||
width = this.isSplitRuleViewEnabled ?
|
||||
INITIAL_SIDEBAR_SIZE * 2 : INITIAL_SIDEBAR_SIZE;
|
||||
width = INITIAL_SIDEBAR_SIZE;
|
||||
height = INITIAL_SIDEBAR_SIZE;
|
||||
splitSidebarWidth = INITIAL_SIDEBAR_SIZE;
|
||||
}
|
||||
return { width, height };
|
||||
},
|
||||
|
||||
return { width, height, splitSidebarWidth };
|
||||
onSidebarShown: function () {
|
||||
this._splitter.setState(this.getSidebarSize());
|
||||
},
|
||||
|
||||
onSidebarHidden: function () {
|
||||
// Store the current splitter size to preferences.
|
||||
let state = this.splitBox.state;
|
||||
let state = this._splitter.state;
|
||||
Services.prefs.setIntPref("devtools.toolsidebar-width.inspector", state.width);
|
||||
Services.prefs.setIntPref("devtools.toolsidebar-height.inspector", state.height);
|
||||
|
||||
if (this.isSplitRuleViewEnabled) {
|
||||
Services.prefs.setIntPref("devtools.toolsidebar-width.inspector.splitsidebar",
|
||||
this.sidebarSplitBox.state.width);
|
||||
}
|
||||
},
|
||||
|
||||
onSidebarResized: function (width, height) {
|
||||
this.toolbox.emit("inspector-sidebar-resized", { width, height });
|
||||
},
|
||||
|
||||
onSidebarSelect: function (event, toolId) {
|
||||
@ -574,83 +539,8 @@ Inspector.prototype = {
|
||||
this.toolbox.emit("inspector-sidebar-select", toolId);
|
||||
},
|
||||
|
||||
onSidebarShown: function () {
|
||||
let { width, height, splitSidebarWidth } = this.getSidebarSize();
|
||||
this.splitBox.setState({ width, height });
|
||||
this.sidebarSplitBox.setState({ width: splitSidebarWidth });
|
||||
},
|
||||
|
||||
onSidebarToggle: function () {
|
||||
Services.prefs.setBoolPref(SPLIT_RULE_VIEW_PREF, !this.isSplitRuleViewEnabled);
|
||||
},
|
||||
|
||||
async onSplitRuleViewPrefChanged() {
|
||||
// Update the stored value of the split rule view preference since it changed.
|
||||
this.isSplitRuleViewEnabled = Services.prefs.getBoolPref(SPLIT_RULE_VIEW_PREF);
|
||||
|
||||
await this.setupToolbar();
|
||||
await this.addRuleView();
|
||||
},
|
||||
|
||||
/**
|
||||
* Adds the rule view to the main or split sidebar depending on whether or not it is
|
||||
* split view mode. The default tab specifies whether or not the rule view should be
|
||||
* selected. The defaultTab defaults to the rule view when the rule view is being merged
|
||||
* back into the sidebar from the split sidebar. Otherwise, we specify the default tab
|
||||
* when handling the sidebar setup.
|
||||
*
|
||||
* @params {String} defaultTab
|
||||
* Thie id of the default tab for the sidebar.
|
||||
*/
|
||||
async addRuleView(defaultTab = "ruleview") {
|
||||
let ruleViewSidebar = this.sidebarSplitBox.startPanelContainer;
|
||||
|
||||
if (this.isSplitRuleViewEnabled) {
|
||||
// Removes the rule view from the main sidebar and adds the rule view to the split
|
||||
// sidebar.
|
||||
ruleViewSidebar.style.display = "block";
|
||||
|
||||
// The sidebar toggle might not be setup yet on the initial setup.
|
||||
if (this.sidebarToggle) {
|
||||
this.sidebarToggle.setState({ collapsed: false });
|
||||
}
|
||||
|
||||
// Show the splitter inside the sidebar split box.
|
||||
this.sidebarSplitBox.setState({ splitterSize: 1 });
|
||||
|
||||
// Force the rule view panel creation by calling getPanel
|
||||
this.getPanel("ruleview");
|
||||
|
||||
await this.sidebar.removeTab("ruleview");
|
||||
|
||||
this.ruleViewSideBar.addExistingTab(
|
||||
"ruleview",
|
||||
INSPECTOR_L10N.getStr("inspector.sidebar.ruleViewTitle"),
|
||||
true);
|
||||
|
||||
this.ruleViewSideBar.show("ruleview");
|
||||
} else {
|
||||
// Removes the rule view from the split sidebar and adds the rule view to the main
|
||||
// sidebar.
|
||||
ruleViewSidebar.style.display = "none";
|
||||
|
||||
// The sidebar toggle might not be setup yet on the initial setup.
|
||||
if (this.sidebarToggle) {
|
||||
this.sidebarToggle.setState({ collapsed: true });
|
||||
}
|
||||
|
||||
// Hide the splitter to prevent any drag events in the sidebar split box.
|
||||
this.sidebarSplitBox.setState({ splitterSize: 0 });
|
||||
|
||||
this.ruleViewSideBar.hide();
|
||||
await this.ruleViewSideBar.removeTab("ruleview");
|
||||
|
||||
this.sidebar.addExistingTab(
|
||||
"ruleview",
|
||||
INSPECTOR_L10N.getStr("inspector.sidebar.ruleViewTitle"),
|
||||
defaultTab == "ruleview",
|
||||
0);
|
||||
}
|
||||
onSidebarResized: function (width, height) {
|
||||
this.toolbox.emit("inspector-sidebar-resized", { width, height });
|
||||
},
|
||||
|
||||
/**
|
||||
@ -688,28 +578,20 @@ Inspector.prototype = {
|
||||
/**
|
||||
* Build the sidebar.
|
||||
*/
|
||||
async setupSidebar() {
|
||||
let sidebar = this.panelDoc.getElementById("inspector-sidebar");
|
||||
this.sidebar = new ToolSidebar(sidebar, this, "inspector", {
|
||||
setupSidebar: function () {
|
||||
let tabbox = this.panelDoc.querySelector("#inspector-sidebar");
|
||||
this.sidebar = new ToolSidebar(tabbox, this, "inspector", {
|
||||
showAllTabsMenu: true
|
||||
});
|
||||
|
||||
let ruleSideBar = this.panelDoc.getElementById("inspector-rules-sidebar");
|
||||
this.ruleViewSideBar = new ToolSidebar(ruleSideBar, this, "inspector", {
|
||||
hideTabstripe: true
|
||||
});
|
||||
|
||||
this.sidebar.on("select", this.onSidebarSelect);
|
||||
|
||||
let defaultTab = Services.prefs.getCharPref("devtools.inspector.activeSidebar");
|
||||
|
||||
if (this.isSplitRuleViewEnabled && defaultTab === "ruleview") {
|
||||
defaultTab = "computedview";
|
||||
}
|
||||
|
||||
// Append all side panels
|
||||
|
||||
await this.addRuleView(defaultTab);
|
||||
this.sidebar.addExistingTab(
|
||||
"ruleview",
|
||||
INSPECTOR_L10N.getStr("inspector.sidebar.ruleViewTitle"),
|
||||
defaultTab == "ruleview");
|
||||
|
||||
this.sidebar.addExistingTab(
|
||||
"computedview",
|
||||
@ -994,22 +876,6 @@ Inspector.prototype = {
|
||||
eyeDropperButton.disabled = true;
|
||||
eyeDropperButton.title = INSPECTOR_L10N.getStr("eyedropper.disabled.title");
|
||||
}
|
||||
|
||||
// Setup the sidebar toggle button if the split rule view is enabled.
|
||||
if (this.isSplitRuleViewEnabled && !this.sidebarToggle) {
|
||||
let SidebarToggle = this.React.createFactory(this.browserRequire(
|
||||
"devtools/client/shared/components/SidebarToggle"));
|
||||
|
||||
let sidebarToggle = SidebarToggle({
|
||||
collapsed: !this.isSplitRuleViewEnabled,
|
||||
collapsePaneTitle: INSPECTOR_L10N.getStr("inspector.hideSplitRulesView"),
|
||||
expandPaneTitle: INSPECTOR_L10N.getStr("inspector.showSplitRulesView"),
|
||||
onClick: this.onSidebarToggle
|
||||
});
|
||||
|
||||
let parentBox = this.panelDoc.getElementById("inspector-sidebar-toggle-box");
|
||||
this.sidebarToggle = this.ReactDOM.render(sidebarToggle, parentBox);
|
||||
}
|
||||
}),
|
||||
|
||||
teardownToolbar: function () {
|
||||
@ -1264,7 +1130,6 @@ Inspector.prototype = {
|
||||
|
||||
this.cancelUpdate();
|
||||
|
||||
this.prefsObserver.off(SPLIT_RULE_VIEW_PREF, this.onSplitRuleViewPrefChanged);
|
||||
this.target.off("will-navigate", this._onBeforeNavigate);
|
||||
this.target.off("thread-paused", this.updateDebuggerPausedWarning);
|
||||
this.target.off("thread-resumed", this.updateDebuggerPausedWarning);
|
||||
@ -1296,9 +1161,6 @@ Inspector.prototype = {
|
||||
this.sidebar.off("select", this.onSidebarSelect);
|
||||
let sidebarDestroyer = this.sidebar.destroy();
|
||||
|
||||
let ruleViewSideBarDestroyer = this.ruleViewSideBar ?
|
||||
this.ruleViewSideBar.destroy() : null;
|
||||
|
||||
this.teardownSplitter();
|
||||
|
||||
this.teardownToolbar();
|
||||
@ -1309,29 +1171,25 @@ Inspector.prototype = {
|
||||
let markupDestroyer = this._destroyMarkup();
|
||||
|
||||
this.highlighters.destroy();
|
||||
this.prefsObserver.destroy();
|
||||
this.reflowTracker.destroy();
|
||||
this.search.destroy();
|
||||
|
||||
this._toolbox = null;
|
||||
this.breadcrumbs = null;
|
||||
this.highlighters = null;
|
||||
this.panelDoc = null;
|
||||
this.panelWin.inspector = null;
|
||||
this.panelWin = null;
|
||||
this.prefsObserver = null;
|
||||
this.resultsLength = null;
|
||||
this.search = null;
|
||||
this.searchBox = null;
|
||||
this.sidebar = null;
|
||||
this.store = null;
|
||||
this.target = null;
|
||||
this.highlighters = null;
|
||||
this.search = null;
|
||||
this.searchBox = null;
|
||||
|
||||
this._panelDestroyer = promise.all([
|
||||
cssPropertiesDestroyer,
|
||||
markupDestroyer,
|
||||
sidebarDestroyer,
|
||||
ruleViewSideBarDestroyer
|
||||
markupDestroyer,
|
||||
cssPropertiesDestroyer
|
||||
]);
|
||||
|
||||
return this._panelDestroyer;
|
||||
|
||||
@ -18,7 +18,6 @@
|
||||
<link rel="stylesheet" href="chrome://devtools/skin/animation.css"/>
|
||||
<link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/Tabs.css"/>
|
||||
<link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/TabBar.css"/>
|
||||
<link rel="stylesheet" href="resource://devtools/client/shared/components/SidebarToggle.css"/>
|
||||
<link rel="stylesheet" href="resource://devtools/client/inspector/components/InspectorTabPanel.css"/>
|
||||
<link rel="stylesheet" href="resource://devtools/client/shared/components/splitter/SplitBox.css"/>
|
||||
<link rel="stylesheet" href="resource://devtools/client/inspector/layout/components/Accordion.css"/>
|
||||
@ -38,7 +37,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- In content, inspector.js is mapped to the dynamically generated webpack bundle -->
|
||||
<!-- in content, inspector.js is mapped to the dynamically generated webpack bundle -->
|
||||
<script type="application/javascript" src="inspector.js" defer="true"></script>
|
||||
</head>
|
||||
<body class="theme-body" role="application">
|
||||
@ -46,7 +45,6 @@
|
||||
|
||||
<!-- Main Panel Content -->
|
||||
<div id="inspector-main-content" class="devtools-main-content" style="visibility: hidden;">
|
||||
<!-- Toolbar -->
|
||||
<div id="inspector-toolbar" class="devtools-toolbar" nowindowdrag="true"
|
||||
data-localization-bundle="devtools/client/locales/inspector.properties">
|
||||
<button id="inspector-element-add-button" class="devtools-button"
|
||||
@ -60,10 +58,7 @@
|
||||
<button id="inspector-searchinput-clear" class="devtools-searchinput-clear" tabindex="-1"></button>
|
||||
</div>
|
||||
<button id="inspector-eyedropper-toggle" class="devtools-button"></button>
|
||||
<div id="inspector-sidebar-toggle-box"></div>
|
||||
</div>
|
||||
|
||||
<!-- Markup Container -->
|
||||
<div id="markup-box"></div>
|
||||
<div id="inspector-breadcrumbs-toolbar" class="devtools-toolbar">
|
||||
<div id="inspector-breadcrumbs" class="breadcrumbs-widget-container"
|
||||
@ -72,20 +67,16 @@
|
||||
</div>
|
||||
|
||||
<!-- Splitter -->
|
||||
<div id="inspector-splitter-box"></div>
|
||||
|
||||
<!-- Split Sidebar Container -->
|
||||
<div id="inspector-rules-container">
|
||||
<div id="inspector-rules-sidebar" hidden="true"></div>
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" id="inspector-splitter-box">
|
||||
</div>
|
||||
|
||||
<!-- Sidebar Container -->
|
||||
<div id="inspector-sidebar-container">
|
||||
<div id="inspector-sidebar" hidden="true"></div>
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" id="inspector-sidebar" hidden="true"></div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar Panel Definitions -->
|
||||
<div id="tabpanels" style="visibility: collapse">
|
||||
<!-- Sidebar panel definitions -->
|
||||
<div id="tabpanels" style="visibility:collapse">
|
||||
<div id="sidebar-panel-ruleview" class="theme-sidebar inspector-tabpanel"
|
||||
data-localization-bundle="devtools/client/locales/inspector.properties">
|
||||
<div id="ruleview-toolbar-container" class="devtools-toolbar">
|
||||
|
||||
@ -1598,10 +1598,7 @@ function RuleViewTool(inspector, window) {
|
||||
this.inspector.selection.on("new-node-front", this.onSelected);
|
||||
this.inspector.selection.on("pseudoclass", this.refresh);
|
||||
this.inspector.target.on("navigate", this.clearUserProperties);
|
||||
|
||||
this.inspector.ruleViewSideBar.on("ruleview-selected", this.onPanelSelected);
|
||||
this.inspector.sidebar.on("ruleview-selected", this.onPanelSelected);
|
||||
|
||||
this.inspector.pageStyle.on("stylesheet-updated", this.refresh);
|
||||
this.inspector.walker.on("mutations", this.onMutations);
|
||||
this.inspector.walker.on("resize", this.onResized);
|
||||
@ -1614,9 +1611,7 @@ RuleViewTool.prototype = {
|
||||
if (!this.view) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return this.inspector.isSplitRuleViewEnabled ?
|
||||
true : this.inspector.sidebar.getCurrentTabID() == "ruleview";
|
||||
return this.inspector.sidebar.getCurrentTabID() == "ruleview";
|
||||
},
|
||||
|
||||
onSelected: function (event) {
|
||||
|
||||
@ -65,14 +65,6 @@ eventsTooltip.Bubbling=Bubbling
|
||||
#LOCALIZATION NOTE: Used in the tooltip for Capturing
|
||||
eventsTooltip.Capturing=Capturing
|
||||
|
||||
# LOCALIZATION NOTE (inspector.displaySplitRulesView): This is the tooltip for the button
|
||||
# that toggles on the display of a split rule view sidebar in the inspector.
|
||||
inspector.showSplitRulesView=Show the split Rules panel
|
||||
|
||||
# LOCALIZATION NOTE (inspector.hideSplitRulesView): This is the tooltip for the button
|
||||
# that toggles off the display of a split rule view sidebar in the inspector.
|
||||
inspector.hideSplitRulesView=Hide the split Rules panel
|
||||
|
||||
# LOCALIZATION NOTE (inspector.searchResultsCount): This is the label that
|
||||
# will show up next to the inspector search box. %1$S is the current result
|
||||
# index and %2$S is the total number of search results. For example: "3 of 9".
|
||||
|
||||
@ -48,8 +48,6 @@ pref("devtools.inspector.enabled", true);
|
||||
// What was the last active sidebar in the inspector
|
||||
pref("devtools.inspector.activeSidebar", "ruleview");
|
||||
pref("devtools.inspector.remote", false);
|
||||
// Enable the split rule view in the inspector
|
||||
pref("devtools.inspector.split-rule-enabled", false);
|
||||
// Collapse pseudo-elements by default in the rule-view
|
||||
pref("devtools.inspector.show_pseudo_elements", false);
|
||||
// The default size for image preview tooltips in the rule-view/computed-view/markup-view
|
||||
@ -70,6 +68,7 @@ pref("devtools.changesview.enabled", false);
|
||||
pref("devtools.eventsview.enabled", false);
|
||||
// Enable the Flexbox Inspector panel
|
||||
pref("devtools.flexboxinspector.enabled", false);
|
||||
|
||||
// Enable the new Animation Inspector
|
||||
pref("devtools.new-animationinspector.enabled", false);
|
||||
|
||||
|
||||
@ -64,7 +64,6 @@ class SplitBox extends Component {
|
||||
*/
|
||||
this.state = {
|
||||
vert: props.vert,
|
||||
splitterSize: props.splitterSize,
|
||||
width: props.initialWidth || props.initialSize,
|
||||
height: props.initialHeight || props.initialSize
|
||||
};
|
||||
@ -75,11 +74,7 @@ class SplitBox extends Component {
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
let { splitterSize, vert } = nextProps;
|
||||
|
||||
if (splitterSize != this.props.splitterSize) {
|
||||
this.setState({ splitterSize });
|
||||
}
|
||||
let { vert } = nextProps;
|
||||
|
||||
if (vert !== this.props.vert) {
|
||||
this.setState({ vert });
|
||||
@ -90,12 +85,12 @@ class SplitBox extends Component {
|
||||
return nextState.width != this.state.width ||
|
||||
nextState.height != this.state.height ||
|
||||
nextState.vert != this.state.vert ||
|
||||
nextState.splitterSize != this.state.splitterSize ||
|
||||
nextProps.startPanel != this.props.startPanel ||
|
||||
nextProps.endPanel != this.props.endPanel ||
|
||||
nextProps.endPanelControl != this.props.endPanelControl ||
|
||||
nextProps.minSize != this.props.minSize ||
|
||||
nextProps.maxSize != this.props.maxSize;
|
||||
nextProps.maxSize != this.props.maxSize ||
|
||||
nextProps.splitterSize != this.props.splitterSize;
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
@ -175,8 +170,9 @@ class SplitBox extends Component {
|
||||
// Rendering
|
||||
|
||||
render() {
|
||||
const { splitterSize, vert } = this.state;
|
||||
const { startPanel, endPanel, endPanelControl, minSize, maxSize } = this.props;
|
||||
const vert = this.state.vert;
|
||||
const { startPanel, endPanel, endPanelControl, minSize,
|
||||
maxSize, splitterSize } = this.props;
|
||||
|
||||
let style = Object.assign({}, this.props.style);
|
||||
|
||||
@ -227,23 +223,20 @@ class SplitBox extends Component {
|
||||
startPanel ?
|
||||
dom.div({
|
||||
className: endPanelControl ? "uncontrolled" : "controlled",
|
||||
style: leftPanelStyle,
|
||||
ref: div => this.startPanelContainer = div},
|
||||
style: leftPanelStyle},
|
||||
startPanel
|
||||
) : null,
|
||||
splitterSize > 0 ?
|
||||
Draggable({
|
||||
className: "splitter",
|
||||
style: splitterStyle,
|
||||
onStart: this.onStartMove,
|
||||
onStop: this.onStopMove,
|
||||
onMove: this.onMove
|
||||
}) : null,
|
||||
Draggable({
|
||||
className: "splitter",
|
||||
style: splitterStyle,
|
||||
onStart: this.onStartMove,
|
||||
onStop: this.onStopMove,
|
||||
onMove: this.onMove
|
||||
}),
|
||||
endPanel ?
|
||||
dom.div({
|
||||
className: endPanelControl ? "controlled" : "uncontrolled",
|
||||
style: rightPanelStyle,
|
||||
ref: div => this.endPanelContainer = div},
|
||||
style: rightPanelStyle},
|
||||
endPanel
|
||||
) : null
|
||||
)
|
||||
|
||||
@ -3,11 +3,6 @@
|
||||
* 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/. */
|
||||
|
||||
/* Hides the tab strip in the TabBar */
|
||||
div[hidetabs=true] .tabs .tabs-navigation {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabs .tabs-navigation {
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
@ -142,19 +142,16 @@ class Tabbar extends Component {
|
||||
let tabs = this.state.tabs.slice();
|
||||
tabs.splice(index, 1);
|
||||
|
||||
let activeTab = this.state.activeTab - 1;
|
||||
activeTab = activeTab === -1 ? 0 : activeTab;
|
||||
let activeTab = this.state.activeTab;
|
||||
|
||||
if (activeTab >= tabs.length) {
|
||||
activeTab = tabs.length - 1;
|
||||
}
|
||||
|
||||
this.setState(Object.assign({}, this.state, {
|
||||
activeTab,
|
||||
tabs,
|
||||
}), () => {
|
||||
// Select the next active tab and force the select event handler to initialize
|
||||
// the panel if needed.
|
||||
if (tabs.length > 0 && this.props.onSelect) {
|
||||
this.props.onSelect(this.getTabId(activeTab));
|
||||
}
|
||||
});
|
||||
activeTab,
|
||||
}));
|
||||
}
|
||||
|
||||
select(tabId) {
|
||||
|
||||
@ -157,14 +157,12 @@ window {
|
||||
font: message-box;
|
||||
}
|
||||
|
||||
#inspector-rules-container,
|
||||
#inspector-sidebar-container {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#inspector-rules-sidebar,
|
||||
#inspector-sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user