Bug 855805 - Create the Bookmarks widget with subview - Styling.

r=mconley

browser/base/content/browser-places.js

@@ -830,9 +830,10 @@ var BookmarksEventHandler = {
 // Handles special drag and drop functionality for Places menus that are not
 // part of a Places view (e.g. the bookmarks menu in the menubar).
 var PlacesMenuDNDHandler = {
-  _springLoadDelay: 350, // milliseconds
+  _springLoadDelayMs: 350,
+  _closeDelayMs: 500,
   _loadTimer: null,
-  _closerTimer: null,
+  _closeTimer: null,
 
   /**
    * Called when the user enters the <menu> element during a drag.
@@ -853,7 +854,7 @@ var PlacesMenuDNDHandler = {
       this._loadTimer = null;
       popup.setAttribute("autoopened", "true");
       popup.showPopup(popup);
-    }, this._springLoadDelay, Ci.nsITimer.TYPE_ONE_SHOT);
+    }, this._springLoadDelayMs, Ci.nsITimer.TYPE_ONE_SHOT);
     event.preventDefault();
     event.stopPropagation();
   },
@@ -866,7 +867,8 @@ var PlacesMenuDNDHandler = {
   onDragLeave: function PMDH_onDragLeave(event) {
     // Handle menu-button separate targets.
     if (event.relatedTarget === event.currentTarget ||
-        event.relatedTarget.parentNode === event.currentTarget)
+        (event.relatedTarget &&
+         event.relatedTarget.parentNode === event.currentTarget))
       return;
 
     // Closing menus in a Places popup is handled by the view itself.
@@ -892,7 +894,7 @@ var PlacesMenuDNDHandler = {
         popup.removeAttribute("autoopened");
         popup.hidePopup();
       }
-    }, this._springLoadDelay, Ci.nsITimer.TYPE_ONE_SHOT);
+    }, this._closeDelayMs, Ci.nsITimer.TYPE_ONE_SHOT);
   },
 
   /**

browser/base/content/browser.css

@@ -721,3 +721,14 @@ chatbox:-moz-full-screen-ancestor > .chat-titlebar {
 *:-moz-full-screen-ancestor #social-sidebar-box:not(:-moz-full-screen-ancestor) {
   display: none;
 }
+
+/* Give this menupopup an arrow panel styling */
+#BMB_bookmarksPopup {
+  -moz-appearance: none;
+  -moz-binding: url("chrome://browser/content/places/menu.xml#places-popup-arrow");
+  background: transparent;
+  border: none;
+  transition: opacity 300ms;
+  /* The popup inherits -moz-image-region from the button, must reset it */
+  -moz-image-region: auto;
+}

browser/base/content/browser.xul

@@ -677,6 +677,7 @@
                      placespopup="true"
                      context="placesContext"
                      openInTabs="children"
+                     anonanchorclass="toolbarbutton-menubutton-dropmarker"
                      oncommand="BookmarksEventHandler.onCommand(event, this.parentNode._placesView);"
                      onclick="BookmarksEventHandler.onClick(event, this.parentNode._placesView);"
                      onpopupshowing="BookmarkingUI.onPopupShowing(event);

browser/components/places/content/menu.xml

@@ -80,8 +80,8 @@
               elt = elt.parentNode;
 
             // Calculate positions taking care of arrowscrollbox
-            let eventY = aEvent.layerY;
             let scrollbox = this._scrollBox;
+            let eventY = aEvent.layerY + (scrollbox.boxObject.y - this.boxObject.y);
             let scrollboxOffset = scrollbox.scrollBoxObject.y -
                                   (scrollbox.boxObject.y - this.boxObject.y);
             let eltY = elt.boxObject.y - scrollboxOffset;
@@ -485,4 +485,121 @@
 
     </handlers>
   </binding>
+
+  <!-- Most of this is copied from the arrowpanel binding in popup.xml -->
+  <binding id="places-popup-arrow"
+           extends="chrome://browser/content/places/menu.xml#places-popup-base">
+    <content flip="both" side="top" position="bottomcenter topleft">
+      <xul:box anonid="container" class="panel-arrowcontainer" flex="1"
+               xbl:inherits="side,panelopen">
+        <xul:box anonid="arrowbox" class="panel-arrowbox">
+          <xul:image anonid="arrow" class="panel-arrow" xbl:inherits="side"/>
+        </xul:box>
+        <xul:box class="panel-arrowcontent" xbl:inherits="side,align,dir,orient,pack" flex="1">
+          <xul:vbox class="menupopup-drop-indicator-bar" hidden="true">
+            <xul:image class="menupopup-drop-indicator" mousethrough="always"/>
+          </xul:vbox>
+          <xul:arrowscrollbox class="popup-internal-box" flex="1" orient="vertical"
+                              smoothscroll="false">
+            <children/>
+          </xul:arrowscrollbox>
+        </xul:box>
+      </xul:box>
+    </content>
+
+    <implementation>
+      <method name="adjustArrowPosition">
+        <body><![CDATA[
+          var arrow = document.getAnonymousElementByAttribute(this, "anonid", "arrow");
+
+          var anchor = this.anchorNode;
+          if (!anchor) {
+            arrow.hidden = true;
+            return;
+          }
+
+          var container = document.getAnonymousElementByAttribute(this, "anonid", "container");
+          var arrowbox = document.getAnonymousElementByAttribute(this, "anonid", "arrowbox");
+
+          // if this panel has a "sliding" arrow, we may have previously set margins...
+          arrowbox.style.removeProperty("margin");
+
+          var position = this.alignmentPosition;
+          if (position.indexOf("start_") == 0 || position.indexOf("end_") == 0) {
+            container.orient = "";
+            arrowbox.orient = "vertical";
+            if (position.indexOf("_after") > 0) {
+              arrowbox.pack = "end";
+              arrowbox.style.marginBottom = this.alignmentOffset + "px";
+            } else {
+              arrowbox.pack = "start";
+              arrowbox.style.marginTop = this.alignmentOffset + "px";
+            }
+
+            // The assigned side stays the same regardless of direction.
+            var isRTL = (window.getComputedStyle(this).direction == "rtl");
+
+            if (position.indexOf("start_") == 0) {
+              container.dir = "reverse";
+              this.setAttribute("side", isRTL ? "left" : "right");
+            }
+            else {
+              container.dir = "";
+              this.setAttribute("side", isRTL ? "right" : "left");
+            }
+          }
+          else if (position.indexOf("before_") == 0 || position.indexOf("after_") == 0) {
+            container.orient = "vertical";
+            arrowbox.orient = "";
+            if (position.indexOf("_end") > 0) {
+              arrowbox.pack = "end";
+              arrowbox.style.marginRight = this.alignmentOffset + "px";
+            } else {
+              arrowbox.pack = "start";
+              arrowbox.style.marginLeft = this.alignmentOffset + "px";
+            }
+
+            if (position.indexOf("before_") == 0) {
+              container.dir = "reverse";
+              this.setAttribute("side", "bottom");
+            }
+            else {
+              container.dir = "";
+              this.setAttribute("side", "top");
+            }
+          }
+          arrow.hidden = false;
+        ]]></body>
+      </method>
+    </implementation>
+
+    <handlers>
+      <handler event="popupshowing" phase="target"><![CDATA[
+        this.adjustArrowPosition();
+      ]]></handler>
+      <handler event="popupshown" phase="target"><![CDATA[
+        this.setAttribute("panelopen", "true");
+
+        // Allow anchoring to a specified element inside the anchor.
+        var anchorClass = this.getAttribute("anonanchorclass");
+        if (anchorClass && this.anchorNode) {
+          let anchor =
+            document.getAnonymousElementByAttribute(this.anchorNode, "class",
+                                                    anchorClass);
+          if (anchor) {
+            let offsetX = anchor.boxObject.width / 2;
+            if (this.alignmentPosition.endsWith("_end"))
+              offsetX *= -1;
+            this.popupBoxObject.moveToAnchor(anchor, this.alignmentPosition,
+                                             offsetX, 0,
+                                             false);
+            this.adjustArrowPosition();
+          }
+        }
+      ]]></handler>
+      <handler event="popuphidden" phase="target"><![CDATA[
+        this.removeAttribute("panelopen");
+      ]]></handler>
+    </handlers>
+  </binding>
 </bindings>

browser/themes/linux/browser.css

@@ -1348,8 +1348,12 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 
 /* bookmarks menu-button */
 
-#bookmarks-menu-button[customizableui-areatype="toolbar"] {
+#bookmarks-menu-button[customizableui-areatype="toolbar"],
+#bookmarks-menu-button[customizableui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
   list-style-image: url("chrome://browser/skin/Toolbar.png");
+}
+
+#bookmarks-menu-button[customizableui-areatype="toolbar"] {
   -moz-image-region: rect(0px 216px 24px 192px);
 }
 
@@ -1357,17 +1361,32 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
   -moz-image-region: rect(24px 216px 48px 192px);
 }
 
-toolbar[iconsize="small"] #bookmarks-menu-button[customizableui-areatype="toolbar"],
+#bookmarks-menu-button[customizableui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
+  -moz-appearance: none !important;
+}
+
+#bookmarks-menu-button[customizableui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+  padding: 9px 3px;
+  -moz-image-region: rect(0px 240px 24px 216px);
+}
+
+#bookmarks-menu-button[customizableui-areatype="toolbar"].bookmark-item > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
 #bookmarks-menu-button.bookmark-item {
   list-style-image: url("chrome://browser/skin/Toolbar-small.png");
+}
+
+#bookmarks-menu-button.bookmark-item {
   -moz-image-region: rect(0px 144px 16px 128px);
 }
 
-toolbar[iconsize="small"] #bookmarks-menu-button[starred][customizableui-areatype="toolbar"],
 #bookmarks-menu-button.bookmark-item[starred] {
   -moz-image-region: rect(16px 144px 32px 128px);
 }
 
+#bookmarks-menu-button[customizableui-areatype="toolbar"].bookmark-item > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+  -moz-image-region: rect(0px 160px 16px 144px);
+}
+
 #bookmarks-menu-button[disabled][customizableui-areatype="toolbar"] > .toolbarbutton-icon,
 #bookmarks-menu-button[disabled][customizableui-areatype="toolbar"] > .toolbarbutton-menu-dropmarker,
 #bookmarks-menu-button[disabled][customizableui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker,
@@ -1376,6 +1395,18 @@ toolbar[iconsize="small"] #bookmarks-menu-button[starred][customizableui-areatyp
   opacity: .4;
 }
 
+#BMB_bookmarksPopup[side="top"],
+#BMB_bookmarksPopup[side="bottom"] {
+  margin-left: -16px;
+  margin-right: -16px;
+}
+
+#BMB_bookmarksPopup[side="left"],
+#BMB_bookmarksPopup[side="right"] {
+  margin-top: -16px;
+  margin-bottom: -16px;
+}
+
 /* Bookmarking panel */
 #editBookmarkPanelStarIcon {
   list-style-image: url("chrome://browser/skin/places/starred48.png");

browser/themes/osx/browser.css

@@ -435,6 +435,14 @@ toolbarbutton.bookmark-item > menupopup {
     -moz-image-region: rect(18px, 162px, 36px, 144px);
   }
 
+  #bookmarks-menu-button[customizableui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+    -moz-image-region: rect(0px, 630px, 18px, 612px);
+  }
+
+  #bookmarks-menu-button[customizableui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker:hover:active:not([disabled="true"]) > .dropmarker-icon {
+    -moz-image-region: rect(18px, 630px, 36px, 612px);
+  }
+
   #history-panelmenu@toolbarButtonPressed@ {
     -moz-image-region: rect(18px, 180px, 36px, 162px);
   }
@@ -569,11 +577,13 @@ toolbarbutton.bookmark-item > menupopup {
   /* Whitelist built-in buttons, instead of .toolbarbutton-1,
      to avoid potentially breaking add-on toolbar buttons. */
 
-  :-moz-any(@primaryToolbarButtons@) {
+  :-moz-any(@primaryToolbarButtons@),
+  #bookmarks-menu-button[customizableui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
     list-style-image: url("chrome://browser/skin/Toolbar@2x.png");
   }
 
-  :-moz-any(@primaryToolbarButtons@):-moz-lwtheme-brighttext {
+  :-moz-any(@primaryToolbarButtons@):-moz-lwtheme-brighttext,
+  #bookmarks-menu-button[customizableui-areatype="toolbar"]:-moz-lwtheme-brighttext > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
     list-style-image: url("chrome://browser/skin/Toolbar-inverted@2x.png");
   }
 
@@ -621,6 +631,14 @@ toolbarbutton.bookmark-item > menupopup {
     -moz-image-region: rect(36px, 324px, 72px, 288px);
   }
 
+  #bookmarks-menu-button[customizableui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+    -moz-image-region: rect(0px, 1260px, 36px, 1224px);
+  }
+
+  #bookmarks-menu-button[customizableui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker:hover:active:not([disabled="true"]) > .dropmarker-icon {
+    -moz-image-region: rect(36px, 1260px, 72px, 1224px);
+  }
+
   #history-panelmenu[customizableui-areatype="toolbar"] {
     -moz-image-region: rect(0, 360px, 36px, 324px);
   }
@@ -1802,6 +1820,39 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-
   -moz-image-region: rect(14px, 28px, 28px, 14px);
 }
 
+#bookmarks-menu-button[customizableui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+  width: 16px;
+  height: 16px;
+}
+
+#BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent {
+  padding: 6px;
+}
+
+#BMB_bookmarksPopup[side="top"],
+#BMB_bookmarksPopup[side="bottom"] {
+  margin-left: -26px;
+  margin-right: -26px;
+}
+
+#BMB_bookmarksPopup[side="left"],
+#BMB_bookmarksPopup[side="right"] {
+  margin-top: -26px;
+  margin-bottom: -26px;
+}
+
+/* Native styling background is bad on arrow panels */
+#BMB_bookmarksPopup > menuitem,
+#BMB_bookmarksPopup > menu,
+#BMB_bookmarksPopup > menuseparator {
+  -moz-appearance: none;
+}
+
+#BMB_bookmarksPopup > menuseparator {
+  border-top: 1px solid ThreeDShadow;
+  margin: 5px 0;
+}
+
 @media (min-resolution: 2dppx) {
   #urlbar > toolbarbutton {
     list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
@@ -1940,7 +1991,8 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-
 
 /* bookmarks menu-button */
 
-#bookmarks-menu-button.bookmark-item {
+#bookmarks-menu-button.bookmark-item,
+#bookmarks-menu-button.bookmark-item[open] {
   list-style-image: url("chrome://browser/skin/places/star-icons.png");
   -moz-image-region: rect(0px 16px 16px 0px);
 }
@@ -1954,7 +2006,8 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-
 }
 
 @media (min-resolution: 2dppx) {
-  #bookmarks-menu-button.bookmark-item {
+  #bookmarks-menu-button.bookmark-item,
+  #bookmarks-menu-button.bookmark-item[open] {
     list-style-image: url("chrome://browser/skin/places/star-icons@2x.png");
     -moz-image-region: rect(0px 32px 32px 0px);
   }

browser/themes/shared/toolbarbuttons.inc.css

@@ -1,8 +1,10 @@
-:-moz-any(@primaryToolbarButtons@) {
+:-moz-any(@primaryToolbarButtons@),
+#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
   list-style-image: url("chrome://browser/skin/Toolbar.png");
 }
 
-:-moz-any(@primaryToolbarButtons@):-moz-lwtheme-brighttext {
+:-moz-any(@primaryToolbarButtons@):-moz-lwtheme-brighttext,
+#bookmarks-menu-button:-moz-lwtheme-brighttext > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
   list-style-image: url(chrome://browser/skin/Toolbar-inverted.png);
 }
 
@@ -31,7 +33,11 @@
   -moz-image-region: rect(0, 162px, 18px, 144px);
 }
 
-#history-panelmenu[customizableui-areatype="toolbar"]{
+#bookmarks-menu-button[customizableui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+  -moz-image-region: rect(0, 630px, 18px, 612px);
+}
+
+#history-panelmenu[customizableui-areatype="toolbar"] {
   -moz-image-region: rect(0, 180px, 18px, 162px);
 }
 

browser/themes/windows/browser.css

@@ -330,7 +330,8 @@ menuitem.bookmark-item {
 
 %ifndef WINDOWS_AERO
 @media (-moz-windows-theme: luna-silver) {
-  :-moz-any(@primaryToolbarButtons@) {
+  :-moz-any(@primaryToolbarButtons@),
+  #bookmarks-menu-button.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
     list-style-image: url("chrome://browser/skin/Toolbar-lunaSilver.png");
   }
 }
@@ -1297,10 +1298,27 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
   -moz-image-region: rect(0px 48px 16px 32px);
 }
 
-#bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button> .toolbarbutton-icon {
+#bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
   -moz-margin-start: 5px;
 }
 
+#bookmarks-menu-button[customizableui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+#BMB_bookmarksPopup[side="top"],
+#BMB_bookmarksPopup[side="bottom"] {
+  margin-left: -20px;
+  margin-right: -20px;
+}
+
+#BMB_bookmarksPopup[side="left"],
+#BMB_bookmarksPopup[side="right"] {
+  margin-top: -20px;
+  margin-bottom: -20px;
+}
+
 /* bookmarking panel */
 
 #editBookmarkPanelStarIcon {