Bug 971108 - UITour: Update the doorhanger menu style with a footer background and primary button style. r=Unfocused

--HG--
extra : rebase_source : fbbfc8c7a6c08f224aea0a8e786bc96f120da67b

browser/base/content/browser.xul

@@ -203,20 +203,22 @@
            align="start"
            orient="vertical"
            role="alert">
-      <hbox>
-        <vbox>
+     <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>
         <vbox flex="1">
           <label id="UITourTooltipTitle" flex="1"/>
           <description id="UITourTooltipDescription" flex="1"/>
-          <hbox id="UITourTooltipButtons" flex="1" align="center"/>
-        </vbox>
-        <vbox align="start">
-          <toolbarbutton id="UITourTooltipClose" class="close-icon"
-                         tooltiptext="&uiTour.infoPanel.close;"/>
         </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"

browser/modules/UITour.jsm

@@ -912,6 +912,9 @@ this.UITour = {
         if (button.style == "link")
           el.setAttribute("class", "button-link");
 
+        if (button.style == "primary")
+          el.setAttribute("class", "button-primary");
+
         let callbackID = button.callbackID;
         el.addEventListener("command", event => {
           tooltip.hidePopup();

browser/themes/linux/browser.css

@@ -2235,14 +2235,11 @@ chatbox {
 }
 
 #UITourTooltipClose {
-  -moz-appearance: toolbarbutton;
-  list-style-image: url("moz-icon://stock/gtk-close?size=menu");
-}
-
-#UITourTooltipClose > .toolbarbutton-icon {
-  margin: -4px;
+  -moz-margin-end: -4px;
+  height: 16px;
+  width: 16px;
 }
 
 #UITourTooltipButtons {
-  margin-bottom: 0;
+  margin-bottom: -10px;
 }

browser/themes/osx/browser.css

@@ -4363,16 +4363,18 @@ window > chatbox {
 
 %include ../shared/UITour.inc.css
 
-#UITourTooltipIcon {
-  -moz-margin-start: 0;
-}
-
 #UITourTooltipDescription {
-  font-size: 1.1rem;
-  line-height: 1.9rem;
+  font-size: 1.18rem;
+  line-height: 2rem;
 }
 
 #UITourTooltipClose {
-  -moz-margin-end: -15px;
-  margin-top: -12px;
+  -moz-margin-end: -10px;
+  margin-top: -14px;
+}
+
+@media (min-resolution: 2dppx) {
+  #UITourTooltipClose > .toolbarbutton-icon {
+    width: 16px;
+  }
 }

browser/themes/shared/UITour.inc.css

@@ -23,11 +23,23 @@
   min-width: 32px;
 }
 
+#UITourTooltipBody {
+  -moz-margin-end: 14px;
+}
+
+#UITourTooltipBody > vbox {
+  padding-top: 4px;
+}
+
+#UITourTooltipIconContainer {
+  -moz-margin-start: -16px;
+}
+
 #UITourTooltipIcon {
   width: 48px;
   height: 48px;
-  -moz-margin-start: 8px;
-  -moz-margin-end: 18px;
+  -moz-margin-start: 28px;
+  -moz-margin-end: 28px;
 }
 
 #UITourTooltipTitle,
@@ -36,11 +48,11 @@
 }
 
 #UITourTooltipTitle {
-  font-size: 1.3rem;
+  font-size: 1.45rem;
   font-weight: bold;
   -moz-margin-start: 0;
   -moz-margin-end: 0;
-  margin: 10px 0 19px 0;
+  margin: 0 0 9px 0;
 }
 
 #UITourTooltipDescription {
@@ -48,6 +60,7 @@
   -moz-margin-end: 0;
   font-size: 1.15rem;
   line-height: 1.8rem;
+  margin-bottom: 0; /* Override global.css */
 }
 
 #UITourTooltipClose {
@@ -56,27 +69,29 @@
   background-color: transparent;
   min-width: 0;
   -moz-margin-start: 4px;
-  -moz-margin-end: -10px;
-  margin-top: -8px;
+  margin-top: -2px;
+}
+
+#UITourTooltipClose > .toolbarbutton-text {
+  display: none;
 }
 
 #UITourTooltipButtons {
-  margin: 1.5em 0 .9em 0;
+  -moz-box-pack: end;
+  background-color: hsla(210,4%,10%,.07);
+  border-top: 1px solid hsla(210,4%,10%,.14);
+  margin: 24px -16px -16px;
+  padding: 2em 15px;
 }
 
 #UITourTooltipButtons > button {
-  margin-left: 6px;
-  margin-right: 6px;
+  margin: 0 15px;
 }
 
 #UITourTooltipButtons > button:first-child {
   -moz-margin-start: 0;
 }
 
-#UITourTooltipButtons > button:last-child {
-  -moz-margin-end: 24px;
-}
-
 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
   width: 16px;
   height: 16px;
@@ -89,11 +104,12 @@
 
 #UITourTooltipButtons > button:not(.button-link) {
   -moz-appearance: none;
-  padding: 2px 10px;
-  background-color: hsla(210,4%,10%,.08);
-  border-radius: 2px;
+  background-color: rgb(251,251,251);
+  border-radius: 3px;
   border: 1px solid;
-  border-color: hsla(210,4%,10%,.1);
+  border-color: rgb(192,192,192);
+  color: rgb(71,71,71);
+  padding: 4px 30px;
   transition-property: background-color, border-color;
   transition-duration: 150ms;
 }
@@ -117,3 +133,15 @@
 #UITourTooltipButtons > button.button-link:hover {
   color: black;
 }
+
+/* The primary button gets the same color as the customize button. */
+#UITourTooltipButtons > button.button-primary {
+  background-color: rgb(116,191,67);
+  color: white;
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+#UITourTooltipButtons > button.button-primary:not(:active):hover {
+  background-color: rgb(105,173,61);
+}

browser/themes/windows/browser.css

@@ -2757,3 +2757,7 @@ chatbox {
 }
 
 %include ../shared/UITour.inc.css
+
+#UITourTooltipButtons {
+  margin: 24px -4px -4px;
+}