Bug 1399235 - The corners of the last urlbar icon overlap the urlbar's rounded corners. r?Gijs draft
authorDrew Willcoxon <adw@mozilla.com>
Tue, 12 Sep 2017 15:26:54 -0700
changeset 663339 0217748fff5230389a50bd729381bb141219fa04
parent 663182 1ed4ceb5f8f5c95e8a01b7fa1e205bff44deb3bd
child 731182 b87a0018ef3d48bc3525a7ec0183774abfb0efe4
push id79413
push userdwillcoxon@mozilla.com
push dateTue, 12 Sep 2017 22:27:05 +0000
reviewersGijs
bugs1399235
milestone57.0a1
Bug 1399235 - The corners of the last urlbar icon overlap the urlbar's rounded corners. r?Gijs MozReview-Commit-ID: JWxzoe0RaUA
browser/base/content/browser-pageActions.js
browser/themes/shared/urlbar-searchbar.inc.css
--- a/browser/base/content/browser-pageActions.js
+++ b/browser/base/content/browser-pageActions.js
@@ -306,16 +306,17 @@ var BrowserPageActions = {
     if (!action.shownInUrlbar) {
       if (node) {
         if (action.__urlbarNodeInMarkup) {
           node.hidden = true;
         } else {
           node.remove();
         }
       }
+      this._updateLastVisibleActionInUrlbar();
       return;
     }
 
     let newlyPlaced = false;
     if (action.__urlbarNodeInMarkup) {
       newlyPlaced = node && node.hidden;
       node.hidden = false;
     } else if (!node) {
@@ -342,16 +343,17 @@ var BrowserPageActions = {
       if (!node.hasAttribute("tooltiptext")) {
         let panelNodeID = this._panelButtonNodeIDForActionID(action.id);
         let panelNode = document.getElementById(panelNodeID);
         if (panelNode) {
           node.setAttribute("tooltiptext", panelNode.getAttribute("label"));
         }
       }
     }
+    this._updateLastVisibleActionInUrlbar();
   },
 
   _makeUrlbarButtonNode(action) {
     let buttonNode = document.createElement("image");
     buttonNode.classList.add("urlbar-icon", "urlbar-page-action");
     buttonNode.setAttribute("role", "button");
     if (action.tooltip) {
       buttonNode.setAttribute("tooltiptext", action.tooltip);
@@ -376,16 +378,35 @@ var BrowserPageActions = {
         this._toggleActivatedActionPanelForAction(action);
         return;
       }
       action.onCommand(event, buttonNode);
     });
     return buttonNode;
   },
 
+  // Adds .last-visible to the last non-hidden icon in the urlbar so that its
+  // end-edge corners can be rounded to match the urlbar's rounded corners.
+  _updateLastVisibleActionInUrlbar() {
+    let nodes = this.mainButtonNode.parentNode
+                    .querySelectorAll(".urlbar-page-action:not([hidden])");
+    let node = nodes.length ? nodes[nodes.length - 1] : null;
+    if (node != this._lastVisibleActionInUrlbar) {
+      if (this._lastVisibleActionInUrlbar) {
+        this._lastVisibleActionInUrlbar.classList.remove("last-visible");
+      }
+      if (node) {
+        node.classList.add("last-visible");
+      }
+      this._lastVisibleActionInUrlbar = node;
+    }
+  },
+
+  _lastVisibleActionInUrlbar: null,
+
   /**
    * Removes all the DOM nodes of the given action.
    *
    * @param  action (PageActions.Action, required)
    *         The action to remove.
    */
   removeAction(action) {
     this._removeActionFromPanel(action);
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -197,16 +197,28 @@
   transition-duration: var(--toolbarbutton-active-transition-duration);
 }
 
 .urlbar-icon-wrapper > .urlbar-icon:hover,
 .urlbar-icon-wrapper > .urlbar-icon:hover:active {
   background-color: transparent;
 }
 
+.urlbar-icon.last-visible,
+.urlbar-icon-wrapper.last-visible {
+  border-top-right-radius: var(--toolbarbutton-border-radius);
+  border-bottom-right-radius: var(--toolbarbutton-border-radius);
+}
+
+.urlbar-icon.last-visible:-moz-locale-dir(rtl),
+.urlbar-icon-wrapper.last-visible:-moz-locale-dir(rtl) {
+  border-top-left-radius: var(--toolbarbutton-border-radius);
+  border-bottom-left-radius: var(--toolbarbutton-border-radius);
+}
+
 .urlbar-go-button,
 .search-go-button {
   list-style-image: url("chrome://browser/skin/back.svg");
   width: 26px;
 }
 
 .urlbar-go-button:-moz-locale-dir(ltr),
 .search-go-button:-moz-locale-dir(ltr) {