Bug 1270395 - Simplify the markup and padding rules for the UI Tour panel. r=Gijs
authorJared Wein <jwein@mozilla.com>
Tue, 12 Jul 2016 17:39:50 -0400
changeset 304722 3f0ce20c16c15961cdebef63098d95c287376945
parent 304721 b682d06315f82ac0c2ac38a8dd0ec05174835582
child 304723 20091ff168ea576cc46943c48eac3cd7cd74ce12
push id30439
push usercbook@mozilla.com
push dateWed, 13 Jul 2016 15:24:14 +0000
treeherdermozilla-central@151aaa2db94d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1270395
milestone50.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 1270395 - Simplify the markup and padding rules for the UI Tour panel. r=Gijs MozReview-Commit-ID: GW5aht56XNv
browser/base/content/browser.xul
browser/components/uitour/UITour.jsm
browser/themes/shared/UITour.inc.css
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -220,26 +220,24 @@
            type="arrow"
            hidden="true"
            noautofocus="true"
            noautohide="true"
            align="start"
            orient="vertical"
            role="alert">
      <vbox>
-      <hbox pack="end">
-        <toolbarbutton id="UITourTooltipClose" class="close-icon"
-                       tooltiptext="&uiTour.infoPanel.close;"/>
-      </hbox>
       <hbox id="UITourTooltipBody">
-        <vbox id="UITourTooltipIconContainer">
-          <image id="UITourTooltipIcon"/>
-        </vbox>
+        <image id="UITourTooltipIcon"/>
         <vbox flex="1">
-          <label id="UITourTooltipTitle" flex="1"/>
+          <hbox id="UITourTooltipTitleContainer">
+            <label id="UITourTooltipTitle" flex="1"/>
+            <toolbarbutton id="UITourTooltipClose" class="close-icon"
+                           tooltiptext="&uiTour.infoPanel.close;"/>
+          </hbox>
           <description id="UITourTooltipDescription" flex="1"/>
         </vbox>
       </hbox>
       <hbox id="UITourTooltipButtons" flex="1" align="center"/>
      </vbox>
     </panel>
     <!-- type="default" forces frames to be created so that the panel's size can be determined -->
     <panel id="UITourHighlightContainer"
--- a/browser/components/uitour/UITour.jsm
+++ b/browser/components/uitour/UITour.jsm
@@ -1552,27 +1552,26 @@ this.UITour = {
     function showInfoPanel(aAnchorEl) {
       aAnchorEl.focus();
 
       let document = aChromeWindow.document;
       let tooltip = document.getElementById("UITourTooltip");
       let tooltipTitle = document.getElementById("UITourTooltipTitle");
       let tooltipDesc = document.getElementById("UITourTooltipDescription");
       let tooltipIcon = document.getElementById("UITourTooltipIcon");
-      let tooltipIconContainer = document.getElementById("UITourTooltipIconContainer");
       let tooltipButtons = document.getElementById("UITourTooltipButtons");
 
       if (tooltip.state == "showing" || tooltip.state == "open") {
         tooltip.hidePopup();
       }
 
       tooltipTitle.textContent = aTitle || "";
       tooltipDesc.textContent = aDescription || "";
       tooltipIcon.src = aIconURL || "";
-      tooltipIconContainer.hidden = !aIconURL;
+      tooltipIcon.hidden = !aIconURL;
 
       while (tooltipButtons.firstChild)
         tooltipButtons.firstChild.remove();
 
       for (let button of aButtons) {
         let isButton = button.style != "text";
         let el = document.createElement(isButton ? "button" : "label");
         el.setAttribute(isButton ? "label" : "value", button.label);
--- a/browser/themes/shared/UITour.inc.css
+++ b/browser/themes/shared/UITour.inc.css
@@ -21,42 +21,39 @@
   /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
      on Linux without an X compositor where opacity is either 0 or 1. */
   box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
   min-height: 32px;
   min-width: 32px;
 }
 
 #UITourTooltipBody {
-  margin-inline-end: 14px;
-  margin-inline-start: 14px;
-  margin-top: -16px;
-  margin-bottom: 8px;
+  -moz-box-align: start;
+}
+
+#UITourTooltipTitleContainer {
+  -moz-box-align: start;
+  margin-bottom: 10px;
 }
 
 #UITourTooltipIcon {
   width: 48px;
   height: 48px;
-  margin-inline-start: 14px;
-  margin-inline-end: 14px;
+  margin-inline-end: 10px;
 }
 
 #UITourTooltipTitle,
 #UITourTooltipDescription {
   max-width: 20rem;
 }
 
 #UITourTooltipTitle {
   font-size: 1.45rem;
   font-weight: bold;
-  margin-inline-start: 0;
-  /* Avoid the title overlapping the close button */
-  margin-inline-end: 14px;
-  margin-top: 0;
-  margin-bottom: 9px;
+  margin: 0;
 }
 
 #UITourTooltipDescription {
   margin-inline-start: 0;
   margin-inline-end: 0;
   font-size: 1.15rem;
   line-height: 1.8rem;
   margin-bottom: 0; /* Override global.css */
@@ -76,29 +73,34 @@
   display: none;
 }
 
 #UITourTooltipButtons {
   -moz-box-pack: end;
   background-color: hsla(210,4%,10%,.07);
   border-top: 1px solid hsla(210,4%,10%,.14);
   margin: 10px -16px -16px;
-  padding: 2em 15px;
+  padding: 16px;
 }
 
 #UITourTooltipButtons > label,
 #UITourTooltipButtons > button {
   margin: 0 15px;
 }
 
 #UITourTooltipButtons > label:first-child,
 #UITourTooltipButtons > button:first-child {
   margin-inline-start: 0;
 }
 
+#UITourTooltipButtons > label:last-child,
+#UITourTooltipButtons > button:last-child {
+  margin-inline-end: 0;
+}
+
 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
   width: 16px;
   height: 16px;
   margin-inline-end: 5px;
 }
 
 #UITourTooltipButtons > label,
 #UITourTooltipButtons > button .button-text {