Bug 1248506 - Replace hardcoded height of synced tab panel with calc expression based on content size r=gijs
authorThom Chiovoloni <tchiovoloni@mozilla.com>
Wed, 06 Apr 2016 10:14:15 -0700
changeset 292121 572875411dbaa092bf066a9ce561da6a2fc1c293
parent 292120 3e64199755c5692e10c13068cf96ad5210df3e35
child 292122 99af9f32f1ca84ed3a7bb4345d5333ae40ce65b6
push id74762
push usercbook@mozilla.com
push dateThu, 07 Apr 2016 09:56:20 +0000
treeherdermozilla-inbound@772253c53374 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgijs
bugs1248506
milestone48.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 1248506 - Replace hardcoded height of synced tab panel with calc expression based on content size r=gijs MozReview-Commit-ID: 1EEX6wAlaf9
browser/themes/shared/customizableui/panelUIOverlay.inc.css
--- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
@@ -670,39 +670,52 @@ toolbarpaletteitem[place="palette"] > to
   list-style-image: url(chrome://branding/content/icon16.png);
 }
 
 #PanelUI-fxa-label,
 #PanelUI-fxa-icon {
   list-style-image: url(chrome://browser/skin/sync-horizontalbar.png);
 }
 
+#PanelUI-remotetabs {
+  --panel-ui-sync-illustration-height: 157.5px;
+}
+
 .PanelUI-remotetabs-instruction-label,
 #PanelUI-remotetabs-mobile-promo {
+  /* If you change the margin here, the min-height of the synced tabs panel
+    (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
+    need adjusting (see bug 1248506) */
   margin: 15px;
   text-align: center;
   text-shadow: none;
   max-width: 15em;
   color: GrayText;
 }
 
 /* The boxes with "instructions" get extra top and bottom padding for space
    around the illustration and buttons */
 .PanelUI-remotetabs-instruction-box {
+  /* If you change the padding here, the min-height of the synced tabs panel
+    (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
+    need adjusting (see bug 1248506) */
   padding-bottom: 30px;
   padding-top: 15px;
 }
 
 .PanelUI-remotetabs-prefs-button {
   -moz-appearance: none;
   background-color: #0096dd;
   /* !important for the color as an OSX specific rule when a lightweight theme
      is used for buttons in the toolbox overrides. See bug 1238531 for details */
   color: white !important;
   border-radius: 2px;
+  /* If you change the margin or padding below, the min-height of the synced tabs
+     panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
+     etc) may need adjusting (see bug 1248506) */
   margin-top: 10px;
   margin-bottom: 10px;
   padding: 8px;
   text-shadow: none;
   min-width: 200px;
 }
 
 .PanelUI-remotetabs-prefs-button:hover,
@@ -716,17 +729,17 @@ toolbarpaletteitem[place="palette"] > to
 
 .PanelUI-remotetabs-notabsforclient-label {
   color: GrayText;
   /* This margin is to line this label up with the labels in toolbarbuttons. */
   margin-left: 28px;
 }
 
 .fxaSyncIllustration {
-  width: 180px;
+  height: var(--panel-ui-sync-illustration-height);
   list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg);
 }
 
 .PanelUI-remotetabs-prefs-button > .toolbarbutton-text {
   /* !important to override ".cui-widget-panel toolbarbutton > .toolbarbutton-text" above. */
   text-align: center !important;
   text-shadow: none;
 }
@@ -737,17 +750,22 @@ toolbarpaletteitem[place="palette"] > to
 
 /* Work around bug 1224412 - these boxes will cause scrollbars to appear when
    the panel is anchored to a toolbar button.
 */
 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync,
 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane,
 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane {
-  min-height: 33em;
+  min-height: calc(var(--panel-ui-sync-illustration-height) +
+                   20px + /* margin of .PanelUI-remotetabs-prefs-button */
+                   16px + /* padding of .PanelUI-remotetabs-prefs-button */
+                   30px + /* margin of .PanelUI-remotetabs-instruction-label */
+                   30px + 15px + /* padding of .PanelUI-remotetabs-instruction-box */
+                   11em);
 }
 
 #PanelUI-remotetabs-tabslist > label[itemtype="client"] {
   color: GrayText;
 }
 
 /* Collapse the non-active vboxes in the remotetabs deck to use only the
    height the active box needs */