Bug 962236 - Wrap long tutorial texts on about:start. r+ui-r=rsilveira a=metro-only
authorAleh Zasypkin <aleh.zasypkin@gmail.com>
Tue, 28 Jan 2014 21:04:16 +0100
changeset 225599 b3ec1b166cdec0551ecd362681ab8ed386cc4073
parent 225598 4476fa860f4aff8e31110b75b40b4ffb95b7d52e
child 225600 c9cf586ec5d981568e870dbd64e98db5d40afcc0
push id6
push userryanvm@gmail.com
push dateMon, 12 Jan 2015 22:04:06 +0000
treeherdermozilla-b2g37_v2_2@895c8fc7b734 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmetro-only
bugs962236
milestone28.0a2
Bug 962236 - Wrap long tutorial texts on about:start. r+ui-r=rsilveira a=metro-only
browser/metro/base/content/startui/FirstRunOverlay.xul
browser/metro/theme/firstrun.css
--- a/browser/metro/base/content/startui/FirstRunOverlay.xul
+++ b/browser/metro/base/content/startui/FirstRunOverlay.xul
@@ -15,55 +15,56 @@
 
 <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">
+        <vbox class="instruction-content-container">
+          <image class="instruction-arrow arrow-left-straight" />
           <image class="instruction-arrow arrow-left" />
-          <label class="instruction-label" value="&firstRunTopSites.label;"/>
+          <label class="instruction-label">&firstRunTopSites.label;</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">
+        <vbox class="instruction-content-container" align="center">
           <image class="instruction-arrow arrow-right" />
-          <label class="instruction-label" value="&firstRunBookmarks.label;"/>
+          <label class="instruction-label">&firstRunBookmarks.label;</label>
         </vbox>
       </box>
     </box>
 
     <box id="instruction-history-container" insertafter="start-history" class="firstrun">
       <box id="instruction-history">
-        <vbox align="center">
+        <vbox class="instruction-content-container" align="center">
           <image class="instruction-arrow arrow-right" />
-          <label class="instruction-label" value="&firstRunHistory.label;"/>
+          <label class="instruction-label">&firstRunHistory.label;</label>
         </vbox>
       </box>
     </box>
 
     <box id="instruction-tabs" class="firstrun">
-      <vbox align="center">
+      <vbox class="instruction-content-container" align="center">
         <image class="instruction-arrow arrow-top" />
-        <label class="instruction-label" value="&firstRunTabs.label;"/>
+        <label class="instruction-label">&firstRunTabs.label;</label>
       </vbox>
     </box>
 
     <box id="instruction-menu" class="firstrun">
-      <hbox>
-        <label class="instruction-label" value="&firstRunMenu.label;"/>
+      <hbox class="instruction-content-container" align="right">
+        <label class="instruction-label">&firstRunMenu.label;</label>
         <image class="instruction-arrow arrow-down" />
       </hbox>
     </box>
 
  </hbox>
 </overlay>
\ No newline at end of file
--- a/browser/metro/theme/firstrun.css
+++ b/browser/metro/theme/firstrun.css
@@ -68,16 +68,20 @@ below instruction */
   font-size: 16px;
   color: #808080;
   line-height: 22px;
   padding-top: 10px;
 }
 
 /* Instructions ---------------------- */
 
+.instruction-content-container {
+    width: 380px;
+}
+
 .instruction-label {
   font-size: 16px;
   color: #808080;
   line-height: 22px;
 }
 
 .instruction-arrow {
   width: 76px;
@@ -89,69 +93,106 @@ below instruction */
   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 {
+.instruction-arrow.arrow-right,
+.instruction-arrow.arrow-left-straight,
+.instruction-arrow.arrow-right-straight {
   background-image: url("chrome://browser/skin/images/arrow-left.png");
 }
 
 .instruction-arrow.arrow-right {
   transform: rotate(180deg) scaleY(-1);
 }
 
+.instruction-arrow.arrow-left-straight {
+  transform: rotate(220deg) scaleX(-1);
+}
+
+.instruction-arrow.arrow-right-straight {
+  transform: rotate(-220deg);
+}
+
 #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;
+  bottom: 15%;
+}
+
+#start-container[viewstate="landscape"] #instruction-topsites .instruction-content-container {
+  -moz-box-align: start;
+}
+
+#start-container[viewstate="portrait"] #instruction-topsites-box {
+  margin-bottom: 20px;
+}
+
+#start-container[viewstate="portrait"] #instruction-topsites .instruction-content-container {
+  -moz-box-align: center;
 }
 
-#start-container[viewstate="portrait"] #instruction-topsites {
-  transform: translateX(calc(150px + 50%)) translateY(-60px);
+#start-container[viewstate="portrait"] #instruction-topsites .arrow-left-straight {
+  display: none;
+}
+
+#start-container[viewstate="portrait"] #instruction-topsites .arrow-left {
+  display: block;
+}
+
+#start-container[viewstate="landscape"] #instruction-topsites .arrow-left-straight {
+  display: block;
+}
+
+#start-container[viewstate="landscape"] #instruction-topsites .arrow-left {
+  display: none;
 }
 
 #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 {
+#start-container[viewstate="portrait"] #instruction-bookmarks,
+#start-container[viewstate="portrait"] #instruction-topsites {
   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 #instruction-menu .instruction-label {
+    max-width: 300px;
+}
+
 #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% */