Bug 1270395 - Simplify the markup and padding rules for the UI Tour panel. r?gijs draft
authorJared Wein <jwein@mozilla.com>
Tue, 12 Jul 2016 17:39:50 -0400
changeset 386834 8ca5299fc6364626b252070dd6595bda312512c9
parent 385190 b7c937889aacde63e7fef321b58d77b5cc31a149
child 525219 1b22233157e399101abcf74e276da76488eb29c1
push id22818
push userjwein@mozilla.com
push dateTue, 12 Jul 2016 21:40:09 +0000
reviewersgijs
bugs1270395
milestone50.0a1
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 {