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 id25666
push userjwein@mozilla.com
push dateMon, 18 Nov 2013 15:56:58 +0000
treeherdermozilla-central@f2adb62d07eb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs862886
milestone23.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 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;
+}