Bug 625229 - Slide sidebars in and out on firstrun page. r=mfinkle

mobile/chrome/content/browser-ui.js

@@ -1102,8 +1102,13 @@ var BrowserUI = {
   },
 
   isCommandEnabled : function(cmd) {
+    // disable all commands during the first-run sidebar discovery
+    let broadcaster = document.getElementById("bcast_uidiscovery");
+    if (broadcaster && broadcaster.getAttribute("mode") == "discovery")
+      return false;
+
     let elem = document.getElementById(cmd);
-    if (elem && (elem.getAttribute("disabled") == "true"))
+    if (elem && elem.getAttribute("disabled") == "true")
       return false;
     return true;
   },

mobile/chrome/content/browser.xul

@@ -85,6 +85,7 @@
   <broadcasterset id="broadcasterset">
     <broadcaster id="bcast_contentShowing" disabled="false"/>
     <broadcaster id="bcast_urlbarState" mode="view"/>
+    <broadcaster id="bcast_uidiscovery"/>
   </broadcasterset>
 
   <observerset id="observerset">
@@ -196,7 +197,7 @@
 
   <stack flex="1" id="stack">
     <scrollbox id="controls-scrollbox" style="overflow: hidden; -moz-box-orient: horizontal; position: relative;" flex="1">
-      <vbox class="panel-dark">
+      <vbox id="tabs-sidebar" class="sidebar" observes="bcast_uidiscovery">
         <spacer class="toolbar-height"/>
         <!-- Left toolbar -->
         <vbox id="tabs-container" class="panel-dark" flex="1">
@@ -217,7 +218,7 @@
           <vbox>
             <!-- Main Toolbar -->
             <box id="toolbar-container" class="panel-dark toolbar-height">
-              <box id="toolbar-moveable-container">
+              <box id="toolbar-moveable-container" observes="bcast_uidiscovery">
                 <toolbar id="toolbar-main" class="panel-dark window-width">
 #ifdef MOZ_PLATFORM_MAEMO
 #if MOZ_PLATFORM_MAEMO != 6
@@ -286,7 +287,7 @@
       </stack>
 
       <!-- Right toolbar -->
-      <vbox class="panel-dark">
+      <vbox id="controls-sidebar" class="sidebar" observes="bcast_uidiscovery">
         <!-- Because of the stack + fixed position of the urlbar when it is in
              locked mode the event on the top-right part of the urlbar are
              swallow by this spacer, but not with the mousethrough attribute

mobile/chrome/content/firstrun/firstrun.xhtml

@@ -70,7 +70,7 @@
       <p>&firstrun.heading2;</p>
     </div>
 
-    <div id="content">
+    <div id="content" hidden="true">
       <h2></h2>
       <ul id="recommended">
         <li id="sync"><a href="javascript:loadSync();"><b>&firstrun.sync2.title;</b> <span>&firstrun.sync2.description;</span></a></li>
@@ -116,6 +116,26 @@
 
         function init() {
           setupLinks();
+          startDiscovery();
+        }
+        
+        function startDiscovery() {
+          let doc = getChromeWin().document;
+          let broadcaster = doc.getElementById("bcast_uidiscovery");
+
+          doc.addEventListener("animationend", endDiscovery, false);
+          doc.addEventListener("PanBegin", endDiscovery, false);
+          broadcaster.setAttribute("mode", "discovery");
+        }
+
+        function endDiscovery() {
+          let doc = getChromeWin().document;
+          let broadcaster = doc.getElementById("bcast_uidiscovery");
+
+          broadcaster.removeAttribute("mode");
+          doc.removeEventListener("animationend", endDiscovery, false);
+          doc.removeEventListener("PanBegin", endDiscovery, false);
+          document.getElementById("content").removeAttribute("hidden");
         }
 
         function setupLinks() {

mobile/themes/core/browser.css

@@ -47,6 +47,7 @@
   background: #5e6166;
 }
 
+#toolbar-moveable-container[mode="discover"],
 #toolbar-moveable-container[top="0"] {
   position: fixed;
   left: 0;
@@ -1433,3 +1434,19 @@ richlistitem.appmenu-downloads-button > image,
   height: @scroller_thickness@;
   min-width: @scroller_minimum@;
 }
+
+/* Sidebar peeking */
+.sidebar[mode="discovery"] {
+  -moz-animation-delay: 1s;
+  -moz-animation-duration: 5s;
+  -moz-animation-name: sidebardiscovery;
+}
+
+@-moz-keyframes sidebardiscovery {
+  from { -moz-transform: translateX(0%); }
+  10% { -moz-transform: translateX(100%); }
+  45% { -moz-transform: translateX(100%); }
+  55% { -moz-transform: translateX(-100%); }
+  90% { -moz-transform: translateX(-100%); }
+  to { -moz-transform: translateX(0%); }
+}

mobile/themes/core/firstRun.css

@@ -87,6 +87,16 @@ img {
   clear: both;
 }
 
+#content {
+  opacity: 1;
+  -moz-transition: opacity 1s linear;
+}
+
+#content[hidden] {
+  display: block;
+  opacity: 0;
+}
+
 #head p {
   font-size: xx-large;
 }