From d29fe01c5ac11f0928d680ab1a31fce8b57b6ebd Mon Sep 17 00:00:00 2001
From: Rodrigo Silveira <rsilveira@mozilla.com>
Date: Wed, 15 May 2013 17:21:06 -0700
Subject: [PATCH] Bug 872742 - Transition contextbar r=fryn

--HG--
extra : rebase_source : 4b85cf6f69539531217785824845a75a0fcc1f9c
---
 browser/metro/base/content/appbar.js          | 31 +++++++++------
 .../metro/base/content/bindings/appbar.xml    | 39 +++----------------
 browser/metro/base/content/browser-ui.js      |  1 +
 browser/metro/base/content/browser.xul        |  2 +
 browser/metro/theme/browser.css               | 16 +++-----
 5 files changed, 33 insertions(+), 56 deletions(-)

diff --git a/browser/metro/base/content/appbar.js b/browser/metro/base/content/appbar.js
index 1e2954fc8de..871c2cd95f9 100644
--- a/browser/metro/base/content/appbar.js
+++ b/browser/metro/base/content/appbar.js
@@ -4,7 +4,6 @@
 "use strict";
 
 var Appbar = {
-  get appbar()        { return document.getElementById('appbar'); },
   get consoleButton() { return document.getElementById('console-button'); },
   get jsShellButton() { return document.getElementById('jsshell-button'); },
   get zoomInButton()  { return document.getElementById('zoomin-button'); },
@@ -17,8 +16,11 @@ var Appbar = {
   activeTileset: null,
 
   init: function Appbar_init() {
-    window.addEventListener('MozAppbarShowing', this, false);
-    window.addEventListener('MozAppbarDismissing', this, false);
+    window.addEventListener('MozContextUIShow', this);
+    window.addEventListener('MozContextUIDismiss', this);
+    window.addEventListener('MozAppbarDismiss', this);
+    Elements.contextappbar.addEventListener('MozAppbarShowing', this, false);
+    Elements.contextappbar.addEventListener('MozAppbarDismissing', this, false);
     window.addEventListener('MozPrecisePointer', this, false);
     window.addEventListener('MozImprecisePointer', this, false);
     window.addEventListener('MozContextActionsChange', this, false);
@@ -36,11 +38,16 @@ var Appbar = {
 
   handleEvent: function Appbar_handleEvent(aEvent) {
     switch (aEvent.type) {
+      case 'MozContextUIShow':
+        Elements.appbar.show();
+        break;
+      case 'MozAppbarDismiss':
+      case 'MozContextUIDismiss':
       case 'URLChanged':
       case 'TabSelect':
       case 'ToolPanelShown':
       case 'ToolPanelHidden':
-        this.appbar.dismiss();
+        Elements.appbar.dismiss();
         break;
       case 'MozAppbarShowing':
         this._updatePinButton();
@@ -122,7 +129,7 @@ var Appbar = {
       }
 
       var x = this.moreButton.getBoundingClientRect().left;
-      var y = this.appbar.getBoundingClientRect().top;
+      var y = Elements.appbar.getBoundingClientRect().top;
       ContextMenuUI.showContextMenu({
         json: {
           types: typesArray,
@@ -171,16 +178,16 @@ var Appbar = {
       activeTileset.dispatchEvent(event);
       if (!event.defaultPrevented) {
         activeTileset.clearSelection();
-        this.appbar.dismiss();
+        Elements.contextappbar.dismiss();
       }
     }
   },
 
   showContextualActions: function(aVerbs) {
     if (aVerbs.length)
-      this.appbar.setAttribute("contextual", "true");
+      Elements.contextappbar.show();
     else
-      this.appbar.removeAttribute("contextual");
+      Elements.contextappbar.hide();
 
     let doc = document;
     // button element id to action verb lookup
@@ -196,7 +203,7 @@ var Appbar = {
     // sort buttons into 2 buckets - needing showing and needing hiding
     let toHide = [],
         toShow = [];
-    for (let btnNode of this.appbar.querySelectorAll("#contextualactions-tray > toolbarbutton")) {
+    for (let btnNode of Elements.contextappbar.querySelectorAll("#contextualactions-tray > toolbarbutton")) {
       // correct the hidden state for each button;
       // .. buttons present in the map should be visible, otherwise not
       if (buttonsMap.has(btnNode.id)) {
@@ -238,12 +245,12 @@ var Appbar = {
     let event = document.createEvent("Events");
     event.actions = verbs;
     event.initEvent("MozContextActionsChange", true, false);
-    this.appbar.dispatchEvent(event);
+    Elements.contextappbar.dispatchEvent(event);
 
     if (verbs.length) {
-      this.appbar.show(); // should be no-op if we're already showing
+      Elements.contextappbar.show(); // should be no-op if we're already showing
     } else {
-      this.appbar.dismiss();
+      Elements.contextappbar.dismiss();
     }
   },
 
diff --git a/browser/metro/base/content/bindings/appbar.xml b/browser/metro/base/content/bindings/appbar.xml
index 573229b575f..ccf4792b37c 100644
--- a/browser/metro/base/content/bindings/appbar.xml
+++ b/browser/metro/base/content/bindings/appbar.xml
@@ -8,22 +8,6 @@
     </content>
 
     <implementation implements="nsIDOMEventListener">
-      <constructor>
-        <![CDATA[
-          window.addEventListener('MozContextUIShow', this);
-          window.addEventListener('MozContextUIDismiss', this);
-          window.addEventListener('MozAppbarDismiss', this);
-        ]]>
-      </constructor>
-
-      <destructor>
-        <![CDATA[
-          window.removeEventListener('MozContextUIShow', this);
-          window.removeEventListener('MozContextUIDismiss', this);
-          window.removeEventListener('MozAppbarDismiss', this);
-        ]]>
-      </destructor>
-
       <field name="sticky">false</field>
       <field name="_toolbar" readonly="true">document.getAnonymousElementByAttribute(this, "anonid", "toolbar");</field>
 
@@ -49,6 +33,9 @@
       <method name="dismiss">
         <body>
           <![CDATA[
+            if (!this.isShowing)
+              return;
+
             this._fire("MozAppbarDismissing");
             this.removeAttribute("visible");
           ]]>
@@ -58,6 +45,9 @@
       <method name="show">
         <body>
           <![CDATA[
+            if (this.isShowing)
+              return;
+
             this._fire("MozAppbarShowing");
             this.setAttribute("visible", "true");
           ]]>
@@ -75,23 +65,6 @@
           ]]>
         </body>
       </method>
-
-      <method name="handleEvent">
-        <parameter name="aEvent"/>
-        <body>
-          <![CDATA[
-            switch (aEvent.type) {
-              case 'MozContextUIShow':
-                this.show();
-                break;
-              case 'MozAppbarDismiss':
-              case 'MozContextUIDismiss':
-                this.dismiss();
-                break;
-            }
-          ]]>
-        </body>
-      </method>
     </implementation>
 
     <handlers>
diff --git a/browser/metro/base/content/browser-ui.js b/browser/metro/base/content/browser-ui.js
index 19aefd19201..f8f4d1131a1 100644
--- a/browser/metro/base/content/browser-ui.js
+++ b/browser/metro/base/content/browser-ui.js
@@ -44,6 +44,7 @@ let Elements = {};
   ["toolbar",            "toolbar"],
   ["browsers",           "browsers"],
   ["appbar",             "appbar"],
+  ["contextappbar",      "contextappbar"],
   ["contentViewport",    "content-viewport"],
   ["progress",           "progress-control"],
   ["progressContainer",  "progress-container"],
diff --git a/browser/metro/base/content/browser.xul b/browser/metro/base/content/browser.xul
index 14676d1b011..e6b6e284dbc 100644
--- a/browser/metro/base/content/browser.xul
+++ b/browser/metro/base/content/browser.xul
@@ -355,7 +355,9 @@
         <toolbarbutton id="pin-button" type="checkbox" oncommand="Appbar.onPinButton()"/>
         <toolbarbutton id="more-button" onclick="Appbar.onMoreButton(event)"/>
       </toolbar>
+    </appbar>
 
+    <appbar id="contextappbar">
       <toolbar id="contextualactions-tray" flex="1">
         <toolbarbutton id="delete-selected-button" hidden="true" fade="true" oncommand="Appbar.dispatchContextualAction('delete')"/>
         <toolbarbutton id="restore-selected-button" hidden="true" fade="true" oncommand="Appbar.dispatchContextualAction('restore')"/>
diff --git a/browser/metro/theme/browser.css b/browser/metro/theme/browser.css
index 240e39f6c97..35d5cdb13e3 100644
--- a/browser/metro/theme/browser.css
+++ b/browser/metro/theme/browser.css
@@ -417,7 +417,7 @@ appbar {
   position: fixed;
   bottom: 0;
   width: 100%;
-  transform: translateY(@toolbar_height@);
+  transform: translateY(100%);
   transition: transform @metro_animation_duration@ @metro_animation_easing@;
   font-size: 0;
 }
@@ -444,18 +444,18 @@ appbar > toolbar > toolbarbutton[disabled] {
 }
 
 #appbar[startpage],
-#appbar[visible] {
+appbar[visible] {
   transform: none;
 }
 
-#appbar > toolbar > toolbarbutton {
+appbar > toolbar > toolbarbutton {
   list-style-image: url(chrome://browser/skin/images/appbar-icons.png);
   -moz-image-region: rect(0px, 200px, 40px, 160px); /* Gear icon is default. */
 }
-#appbar > toolbar > toolbarbutton:hover {
+appbar > toolbar > toolbarbutton:hover {
   -moz-image-region: rect(40px, 200px, 80px, 160px);
 }
-#appbar > toolbar > toolbarbutton:active {
+appbar > toolbar > toolbarbutton:active {
   -moz-image-region: rect(80px, 200px, 120px, 160px);
 }
 
@@ -525,12 +525,6 @@ appbar > toolbar > toolbarbutton[disabled] {
   -moz-image-region: rect(80px, 360px, 120px, 320px) !important;
 }
 
-/* Tile-selection-Specific */
-#appbar[contextual] > #toolbar,
-#appbar:not([contextual]) > #contextualactions-tray {
-  visibility: collapse;
-}
-
 #contextualactions-tray {
   background-color: @metro_orange@;
 }