Bug 880855 - Add support for sliding hover nav buttons part 1. r=fryn DONTBUILD

browser/metro/base/content/NavButtonSlider.js

@@ -0,0 +1,106 @@
+/* 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/. */
+
+/*
+ * Handles nav overlay button positioning.
+ */
+
+var NavButtonSlider = {
+  _back: document.getElementById("overlay-back"),
+  _plus: document.getElementById("overlay-plus"),
+  _dragging: false,
+  _yPos: -1,
+
+  get dragging() {
+    return this._dragging;
+  },
+
+  /*
+   * custom dragger, see input.js
+   */
+
+  freeDrag: function freeDrag() {
+    return true;
+  },
+
+  isDraggable: function isDraggable(aTarget, aContent) {
+    return { x: false, y: true };
+  },
+
+  dragStart: function dragStart(aX, aY, aTarget, aScroller) {
+    this._dragging = true;
+    return true;
+  },
+
+  dragStop: function dragStop(aDx, aDy, aScroller) {
+    this._dragging = false;
+    return true;
+  },
+
+  dragMove: function dragMove(aDx, aDy, aScroller, aIsKenetic, aClientX, aClientY) {
+    // Note if aIsKenetic is true this is synthetic movement,
+    // we don't want that so return false.
+    if (aIsKenetic) {
+      return false;
+    }
+    
+    this._update(aClientY);
+
+    // return true if we moved, false otherwise. The result
+    // is used in deciding if we should repaint between drags.
+    return true;
+  },
+
+  /*
+   * logic
+   */
+
+  init: function init() {
+    // touch dragger
+    this._back.customDragger = this;
+    this._plus.customDragger = this;
+    Elements.browsers.addEventListener("ContentSizeChanged", this, true);
+    this._updateStops();
+  },
+
+  _updateStops: function () {
+    this._contentHeight = ContentAreaObserver.contentHeight;
+    this._imageHeight = 118;
+    this._topStop = this._imageHeight * .7;
+    this._bottomStop = this._contentHeight - (this._imageHeight * .7);
+
+    // Check to see if we need to move the slider into view
+    if (this._yPos != -1 &&
+        (this._topStop > this._yPos || this._bottomStop < this._yPos)) {
+      this._back.style.top = "50%";
+      this._plus.style.top = "50%";
+    }
+  },
+
+  _setPosition: function _setPosition() {
+    this._back.style.top = this._yPos + "px";
+    this._plus.style.top = this._yPos + "px";
+  },
+
+  _update: function (aClientY) {
+    if (this._topStop > aClientY || this._bottomStop < aClientY)
+      return;
+    this._yPos = aClientY;
+    this._setPosition();
+  },
+
+  /*
+   * Events
+   */
+
+  handleEvent: function handleEvent(aEvent) {
+    switch (aEvent.type) {
+      case "ContentSizeChanged":
+        this._updateStops();
+        break;
+    }
+  },
+};
+
+

browser/metro/base/content/browser-scripts.js

@@ -135,6 +135,7 @@ let ScriptContexts = {};
   ["SanitizeUI", "chrome://browser/content/sanitizeUI.js"],
   ["SSLExceptions", "chrome://browser/content/exceptions.js"],
   ["ItemPinHelper", "chrome://browser/content/helperui/ItemPinHelper.js"],
+  ["NavButtonSlider", "chrome://browser/content/NavButtonSlider.js"],
 #ifdef MOZ_SERVICES_SYNC
   ["Sync", "chrome://browser/content/sync.js"],
   ["SyncPairDevice", "chrome://browser/content/sync.js"],

browser/metro/base/content/browser-ui.js

@@ -110,6 +110,7 @@ var BrowserUI = {
     FlyoutPanelsUI.init();
     PageThumbs.init();
     SettingsCharm.init();
+    NavButtonSlider.init();
 
     // show the right toolbars, awesomescreen, etc for the os viewstate
     BrowserUI._adjustDOMforViewState();

browser/metro/base/content/browser.xul

@@ -239,9 +239,14 @@
         <!-- Content touch selection overlay -->
         <!-- onclick addresses dom bug 835175 -->
         <box onclick="false" class="selection-overlay-hidden" id="content-selection-overlay"/>
-  </stack>
+      </stack>
     </vbox>
 
+    <html:div id="overlay-back" class="overlay-button"
+              observes="cmd_back" onclick="CommandUpdater.doCommand('cmd_back');"></html:div>
+    <html:div id="overlay-plus" class="overlay-button"
+              observes="cmd_back" onclick="CommandUpdater.doCommand('cmd_newTab');"></html:div>
+
     <!-- popup for content navigator helper -->
     <appbar id="content-navigator" class="window-width content-navigator-box" orient="horizontal" pack="start">
       <textbox id="find-helper-textbox" class="search-bar content-navigator-item" oncommand="FindHelperUI.search(this.value)" oninput="FindHelperUI.updateCommands(this.value);" type="search"/>
@@ -365,11 +370,6 @@
 
     <autoscroller class="autoscroller" id="autoscrollerid"/>
 
-    <html:div id="overlay-back" class="overlay-button"
-              observes="cmd_back" onclick="CommandUpdater.doCommand('cmd_back');"></html:div>
-    <html:div id="overlay-plus" class="overlay-button"
-              observes="cmd_back" onclick="CommandUpdater.doCommand('cmd_newTab');"></html:div>
-
     <flyoutpanel id="about-flyoutpanel" headertext="&aboutHeader.title;">
       <label id="about-product-label" value="&aboutHeader.product.label;"/>
       <label value="&aboutHeader.company.label;"/>

browser/metro/base/jar.mn

@@ -92,6 +92,7 @@ chrome.jar:
 * content/sync.js                              (content/sync.js)
   content/RemoteTabs.js                        (content/RemoteTabs.js)
 #endif
+  content/NavButtonSlider.js                   (content/NavButtonSlider.js)
 
 % override chrome://global/content/config.xul chrome://browser/content/config.xul
 % override chrome://global/content/netError.xhtml chrome://browser/content/netError.xhtml