Bug 606343, part 2, centre arrow on anchor in notification panel, r=dao, a=blocking

browser/themes/pinstripe/browser/browser.css

@@ -2031,11 +2031,6 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
   -moz-border-image: url(chrome://browser/skin/hud-panel.png) 26 18 22 50 / 26px 18px 22px 50px repeat;
 }
 
-#notification-popup {
-  margin-left: -16px;
-  margin-right: -16px;
-}
-
 #notification-popup-box {
   margin: 0 3px;
 }

browser/themes/winstripe/browser/browser.css

@@ -1859,11 +1859,6 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
   color: MenuText;
 }
 
-/* Notification popup */
-#notification-popup {
-  padding: 10px;
-}
-
 .popup-notification-icon {
   width: 64px;
   height: 64px;

toolkit/content/PopupNotifications.jsm

@@ -402,7 +402,8 @@ PopupNotifications.prototype = {
       return;
 
     // Make sure the identity popup hangs in the correct direction.
-    var position = (this.window.getComputedStyle(this.panel, "").direction == "rtl") ? "after_end" : "after_start";
+    var position = (this.window.getComputedStyle(this.panel, "").direction == "rtl") ?
+      "bottomcenter topright" : "bottomcenter topleft";
 
     this._currentAnchorElement = anchorElement;
 

toolkit/content/tests/widgets/test_arrowpanel.xul

@@ -48,6 +48,7 @@ function nextTest()
     expectedSide = expected;
     expectedAnchorEdge = anchorEdge;
 
+    panel.removeAttribute("side");
     panel.openPopup(expectedAnchor, position, 0, 0, false, false, null);
   }
 
@@ -95,6 +96,24 @@ function nextTest()
   openPopup("end_before", "bottomright", "right", "bottom");
   yield;
 
+  openPopup("topcenter bottomleft", "bottomleft", "bottom", "center left");
+  yield;
+  openPopup("bottomcenter topleft", "topleft", "top", "center left");
+  yield;
+  openPopup("topcenter bottomright", "bottomright", "bottom", "center right");
+  yield;
+  openPopup("bottomcenter topright", "topright", "top", "center right");
+  yield;
+  openPopup("topcenter bottomleft", "middle", "bottom", "center left");
+  yield;
+  openPopup("bottomcenter topleft", "middle", "top", "center left");
+  yield;
+
+  openPopup("leftcenter topright", "middle", "right", "center top");
+  yield;
+  openPopup("rightcenter bottomleft", "middle", "left", "center bottom");
+  yield;
+
   SimpleTest.finish();
   yield;
 }
@@ -120,18 +139,37 @@ function checkPanelPosition(panel)
       break;
   }
 
+  let iscentered = false;
+  if (expectedAnchorEdge.indexOf("center ") == 0) {
+    expectedAnchorEdge = expectedAnchorEdge.substring(7);
+    iscentered = true;
+  }
+
+  let adj;
   switch (expectedAnchorEdge) {
     case "top":
-      is(panelRect.top, anchorRect.top, "anchored on top");
+      adj = parseInt(getComputedStyle(panel, "").marginTop);
+      if (iscentered)
+        adj += anchorRect.height / 2;
+      is(Math.round(panelRect.top), Math.round(anchorRect.top + adj), "anchored on top");
       break;
     case "bottom":
-      is(panelRect.bottom, anchorRect.bottom, "anchored on bottom");
+      adj = parseInt(getComputedStyle(panel, "").marginBottom);
+      if (iscentered)
+        adj += anchorRect.height / 2;
+      is(Math.round(panelRect.bottom), Math.round(anchorRect.bottom - adj), "anchored on bottom");
       break;
     case "left":
-      is(panelRect.left, anchorRect.left, "anchored on left");
+      adj = parseInt(getComputedStyle(panel, "").marginLeft);
+      if (iscentered)
+        adj += anchorRect.width / 2;
+      is(Math.round(panelRect.left), Math.round(anchorRect.left + adj), "anchored on left ");
       break;
     case "right":
-      is(panelRect.right, anchorRect.right, "anchored on right");
+      adj = parseInt(getComputedStyle(panel, "").marginRight);
+      if (iscentered)
+        adj += anchorRect.width / 2;
+      is(Math.round(panelRect.right), Math.round(anchorRect.right - adj), "anchored on right");
       break;
   }
 

toolkit/content/widgets/popup.xml

@@ -279,7 +279,7 @@
   </binding>
 
   <binding id="arrowpanel" extends="chrome://global/content/bindings/popup.xml#panel">
-    <content flip="both">
+    <content flip="both" side="top" position="bottomcenter topleft">
       <xul:box anonid="container" class="panel-arrowcontainer">
         <xul:box anonid="arrowbox" class="panel-arrowbox">
           <xul:image anonid="arrow" class="panel-arrow"/>
@@ -326,7 +326,7 @@
           else {
             arrowbox.pack = popupRect.left + popupRect.width / 2 < anchorRect.left ? "end" : "start";
             if (vertPos == 1) {
-              container.dir = ""; 
+              container.dir = "";
               anchorClass = "top";
             }
             else if (vertPos == -1) {
@@ -344,7 +344,7 @@
           else {
             arrowbox.pack = popupRect.top + popupRect.height / 2 < anchorRect.top ? "end" : "start";
             if (horizPos == 1) {
-              container.dir = ""; 
+              container.dir = "";
               anchorClass = "left";
             }
             else if (horizPos == -1) {
@@ -358,6 +358,7 @@
         }
         arrow.hidden = hideAnchor;
         arrow.setAttribute("side", anchorClass);
+        this.setAttribute("side", anchorClass);
 
         // set fading
         var fade = this.getAttribute("fade");
@@ -369,11 +370,11 @@
         }
       ]]>
       </handler>
-      <handler event="popuphiding">
+      <handler event="popuphiding" phase="target">
         clearTimeout(this._fadeTimer);
         this.style.removeProperty("opacity");
       </handler>
-      <handler event="transitionend">
+      <handler event="transitionend" phase="target">
       <![CDATA[
         if (event.propertyName == "opacity") {
           this.hidePopup();

toolkit/themes/pinstripe/global/popup.css

@@ -63,6 +63,18 @@ panel[type="arrow"] {
   -moz-transition: opacity 300ms;
 }
 
+panel[type="arrow"][side="top"],
+panel[type="arrow"][side="bottom"] {
+  margin-left: -26px;
+  margin-right: -26px;
+}
+
+panel[type="arrow"][side="left"],
+panel[type="arrow"][side="right"] {
+  margin-top: -26px;
+  margin-bottom: -26px;
+}
+
 .panel-arrowcontent {
   -moz-appearance: none;
   color: white;

toolkit/themes/winstripe/global/popup.css

@@ -70,6 +70,18 @@ panel[type="arrow"] {
   -moz-transition: opacity 300ms;
 }
 
+panel[type="arrow"][side="top"],
+panel[type="arrow"][side="bottom"] {
+  margin-left: -25px;
+  margin-right: -25px;
+}
+
+panel[type="arrow"][side="left"],
+panel[type="arrow"][side="right"] {
+  margin-top: -25px;
+  margin-bottom: -25px;
+}
+
 .panel-arrowcontent {
   border-radius: 6px;
 %ifdef WINSTRIPE_AERO