Bug 1399235 - The corners of the last urlbar icon overlap the urlbar's rounded corners. r?Gijs
MozReview-Commit-ID: JWxzoe0RaUA
--- 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) {