Bug 958673 - [Australis] UITour: Style doorhanger menu for Australis Update Tour. r=MattN
authorBlair McBride <bmcbride@mozilla.com>
Fri, 31 Jan 2014 15:25:45 +1300
changeset 182236 0fe6a5fc9081dd199bd9bcd3b984d562b837048a
parent 182235 48ec899c90a0c82188f47813721c4aa9bd738292
child 182237 00cead8f21d4cafd2daa37e84c57f828d2d54f7d
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)
reviewersMattN
bugs958673
milestone29.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 958673 - [Australis] UITour: Style doorhanger menu for Australis Update Tour. r=MattN
browser/base/content/browser.xul
browser/locales/en-US/chrome/browser/browser.dtd
browser/modules/UITour.jsm
browser/modules/test/uitour.js
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/UITour.inc.css
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -205,17 +205,21 @@
            role="alert">
       <hbox>
         <vbox>
           <image id="UITourTooltipIcon"/>
         </vbox>
         <vbox flex="1">
           <label id="UITourTooltipTitle" flex="1"/>
           <description id="UITourTooltipDescription" flex="1"/>
-          <hbox id="UITourTooltipButtons" flex="1" align="end"/>
+          <hbox id="UITourTooltipButtons" flex="1" align="center"/>
+        </vbox>
+        <vbox align="start">
+          <toolbarbutton id="UITourTooltipClose" class="close-icon"
+                         tooltiptext="&uiTour.infoPanel.close;"/>
         </vbox>
       </hbox>
     </panel>
     <panel id="UITourHighlightContainer"
            hidden="true"
            noautofocus="true"
            noautohide="true"
            flip="none"
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@@ -731,16 +731,18 @@ just addresses the organization to follo
      a CSS length value. -->
 <!ENTITY pluginNotification.width "28em">
 
 <!ENTITY tabCrashed.header "Tab crashed">
 <!ENTITY tabCrashed.message "Well, this is embarrassing. We tried to display this Web page, but it's not responding.">
 <!ENTITY tabCrashed.checkSendReport "Tell &vendorShortName; about this crash so they can fix it.">
 <!ENTITY tabCrashed.tryAgain "Try Again">
 
+<!ENTITY uiTour.infoPanel.close "Close">
+
 <!-- LOCALIZATION NOTE: the following strings are unused in Australis, they're
      kept here to avoid warnings from l10n tools like compare-locales on
      l10n-central. They will be definitely removed when Australis is ready
      for mozilla-aurora. -->
 
 <!ENTITY navbarCmd.accesskey           "N">
 <!ENTITY addonBarCmd.label             "Add-on Bar">
 <!ENTITY addonBarCmd.accesskey         "A">
--- a/browser/modules/UITour.jsm
+++ b/browser/modules/UITour.jsm
@@ -152,16 +152,19 @@ this.UITour = {
                 let button = {
                   label: buttonData.label,
                   callbackID: buttonData.callbackID,
                 };
 
                 if (typeof buttonData.icon == "string")
                   button.iconURL = this.resolveURL(contentDocument, buttonData.icon);
 
+                if (typeof buttonData.style == "string")
+                  button.style = buttonData.style;
+
                 buttons.push(button);
 
                 if (buttons.length == MAX_BUTTONS)
                   break;
               }
             }
           }
 
@@ -293,16 +296,24 @@ this.UITour = {
 
       case "input": {
         if (aEvent.target.id == "urlbar") {
           let window = aEvent.target.ownerDocument.defaultView;
           this.handleUrlbarInput(window);
         }
         break;
       }
+
+      case "command": {
+        if (aEvent.target.id == "UITourTooltipClose") {
+          let window = aEvent.target.ownerDocument.defaultView;
+          this.hideInfo(window);
+        }
+        break;
+      }
     }
   },
 
   teardownTour: function(aWindow, aWindowClosing = false) {
     aWindow.gBrowser.tabContainer.removeEventListener("TabSelect", this);
     aWindow.removeEventListener("SSWindowClosing", this);
 
     let originTabs = this.originTabs.get(aWindow);
@@ -623,27 +634,33 @@ this.UITour = {
         tooltipButtons.firstChild.remove();
 
       for (let button of aButtons) {
         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");
+
         let callbackID = button.callbackID;
         el.addEventListener("command", event => {
           tooltip.hidePopup();
           this.sendPageCallback(aContentDocument, callbackID);
         });
 
         tooltipButtons.appendChild(el);
       }
 
       tooltipButtons.hidden = !aButtons.length;
 
+      let tooltipClose = document.getElementById("UITourTooltipClose");
+      tooltipClose.addEventListener("command", this);
+
       tooltip.hidden = false;
       let alignment = "bottomcenter topright";
       tooltip.openPopup(aAnchorEl, alignment);
     }
 
     // Prevent showing a panel at an undefined position.
     if (!_isElementVisible(aAnchor.node))
       return;
--- a/browser/modules/test/uitour.js
+++ b/browser/modules/test/uitour.js
@@ -73,16 +73,17 @@ if (typeof Mozilla == 'undefined') {
 
 	Mozilla.UITour.showInfo = function(target, title, text, icon, buttons) {
 		var buttonData = [];
 		if (Array.isArray(buttons)) {
 			for (var i = 0; i < buttons.length; i++) {
 				buttonData.push({
 					label: buttons[i].label,
 					icon: buttons[i].icon,
+					style: buttons[i].style,
 					callbackID: _waitForCallback(buttons[i].callback)
 			});
 			}
 		}
 
 		_sendEvent('showInfo', {
 			target: target,
 			title: title,
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -1953,8 +1953,25 @@ chatbox {
 #main-window[privatebrowsingmode=temporary] #TabsToolbar::before {
   display: -moz-box;
   content: "";
   background: url("chrome://browser/skin/privatebrowsing-mask.png") center no-repeat;
   width: 40px;
 }
 
 %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;
+}
+
+#UITourTooltipButtons {
+  margin-bottom: 0;
+}
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -4124,8 +4124,22 @@ window > chatbox {
 @media not all and (-moz-mac-lion-theme) {
   /* 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;
+}
+
+#UITourTooltipClose {
+  -moz-margin-end: -15px;
+  margin-top: -12px;
+}
\ No newline at end of file
--- a/browser/themes/shared/UITour.inc.css
+++ b/browser/themes/shared/UITour.inc.css
@@ -21,30 +21,99 @@
   box-shadow: 0 0 3px 0 rgba(0,0,0,0.5);
   min-height: 32px;
   min-width: 32px;
 }
 
 #UITourTooltipIcon {
   width: 48px;
   height: 48px;
-  padding: 8px;
+  -moz-margin-start: 8px;
+  -moz-margin-end: 18px;
+}
+
+#UITourTooltipTitle,
+#UITourTooltipDescription {
+  max-width: 20rem;
 }
 
 #UITourTooltipTitle {
-  font-size: 130%;
+  font-size: 1.3rem;
   font-weight: bold;
-  margin: 0 0 5px 0;
+  -moz-margin-start: 0;
+  -moz-margin-end: 0;
+  margin: 10px 0 19px 0;
 }
 
 #UITourTooltipDescription {
-  max-width: 20em;
+  -moz-margin-start: 0;
+  -moz-margin-end: 0;
+  font-size: 1.15rem;
+  line-height: 1.8rem;
+}
+
+#UITourTooltipClose {
+  -moz-appearance: none;
+  border: none;
+  background-color: transparent;
+  min-width: 0;
+  -moz-margin-start: 4px;
+  -moz-margin-end: -10px;
+  margin-top: -8px;
 }
 
 #UITourTooltipButtons {
-  height: 5em;
+  margin: 1.5em 0 .9em 0;
+}
+
+#UITourTooltipButtons > button {
+  margin-left: 6px;
+  margin-right: 6px;
+}
+
+#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;
+  border: 1px solid;
+  border-color: hsla(210,4%,10%,.1);
+  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;
+}
+
+#UITourTooltipButtons > button.button-link {
+  -moz-appearance: none;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  color: rgba(0,0,0,0.35);
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+#UITourTooltipButtons > button.button-link:hover {
+  color: black;
+}