Bug 880885 - Add support for sliding hover nav buttons part 2. r=fryn

browser/metro/base/content/NavButtonSlider.js

@@ -6,16 +6,16 @@
  * Handles nav overlay button positioning.
  */
 
+// minimum amount of movement using the mouse after which we cancel the button click handlers
+const kOnClickMargin = 3;
+
 var NavButtonSlider = {
   _back: document.getElementById("overlay-back"),
   _plus: document.getElementById("overlay-plus"),
-  _dragging: false,
+  _mouseMoveStarted: false,
+  _mouseDown: false,
   _yPos: -1,
 
-  get dragging() {
-    return this._dragging;
-  },
-
   /*
    * custom dragger, see input.js
    */
@@ -29,12 +29,10 @@ var NavButtonSlider = {
   },
 
   dragStart: function dragStart(aX, aY, aTarget, aScroller) {
-    this._dragging = true;
     return true;
   },
 
   dragStop: function dragStop(aDx, aDy, aScroller) {
-    this._dragging = false;
     return true;
   },
 
@@ -45,7 +43,7 @@ var NavButtonSlider = {
       return false;
     }
     
-    this._update(aClientY);
+    this._updatePosition(aClientY);
 
     // return true if we moved, false otherwise. The result
     // is used in deciding if we should repaint between drags.
@@ -57,10 +55,16 @@ var NavButtonSlider = {
    */
 
   init: function init() {
-    // touch dragger
+    // Touch drag support provided by input.js
     this._back.customDragger = this;
     this._plus.customDragger = this;
     Elements.browsers.addEventListener("ContentSizeChanged", this, true);
+    let events = ["mousedown", "mouseup", "mousemove", "click"];
+    events.forEach(function (value) {
+      this._back.addEventListener(value, this, true);
+      this._plus.addEventListener(value, this, true);
+    }, this);
+
     this._updateStops();
   },
 
@@ -78,18 +82,30 @@ var NavButtonSlider = {
     }
   },
 
+  _getPosition: function _getPosition() {
+    this._yPos = parseInt(getComputedStyle(this._back).top);
+  },
+
   _setPosition: function _setPosition() {
     this._back.style.top = this._yPos + "px";
     this._plus.style.top = this._yPos + "px";
   },
 
-  _update: function (aClientY) {
+  _updatePosition: function (aClientY) {
     if (this._topStop > aClientY || this._bottomStop < aClientY)
       return;
     this._yPos = aClientY;
     this._setPosition();
   },
 
+  _updateOffset: function (aOffset) {
+    let newPos = this._yPos + aOffset;
+    if (this._topStop > newPos || this._bottomStop < newPos)
+      return;
+    this._yPos = newPos;
+    this._setPosition();
+  },
+
   /*
    * Events
    */
@@ -99,6 +115,46 @@ var NavButtonSlider = {
       case "ContentSizeChanged":
         this._updateStops();
         break;
+      case "mousedown":
+        this._getPosition();
+        this._mouseDown = true;
+        this._mouseMoveStarted = false;
+        this._mouseY = aEvent.clientY;
+        aEvent.originalTarget.setCapture();
+        this._back.setAttribute("mousedrag", true);
+        this._plus.setAttribute("mousedrag", true);
+        break;
+      case "mouseup":
+        this._mouseDown = false;
+        this._back.removeAttribute("mousedrag");
+        this._plus.removeAttribute("mousedrag");
+        break;
+      case "mousemove":
+        // Check to be sure this is a drag operation
+        if (!this._mouseDown) {
+          return;
+        }
+        // Don't start a drag until we've passed a threshold
+        let dy = aEvent.clientY - this._mouseY;
+        if (!this._mouseMoveStarted && Math.abs(dy) < kOnClickMargin) {
+          return;
+        }
+        // Start dragging via the mouse
+        this._mouseMoveStarted = true;
+        this._mouseY = aEvent.clientY;
+        this._updateOffset(dy);
+        break;
+      case "click":
+        // Don't invoke the click action if we've moved the buttons via the mouse.
+        if (this._mouseMoveStarted) {
+          return;
+        }
+        if (aEvent.originalTarget == this._back) {
+           CommandUpdater.doCommand('cmd_back');
+        } else {
+           CommandUpdater.doCommand('cmd_newTab');
+        }
+        break;
     }
   },
 };

browser/metro/base/content/browser.xul

@@ -243,9 +243,9 @@
     </vbox>
 
     <html:div id="overlay-back" class="overlay-button"
-              observes="cmd_back" onclick="CommandUpdater.doCommand('cmd_back');"></html:div>
+              observes="cmd_back"></html:div>
     <html:div id="overlay-plus" class="overlay-button"
-              observes="cmd_back" onclick="CommandUpdater.doCommand('cmd_newTab');"></html:div>
+              observes="cmd_back"></html:div>
 
     <!-- popup for content navigator helper -->
     <appbar id="content-navigator" class="window-width content-navigator-box" orient="horizontal" pack="start">

browser/metro/theme/browser.css

@@ -878,6 +878,7 @@ setting[type="radio"] > vbox {
   border-radius: 50%;
   box-shadow: 0 0 0 1px hsla(0,0%,0%,.04),
               0 0 9px 0 hsla(0,0%,0%,.1);
+  transition-property: left, right, transform, background-position, background-color, background-size, border-color, visibility, box-shadow, top;
   transition-duration: 550ms;
   transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
 }
@@ -950,6 +951,12 @@ setting[type="radio"] > vbox {
   transform: translateX(-40px) scale(1.2);
 }
 
+#overlay-back[mousedrag],
+#overlay-plus[mousedrag] {
+  transition-property: left, right, transform, background-position, background-color, background-size, border-color, visibility, box-shadow;
+}
+
+
 /* helperapp (save-as) popup ----------------------------------------------- */
 #helperapp-target {
   font-size: @font_small@ !important;