Bug 935823 - [australis] UITour: Add a close button to info panels. r=Unfocused a=sylvestre
authorMatthew Noorenberghe <mozilla@noorenberghe.ca>
Fri, 07 Mar 2014 13:00:18 -0500
changeset 183233 7dfa048bd34579f92056cff9d4675920dda32329
parent 183232 eeae2bb00b8f3110c6c44083be9e5829b05ebaff
child 183234 8c70b73529424602f116613d5644d5f87896d33c
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
bugs935823
milestone29.0a2
Bug 935823 - [australis] UITour: Add a close button to info panels. r=Unfocused a=sylvestre
browser/modules/UITour.jsm
browser/modules/test/browser_UITour3.js
browser/modules/test/uitour.html
browser/modules/test/uitour.js
browser/themes/shared/UITour.inc.css
--- a/browser/modules/UITour.jsm
+++ b/browser/modules/UITour.jsm
@@ -319,17 +319,22 @@ this.UITour = {
                 buttons.push(button);
 
                 if (buttons.length == MAX_BUTTONS)
                   break;
               }
             }
           }
 
-          this.showInfo(contentDocument, target, data.title, data.text, iconURL, buttons);
+          let infoOptions = {};
+
+          if (typeof data.closeButtonCallbackID == "string")
+            infoOptions.closeButtonCallbackID = data.closeButtonCallbackID;
+
+          this.showInfo(contentDocument, target, data.title, data.text, iconURL, buttons, infoOptions);
         }).then(null, Cu.reportError);
         break;
       }
 
       case "hideInfo": {
         this.hideInfo(window);
         break;
       }
@@ -502,24 +507,16 @@ 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;
-      }
     }
   },
 
   setTelemetryBucket: function(aPageID) {
     let bucket = BUCKET_NAME + BrowserUITelemetry.BUCKET_SEPARATOR + aPageID;
     BrowserUITelemetry.setBucket(bucket);
   },
 
@@ -861,17 +858,30 @@ this.UITour = {
 
     let highlighter = aWindow.document.getElementById("UITourHighlight");
     highlighter.parentElement.hidePopup();
     highlighter.removeAttribute("active");
 
     this._setAppMenuStateForAnnotation(aWindow, "highlight", false);
   },
 
-  showInfo: function(aContentDocument, aAnchor, aTitle = "", aDescription = "", aIconURL = "", aButtons = []) {
+  /**
+   * Show an info panel.
+   *
+   * @param {Document} aContentDocument
+   * @param {Node}     aAnchor
+   * @param {String}   [aTitle=""]
+   * @param {String}   [aDescription=""]
+   * @param {String}   [aIconURL=""]
+   * @param {Object[]} [aButtons=[]]
+   * @param {Object}   [aOptions={}]
+   * @param {String}   [aOptions.closeButtonCallbackID]
+   */
+  showInfo: function(aContentDocument, aAnchor, aTitle = "", aDescription = "", aIconURL = "",
+                     aButtons = [], aOptions = {}) {
     function showInfoPanel(aAnchorEl) {
       aAnchorEl.focus();
 
       let document = aAnchorEl.ownerDocument;
       let tooltip = document.getElementById("UITourTooltip");
       let tooltipTitle = document.getElementById("UITourTooltipTitle");
       let tooltipDesc = document.getElementById("UITourTooltipDescription");
       let tooltipIcon = document.getElementById("UITourTooltipIcon");
@@ -905,17 +915,26 @@ this.UITour = {
         });
 
         tooltipButtons.appendChild(el);
       }
 
       tooltipButtons.hidden = !aButtons.length;
 
       let tooltipClose = document.getElementById("UITourTooltipClose");
-      tooltipClose.addEventListener("command", this);
+      let closeButtonCallback = (event) => {
+        this.hideInfo(document.defaultView);
+        if (aOptions && aOptions.closeButtonCallbackID)
+          this.sendPageCallback(aContentDocument, aOptions.closeButtonCallbackID);
+      };
+      tooltipClose.addEventListener("command", closeButtonCallback);
+      tooltip.addEventListener("popuphiding", function tooltipHiding(event) {
+        tooltip.removeEventListener("popuphiding", tooltipHiding);
+        tooltipClose.removeEventListener("command", closeButtonCallback);
+      });
 
       tooltip.setAttribute("targetName", aAnchor.targetName);
       tooltip.hidden = false;
       let alignment = "bottomcenter topright";
       tooltip.openPopup(aAnchorEl, alignment);
     }
 
     // Prevent showing a panel at an undefined position.
--- a/browser/modules/test/browser_UITour3.js
+++ b/browser/modules/test/browser_UITour3.js
@@ -117,9 +117,26 @@ let tests = [
       });
 
       EventUtils.synthesizeMouseAtCenter(buttons.childNodes[1], {}, window);
     });
 
     let buttons = gContentWindow.makeButtons();
     gContentAPI.showInfo("urlbar", "another title", "moar text", "./image.png", buttons);
   },
+
+  function test_info_close_button(done) {
+    let popup = document.getElementById("UITourTooltip");
+    let closeButton = document.getElementById("UITourTooltipClose");
+
+    popup.addEventListener("popupshown", function onPopupShown() {
+      popup.removeEventListener("popupshown", onPopupShown);
+      EventUtils.synthesizeMouseAtCenter(closeButton, {}, window);
+      executeSoon(function() {
+        is(gContentWindow.callbackResult, "closeButton", "Close button callback called");
+        done();
+      });
+    });
+
+    let infoOptions = gContentWindow.makeInfoOptions();
+    gContentAPI.showInfo("urlbar", "Close me", "X marks the spot", null, null, infoOptions);
+  }
 ];
--- a/browser/modules/test/uitour.html
+++ b/browser/modules/test/uitour.html
@@ -15,16 +15,22 @@
 
       // Defined in content to avoid weird issues when crossing between chrome/content.
       function makeButtons() {
         return [
           {label: "Button 1", callback: makeCallback("button1")},
           {label: "Button 2", callback: makeCallback("button2"), icon: "image.png"}
         ];
       }
+
+      function makeInfoOptions() {
+        return {
+          closeButtonCallback: makeCallback("closeButton")
+        };
+      }
     </script>
   </head>
   <body>
     <h1>UITour tests</h1>
     <p>Because Firefox is...</p>
     <p>Never gonna let you down</p>
     <p>Never gonna give you up</p>
   </body>
--- a/browser/modules/test/uitour.js
+++ b/browser/modules/test/uitour.js
@@ -72,35 +72,40 @@ if (typeof Mozilla == 'undefined') {
 			effect: effect
 		});
 	};
 
 	Mozilla.UITour.hideHighlight = function() {
 		_sendEvent('hideHighlight');
 	};
 
-	Mozilla.UITour.showInfo = function(target, title, text, icon, buttons) {
+	Mozilla.UITour.showInfo = function(target, title, text, icon, buttons, options) {
 		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)
 			});
 			}
 		}
 
+		var closeButtonCallbackID;
+		if (options && options.closeButtonCallback)
+			closeButtonCallbackID = _waitForCallback(options.closeButtonCallback);
+
 		_sendEvent('showInfo', {
 			target: target,
 			title: title,
 			text: text,
 			icon: icon,
-			buttons: buttonData
+			buttons: buttonData,
+			closeButtonCallbackID: closeButtonCallbackID
 		});
 	};
 
 	Mozilla.UITour.hideInfo = function() {
 		_sendEvent('hideInfo');
 	};
 
 	Mozilla.UITour.previewTheme = function(theme) {
--- a/browser/themes/shared/UITour.inc.css
+++ b/browser/themes/shared/UITour.inc.css
@@ -46,17 +46,16 @@
 #UITourTooltipDescription {
   -moz-margin-start: 0;
   -moz-margin-end: 0;
   font-size: 1.15rem;
   line-height: 1.8rem;
 }
 
 #UITourTooltipClose {
-  visibility: hidden; /* XXX Temporarily disabled by bug 966913 */
   -moz-appearance: none;
   border: none;
   background-color: transparent;
   min-width: 0;
   -moz-margin-start: 4px;
   -moz-margin-end: -10px;
   margin-top: -8px;
 }