зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1260552 - Replace xul:spliter by html:splitter. r=pbro
--HG-- extra : rebase_source : 4f613267e61a1aae6f512cb2a54df2f613154bc8 extra : histedit_source : f93e7b94b67955a136f210c793983557e78ac704
This commit is contained in:
Jan Odvarko
Родитель
da67e3a3cc
Коммит
7e0678438a
|
|
@ -9,8 +9,14 @@ add_task(function* () {
|
|||
let toolbox = yield openNewTabAndToolbox(URL, "inspector");
|
||||
let textboxContextMenu = toolbox.textboxContextMenuPopup;
|
||||
|
||||
// Make sure the focus is predictable.
|
||||
let inspector = toolbox.getPanel("inspector");
|
||||
inspector.searchBox.focus();
|
||||
|
||||
ok(textboxContextMenu, "The textbox context menu is loaded in the toolbox");
|
||||
|
||||
emptyClipboard();
|
||||
|
||||
let cmdUndo = textboxContextMenu.querySelector("[command=cmd_undo]");
|
||||
let cmdDelete = textboxContextMenu.querySelector("[command=cmd_delete]");
|
||||
let cmdSelectAll = textboxContextMenu.querySelector("[command=cmd_selectAll]");
|
||||
|
|
@ -26,7 +32,7 @@ add_task(function* () {
|
|||
|
||||
is(cmdUndo.getAttribute("disabled"), "true", "cmdUndo is disabled");
|
||||
is(cmdDelete.getAttribute("disabled"), "true", "cmdDelete is disabled");
|
||||
is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled");
|
||||
is(cmdSelectAll.getAttribute("disabled"), "true", "cmdSelectAll is disabled");
|
||||
is(cmdCut.getAttribute("disabled"), "true", "cmdCut is disabled");
|
||||
is(cmdCopy.getAttribute("disabled"), "true", "cmdCopy is disabled");
|
||||
is(cmdPaste.getAttribute("disabled"), "true", "cmdPaste is disabled");
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ function testReload(shortcut, docked, toolID, callback) {
|
|||
|
||||
description = docked + " devtools with tool " + toolID + ", shortcut #" + shortcut;
|
||||
info("Testing reload in " + description);
|
||||
toolbox.win.focus();
|
||||
synthesizeKeyShortcut(L10N.getStr(shortcut), toolbox.win);
|
||||
reloadsSent++;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -559,3 +559,12 @@ function stopRecordingTelemetryLogs(Telemetry) {
|
|||
delete Telemetry.prototype._oldlogKeyed;
|
||||
delete Telemetry.prototype.telemetryInfo;
|
||||
}
|
||||
|
||||
/**
|
||||
* Clean the OS clipboard content.
|
||||
*/
|
||||
function emptyClipboard() {
|
||||
let clipboard = Cc["@mozilla.org/widget/clipboard;1"]
|
||||
.getService(SpecialPowers.Ci.nsIClipboard);
|
||||
clipboard.emptyClipboard(1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,19 +12,31 @@ const { DOM, createClass, PropTypes } = require("devtools/client/shared/vendor/r
|
|||
const { div } = DOM;
|
||||
|
||||
/**
|
||||
* Side panel for the Inspector panel.
|
||||
* This side panel is using an existing DOM node as a content.
|
||||
* Helper panel component that is using an existing DOM node
|
||||
* as the content. It's used by Sidebar as well as SplitBox
|
||||
* components.
|
||||
*/
|
||||
var InspectorTabPanel = createClass({
|
||||
displayName: "InspectorTabPanel",
|
||||
|
||||
propTypes: {
|
||||
// ID of the node that should be rendered as the content.
|
||||
id: PropTypes.string.isRequired,
|
||||
// Optional prefix for panel IDs.
|
||||
idPrefix: PropTypes.string,
|
||||
// Optional mount callback
|
||||
onMount: PropTypes.func,
|
||||
},
|
||||
|
||||
getDefaultProps: function () {
|
||||
return {
|
||||
idPrefix: "",
|
||||
};
|
||||
},
|
||||
|
||||
componentDidMount: function () {
|
||||
let doc = this.refs.content.ownerDocument;
|
||||
let panel = doc.getElementById("sidebar-panel-" + this.props.id);
|
||||
let panel = doc.getElementById(this.props.idPrefix + this.props.id);
|
||||
|
||||
// Append existing DOM node into panel's content.
|
||||
this.refs.content.appendChild(panel);
|
||||
|
|
|
|||
|
|
@ -35,6 +35,14 @@ const {LocalizationHelper} = require("devtools/shared/l10n");
|
|||
const INSPECTOR_L10N = new LocalizationHelper("devtools/locale/inspector.properties");
|
||||
const TOOLBOX_L10N = new LocalizationHelper("devtools/locale/toolbox.properties");
|
||||
|
||||
// Sidebar dimensions
|
||||
const INITIAL_SIDEBAR_SIZE = 350;
|
||||
const MIN_SIDEBAR_SIZE = 50;
|
||||
|
||||
// If the toolbox width is smaller than given amount of pixels,
|
||||
// the sidebar automatically switches from 'landscape' to 'portrait' mode.
|
||||
const PORTRAIT_MODE_WIDTH = 700;
|
||||
|
||||
/**
|
||||
* Represents an open instance of the Inspector for a tab.
|
||||
* The inspector controls the breadcrumbs, the markup view, and the sidebar
|
||||
|
|
@ -94,6 +102,9 @@ function InspectorPanel(iframeWindow, toolbox) {
|
|||
this.onDetached = this.onDetached.bind(this);
|
||||
this.onPaneToggleButtonClicked = this.onPaneToggleButtonClicked.bind(this);
|
||||
this._onMarkupFrameLoad = this._onMarkupFrameLoad.bind(this);
|
||||
this.onPanelWindowResize = this.onPanelWindowResize.bind(this);
|
||||
this.onSidebarShown = this.onSidebarShown.bind(this);
|
||||
this.onSidebarHidden = this.onSidebarHidden.bind(this);
|
||||
|
||||
this._target.on("will-navigate", this._onBeforeNavigate);
|
||||
this._detectingActorFeatures = this._detectActorFeatures();
|
||||
|
|
@ -400,6 +411,98 @@ InspectorPanel.prototype = {
|
|||
return this._toolbox.browserRequire;
|
||||
},
|
||||
|
||||
get InspectorTabPanel() {
|
||||
if (!this._InspectorTabPanel) {
|
||||
this._InspectorTabPanel =
|
||||
this.React.createFactory(this.browserRequire(
|
||||
"devtools/client/inspector/components/inspector-tab-panel"));
|
||||
}
|
||||
return this._InspectorTabPanel;
|
||||
},
|
||||
|
||||
/**
|
||||
* Build Splitter located between the main and side area of
|
||||
* the Inspector panel.
|
||||
*/
|
||||
setupSplitter: function () {
|
||||
let SplitBox = this.React.createFactory(this.browserRequire(
|
||||
"devtools/client/shared/components/splitter/split-box"));
|
||||
|
||||
this.panelWin.addEventListener("resize", this.onPanelWindowResize, true);
|
||||
|
||||
let splitter = SplitBox({
|
||||
className: "inspector-sidebar-splitter",
|
||||
initialWidth: INITIAL_SIDEBAR_SIZE,
|
||||
initialHeight: INITIAL_SIDEBAR_SIZE,
|
||||
minSize: MIN_SIDEBAR_SIZE,
|
||||
splitterSize: 1,
|
||||
endPanelControl: true,
|
||||
startPanel: this.InspectorTabPanel({
|
||||
id: "inspector-main-content"
|
||||
}),
|
||||
endPanel: this.InspectorTabPanel({
|
||||
id: "inspector-sidebar-container"
|
||||
})
|
||||
});
|
||||
|
||||
this._splitter = this.ReactDOM.render(splitter,
|
||||
this.panelDoc.getElementById("inspector-splitter-box"));
|
||||
|
||||
// Persist splitter state in preferences.
|
||||
this.sidebar.on("show", this.onSidebarShown);
|
||||
this.sidebar.on("hide", this.onSidebarHidden);
|
||||
this.sidebar.on("destroy", this.onSidebarHidden);
|
||||
},
|
||||
|
||||
/**
|
||||
* Splitter clean up.
|
||||
*/
|
||||
teardownSplitter: function () {
|
||||
this.panelWin.removeEventListener("resize", this.onPanelWindowResize, true);
|
||||
|
||||
this.sidebar.off("show", this.onSidebarShown);
|
||||
this.sidebar.off("hide", this.onSidebarHidden);
|
||||
this.sidebar.off("destroy", this.onSidebarHidden);
|
||||
},
|
||||
|
||||
/**
|
||||
* If Toolbox width is less than 600 px, the splitter changes its mode
|
||||
* to `horizontal` to support portrait view.
|
||||
*/
|
||||
onPanelWindowResize: function () {
|
||||
let box = this.panelDoc.getElementById("inspector-splitter-box");
|
||||
this._splitter.setState({
|
||||
vert: (box.clientWidth > PORTRAIT_MODE_WIDTH)
|
||||
});
|
||||
},
|
||||
|
||||
onSidebarShown: function () {
|
||||
let width;
|
||||
let height;
|
||||
|
||||
// Initialize splitter size from preferences.
|
||||
try {
|
||||
width = Services.prefs.getIntPref("devtools.toolsidebar-width.inspector");
|
||||
height = Services.prefs.getIntPref("devtools.toolsidebar-height.inspector");
|
||||
} 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 = INITIAL_SIDEBAR_SIZE;
|
||||
height = INITIAL_SIDEBAR_SIZE;
|
||||
}
|
||||
|
||||
this._splitter.setState({width, height});
|
||||
},
|
||||
|
||||
onSidebarHidden: function () {
|
||||
// Store the current splitter size to preferences.
|
||||
let state = this._splitter.state;
|
||||
Services.prefs.setIntPref("devtools.toolsidebar-width.inspector", state.width);
|
||||
Services.prefs.setIntPref("devtools.toolsidebar-height.inspector", state.height);
|
||||
},
|
||||
|
||||
/**
|
||||
* Build the sidebar.
|
||||
*/
|
||||
|
|
@ -455,56 +558,13 @@ InspectorPanel.prototype = {
|
|||
this.sidebar.toggleTab(true, "fontinspector");
|
||||
}
|
||||
|
||||
this.setupSidebarSize();
|
||||
// Setup the splitter before the sidebar is displayed so,
|
||||
// we don't miss any events.
|
||||
this.setupSplitter();
|
||||
|
||||
this.sidebar.show(defaultTab);
|
||||
},
|
||||
|
||||
/**
|
||||
* Sidebar size is currently driven by vbox.inspector-sidebar-container
|
||||
* element, which is located at the left/bottom side of the side bar splitter.
|
||||
* Its size is changed by the splitter and stored into preferences.
|
||||
* As soon as bug 1260552 is fixed and new HTML based splitter in place
|
||||
* the size can be driven by div.inspector-sidebar element. This element
|
||||
* represents the ToolSidebar and so, the entire logic related to size
|
||||
* persistence can be done inside the ToolSidebar.
|
||||
*/
|
||||
setupSidebarSize: function () {
|
||||
let sidePaneContainer = this.panelDoc.querySelector(
|
||||
"#inspector-sidebar-container");
|
||||
|
||||
this.sidebar.on("show", () => {
|
||||
try {
|
||||
sidePaneContainer.width = Services.prefs.getIntPref(
|
||||
"devtools.toolsidebar-width.inspector");
|
||||
sidePaneContainer.height = Services.prefs.getIntPref(
|
||||
"devtools.toolsidebar-height.inspector");
|
||||
} catch (e) {
|
||||
// The default width is the min-width set in CSS
|
||||
// for #inspector-sidebar-container
|
||||
// Set width and height of the sidebar container. Only one
|
||||
// value is really useful at a time depending on the current
|
||||
// toolbox orientation and having both doesn't break anything.
|
||||
sidePaneContainer.width = 450;
|
||||
sidePaneContainer.height = 450;
|
||||
}
|
||||
});
|
||||
|
||||
this.sidebar.on("hide", () => {
|
||||
Services.prefs.setIntPref("devtools.toolsidebar-width.inspector",
|
||||
sidePaneContainer.width);
|
||||
Services.prefs.setIntPref("devtools.toolsidebar-height.inspector",
|
||||
sidePaneContainer.height);
|
||||
});
|
||||
|
||||
this.sidebar.on("destroy", () => {
|
||||
Services.prefs.setIntPref("devtools.toolsidebar-width.inspector",
|
||||
sidePaneContainer.width);
|
||||
Services.prefs.setIntPref("devtools.toolsidebar-height.inspector",
|
||||
sidePaneContainer.height);
|
||||
});
|
||||
},
|
||||
|
||||
setupToolbar: function () {
|
||||
this.teardownToolbar();
|
||||
|
||||
|
|
@ -798,6 +858,9 @@ InspectorPanel.prototype = {
|
|||
|
||||
this.sidebar.off("select", this._setDefaultSidebar);
|
||||
let sidebarDestroyer = this.sidebar.destroy();
|
||||
|
||||
this.teardownSplitter();
|
||||
|
||||
this.sidebar = null;
|
||||
|
||||
this.teardownToolbar();
|
||||
|
|
@ -1251,7 +1314,8 @@ InspectorPanel.prototype = {
|
|||
* state and tooltip.
|
||||
*/
|
||||
onPaneToggleButtonClicked: function (e) {
|
||||
let sidePaneContainer = this.panelDoc.querySelector("#inspector-sidebar-container");
|
||||
let sidePaneContainer = this.panelDoc.querySelector(
|
||||
"#inspector-splitter-box .controlled");
|
||||
let isVisible = !this._sidebarToggle.state.collapsed;
|
||||
|
||||
// Make sure the sidebar has width and height attributes before collapsing
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
<?xml-stylesheet href="resource://devtools/client/shared/components/tabs/tabbar.css" type="text/css"?>
|
||||
<?xml-stylesheet href="resource://devtools/client/inspector/components/side-panel.css" type="text/css"?>
|
||||
<?xml-stylesheet href="resource://devtools/client/inspector/components/inspector-tab-panel.css" type="text/css"?>
|
||||
<?xml-stylesheet href="resource://devtools/client/shared/components/splitter/split-box.css" type="text/css"?>
|
||||
|
||||
<!DOCTYPE window [
|
||||
<!ENTITY % inspectorDTD SYSTEM "chrome://devtools/locale/inspector.dtd"> %inspectorDTD;
|
||||
|
|
@ -30,8 +31,10 @@
|
|||
<script type="application/javascript;version=1.8"
|
||||
src="chrome://devtools/content/shared/theme-switching.js"/>
|
||||
|
||||
<box flex="1" class="devtools-responsive-container theme-body">
|
||||
<vbox flex="1" class="devtools-main-content">
|
||||
<html:div class="inspector-responsive-container theme-body inspector">
|
||||
|
||||
<!-- Main Panel Content -->
|
||||
<html:div id="inspector-main-content" class="devtools-main-content">
|
||||
<html:div id="inspector-toolbar"
|
||||
class="devtools-toolbar"
|
||||
nowindowdrag="true">
|
||||
|
|
@ -49,27 +52,31 @@
|
|||
<html:button id="inspector-eyedropper-toggle"
|
||||
title="&inspectorEyeDropper.label;"
|
||||
class="devtools-button command-button-invertable" />
|
||||
<div xmlns="http://www.w3.org/1999/xhtml"
|
||||
id="inspector-sidebar-toggle-box" />
|
||||
<html:div id="inspector-sidebar-toggle-box" />
|
||||
</html:div>
|
||||
<vbox flex="1" id="markup-box">
|
||||
</vbox>
|
||||
<html:div id="markup-box" />
|
||||
<html:div id="inspector-breadcrumbs-toolbar" class="devtools-toolbar">
|
||||
<html:div id="inspector-breadcrumbs" class="breadcrumbs-widget-container"
|
||||
role="group" aria-label="&inspectorBreadcrumbsGroup;" tabindex="0" />
|
||||
</html:div>
|
||||
</vbox>
|
||||
<splitter class="devtools-side-splitter"/>
|
||||
<vbox id="inspector-sidebar-container">
|
||||
<!-- Specify the XHTML namespace explicitly
|
||||
otherwise the layout is broken. -->
|
||||
<div xmlns="http://www.w3.org/1999/xhtml"
|
||||
id="inspector-sidebar"
|
||||
hidden="true" />
|
||||
</vbox>
|
||||
</html:div>
|
||||
|
||||
<!-- Splitter -->
|
||||
<html:div
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
id="inspector-splitter-box">
|
||||
</html:div>
|
||||
|
||||
<!-- Sidebar Container -->
|
||||
<html:div id="inspector-sidebar-container">
|
||||
<html:div
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
id="inspector-sidebar"
|
||||
hidden="true" />
|
||||
</html:div>
|
||||
|
||||
<!-- Sidebar panel definitions -->
|
||||
<html:div xmlns="http://www.w3.org/1999/xhtml" id="tabpanels" style="visibility:collapse">
|
||||
<html:div id="tabpanels" style="visibility:collapse">
|
||||
<html:div id="sidebar-panel-ruleview" class="devtools-monospace theme-sidebar inspector-tabpanel">
|
||||
<html:div id="ruleview-toolbar-container" class="devtools-toolbar">
|
||||
<html:div id="ruleview-toolbar">
|
||||
|
|
@ -218,5 +225,5 @@
|
|||
</html:div>
|
||||
</html:div>
|
||||
|
||||
</box>
|
||||
</html:div>
|
||||
</window>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ add_task(function* () {
|
|||
let onHidden = cPicker.tooltip.once("hidden");
|
||||
// Validating the color change ends up updating the rule view twice
|
||||
let onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
|
||||
EventUtils.sendKey("RETURN", spectrum.element.ownerDocument.defaultView);
|
||||
focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
|
||||
yield onHidden;
|
||||
yield onRuleViewChanged;
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ function* basicTest(view, name, result) {
|
|||
let onHidden = cPicker.tooltip.once("hidden");
|
||||
// Validating the color change ends up updating the rule view twice
|
||||
let onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
|
||||
EventUtils.sendKey("RETURN", spectrum.element.ownerDocument.defaultView);
|
||||
focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
|
||||
yield onHidden;
|
||||
yield onRuleViewChanged;
|
||||
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ function* testImageTooltipAfterColorChange(swatch, url, ruleView) {
|
|||
let spectrum = picker.spectrum;
|
||||
let onHidden = picker.tooltip.once("hidden");
|
||||
let onModifications = ruleView.once("ruleview-changed");
|
||||
EventUtils.sendKey("RETURN", spectrum.element.ownerDocument.defaultView);
|
||||
focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
|
||||
yield onHidden;
|
||||
yield onModifications;
|
||||
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ function* testColorChangeIsntRevertedWhenOtherTooltipIsShown(ruleView) {
|
|||
|
||||
let onModifications = waitForNEvents(ruleView, "ruleview-changed", 2);
|
||||
let onHidden = picker.tooltip.once("hidden");
|
||||
EventUtils.sendKey("RETURN", spectrum.element.ownerDocument.defaultView);
|
||||
focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
|
||||
yield onHidden;
|
||||
yield onModifications;
|
||||
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ function* testPressingEnterCommitsChanges(swatch, ruleView) {
|
|||
let onModified = ruleView.once("ruleview-changed");
|
||||
let spectrum = cPicker.spectrum;
|
||||
let onHidden = cPicker.tooltip.once("hidden");
|
||||
EventUtils.sendKey("RETURN", spectrum.element.ownerDocument.defaultView);
|
||||
focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
|
||||
yield onHidden;
|
||||
yield onModified;
|
||||
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ function* testPressingEnterCommitsChanges(swatch, ruleView) {
|
|||
// Pressing RETURN ends up doing 2 rule-view updates, one for the preview and
|
||||
// one for the commit when the tooltip closes.
|
||||
let onRuleViewChanged = waitForNEvents(ruleView, "ruleview-changed", 2);
|
||||
EventUtils.sendKey("RETURN", widget.parent.ownerDocument.defaultView);
|
||||
focusAndSendKey(widget.parent.ownerDocument.defaultView, "RETURN");
|
||||
yield onRuleViewChanged;
|
||||
|
||||
let style = yield getComputedStyleProperty("body", null,
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ function* escapeTooltip(view) {
|
|||
let widget = yield bezierTooltip.widget;
|
||||
let onHidden = bezierTooltip.tooltip.once("hidden");
|
||||
let onModifications = view.once("ruleview-changed");
|
||||
EventUtils.sendKey("ESCAPE", widget.parent.ownerDocument.defaultView);
|
||||
focusAndSendKey(widget.parent.ownerDocument.defaultView, "ESCAPE");
|
||||
yield onHidden;
|
||||
yield onModifications;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -814,3 +814,13 @@ function waitForStyleModification(inspector) {
|
|||
inspector.on("markupmutation", checkForStyleModification);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Make sure window is properly focused before sending a key event.
|
||||
* @param {Window} win
|
||||
* @param {Event} key
|
||||
*/
|
||||
function focusAndSendKey(win, key) {
|
||||
win.document.documentElement.focus();
|
||||
EventUtils.sendKey(key, win);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,6 +32,10 @@ const NODES = [
|
|||
];
|
||||
|
||||
add_task(function* () {
|
||||
// This test needs specific initial size of the sidebar.
|
||||
yield pushPref("devtools.toolsidebar-width.inspector", 350);
|
||||
yield pushPref("devtools.toolsidebar-height.inspector", 150);
|
||||
|
||||
let { inspector, toolbox } = yield openInspectorForURL(TEST_URI);
|
||||
|
||||
// No way to wait for scrolling to end (Bug 1172171)
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@ add_task(function* () {
|
|||
info("Open the inspector in a side toolbox host");
|
||||
let {toolbox, inspector} = yield openInspectorForURL("about:blank", "side");
|
||||
|
||||
let panel = inspector.panelDoc.querySelector("#inspector-sidebar-container");
|
||||
let panel = inspector.panelDoc.querySelector("#inspector-splitter-box .controlled");
|
||||
|
||||
let button = inspector.panelDoc.querySelector(".sidebar-toggle");
|
||||
ok(!panel.classList.contains("pane-collapsed"), "The panel is in expanded state");
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ add_task(function* () {
|
|||
let {inspector} = yield openInspectorForURL("about:blank");
|
||||
|
||||
let button = inspector.panelDoc.querySelector(".sidebar-toggle");
|
||||
let panel = inspector.panelDoc.querySelector("#inspector-sidebar-container");
|
||||
let panel = inspector.panelDoc.querySelector("#inspector-splitter-box .controlled");
|
||||
|
||||
ok(!button.classList.contains("pane-collapsed"), "The button is in expanded state");
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ add_task(function* () {
|
|||
|
||||
let { inspector, toolbox } = yield openInspectorForURL("about:blank");
|
||||
let button = inspector.panelDoc.querySelector(".sidebar-toggle");
|
||||
let panel = inspector.panelDoc.querySelector("#inspector-sidebar-container");
|
||||
let panel = inspector.panelDoc.querySelector("#inspector-splitter-box .controlled");
|
||||
|
||||
info("Changing toolbox host to a window.");
|
||||
yield toolbox.switchHost(Toolbox.HostType.WINDOW);
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@
|
|||
|
||||
add_task(function* () {
|
||||
let {inspector} = yield openInspectorForURL("about:blank", "side");
|
||||
let panel = inspector.panelDoc.querySelector("#inspector-sidebar-container");
|
||||
let panel = inspector.panelDoc.querySelector("#inspector-splitter-box .controlled");
|
||||
|
||||
let button = inspector.panelDoc.querySelector(".sidebar-toggle");
|
||||
|
||||
ok(!panel.classList.contains("pane-collapsed"), "The panel is in expanded state");
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@ add_task(function* () {
|
|||
ok(searchContextMenu,
|
||||
"The search filter context menu is loaded in the inspector");
|
||||
|
||||
emptyClipboard();
|
||||
|
||||
let cmdUndo = searchContextMenu.querySelector("[command=cmd_undo]");
|
||||
let cmdDelete = searchContextMenu.querySelector("[command=cmd_delete]");
|
||||
let cmdSelectAll = searchContextMenu.querySelector("[command=cmd_selectAll]");
|
||||
|
|
@ -27,6 +29,7 @@ add_task(function* () {
|
|||
let cmdPaste = searchContextMenu.querySelector("[command=cmd_paste]");
|
||||
|
||||
info("Opening context menu");
|
||||
searchBox.focus();
|
||||
let onContextMenuPopup = once(searchContextMenu, "popupshowing");
|
||||
EventUtils.synthesizeMouse(searchBox, 2, 2,
|
||||
{type: "contextmenu", button: 2}, win);
|
||||
|
|
@ -34,7 +37,7 @@ add_task(function* () {
|
|||
|
||||
is(cmdUndo.getAttribute("disabled"), "true", "cmdUndo is disabled");
|
||||
is(cmdDelete.getAttribute("disabled"), "true", "cmdDelete is disabled");
|
||||
is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled");
|
||||
is(cmdSelectAll.getAttribute("disabled"), "true", "cmdSelectAll is disabled");
|
||||
is(cmdCut.getAttribute("disabled"), "true", "cmdCut is disabled");
|
||||
is(cmdCopy.getAttribute("disabled"), "true", "cmdCopy is disabled");
|
||||
is(cmdPaste.getAttribute("disabled"), "true", "cmdPaste is disabled");
|
||||
|
|
@ -47,6 +50,7 @@ add_task(function* () {
|
|||
info("Copy text in search field using the context menu");
|
||||
searchBox.value = TEST_INPUT;
|
||||
searchBox.select();
|
||||
searchBox.focus();
|
||||
EventUtils.synthesizeMouse(searchBox, 2, 2,
|
||||
{type: "contextmenu", button: 2}, win);
|
||||
yield onContextMenuPopup;
|
||||
|
|
|
|||
|
|
@ -66,12 +66,7 @@ ToolSidebar.prototype = {
|
|||
},
|
||||
|
||||
get InspectorTabPanel() {
|
||||
if (!this._InspectorTabPanel) {
|
||||
this._InspectorTabPanel =
|
||||
this.React.createFactory(this.browserRequire(
|
||||
"devtools/client/inspector/components/inspector-tab-panel"));
|
||||
}
|
||||
return this._InspectorTabPanel;
|
||||
return this._toolPanel.InspectorTabPanel;
|
||||
},
|
||||
|
||||
// Rendering
|
||||
|
|
@ -90,7 +85,14 @@ ToolSidebar.prototype = {
|
|||
},
|
||||
|
||||
addExistingTab: function (id, title, selected) {
|
||||
this._tabbar.addTab(id, title, selected, this.InspectorTabPanel);
|
||||
let panel = this.InspectorTabPanel({
|
||||
id: id,
|
||||
idPrefix: this.TABPANEL_ID_PREFIX,
|
||||
key: id,
|
||||
title: title,
|
||||
});
|
||||
|
||||
this._tabbar.addTab(id, title, selected, panel);
|
||||
|
||||
this.emit("new-tab-registered", id);
|
||||
},
|
||||
|
|
@ -105,6 +107,7 @@ ToolSidebar.prototype = {
|
|||
addFrameTab: function (id, title, url, selected) {
|
||||
let panel = this.InspectorTabPanel({
|
||||
id: id,
|
||||
idPrefix: this.TABPANEL_ID_PREFIX,
|
||||
key: id,
|
||||
title: title,
|
||||
url: url,
|
||||
|
|
|
|||
|
|
@ -57,7 +57,11 @@ window.onload = Task.async(function* () {
|
|||
document.body.appendChild(panel);
|
||||
|
||||
return setState(tabbarReact, Object.assign({}, tabbarReact.state, {
|
||||
tabs: tabbarReact.state.tabs.concat({id: `${tabId}`, title: `tab-${tabId}`, panel: InspectorTabPanel}),
|
||||
tabs: tabbarReact.state.tabs.concat({
|
||||
id: `sidebar-panel-${tabId}`,
|
||||
title: `tab-${tabId}`,
|
||||
panel: InspectorTabPanel
|
||||
}),
|
||||
}));
|
||||
}
|
||||
} catch(e) {
|
||||
|
|
|
|||
|
|
@ -11,9 +11,47 @@
|
|||
--eyedropper-image: url(images/firebug/command-eyedropper.svg);
|
||||
}
|
||||
|
||||
/* Make sure to hide scroll bars for the parent window */
|
||||
window {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* The main Inspector panel container. */
|
||||
.inspector-responsive-container {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* The main panel layout. This area consists of a toolbar, markup view
|
||||
and breadcrumbs bar. */
|
||||
.devtools-main-content {
|
||||
/* Subtract 1 pixel from the panel height. It's puzzling why this
|
||||
is needed, but if not presented the entire Inspector panel
|
||||
content jumps 1 pixel up when the Toolbox is opened. */
|
||||
height: calc(100% - 1px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
/* Inspector Panel Splitter */
|
||||
|
||||
#inspector-splitter-box {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Minimum width for the Inspector main (uncontrolled) area. */
|
||||
#inspector-splitter-box .uncontrolled {
|
||||
min-width: 275px;
|
||||
}
|
||||
|
||||
#inspector-splitter-box .controlled.pane-collapsed {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
/* Use flex layout for the Inspector toolbar. For now, it's done
|
||||
specifically for the Inspector toolbar since general rule applied
|
||||
on .devtools-toolbar breaks breadcrubs and also toolbars in other
|
||||
on .devtools-toolbar breaks breadcrumbs and also toolbars in other
|
||||
panels (e.g. webconsole, debugger), these are not ready for HTML
|
||||
layout yet. */
|
||||
#inspector-toolbar.devtools-toolbar {
|
||||
|
|
@ -124,8 +162,9 @@
|
|||
is fixed and the all-tabs-menu is available again. */
|
||||
#inspector-sidebar-container {
|
||||
overflow: hidden;
|
||||
min-width: 300px;
|
||||
min-width: 50px;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#inspector-sidebar {
|
||||
|
|
@ -149,3 +188,16 @@
|
|||
text-align: center;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
/* Markup Box */
|
||||
|
||||
#markup-box {
|
||||
width: 100%;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
#markup-box > iframe {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче