Bug 1397790 - add 'open' active state to urlbar buttons, use a more distinct background colour for it, r=abenson+572682,adw

MozReview-Commit-ID: 7QrhAB79yNw

--HG--
extra : rebase_source : 90c3715259271bf9cb34b635ca8348acd020c51c

browser/base/content/browser-pageActions.js

@@ -241,6 +241,7 @@ var BrowserPageActions = {
       if (iframeNode) {
         action.onIframeHiding(iframeNode, panelNode);
       }
+      anchorNode.removeAttribute("open");
     }, { once: true });
 
     if (panelViewNode) {
@@ -252,6 +253,7 @@ var BrowserPageActions = {
     // panel.
     this.panelNode.hidePopup();
     panelNode.openPopup(anchorNode, "bottomcenter topright");
+    anchorNode.setAttribute("open", "true");
 
     if (iframeNode) {
       action.onIframeShown(iframeNode, panelNode);
@@ -593,6 +595,10 @@ var BrowserPageActions = {
     }
 
     this.panelNode.hidden = false;
+    this.panelNode.addEventListener("popuphiding", () => {
+      this.mainButtonNode.removeAttribute("open");
+    }, {once: true});
+    this.mainButtonNode.setAttribute("open", "true");
     this.panelNode.openPopup(this.mainButtonNode, {
       position: "bottomcenter topright",
       triggerEvent: event,

browser/base/content/browser-places.js

@@ -335,6 +335,12 @@ var StarUI = {
                                               "loadInSidebar", "keyword"],
                                  focusedElement: "preferred"});
 
+    if (aAnchorElement && aAnchorElement.id == BookmarkingUI.STAR_BOX_ID) {
+      aAnchorElement.setAttribute("open", "true");
+      this.panel.addEventListener("popuphiding", () => {
+        aAnchorElement.removeAttribute("open");
+      });
+    }
     this.panel.openPopup(aAnchorElement, aPosition);
   },
 

browser/base/content/test/urlbar/browser_page_action_menu.js

@@ -40,7 +40,11 @@ add_task(async function bookmark() {
       }
       StarUI.panel.addEventListener("popupshown", resolve, { once: true });
     });
+    Assert.equal(BookmarkingUI.starBox.getAttribute("open"), "true",
+      "Star has open attribute");
     StarUI.panel.hidePopup();
+    Assert.ok(!BookmarkingUI.starBox.hasAttribute("open"),
+      "Star no longer has open attribute");
 
     // Open the panel again.
     await promisePageActionPanelOpen();
@@ -131,12 +135,16 @@ add_task(async function sendToDevice_nonSendable() {
     await promiseSyncReady();
     // Open the panel.  Send to Device should be disabled.
     await promisePageActionPanelOpen();
+    Assert.equal(BrowserPageActions.mainButtonNode.getAttribute("open"),
+      "true", "Main button has 'open' attribute");
     let sendToDeviceButton =
       document.getElementById("pageAction-panel-sendToDevice");
     Assert.ok(sendToDeviceButton.disabled);
     let hiddenPromise = promisePageActionPanelHidden();
     BrowserPageActions.panelNode.hidePopup();
     await hiddenPromise;
+    Assert.ok(!BrowserPageActions.mainButtonNode.hasAttribute("open"),
+      "Main button no longer has 'open' attribute");
     // Remove the `display` style set above.
     BrowserPageActions.mainButtonNode.style.removeProperty("display");
   });
@@ -496,6 +504,8 @@ add_task(async function sendToDevice_inUrlbar() {
       promisePanelShown(BrowserPageActions._activatedActionPanelID);
     EventUtils.synthesizeMouseAtCenter(urlbarButton, {});
     await panelPromise;
+    Assert.equal(urlbarButton.getAttribute("open"), "true",
+      "Button has open attribute");
 
     // The devices should be shown in the subview.
     let expectedItems = [
@@ -546,6 +556,8 @@ add_task(async function sendToDevice_inUrlbar() {
     EventUtils.synthesizeMouseAtCenter(deviceMenuItem, {});
     info("Waiting for Send to Device panel to close after clicking a device");
     await hiddenPromise;
+    Assert.ok(!urlbarButton.hasAttribute("open"),
+      "URL bar button no longer has open attribute");
 
     // And then the "Sent!" notification panel should open and close by itself
     // after a moment.

browser/themes/shared/urlbar-searchbar.inc.css

@@ -186,11 +186,14 @@
   background-color: hsla(0,0%,80%,.4);
 }
 
+.urlbar-icon[open],
+.urlbar-icon-wrapper[open],
 .urlbar-icon:hover:active,
 .urlbar-icon-wrapper:hover:active {
-  background-color: hsla(0,0%,80%,.45);
+  background-color: hsla(0,0%,80%,.6);
 }
 
+.urlbar-icon-wrapper[open] > .urlbar-icon,
 .urlbar-icon-wrapper > .urlbar-icon:hover,
 .urlbar-icon-wrapper > .urlbar-icon:hover:active {
   background-color: transparent;