Bug 862886 - The toolbarbutton that spawns the subview in the menu panel should have a blue background. r=dao
authorJared Wein <jwein@mozilla.com>
Wed, 24 Apr 2013 13:32:10 -0400
changeset 155228 c20675d7fbaceb6ba3bb7b22477abc3f40092043
parent 155227 f7c8d5bc8a864a3cdef3ce5e5b05cb39dadd05da
child 155229 420a2ea527e05a88913b8b1aa9f7bdf74385185b
push idunknown
push userunknown
push dateunknown
reviewersdao
bugs862886
milestone23.0a1
Bug 862886 - The toolbarbutton that spawns the subview in the menu panel should have a blue background. r=dao
browser/components/customizableui/content/panelUI.js
browser/themes/shared/customizableui/panelUIOverlay.inc.css
--- a/browser/components/customizableui/content/panelUI.js
+++ b/browser/components/customizableui/content/panelUI.js
@@ -252,35 +252,44 @@ const PanelUI = {
    * on the state of the panel.
    */
   _updatePanelButton: function() {
     this.menuButton.open = this.panel.state == "open" ||
                            this.panel.state == "showing";
   },
 
   /**
+   * Used to keep a reference to the toolbarbutton that the subview spawned from.
+   */
+  anchorElement: null,
+
+  /**
    * If aAnchor is not null, this shifts the main view content so that it is
    * partially clipped by the panel boundaries, placing the center of aAnchor
    * at the clipping edge. If aAnchor is undefined or null, the main view
    * content is shifted back to its original position.
    */
   _shiftMainView: function(aAnchor) {
     if (aAnchor) {
       // We need to find the left edge of the anchor, relative to the main
       // panel. Then we need to add half the width of the anchor. This is the
       // target that we need to transition to.
       let anchorRect = aAnchor.getBoundingClientRect();
       let mainViewRect = this.mainView.getBoundingClientRect();
       let leftEdge = anchorRect.left - mainViewRect.left;
-      let center = (anchorRect.width / 2);
+      let center = aAnchor.clientWidth / 2;
       let target = leftEdge + center;
       this.mainView.style.transform = "translateX(-" + target + "px)";
+      aAnchor.classList.add("panelui-mainview-anchor");
     } else {
       this.mainView.style.transform = "";
+      if (this.anchorElement)
+        this.anchorElement.classList.remove("panelui-mainview-anchor");
     }
+    this.anchorElement = aAnchor;
   },
 
   /**
    * When viewing a subview, any click on the main view gets intercepted by our
    * capturer, and then we switch to the main view.
    */
   _onCapturerClick: function(aEvent) {
     PanelUI.showMainView();
--- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
@@ -222,8 +222,15 @@
               0 0 2px hsla(210,54%,20%,0);
   text-shadow: none;
   transition: none;
 }
 
 #PanelUI-historyItems > toolbarbutton {
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
 }
+
+#PanelUI-contents > toolbarbutton.panelui-mainview-anchor {
+  background-color: Highlight;
+  background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
+  background-repeat: repeat-x;
+  color: HighlightText;
+}