Bug 941284 - First run experience r=mbrubeck

--HG--
extra : rebase_source : fa7ac4b0baf2bcb0b7ca47086c275959f4303e8d

browser/branding/aurora/content/jar.mn

@@ -21,4 +21,7 @@ browser.jar:
   content/branding/metro-about.css               (metro-about.css)
   content/branding/metro-about-footer.png        (metro-about-footer.png)
   content/branding/metro-about-wordmark.png      (metro-about-wordmark.png)
+  content/branding/metro_firstrun_logo.png       (metro_firstrun_logo.png)
+  content/branding/metro_firstrun_logo@1.4x.png  (metro_firstrun_logo@1.4x.png)
+  content/branding/metro_firstrun_logo@1.8x.png  (metro_firstrun_logo@1.8x.png)
 #endif

browser/branding/nightly/content/jar.mn

@@ -21,4 +21,7 @@ browser.jar:
   content/branding/metro-about.css               (metro-about.css)
   content/branding/metro-about-footer.png        (metro-about-footer.png)
   content/branding/metro-about-wordmark.png      (metro-about-wordmark.png)
+  content/branding/metro_firstrun_logo.png       (metro_firstrun_logo.png)
+  content/branding/metro_firstrun_logo@1.4x.png  (metro_firstrun_logo@1.4x.png)
+  content/branding/metro_firstrun_logo@1.8x.png  (metro_firstrun_logo@1.8x.png)
 #endif

browser/branding/official/content/jar.mn

@@ -20,4 +20,7 @@ browser.jar:
   content/branding/metro-about.css               (metro-about.css)
   content/branding/metro-about-footer.png        (metro-about-footer.png)
   content/branding/metro-about-wordmark.png      (metro-about-wordmark.png)
+  content/branding/metro_firstrun_logo.png       (metro_firstrun_logo.png)
+  content/branding/metro_firstrun_logo@1.4x.png  (metro_firstrun_logo@1.4x.png)
+  content/branding/metro_firstrun_logo@1.8x.png  (metro_firstrun_logo@1.8x.png)
 #endif

browser/branding/unofficial/content/jar.mn

@@ -21,4 +21,7 @@ browser.jar:
   content/branding/metro-about.css               (metro-about.css)
   content/branding/metro-about-footer.png        (metro-about-footer.png)
   content/branding/metro-about-wordmark.png      (metro-about-wordmark.png)
+  content/branding/metro_firstrun_logo.png       (metro_firstrun_logo.png)
+  content/branding/metro_firstrun_logo@1.4x.png  (metro_firstrun_logo@1.4x.png)
+  content/branding/metro_firstrun_logo@1.8x.png  (metro_firstrun_logo@1.8x.png)
 #endif

browser/metro/base/content/Util.js

@@ -213,7 +213,7 @@ let Util = {
             aURL == "about:empty" ||
             aURL == "about:home" ||
             aURL == "about:newtab" ||
-            aURL == "about:start");
+            aURL.startsWith("about:newtab"));
   },
 
   // Title to use for emptyURL tabs.

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

@@ -308,7 +308,7 @@ var BrowserUI = {
 
   isStartURI: function isStartURI(aURI) {
     aURI = aURI || Browser.selectedBrowser.currentURI.spec;
-    return aURI == kStartURI || aURI == "about:start" || aURI == "about:home";
+    return aURI.startsWith(kStartURI) || aURI == "about:start" || aURI == "about:home";
   },
 
   updateStartURIAttributes: function (aURI) {

browser/metro/base/content/startui/FirstRunOverlay.xul

@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+
+<?xml-stylesheet href="chrome://browser/skin/firstrun.css" type="text/css"?>
+
+<!-- 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/. -->
+
+<!DOCTYPE window [
+  <!ENTITY % browserDTD SYSTEM "chrome://browser/locale/browser.dtd">
+  %browserDTD;
+  <!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd">
+  %brandDTD;
+]>
+
+<overlay id="firstrun"
+         xmlns:html="http://www.w3.org/1999/xhtml"
+         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <hbox id="start-container">
+    <box id="instruction-topsites-box" insertafter="start-topsites" class="firstrun">
+      <box id="instruction-topsites">
+        <vbox align="center">
+          <image class="instruction-arrow arrow-left" />
+          <label class="instruction-label" value="&firstRunTopSites.label;"/>
+        </vbox>
+      </box>
+    </box>
+
+    <vbox id="firstrun-welcome" insertafter="instruction-topsites-box" class="firstrun" align="center" pack="center">
+      <image class="welcome-image" />
+      <label class="welcome-title" value="&firstRunWelcome.label;"/>
+      <label class="welcome-subtitle" value="&firstRunDifferent.label;"/>
+    </vbox>
+
+    <box insertafter="start-bookmarks" class="firstrun">
+      <box id="instruction-bookmarks">
+        <vbox align="center">
+          <image class="instruction-arrow arrow-right" />
+          <label class="instruction-label" value="&firstRunBookmarks.label;"/>
+        </vbox>
+      </box>
+    </box>
+
+    <box id="instruction-history-container" insertafter="start-history" class="firstrun">
+      <box id="instruction-history">
+        <vbox align="center">
+          <image class="instruction-arrow arrow-right" />
+          <label class="instruction-label" value="&firstRunHistory.label;"/>
+        </vbox>
+      </box>
+    </box>
+
+    <box id="instruction-tabs" class="firstrun">
+      <vbox align="center">
+        <image class="instruction-arrow arrow-top" />
+        <label class="instruction-label" value="&firstRunTabs.label;"/>
+      </vbox>
+    </box>
+
+    <box id="instruction-menu" class="firstrun">
+      <hbox>
+        <label class="instruction-label" value="&firstRunMenu.label;"/>
+        <image class="instruction-arrow arrow-down" />
+      </hbox>
+    </box>
+
+ </hbox>
+</overlay>

browser/metro/base/content/startui/StartUI.js

@@ -26,6 +26,11 @@ var StartUI = {
     document.getElementById("bcast_preciseInput").setAttribute("input",
       this.chromeWin.InputSourceHelper.isPrecise ? "precise" : "imprecise");
 
+    // NOTE: location.search doesn't work for about: pages
+    if (location.href.indexOf("?firstrun") > 0) {
+      document.loadOverlay("chrome://browser/content/FirstRunOverlay.xul", null);
+    }
+
     this._adjustDOMforViewState(this.chromeWin.ContentAreaObserver.viewstate);
 
     TopSitesStartView.init();

browser/metro/base/jar.mn

@@ -99,6 +99,7 @@ chrome.jar:
   content/BookmarksView.js                     (content/startui/BookmarksView.js)
   content/HistoryView.js                       (content/startui/HistoryView.js)
   content/TopSitesView.js                      (content/startui/TopSitesView.js)
+  content/FirstRunOverlay.xul                  (content/startui/FirstRunOverlay.xul)
 #ifdef MOZ_SERVICES_SYNC
   content/RemoteTabsView.js                    (content/startui/RemoteTabsView.js)
 #endif

browser/metro/theme/firstrun.css

@@ -0,0 +1,188 @@
+/* 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/. */
+
+/* Rearrange about:start ---------------------- */
+
+/* Disable all instructions in snapped mode */
+#start-container[viewstate="snapped"] .firstrun {
+  display: none;
+}
+
+/* Keep only first column of tiles */
+#start-container[viewstate="landscape"] #start-topsites-grid .richgrid-grid,
+#start-container:not([viewstate="snapped"]) #start-bookmarks-grid .richgrid-grid,
+#start-container:not([viewstate="snapped"]) #start-history-grid .richgrid-grid {
+  -moz-column-count: 1 !important;
+}
+
+/* Add some bottom padding to make sure bottom tile will not be
+below instruction */
+#start-container[viewstate="landscape"] #start-topsites-grid .richgrid-grid {
+  padding-bottom: 30px;
+}
+
+/* Keep only first few items */
+#start-container:not([viewstate="snapped"]) #start-history-grid richgriditem:nth-child(n+3),
+#start-container:not([viewstate="snapped"]) #start-bookmarks-grid richgriditem:nth-child(n+3),
+#start-container[viewstate="portrait"] #start-topsites-grid richgriditem:nth-child(n+4) {
+  display: none;
+}
+
+/* Add some space for the instructions */
+#start-container[viewstate="portrait"] {
+  padding-top: 120px;
+  padding-bottom: 120px;
+}
+
+/* Remove watermark */
+.meta {
+  background-image: none;
+}
+
+
+/* Welcome pane ---------------------- */
+
+/* Logo and welcome message */
+#firstrun-welcome {
+  width: 550px;
+  font-family: "Segoe UI", sans-serif;
+  padding: 30px 0;
+}
+
+.welcome-image {
+  background-image: url("chrome://branding/content/metro_firstrun_logo.png");
+
+  width: 220px;
+  height: 220px;
+}
+
+#firstrun-welcome .welcome-title {
+  font-size: 25px;
+  color: #4d4e53;
+  line-height: 30px;
+  padding-top: 20px;
+}
+
+#firstrun-welcome .welcome-subtitle {
+  font-size: 16px;
+  color: #808080;
+  line-height: 22px;
+  padding-top: 10px;
+}
+
+/* Instructions ---------------------- */
+
+.instruction-label {
+  font-size: 16px;
+  color: #808080;
+  line-height: 22px;
+}
+
+.instruction-arrow {
+  width: 76px;
+  height: 76px;
+}
+
+.instruction-arrow.arrow-top,
+.instruction-arrow.arrow-down {
+  background-image: url("chrome://browser/skin/images/arrow-top.png");
+}
+
+.instruction-arrow.arrow-down {
+  transform: rotate(180deg);
+}
+
+.instruction-arrow.arrow-left,
+.instruction-arrow.arrow-right {
+  background-image: url("chrome://browser/skin/images/arrow-left.png");
+}
+
+.instruction-arrow.arrow-right {
+  transform: rotate(180deg) scaleY(-1);
+}
+
+#instruction-tabs {
+  position: absolute;
+  top: 10px;
+  transform: translateX(calc(630px - 50%));
+}
+
+#start-container[viewstate="portrait"] #instruction-tabs {
+  transform: translateX(calc(50vw - 50%));
+}
+
+#start-container[viewstate="landscape"] #instruction-topsites {
+  position: absolute;
+  bottom: 20px;
+  transform: translateX(-50%);
+  margin-left: 20px;
+}
+
+#start-container[viewstate="portrait"] #instruction-topsites {
+  transform: translateX(calc(150px + 50%)) translateY(-60px);
+}
+
+#start-container[viewstate="landscape"] #instruction-history,
+#start-container[viewstate="landscape"] #instruction-bookmarks {
+  position: absolute;
+  top: 310px;
+  transform: translateX(calc(-300px - 50%));
+}
+
+#start-container[viewstate="portrait"] #instruction-history,
+#start-container[viewstate="portrait"] #instruction-bookmarks {
+  transform: translateX(-55px);
+}
+
+#start-container[viewstate="landscape"] #instruction-menu {
+  position: fixed;
+  bottom: 16px;
+  right: 37px;
+}
+
+#start-container[viewstate="portrait"] #instruction-menu {
+  position: absolute;
+  right: 37px;
+  transform: translateY(40px);
+}
+
+#start-container[viewstate="landscape"] #start-history {
+  padding-left: 50px;
+}
+
+/* Higher resolution images ---------------------- */
+
+@media (min-resolution: @min_res_140pc@) {
+  /* Load 140% image when scaled by 140% */
+  .instruction-arrow.arrow-top,
+  .instruction-arrow.arrow-down {
+    background-image: url("chrome://browser/skin/images/arrow-top@1.4x.png");
+  }
+
+  .instruction-arrow.arrow-left,
+  .instruction-arrow.arrow-right {
+    background-image: url("chrome://browser/skin/images/arrow-left@1.4x.png");
+  }
+
+  .welcome-image {
+    background-image: url("chrome://branding/content/metro_firstrun_logo@1.4x.png");
+  }
+}
+
+@media (min-resolution: @min_res_180pc@) {
+  /* Load 180% image when scaled by 180% */
+  .instruction-arrow.arrow-top,
+  .instruction-arrow.arrow-down {
+    background-image: url("chrome://browser/skin/images/arrow-top@1.8x.png");
+  }
+
+  .instruction-arrow.arrow-left,
+  .instruction-arrow.arrow-right {
+    background-image: url("chrome://browser/skin/images/arrow-left@1.8x.png");
+  }
+
+  .welcome-image {
+    background-image: url("chrome://branding/content/metro_firstrun_logo@1.8x.png");
+  }
+}

browser/metro/theme/jar.mn

@@ -22,6 +22,7 @@ chrome.jar:
 * skin/tiles.css                            (tiles.css)
   skin/touchcontrols.css                    (touchcontrols.css)
   skin/netError.css                         (netError.css)
+  skin/firstrun.css                         (firstrun.css)
 % override chrome://global/skin/about.css chrome://browser/skin/about.css
 % override chrome://global/skin/media/videocontrols.css chrome://browser/skin/touchcontrols.css
 % override chrome://global/skin/netError.css chrome://browser/skin/netError.css
@@ -135,3 +136,10 @@ chrome.jar:
   skin/images/overlay-back.png              (images/overlay-back.png)
   skin/images/overlay-plus.png              (images/overlay-plus.png)
   skin/images/autoscroll.png                (images/autoscroll.png)
+
+  skin/images/arrow-top.png                 (images/arrow-top.png)
+  skin/images/arrow-top@1.4x.png            (images/arrow-top@1.4x.png)
+  skin/images/arrow-top@1.8x.png            (images/arrow-top@1.8x.png)
+  skin/images/arrow-left.png                (images/arrow-left.png)
+  skin/images/arrow-left@1.4x.png           (images/arrow-left@1.4x.png)
+  skin/images/arrow-left@1.8x.png           (images/arrow-left@1.8x.png)

browser/metro/theme/tiles.css

@@ -333,23 +333,23 @@ richgriditem[bending] > .tile-content {
   transform-origin: center center;
 }
 
-/* Empty/unused tiles */
-richgriditem:not([value]) {
-  visibility: hidden;
-}
 richgriditem[tiletype="thumbnail"]:not([value]) {
   visibility: visible;
 }
 richgriditem:not([value]) > .tile-content {
   padding: 10px 14px;
 }
-richgriditem[tiletype="thumbnail"]:not([value]) > .tile-content {
+/* Empty/unused tiles */
+richgriditem:not([value]) > .tile-content {
   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05);
   background-image: url("chrome://browser/skin/images/firefox-watermark.png");
   background-origin: content-box;
   background-repeat: no-repeat;
   background-color: rgba(255,255,255, 0.2);
   background-position: center center;
+  background-size: @compactgrid_row_height@;
+}
+richgriditem[tiletype="thumbnail"]:not([value]) > .tile-content {
   background-size: @grid_row_height@;
 }