Merge m-c to autoland

devtools/client/framework/test/browser_toolbox_textbox_context_menu.js

@@ -9,14 +9,6 @@ add_task(function* () {
   let toolbox = yield openNewTabAndToolbox(URL, "inspector");
   let textboxContextMenu = toolbox.textboxContextMenuPopup;
 
-  emptyClipboard();
-
-  // Make sure the focus is predictable.
-  let inspector = toolbox.getPanel("inspector");
-  let onFocus = once(inspector.searchBox, "focus");
-  inspector.searchBox.focus();
-  yield onFocus;
-
   ok(textboxContextMenu, "The textbox context menu is loaded in the toolbox");
 
   let cmdUndo = textboxContextMenu.querySelector("[command=cmd_undo]");
@@ -34,13 +26,10 @@ add_task(function* () {
 
   is(cmdUndo.getAttribute("disabled"), "true", "cmdUndo is disabled");
   is(cmdDelete.getAttribute("disabled"), "true", "cmdDelete is disabled");
-  is(cmdSelectAll.getAttribute("disabled"), "true", "cmdSelectAll is disabled");
+  is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled");
   is(cmdCut.getAttribute("disabled"), "true", "cmdCut is disabled");
   is(cmdCopy.getAttribute("disabled"), "true", "cmdCopy is disabled");
-  if (isWindows()) {
-    // emptyClipboard only works on Windows (666254), assert paste only for this OS.
   is(cmdPaste.getAttribute("disabled"), "true", "cmdPaste is disabled");
-  }
 
   yield cleanup(toolbox);
 });

devtools/client/framework/test/browser_toolbox_window_reload_target.js

@@ -84,7 +84,6 @@ 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++;
 }

devtools/client/framework/test/shared-head.js

@@ -559,20 +559,3 @@ function stopRecordingTelemetryLogs(Telemetry) {
   delete Telemetry.prototype._oldlogKeyed;
   delete Telemetry.prototype.telemetryInfo;
 }
-
-/**
- * Clean the logical clipboard content. This method only clears the OS clipboard on
- * Windows (see Bug 666254).
- */
-function emptyClipboard() {
-  let clipboard = Cc["@mozilla.org/widget/clipboard;1"]
-    .getService(SpecialPowers.Ci.nsIClipboard);
-  clipboard.emptyClipboard(clipboard.kGlobalClipboard);
-}
-
-/**
- * Check if the current operating system is Windows.
- */
-function isWindows() {
-  return Services.appinfo.OS === "WINNT";
-}

devtools/client/inspector/components/inspector-tab-panel.js

@@ -12,31 +12,19 @@ const { DOM, createClass, PropTypes } = require("devtools/client/shared/vendor/r
 const { div } = DOM;
 
 /**
- * Helper panel component that is using an existing DOM node
+ * Side panel for the Inspector panel.
- * as the content. It's used by Sidebar as well as SplitBox
+ * This side panel is using an existing DOM node as a content.
- * 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(this.props.idPrefix + this.props.id);
+    let panel = doc.getElementById("sidebar-panel-" + this.props.id);
 
     // Append existing DOM node into panel's content.
     this.refs.content.appendChild(panel);

devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js

@@ -29,13 +29,6 @@ add_task(function* () {
   let cmdPaste = searchContextMenu.querySelector("[command=cmd_paste]");
 
   info("Opening context menu");
-
-  emptyClipboard();
-
-  let onFocus = once(searchField, "focus");
-  searchField.focus();
-  yield onFocus;
-
   let onContextMenuPopup = once(searchContextMenu, "popupshowing");
   EventUtils.synthesizeMouse(searchField, 2, 2,
     {type: "contextmenu", button: 2}, win);
@@ -43,13 +36,10 @@ add_task(function* () {
 
   is(cmdUndo.getAttribute("disabled"), "true", "cmdUndo is disabled");
   is(cmdDelete.getAttribute("disabled"), "true", "cmdDelete is disabled");
-  is(cmdSelectAll.getAttribute("disabled"), "true", "cmdSelectAll is disabled");
+  is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled");
   is(cmdCut.getAttribute("disabled"), "true", "cmdCut is disabled");
   is(cmdCopy.getAttribute("disabled"), "true", "cmdCopy is disabled");
-  if (isWindows()) {
-    // emptyClipboard only works on Windows (666254), assert paste only for this OS.
   is(cmdPaste.getAttribute("disabled"), "true", "cmdPaste is disabled");
-  }
 
   info("Closing context menu");
   let onContextMenuHidden = once(searchContextMenu, "popuphidden");

devtools/client/inspector/inspector-panel.js

@@ -35,14 +35,6 @@ 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
@@ -102,9 +94,6 @@ 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();
@@ -411,98 +400,6 @@ 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.
    */
@@ -558,13 +455,56 @@ InspectorPanel.prototype = {
       this.sidebar.toggleTab(true, "fontinspector");
     }
 
-    // Setup the splitter before the sidebar is displayed so,
+    this.setupSidebarSize();
-    // 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();
 
@@ -858,9 +798,6 @@ InspectorPanel.prototype = {
 
     this.sidebar.off("select", this._setDefaultSidebar);
     let sidebarDestroyer = this.sidebar.destroy();
-
-    this.teardownSplitter();
-
     this.sidebar = null;
 
     this.teardownToolbar();
@@ -1314,8 +1251,7 @@ InspectorPanel.prototype = {
    * state and tooltip.
    */
   onPaneToggleButtonClicked: function (e) {
-    let sidePaneContainer = this.panelDoc.querySelector(
+    let sidePaneContainer = this.panelDoc.querySelector("#inspector-sidebar-container");
-      "#inspector-splitter-box .controlled");
     let isVisible = !this._sidebarToggle.state.collapsed;
 
     // Make sure the sidebar has width and height attributes before collapsing

devtools/client/inspector/inspector.xul

@@ -16,7 +16,6 @@
 <?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;
@@ -31,10 +30,8 @@
   <script type="application/javascript;version=1.8"
           src="chrome://devtools/content/shared/theme-switching.js"/>
 
-  <html:div class="inspector-responsive-container theme-body inspector">
+  <box flex="1" class="devtools-responsive-container theme-body">
-
+    <vbox flex="1" class="devtools-main-content">
-    <!-- Main Panel Content -->
-    <html:div id="inspector-main-content" class="devtools-main-content">
       <html:div id="inspector-toolbar"
         class="devtools-toolbar"
         nowindowdrag="true">
@@ -52,31 +49,27 @@
         <html:button id="inspector-eyedropper-toggle"
                      title="&inspectorEyeDropper.label;"
                      class="devtools-button command-button-invertable" />
-        <html:div id="inspector-sidebar-toggle-box" />
+        <div xmlns="http://www.w3.org/1999/xhtml"
+          id="inspector-sidebar-toggle-box" />
       </html:div>
-      <html:div id="markup-box" />
+      <vbox flex="1" id="markup-box">
+      </vbox>
       <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>
-    </html:div>
+    </vbox>
-
+    <splitter class="devtools-side-splitter"/>
-    <!-- Splitter -->
+    <vbox id="inspector-sidebar-container">
-    <html:div
+      <!-- Specify the XHTML namespace explicitly
-      xmlns="http://www.w3.org/1999/xhtml"
+        otherwise the layout is broken. -->
-      id="inspector-splitter-box">
+      <div xmlns="http://www.w3.org/1999/xhtml"
-    </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>
+    </vbox>
 
     <!-- Sidebar panel definitions -->
-    <html:div id="tabpanels" style="visibility:collapse">
+    <html:div xmlns="http://www.w3.org/1999/xhtml" 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">
@@ -225,5 +218,5 @@
       </html:div>
     </html:div>
 
-  </html:div>
+  </box>
 </window>

devtools/client/inspector/rules/test/browser_rules_authored_color.js

@@ -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);
-    focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
+    EventUtils.sendKey("RETURN", spectrum.element.ownerDocument.defaultView);
     yield onHidden;
     yield onRuleViewChanged;
 

devtools/client/inspector/rules/test/browser_rules_colorUnit.js

@@ -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);
-  focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
+  EventUtils.sendKey("RETURN", spectrum.element.ownerDocument.defaultView);
   yield onHidden;
   yield onRuleViewChanged;
 

devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_01.js

@@ -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");
-  focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
+  EventUtils.sendKey("RETURN", spectrum.element.ownerDocument.defaultView);
   yield onHidden;
   yield onModifications;
 

devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_02.js

@@ -46,7 +46,7 @@ function* testColorChangeIsntRevertedWhenOtherTooltipIsShown(ruleView) {
 
   let onModifications = waitForNEvents(ruleView, "ruleview-changed", 2);
   let onHidden = picker.tooltip.once("hidden");
-  focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
+  EventUtils.sendKey("RETURN", spectrum.element.ownerDocument.defaultView);
   yield onHidden;
   yield onModifications;
 

devtools/client/inspector/rules/test/browser_rules_colorpicker-commit-on-ENTER.js

@@ -47,7 +47,7 @@ function* testPressingEnterCommitsChanges(swatch, ruleView) {
   let onModified = ruleView.once("ruleview-changed");
   let spectrum = cPicker.spectrum;
   let onHidden = cPicker.tooltip.once("hidden");
-  focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
+  EventUtils.sendKey("RETURN", spectrum.element.ownerDocument.defaultView);
   yield onHidden;
   yield onModified;
 

devtools/client/inspector/rules/test/browser_rules_cubicbezier-commit-on-ENTER.js

@@ -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);
-  focusAndSendKey(widget.parent.ownerDocument.defaultView, "RETURN");
+  EventUtils.sendKey("RETURN", widget.parent.ownerDocument.defaultView);
   yield onRuleViewChanged;
 
   let style = yield getComputedStyleProperty("body", null,

devtools/client/inspector/rules/test/browser_rules_cubicbezier-revert-on-ESC.js

@@ -94,7 +94,7 @@ function* escapeTooltip(view) {
   let widget = yield bezierTooltip.widget;
   let onHidden = bezierTooltip.tooltip.once("hidden");
   let onModifications = view.once("ruleview-changed");
-  focusAndSendKey(widget.parent.ownerDocument.defaultView, "ESCAPE");
+  EventUtils.sendKey("ESCAPE", widget.parent.ownerDocument.defaultView);
   yield onHidden;
   yield onModifications;
 }

devtools/client/inspector/rules/test/browser_rules_eyedropper.js

@@ -64,8 +64,6 @@ add_task(function* () {
   tooltip.hide();
   yield onHidden;
   ok(!tooltip.isVisible(), "color picker tooltip is closed");
-
-  yield waitForTick();
 });
 
 function* testESC(swatch, inspector, testActor) {

devtools/client/inspector/rules/test/browser_rules_filtereditor-appears-on-swatch-click.js

@@ -29,6 +29,4 @@ add_task(function* () {
   "The inplace editor wasn't shown as a result of the filter swatch click");
 
   yield hideTooltipAndWaitForRuleViewChanged(filterTooltip, view);
-
-  yield waitForTick();
 });

devtools/client/inspector/rules/test/browser_rules_search-filter_context-menu.js

@@ -28,13 +28,6 @@ add_task(function* () {
   let cmdPaste = searchContextMenu.querySelector("[command=cmd_paste]");
 
   info("Opening context menu");
-
-  emptyClipboard();
-
-  let onFocus = once(searchField, "focus");
-  searchField.focus();
-  yield onFocus;
-
   let onContextMenuPopup = once(searchContextMenu, "popupshowing");
   EventUtils.synthesizeMouse(searchField, 2, 2,
     {type: "contextmenu", button: 2}, win);
@@ -42,13 +35,10 @@ add_task(function* () {
 
   is(cmdUndo.getAttribute("disabled"), "true", "cmdUndo is disabled");
   is(cmdDelete.getAttribute("disabled"), "true", "cmdDelete is disabled");
-  is(cmdSelectAll.getAttribute("disabled"), "true", "cmdSelectAll is disabled");
+  is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled");
   is(cmdCut.getAttribute("disabled"), "true", "cmdCut is disabled");
   is(cmdCopy.getAttribute("disabled"), "true", "cmdCopy is disabled");
-  if (isWindows()) {
-    // emptyClipboard only works on Windows (666254), assert paste only for this OS.
   is(cmdPaste.getAttribute("disabled"), "true", "cmdPaste is disabled");
-  }
 
   info("Closing context menu");
   let onContextMenuHidden = once(searchContextMenu, "popuphidden");

devtools/client/inspector/rules/test/head.js

@@ -814,13 +814,3 @@ 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);
-}

devtools/client/inspector/test/browser.ini

@@ -130,6 +130,7 @@ subsuite = clipboard
 [browser_inspector_pane-toggle-01.js]
 [browser_inspector_pane-toggle-02.js]
 [browser_inspector_pane-toggle-03.js]
+[browser_inspector_pane-toggle-04.js]
 [browser_inspector_pane-toggle-05.js]
 skip-if = os == "mac" # Full keyboard navigation on OSX only works if Full Keyboard Access setting is set to All Control in System Keyboard
 [browser_inspector_picker-stop-on-destroy.js]

devtools/client/inspector/test/browser_inspector_breadcrumbs_visibility.js

@@ -32,10 +32,6 @@ 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)

devtools/client/inspector/test/browser_inspector_pane-toggle-02.js

@@ -11,8 +11,7 @@ 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-splitter-box .controlled");
+  let panel = inspector.panelDoc.querySelector("#inspector-sidebar-container");
-
   let button = inspector.panelDoc.querySelector(".sidebar-toggle");
   ok(!panel.classList.contains("pane-collapsed"), "The panel is in expanded state");
 

devtools/client/inspector/test/browser_inspector_pane-toggle-03.js

@@ -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-splitter-box .controlled");
+  let panel = inspector.panelDoc.querySelector("#inspector-sidebar-container");
 
   ok(!button.classList.contains("pane-collapsed"), "The button is in expanded state");
 

devtools/client/inspector/test/browser_inspector_pane-toggle-04.js

@@ -0,0 +1,65 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+let { Toolbox } = require("devtools/client/framework/toolbox");
+
+// Test that the dimensions of the collapsed inspector panel are not modified
+// when switching from horizontal to vertical layout, which is mandatory to make
+// sure the panel remains visually hidden (using negative margins).
+
+add_task(function* () {
+  info("Set temporary preferences to ensure a small sidebar width.");
+  yield new Promise(resolve => {
+    let options = {"set": [
+      ["devtools.toolsidebar-width.inspector", 200]
+    ]};
+    SpecialPowers.pushPrefEnv(options, resolve);
+  });
+
+  let { inspector, toolbox } = yield openInspectorForURL("about:blank");
+  let button = inspector.panelDoc.querySelector(".sidebar-toggle");
+  let panel = inspector.panelDoc.querySelector("#inspector-sidebar-container");
+
+  info("Changing toolbox host to a window.");
+  yield toolbox.switchHost(Toolbox.HostType.WINDOW);
+
+  let hostWindow = toolbox._host._window;
+  let originalWidth = hostWindow.outerWidth;
+  let originalHeight = hostWindow.outerHeight;
+
+  info("Resizing window to switch to the horizontal layout.");
+  hostWindow.resizeTo(800, 300);
+
+  // Check the sidebar is expanded when the test starts.
+  ok(!panel.classList.contains("pane-collapsed"), "The panel is in expanded state");
+
+  info("Collapse the inspector sidebar.");
+  let onTransitionEnd = once(panel, "transitionend");
+  EventUtils.synthesizeMouseAtCenter(button, {},
+    inspector.panelDoc.defaultView);
+  yield onTransitionEnd;
+
+  ok(panel.classList.contains("pane-collapsed"), "The panel is in collapsed state");
+  let currentPanelHeight = panel.getBoundingClientRect().height;
+  let currentPanelMarginBottom = panel.style.marginBottom;
+
+  info("Resizing window to switch to the vertical layout.");
+  hostWindow.resizeTo(300, 800);
+
+  // Check the panel is collapsed, and still has the same dimensions.
+  ok(panel.classList.contains("pane-collapsed"), "The panel is still collapsed");
+  is(panel.getBoundingClientRect().height, currentPanelHeight,
+    "The panel height has not been modified when changing the layout.");
+  is(panel.style.marginBottom, currentPanelMarginBottom,
+    "The panel margin-bottom has not been modified when changing the layout.");
+
+  info("Restoring window original size.");
+  hostWindow.resizeTo(originalWidth, originalHeight);
+});
+
+registerCleanupFunction(function () {
+  // Restore the host type for other tests.
+  Services.prefs.clearUserPref("devtools.toolbox.host");
+});

devtools/client/inspector/test/browser_inspector_pane-toggle-05.js

@@ -10,8 +10,7 @@
 
 add_task(function* () {
   let {inspector} = yield openInspectorForURL("about:blank", "side");
-  let panel = inspector.panelDoc.querySelector("#inspector-splitter-box .controlled");
+  let panel = inspector.panelDoc.querySelector("#inspector-sidebar-container");
-
   let button = inspector.panelDoc.querySelector(".sidebar-toggle");
 
   ok(!panel.classList.contains("pane-collapsed"), "The panel is in expanded state");

devtools/client/inspector/test/browser_inspector_search-filter_context-menu.js

@@ -26,13 +26,7 @@ add_task(function* () {
   let cmdCopy = searchContextMenu.querySelector("[command=cmd_copy]");
   let cmdPaste = searchContextMenu.querySelector("[command=cmd_paste]");
 
-  emptyClipboard();
-
   info("Opening context menu");
-  let onFocus = once(searchBox, "focus");
-  searchBox.focus();
-  yield onFocus;
-
   let onContextMenuPopup = once(searchContextMenu, "popupshowing");
   EventUtils.synthesizeMouse(searchBox, 2, 2,
     {type: "contextmenu", button: 2}, win);
@@ -40,13 +34,10 @@ add_task(function* () {
 
   is(cmdUndo.getAttribute("disabled"), "true", "cmdUndo is disabled");
   is(cmdDelete.getAttribute("disabled"), "true", "cmdDelete is disabled");
-  is(cmdSelectAll.getAttribute("disabled"), "true", "cmdSelectAll is disabled");
+  is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled");
   is(cmdCut.getAttribute("disabled"), "true", "cmdCut is disabled");
   is(cmdCopy.getAttribute("disabled"), "true", "cmdCopy is disabled");
-  if (isWindows()) {
-    // emptyClipboard only works on Windows (666254), assert paste only for this OS.
   is(cmdPaste.getAttribute("disabled"), "true", "cmdPaste is disabled");
-  }
 
   info("Closing context menu");
   let onContextMenuHidden = once(searchContextMenu, "popuphidden");
@@ -56,7 +47,6 @@ 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;

devtools/client/inspector/toolsidebar.js

@@ -66,7 +66,12 @@ ToolSidebar.prototype = {
   },
 
   get InspectorTabPanel() {
-    return this._toolPanel.InspectorTabPanel;
+    if (!this._InspectorTabPanel) {
+      this._InspectorTabPanel =
+        this.React.createFactory(this.browserRequire(
+        "devtools/client/inspector/components/inspector-tab-panel"));
+    }
+    return this._InspectorTabPanel;
   },
 
   // Rendering
@@ -85,14 +90,7 @@ ToolSidebar.prototype = {
   },
 
   addExistingTab: function (id, title, selected) {
-    let panel = this.InspectorTabPanel({
+    this._tabbar.addTab(id, title, selected, 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);
   },
@@ -107,7 +105,6 @@ 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,

devtools/client/shared/components/moz.build

@@ -6,7 +6,6 @@
 
 DIRS += [
     'reps',
-    'splitter',
     'tabs',
     'tree'
 ]

devtools/client/shared/components/splitter/draggable.js

@@ -1,54 +0,0 @@
-/* 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 React = require("devtools/client/shared/vendor/react");
-const ReactDOM = require("devtools/client/shared/vendor/react-dom");
-const { DOM: dom, PropTypes } = React;
-
-const Draggable = React.createClass({
-  displayName: "Draggable",
-
-  propTypes: {
-    onMove: PropTypes.func.isRequired,
-    onStart: PropTypes.func,
-    onStop: PropTypes.func,
-    style: PropTypes.object,
-    className: PropTypes.string
-  },
-
-  startDragging(ev) {
-    ev.preventDefault();
-    const doc = ReactDOM.findDOMNode(this).ownerDocument;
-    doc.addEventListener("mousemove", this.onMove);
-    doc.addEventListener("mouseup", this.onUp);
-    this.props.onStart && this.props.onStart();
-  },
-
-  onMove(ev) {
-    ev.preventDefault();
-    // Use screen coordinates so, moving mouse over iframes
-    // doesn't mangle (relative) coordinates.
-    this.props.onMove(ev.screenX, ev.screenY);
-  },
-
-  onUp(ev) {
-    ev.preventDefault();
-    const doc = ReactDOM.findDOMNode(this).ownerDocument;
-    doc.removeEventListener("mousemove", this.onMove);
-    doc.removeEventListener("mouseup", this.onUp);
-    this.props.onStop && this.props.onStop();
-  },
-
-  render() {
-    return dom.div({
-      style: this.props.style,
-      className: this.props.className,
-      onMouseDown: this.startDragging
-    });
-  }
-});
-
-module.exports = Draggable;

devtools/client/shared/components/splitter/moz.build

@@ -1,11 +0,0 @@
-# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
-# vim: set filetype=python:
-# 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/.
-
-DevToolsModules(
-    'draggable.js',
-    'split-box.css',
-    'split-box.js',
-)

devtools/client/shared/components/splitter/split-box.css

@@ -1,88 +0,0 @@
-/* vim:set ts=2 sw=2 sts=2 et: */
-/* 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/. */
-
-.split-box {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  height: 100%;
-  width: 100%;
-}
-
-.split-box.vert {
-  flex-direction: row;
-}
-
-.split-box.horz {
-  flex-direction: column;
-}
-
-.split-box > .uncontrolled {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  overflow: auto;
-}
-
-.split-box > .controlled {
-  display: flex;
-  overflow: auto;
-}
-
-.split-box > .splitter {
-  background-image: none;
-  border: 0;
-  border-style: solid;
-  border-color: transparent;
-  background-color: var(--theme-splitter-color);
-  background-clip: content-box;
-  position: relative;
-
-  box-sizing: border-box;
-
-  /* Positive z-index positions the splitter on top of its siblings and makes
-     it clickable on both sides. */
-  z-index: 1;
-}
-
-.split-box.vert > .splitter {
-  min-width: calc(var(--devtools-splitter-inline-start-width) +
-    var(--devtools-splitter-inline-end-width) + 1px);
-
-  border-inline-start-width: var(--devtools-splitter-inline-start-width);
-  border-inline-end-width: var(--devtools-splitter-inline-end-width);
-
-  margin-inline-start: calc(-1 * var(--devtools-splitter-inline-start-width) - 1px);
-  margin-inline-end: calc(-1 * var(--devtools-splitter-inline-end-width));
-
-  cursor: ew-resize;
-}
-
-.split-box.horz > .splitter {
-  min-height: calc(var(--devtools-splitter-top-width) +
-    var(--devtools-splitter-bottom-width) + 1px);
-
-  border-top-width: var(--devtools-splitter-top-width);
-  border-bottom-width: var(--devtools-splitter-bottom-width);
-
-  margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px);
-  margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width));
-
-  cursor: ns-resize;
-}
-
-.split-box.disabled {
-  pointer-events: none;
-}
-
-/**
- * Make sure splitter panels are not processing any mouse
- * events. This is good for performance during splitter
- * bar dragging.
- */
-.split-box.dragging > .controlled,
-.split-box.dragging > .uncontrolled {
-  pointer-events: none;
-}

devtools/client/shared/components/splitter/split-box.js

@@ -1,207 +0,0 @@
-/* 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 React = require("devtools/client/shared/vendor/react");
-const ReactDOM = require("devtools/client/shared/vendor/react-dom");
-const Draggable = React.createFactory(require("devtools/client/shared/components/splitter/draggable"));
-const { DOM: dom, PropTypes } = React;
-
-/**
- * This component represents a Splitter. The splitter supports vertical
- * as well as horizontal mode.
- */
-const SplitBox = React.createClass({
-  displayName: "SplitBox",
-
-  propTypes: {
-    // Custom class name. You can use more names separated by a space.
-    className: PropTypes.string,
-    // Initial size of controlled panel.
-    initialSize: PropTypes.number,
-    // Left/top panel
-    startPanel: PropTypes.any,
-    // Min panel size.
-    minSize: PropTypes.number,
-    // Max panel size.
-    maxSize: PropTypes.number,
-    // Right/bottom panel
-    endPanel: PropTypes.any,
-    // True if the right/bottom panel should be controlled.
-    endPanelControl: PropTypes.bool,
-    // Size of the splitter handle bar.
-    splitterSize: PropTypes.number,
-    // True if the splitter bar is vertical (default is vertical).
-    vert: PropTypes.bool
-  },
-
-  getDefaultProps() {
-    return {
-      splitterSize: 5,
-      vert: true,
-      endPanelControl: false
-    };
-  },
-
-  /**
-   * The state stores the current orientation (vertical or horizontal)
-   * and the current size (width/height). All these values can change
-   * during the component's life time.
-   */
-  getInitialState() {
-    return {
-      vert: this.props.vert,
-      width: this.props.initialWidth || this.props.initialSize,
-      height: this.props.initialHeight || this.props.initialSize
-    };
-  },
-
-  // Dragging Events
-
-  /**
-   * Set 'resizing' cursor on entire document during splitter dragging.
-   * This avoids cursor-flickering that happens when the mouse leaves
-   * the splitter bar area (happens frequently).
-   */
-  onStartMove() {
-    const splitBox = ReactDOM.findDOMNode(this);
-    const doc = splitBox.ownerDocument;
-    let defaultCursor = doc.documentElement.style.cursor;
-    doc.documentElement.style.cursor = (this.state.vert ? "ew-resize" : "ns-resize");
-
-    splitBox.classList.add("dragging");
-
-    this.setState({
-      defaultCursor: defaultCursor
-    });
-  },
-
-  onStopMove() {
-    const splitBox = ReactDOM.findDOMNode(this);
-    const doc = splitBox.ownerDocument;
-    doc.documentElement.style.cursor = this.state.defaultCursor;
-
-    splitBox.classList.remove("dragging");
-  },
-
-  /**
-   * Adjust size of the controlled panel. Depending on the current
-   * orientation we either remember the width or height of
-   * the splitter box.
-   */
-  onMove(x, y) {
-    const node = ReactDOM.findDOMNode(this);
-    const doc = node.ownerDocument;
-    const win = doc.defaultView;
-
-    let size;
-    let { endPanelControl } = this.props;
-
-    if (this.state.vert) {
-      // Switch the control flag in case of RTL. Note that RTL
-      // has impact on vertical splitter only.
-      let dir = win.getComputedStyle(doc.documentElement).direction;
-      if (dir == "rtl") {
-        endPanelControl = !endPanelControl;
-      }
-
-      let innerOffset = x - win.mozInnerScreenX;
-      size = endPanelControl ?
-        (node.offsetLeft + node.offsetWidth) - innerOffset :
-        innerOffset - node.offsetLeft;
-
-      this.setState({
-        width: size
-      });
-    } else {
-      let innerOffset = y - win.mozInnerScreenY;
-      size = endPanelControl ?
-        (node.offsetTop + node.offsetHeight) - innerOffset :
-        innerOffset - node.offsetTop;
-
-      this.setState({
-        height: size
-      });
-    }
-  },
-
-  // Rendering
-
-  render() {
-    const vert = this.state.vert;
-    const { startPanel, endPanel, endPanelControl, minSize,
-      maxSize, splitterSize } = this.props;
-
-    let style = Object.assign({}, this.props.style);
-
-    // Calculate class names list.
-    let classNames = ["split-box"];
-    classNames.push(vert ? "vert" : "horz");
-    if (this.props.className) {
-      classNames = classNames.concat(this.props.className.split(" "));
-    }
-
-    let leftPanelStyle;
-    let rightPanelStyle;
-
-    // Set proper size for panels depending on the current state.
-    if (vert) {
-      leftPanelStyle = {
-        maxWidth: endPanelControl ? null : maxSize,
-        minWidth: endPanelControl ? null : minSize,
-        width: endPanelControl ? null : this.state.width
-      };
-      rightPanelStyle = {
-        maxWidth: endPanelControl ? maxSize : null,
-        minWidth: endPanelControl ? minSize : null,
-        width: endPanelControl ? this.state.width : null
-      };
-    } else {
-      leftPanelStyle = {
-        maxHeight: endPanelControl ? null : maxSize,
-        minHeight: endPanelControl ? null : minSize,
-        height: endPanelControl ? null : this.state.height
-      };
-      rightPanelStyle = {
-        maxHeight: endPanelControl ? maxSize : null,
-        minHeight: endPanelControl ? minSize : null,
-        height: endPanelControl ? this.state.height : null
-      };
-    }
-
-    // Calculate splitter size
-    let splitterStyle = {
-      flex: "0 0 " + splitterSize + "px"
-    };
-
-    return (
-      dom.div({
-        className: classNames.join(" "),
-        style: style },
-        startPanel ?
-          dom.div({
-            className: endPanelControl ? "uncontrolled" : "controlled",
-            style: leftPanelStyle},
-            startPanel
-          ) : null,
-        Draggable({
-          className: "splitter",
-          style: splitterStyle,
-          onStart: this.onStartMove,
-          onStop: this.onStopMove,
-          onMove: this.onMove
-        }),
-        endPanel ?
-          dom.div({
-            className: endPanelControl ? "controlled" : "uncontrolled",
-            style: rightPanelStyle},
-            endPanel
-          ) : null
-      )
-    );
-  }
-});
-
-module.exports = SplitBox;

devtools/client/shared/components/test/mochitest/test_tabs_accessibility.html

@@ -57,11 +57,7 @@ window.onload = Task.async(function* () {
       document.body.appendChild(panel);
 
       return setState(tabbarReact, Object.assign({}, tabbarReact.state, {
-        tabs: tabbarReact.state.tabs.concat({
+        tabs: tabbarReact.state.tabs.concat({id: `${tabId}`, title: `tab-${tabId}`, panel: InspectorTabPanel}),
-          id: `sidebar-panel-${tabId}`,
-          title: `tab-${tabId}`,
-          panel: InspectorTabPanel
-        }),
       }));
     }
   } catch(e) {

devtools/client/themes/inspector.css

@@ -11,47 +11,9 @@
   --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 breadcrumbs and also toolbars in other
+   on .devtools-toolbar breaks breadcrubs and also toolbars in other
    panels (e.g. webconsole, debugger), these are not ready for HTML
    layout yet. */
 #inspector-toolbar.devtools-toolbar {
@@ -162,9 +124,8 @@ window {
   is fixed and the all-tabs-menu is available again. */
 #inspector-sidebar-container {
   overflow: hidden;
-  min-width: 50px;
+  min-width: 300px;
   position: relative;
-  height: 100%;
 }
 
 #inspector-sidebar {
@@ -188,16 +149,3 @@ window {
   text-align: center;
   margin: 5px;
 }
-
-/* Markup Box */
-
-#markup-box {
-  width: 100%;
-  flex: 1 1 auto;
-}
-
-#markup-box > iframe {
-  height: 100%;
-  width: 100%;
-}
-

image/RasterImage.cpp

@@ -1173,7 +1173,6 @@ RasterImage::Decode(const IntSize& aSize,
 
   // Make sure DecoderFactory was able to create a decoder successfully.
   if (!task) {
-    DoError();
     return NS_ERROR_FAILURE;
   }
 
@@ -1228,7 +1227,6 @@ RasterImage::RecoverFromInvalidFrames(const IntSize& aSize, uint32_t aFlags)
   // Animated images require some special handling, because we normally require
   // that they never be discarded.
   if (mAnimationState) {
-    mAnimationState->SetDoneDecoding(false);
     Decode(mSize, aFlags | FLAG_SYNC_DECODE, PlaybackType::eAnimated);
     ResetAnimation();
     return;

security/manager/ssl/StaticHPKPins.h

@@ -1162,4 +1162,4 @@ static const TransportSecurityPreload kPublicKeyPinningPreloadList[] = {
 
 static const int32_t kUnknownId = -1;
 
-static const PRTime kPreloadPKPinsExpirationTime = INT64_C(1481978895828000);
+static const PRTime kPreloadPKPinsExpirationTime = INT64_C(1482583977213000);