Commit edf43f52 authored by Jason Laster's avatar Jason Laster
Browse files

Bug 1505434 - The splitter has a couple of bugs in vertical mode. r=dwalsh 

Tags:

Differential Revision: https://phabricator.services.mozilla.com/D11178
parent 068d60b2

devtools/client/debugger/new/dist/vendors.js

+51 −43
Original line number Diff line number Diff line
@@ -2664,6 +2664,7 @@ class SplitBox extends Component { 
    doc.documentElement.style.cursor = this.state.vert ? "ew-resize" : "ns-resize";



    splitBox.classList.add("dragging");

    document.dispatchEvent(new CustomEvent("drag:start"));



    this.setState({

      defaultCursor: defaultCursor
@@ -2676,6 +2677,7 @@ class SplitBox extends Component { 
    doc.documentElement.style.cursor = this.state.defaultCursor;



    splitBox.classList.remove("dragging");

    document.dispatchEvent(new CustomEvent("drag:end"));



    if (this.props.onResizeEnd) {

      this.props.onResizeEnd(this.state.vert ? this.state.width : this.state.height);
@@ -2853,6 +2855,12 @@ class Draggable extends Component { 


  onMove(ev) {

    ev.preventDefault();



    // When the target is outside of the document, its tagName is undefined

    if (!ev.target.tagName) {

      return

    }



    // We pass the whole event because we don't know which properties

    // the callee needs.

    this.props.onMove(ev);

devtools/client/debugger/new/panel.js

+4 −0
Original line number Diff line number Diff line
@@ -43,6 +43,10 @@ DebuggerPanel.prototype = { 
    this._selectors = selectors;

    this._client = client;

    this.isReady = true;



    this.panelWin.document.addEventListener("drag:start", this.toolbox.toggleDragging);

    this.panelWin.document.addEventListener("drag:end", this.toolbox.toggleDragging);



    return this;

  },

devtools/client/framework/toolbox.js

+5 −0
Original line number Diff line number Diff line
@@ -158,6 +158,7 @@ function Toolbox(target, selectedTool, hostType, contentWindow, frameId, 
  this.toggleSplitConsole = this.toggleSplitConsole.bind(this);

  this.toggleOptions = this.toggleOptions.bind(this);

  this.togglePaintFlashing = this.togglePaintFlashing.bind(this);

  this.toggleDragging = this.toggleDragging.bind(this);

  this.isPaintFlashing = false;



  this._target.on("close", this.destroy);
@@ -326,6 +327,10 @@ Toolbox.prototype = { 
    return this._toolPanels.get(this.currentToolId);

  },



  toggleDragging: function() {

    this.doc.querySelector("window").classList.toggle("dragging");

  },



  /**

   * Get/alter the target of a Toolbox so we're debugging something different.

   * See Target.jsm for more details.

devtools/client/themes/toolbox.css

+4 −0
Original line number Diff line number Diff line
@@ -47,6 +47,10 @@ 
  min-height: 29px;

}



.dragging #toolbox-panel-iframe-webconsole {

  pointer-events: none;

}



.toolbox-tabs-wrapper {

  position: relative;

  display: flex;