Bug 1238566 - fix centering in synced tabs UI (again). r=Gijs
authorMark Hammond <mhammond@skippinet.com.au>
Sat, 23 Jan 2016 12:00:45 +1100
changeset 281385 be005c69fbb61cfb10e544c0a6a0b9d5e6193a81
parent 281384 2cb984c700cba60cc93c51a39a525276987e49e5
child 281386 c1d1dfc7a40d125912cc5067af995a2117b6ce99
push id29935
push userphilringnalda@gmail.com
push dateSun, 24 Jan 2016 02:12:02 +0000
treeherdermozilla-central@a2e81822194a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1238566
milestone46.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 1238566 - fix centering in synced tabs UI (again). r=Gijs
browser/components/customizableui/content/panelUI.inc.xul
browser/themes/shared/customizableui/panelUIOverlay.inc.css
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -121,70 +121,75 @@
           <deck id="PanelUI-remotetabs-deck">
             <!-- Sync is ready to Sync and the "tabs" engine is enabled -->
             <vbox id="PanelUI-remotetabs-tabspane">
               <vbox id="PanelUI-remotetabs-tabslist"
                     notabsforclientlabel="&appMenuRemoteTabs.notabs.label;"
                     />
             </vbox>
             <!-- Sync is ready to Sync but the "tabs" engine isn't enabled-->
-            <vbox id="PanelUI-remotetabs-tabsdisabledpane"
-                  class="PanelUI-remotetabs-instruction-box">
-              <hbox pack="center">
-                <image class="fxaSyncIllustration" alt=""/>
-              </hbox>
-              <label class="PanelUI-remotetabs-instruction-label">&appMenuRemoteTabs.tabsnotsyncing.label;</label>
-              <hbox pack="center">
-                <toolbarbutton class="PanelUI-remotetabs-prefs-button"
-                               label="&appMenuRemoteTabs.openprefs.label;"
-                               oncommand="gSyncUI.openSetup();"/>
-              </hbox>
-            </vbox>
+            <hbox id="PanelUI-remotetabs-tabsdisabledpane" pack="center" flex="1">
+              <vbox class="PanelUI-remotetabs-instruction-box">
+                <hbox pack="center">
+                  <image class="fxaSyncIllustration" alt=""/>
+                </hbox>
+                <label class="PanelUI-remotetabs-instruction-label">&appMenuRemoteTabs.tabsnotsyncing.label;</label>
+                <hbox pack="center">
+                  <toolbarbutton class="PanelUI-remotetabs-prefs-button"
+                                 label="&appMenuRemoteTabs.openprefs.label;"
+                                 oncommand="gSyncUI.openSetup();"/>
+                </hbox>
+              </vbox>
+            </hbox>
             <!-- Sync is ready to Sync but we are still fetching the tabs to show -->
             <vbox id="PanelUI-remotetabs-fetching">
               <label>&appMenuRemoteTabs.fetching.label;</label>
             </vbox>
             <!-- Sync has only 1 (ie, this) device connected -->
-            <vbox id="PanelUI-remotetabs-nodevicespane"
-                   class="PanelUI-remotetabs-instruction-box">
-              <hbox pack="center">
-                <image class="fxaSyncIllustration" alt=""/>
-              </hbox>
-              <label class="PanelUI-remotetabs-instruction-label">&appMenuRemoteTabs.noclients.label;</label>
-              <!-- The inner HTML for PanelUI-remotetabs-mobile-promo is built at runtime -->
-              <label id="PanelUI-remotetabs-mobile-promo"/>
-            </vbox>
+            <hbox id="PanelUI-remotetabs-nodevicespane" pack="center" flex="1">
+              <vbox class="PanelUI-remotetabs-instruction-box">
+                <hbox pack="center">
+                  <image class="fxaSyncIllustration" alt=""/>
+                </hbox>
+                <label class="PanelUI-remotetabs-instruction-label">&appMenuRemoteTabs.noclients.label;</label>
+                <!-- The inner HTML for PanelUI-remotetabs-mobile-promo is built at runtime -->
+                <label id="PanelUI-remotetabs-mobile-promo"/>
+              </vbox>
+            </hbox>
           </deck>
         </vbox>
-        <!-- When Sync is not configured -->
-        <vbox id="PanelUI-remotetabs-setupsync"
-              flex="1"
-              align="center"
-              class="PanelUI-remotetabs-instruction-box"
-              observes="sync-setup-state">
-          <image class="fxaSyncIllustration" alt=""/>
-          <label class="PanelUI-remotetabs-instruction-label">&appMenuRemoteTabs.notsignedin.label;</label>
-          <toolbarbutton class="PanelUI-remotetabs-prefs-button"
-                         label="&appMenuRemoteTabs.signin.label;"
-                         oncommand="gSyncUI.openSetup();"/>
-        </vbox>
-        <!-- When Sync needs re-authentication. This uses the exact same messaging
-             as "Sync is not configured" but remains a separate box so we get
-             the goodness of observing broadcasters to manage the hidden states -->
-        <vbox id="PanelUI-remotetabs-reauthsync"
-              flex="1"
-              align="center"
-              class="PanelUI-remotetabs-instruction-box"
-              observes="sync-reauth-state">
-          <image class="fxaSyncIllustration" alt=""/>
-          <label class="PanelUI-remotetabs-instruction-label">&appMenuRemoteTabs.notsignedin.label;</label>
-          <toolbarbutton class="PanelUI-remotetabs-prefs-button"
-                         label="&appMenuRemoteTabs.signin.label;"
-                         oncommand="gSyncUI.openSetup();"/>
-        </vbox>
+        <!-- a box to ensure contained boxes are centered horizonally -->
+        <hbox pack="center" flex="1">
+          <!-- When Sync is not configured -->
+          <vbox id="PanelUI-remotetabs-setupsync"
+                flex="1"
+                align="center"
+                class="PanelUI-remotetabs-instruction-box"
+                observes="sync-setup-state">
+            <image class="fxaSyncIllustration" alt=""/>
+            <label class="PanelUI-remotetabs-instruction-label">&appMenuRemoteTabs.notsignedin.label;</label>
+            <toolbarbutton class="PanelUI-remotetabs-prefs-button"
+                           label="&appMenuRemoteTabs.signin.label;"
+                           oncommand="gSyncUI.openSetup();"/>
+          </vbox>
+          <!-- When Sync needs re-authentication. This uses the exact same messaging
+               as "Sync is not configured" but remains a separate box so we get
+               the goodness of observing broadcasters to manage the hidden states -->
+          <vbox id="PanelUI-remotetabs-reauthsync"
+                flex="1"
+                align="center"
+                class="PanelUI-remotetabs-instruction-box"
+                observes="sync-reauth-state">
+            <image class="fxaSyncIllustration" alt=""/>
+            <label class="PanelUI-remotetabs-instruction-label">&appMenuRemoteTabs.notsignedin.label;</label>
+            <toolbarbutton class="PanelUI-remotetabs-prefs-button"
+                           label="&appMenuRemoteTabs.signin.label;"
+                           oncommand="gSyncUI.openSetup();"/>
+          </vbox>
+        </hbox>
       </vbox>
     </panelview>
 
     <panelview id="PanelUI-bookmarks" flex="1" class="PanelUI-subView">
       <label value="&bookmarksMenu.label;" class="panel-subview-header"/>
       <vbox class="panel-subview-body">
         <toolbarbutton id="panelMenuBookmarkThisPage"
                        class="subviewbutton"
--- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
@@ -671,20 +671,21 @@ toolbarpaletteitem[place="palette"] > to
 #PanelUI-remotetabs-mobile-promo {
   margin: 15px;
   text-align: center;
   text-shadow: none;
   max-width: 15em;
   color: GrayText;
 }
 
-/* The boxes with "instructions" get extra padding for space around the
-   illustration and buttons */
+/* The boxes with "instructions" get extra top and bottom padding for space
+   around the illustration and buttons */
 .PanelUI-remotetabs-instruction-box {
-  padding: 30px 15px 15px 15px;
+  padding-bottom: 30px;
+  padding-top: 15px;
 }
 
 .PanelUI-remotetabs-prefs-button {
   -moz-appearance: none;
   background-color: #0096dd;
   color: white;
   border-radius: 2px;
   margin-top: 10px;