From 49a325326c8bf3af1660e527b2879b27776ecfc0 Mon Sep 17 00:00:00 2001
From: Gijs Kruitbosch <gijskruitbosch@gmail.com>
Date: Tue, 19 Sep 2017 15:13:25 +0100
Subject: [PATCH] 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          |  6 ++++++
 browser/base/content/browser-places.js               |  6 ++++++
 .../content/test/urlbar/browser_page_action_menu.js  | 12 ++++++++++++
 browser/themes/shared/urlbar-searchbar.inc.css       |  5 ++++-
 4 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/browser/base/content/browser-pageActions.js b/browser/base/content/browser-pageActions.js
index 26f6042e74ee..1fdecba86f38 100644
--- a/browser/base/content/browser-pageActions.js
+++ b/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,
diff --git a/browser/base/content/browser-places.js b/browser/base/content/browser-places.js
index 9553600e7006..92bd8cb1cf69 100644
--- a/browser/base/content/browser-places.js
+++ b/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);
   },
 
diff --git a/browser/base/content/test/urlbar/browser_page_action_menu.js b/browser/base/content/test/urlbar/browser_page_action_menu.js
index f17d38bbe85a..c61d06ff0703 100644
--- a/browser/base/content/test/urlbar/browser_page_action_menu.js
+++ b/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.
diff --git a/browser/themes/shared/urlbar-searchbar.inc.css b/browser/themes/shared/urlbar-searchbar.inc.css
index 8f0f186c7a46..a54de8920113 100644
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/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;