Bug 971108 - UITour: Update the doorhanger menu style with a footer background and primary button style. r=Unfocused a=Sylvestre
authorMatthew Noorenberghe <mozilla@noorenberghe.ca>
Sat, 15 Mar 2014 14:21:20 -0700
changeset 183389 f7ce3f39d03d87d67496fc1be4e648b646e14e56
parent 183388 b803b67591584e625160af3c47219db3bdee6b5e
child 183390 a6e082e0b95b83685ebee52f6684691aaf15bc25
push id3343
push userffxbld
push dateMon, 17 Mar 2014 21:55:32 +0000
treeherdermozilla-beta@2f7d3415f79f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersUnfocused, Sylvestre
bugs971108
milestone29.0a2
Bug 971108 - UITour: Update the doorhanger menu style with a footer background and primary button style. r=Unfocused a=Sylvestre [Australis]
browser/base/content/browser.xul
browser/modules/UITour.jsm
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/UITour.inc.css
browser/themes/windows/browser.css
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -198,30 +198,32 @@
     <panel id="UITourTooltip"
            type="arrow"
            hidden="true"
            noautofocus="true"
            noautohide="true"
            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"
            type="default"
            hidden="true"
            noautofocus="true"
            noautohide="true"
            flip="none"
--- a/browser/modules/UITour.jsm
+++ b/browser/modules/UITour.jsm
@@ -907,16 +907,19 @@ this.UITour = {
         let el = document.createElement("button");
         el.setAttribute("label", button.label);
         if (button.iconURL)
           el.setAttribute("image", button.iconURL);
 
         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();
           this.sendPageCallback(aContentDocument, callbackID);
         });
 
         tooltipButtons.appendChild(el);
       }
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -2051,19 +2051,16 @@ chatbox {
 
 %include ../shared/UITour.inc.css
 
 #UITourTooltipDescription {
   font-size: 1.05rem;
 }
 
 #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;
 }
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -4313,21 +4313,23 @@ window > chatbox {
   /* There is no OS fullscreen button prior to Lion so the PB indicator can move closer. */
   #main-window[privatebrowsingmode=temporary] {
     background-position: top right 10px;
   }
 }
 
 %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;
+  }
+}
--- a/browser/themes/shared/UITour.inc.css
+++ b/browser/themes/shared/UITour.inc.css
@@ -18,87 +18,103 @@
   background-image: radial-gradient(50% 100%, rgba(0,149,220,0.4) 50%, rgba(0,149,220,0.6) 100%);
   border-radius: 40px;
   border: 1px solid white;
   box-shadow: 0 0 3px 0 rgba(0,0,0,0.5);
   min-height: 32px;
   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,
 #UITourTooltipDescription {
   max-width: 20rem;
 }
 
 #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 {
   -moz-margin-start: 0;
   -moz-margin-end: 0;
   font-size: 1.15rem;
   line-height: 1.8rem;
+  margin-bottom: 0; /* Override global.css */
 }
 
 #UITourTooltipClose {
   -moz-appearance: none;
   border: none;
   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;
   -moz-margin-end: 5px;
 }
 
 #UITourTooltipButtons > button .button-text {
   font-size: 1.15rem;
 }
 
 #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;
 }
 
 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
   background-color: hsla(210,4%,10%,.15);
   border-color: hsla(210,4%,10%,.15);
   box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset;
@@ -112,8 +128,20 @@
   color: rgba(0,0,0,0.35);
   padding-left: 10px;
   padding-right: 10px;
 }
 
 #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);
+}
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -2691,8 +2691,12 @@ chatbox {
 /* End customization mode */
 
 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
   width: 40px;
   background: url("chrome://browser/skin/privatebrowsing-indicator.png") no-repeat center center;
 }
 
 %include ../shared/UITour.inc.css
+
+#UITourTooltipButtons {
+  margin: 24px -4px -4px;
+}