Bug 880885 - Add support for sliding hover nav buttons part 1. r=fryn
☠☠ backed out by cbc4be7ae5da ☠ ☠
authorJim Mathies <jmathies@mozilla.com>
Wed, 19 Jun 2013 14:20:45 -0500
changeset 147157 4e5d6e8d884968484640a946e73ddf0e6adab97c
parent 147156 754436cbbc100b79053457a7fa80a40fed1fc9b6
child 147158 f0f88a7512a501d87f92c626806e46fb11e13d3d
child 147160 cbc4be7ae5dab51303e841f826c641d07e7980c9
push id2697
push userbbajaj@mozilla.com
push dateMon, 05 Aug 2013 18:49:53 +0000
treeherdermozilla-beta@dfec938c7b63 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfryn
bugs880885
milestone24.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 880885 - Add support for sliding hover nav buttons part 1. r=fryn
browser/metro/base/content/NavButtonSlider.js
browser/metro/base/content/browser-scripts.js
browser/metro/base/content/browser-ui.js
browser/metro/base/content/browser.xul
browser/metro/base/jar.mn
new file mode 100644
--- /dev/null
+++ b/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;
+    }
+  },
+};
+
+
--- a/browser/metro/base/content/browser-scripts.js
+++ b/browser/metro/base/content/browser-scripts.js
@@ -130,16 +130,17 @@ let ScriptContexts = {};
   ["TopSites", "chrome://browser/content/TopSites.js"],
   ["TopSitesView", "chrome://browser/content/TopSites.js"],
   ["TopSitesSnappedView", "chrome://browser/content/TopSites.js"],
   ["TopSitesStartView", "chrome://browser/content/TopSites.js"],
   ["Sanitizer", "chrome://browser/content/sanitize.js"],
   ["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"],
   ["RemoteTabsView", "chrome://browser/content/RemoteTabs.js"],
   ["RemoteTabsPanelView", "chrome://browser/content/RemoteTabs.js"],
   ["RemoteTabsStartView", "chrome://browser/content/RemoteTabs.js"],
 #endif
 ].forEach(function (aScript) {
--- a/browser/metro/base/content/browser-ui.js
+++ b/browser/metro/base/content/browser-ui.js
@@ -105,16 +105,17 @@ var BrowserUI = {
 
     // Init core UI modules
     ContextUI.init();
     StartUI.init();
     PanelUI.init();
     FlyoutPanelsUI.init();
     PageThumbs.init();
     SettingsCharm.init();
+    NavButtonSlider.init();
 
     // show the right toolbars, awesomescreen, etc for the os viewstate
     BrowserUI._adjustDOMforViewState();
 
     // We can delay some initialization until after startup.  We wait until
     // the first page is shown, then dispatch a UIReadyDelayed event.
     messageManager.addMessageListener("pageshow", function() {
       if (getBrowser().currentURI.spec == "about:blank")
--- a/browser/metro/base/content/browser.xul
+++ b/browser/metro/base/content/browser.xul
@@ -234,19 +234,24 @@
       <stack id="content-viewport">
         <deck id="browsers" flex="1" observes="bcast_preciseInput"/>
         <box id="vertical-scroller" class="scroller" orient="vertical" end="0" top="0"/>
         <box id="horizontal-scroller" class="scroller" orient="horizontal" left="0" bottom="0"/>
 
         <!-- 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"/>
       <button class="content-navigator-item previous-button" command="cmd_findPrevious"/>
       <button class="content-navigator-item next-button" command="cmd_findNext"/>
       <spacer flex="1"/>
       <button class="content-navigator-item close-button" command="cmd_findClose"/>
     </appbar>
@@ -360,21 +365,16 @@
         <toolbarbutton id="pin-selected-button" hidden="true" fade="true" oncommand="Appbar.dispatchContextualAction('pin')"/>
         <toolbarbutton id="unpin-selected-button" hidden="true" fade="true" oncommand="Appbar.dispatchContextualAction('unpin')"/>
         <toolbarbutton id="clear-selected-button" hidden="true" fade="true" oncommand="Appbar.dispatchContextualAction('clear')"/>
       </toolbar>
     </appbar>
 
     <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;"/>
 #expand <label id="about-version-label">__MOZ_APP_VERSION__</label>
       <vbox id="updateBox">
 #ifdef MOZ_UPDATER
         <deck id="updateDeck" orient="vertical">
           <hbox id="updateButtonBox" align="center">
--- a/browser/metro/base/jar.mn
+++ b/browser/metro/base/jar.mn
@@ -87,11 +87,12 @@ chrome.jar:
   content/Site.js                              (content/Site.js)
   content/TopSites.js                          (content/TopSites.js)
   content/console.js                           (content/console.js)
   content/AnimatedZoom.js                      (content/AnimatedZoom.js)
 #ifdef MOZ_SERVICES_SYNC
 * 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