Bug 1378560 - The order of items in the url bar should be (from right-to-left) bookmarks, page action menu. r?Gijs
MozReview-Commit-ID: 8StaNxrvryT
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -662,16 +662,17 @@ html|input.urlbar-input[textoverflow]:no
}
#DateTimePickerPanel[active="true"] {
-moz-binding: url("chrome://global/content/bindings/datetimepopup.xml#datetime-popup");
}
#urlbar[pageproxystate="invalid"] > #page-action-buttons > .urlbar-icon,
#urlbar[pageproxystate="invalid"] > #page-action-buttons > .urlbar-icon-wrapper > .urlbar-icon,
+#urlbar[pageproxystate="invalid"] > #page-action-buttons > #pageActionSeparator,
.urlbar-go-button[pageproxystate="valid"],
.urlbar-go-button:not([parentfocused="true"]),
#urlbar[pageproxystate="invalid"] > #identity-box > #blocked-permissions-container,
#urlbar[pageproxystate="invalid"] > #identity-box > #notification-popup-box,
#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon-labels {
visibility: collapse;
}
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -851,29 +851,34 @@
<label id="identity-icon-country-label" class="plain"/>
</hbox>
</box>
<box id="urlbar-display-box" align="center">
<label id="switchtab" class="urlbar-display urlbar-display-switchtab" value="&urlbar.switchToTab.label;"/>
<label id="extension" class="urlbar-display urlbar-display-extension" value="&urlbar.extension.label;"/>
</box>
<hbox id="page-action-buttons">
+ <hbox id="userContext-icons" hidden="true">
+ <label id="userContext-label"/>
+ <image id="userContext-indicator"/>
+ </hbox>
<image id="page-report-button"
class="urlbar-icon"
hidden="true"
tooltiptext="&pageReportIcon.tooltip;"
onmousedown="gPopupBlockerObserver.onReportButtonMousedown(event);"/>
<image id="reader-mode-button"
class="urlbar-icon"
hidden="true"
onclick="ReaderParent.buttonClick(event);"/>
<toolbarbutton id="urlbar-zoom-button"
onclick="FullZoom.reset();"
tooltip="dynamic-shortcut-tooltip"
hidden="true"/>
+ <box id="pageActionSeparator"/>
<image id="pageActionButton"
class="urlbar-icon"
tooltiptext="&pageActionButton.tooltip;"
onclick="BrowserPageActions.mainButtonClicked(event);"/>
<hbox id="star-button-box"
hidden="true"
class="urlbar-icon-wrapper"
context="pageActionPanelContextMenu"
@@ -883,20 +888,16 @@
<observes element="bookmarkThisPageBroadcaster" attribute="starred"/>
<observes element="bookmarkThisPageBroadcaster" attribute="tooltiptext"/>
</image>
<hbox id="star-button-animatable-box">
<image id="star-button-animatable-image"/>
</hbox>
</hbox>
</hbox>
- <hbox id="userContext-icons" hidden="true">
- <label id="userContext-label"/>
- <image id="userContext-indicator"/>
- </hbox>
</textbox>
</toolbaritem>
<toolbaritem id="search-container" title="&searchItem.title;"
align="center" class="chromeclass-toolbar-additional panel-wide-item"
cui-areatype="toolbar"
flex="100" persist="width" removable="true">
<searchbar id="searchbar" flex="1"/>
--- a/browser/components/contextualidentity/content/usercontext.css
+++ b/browser/components/contextualidentity/content/usercontext.css
@@ -87,16 +87,17 @@
}
#userContext-indicator {
height: 16px;
width: 16px;
}
#userContext-label {
+ margin-inline-start: 0;
margin-inline-end: 3px;
color: var(--identity-tab-color);
}
#userContext-icons {
-moz-box-align: center;
}
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -128,16 +128,51 @@
/* Page actions */
#page-action-buttons {
-moz-box-align: center;
/* Add more space between the last icon and the urlbar's edge. */
margin-inline-end: 3px;
}
+#pageActionSeparator {
+ /* This draws the separator the same way that #urlbar-display-box draws its
+ left and right borders, which end up looking like separators. It might not
+ be the best way in this case, but it makes sure that all these vertical
+ lines in the urlbar look the same: same height, vertical position, etc. */
+ border-inline-start: 1px solid var(--urlbar-separator-color);
+ border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
+ border-image-slice: 1;
+ width: 1px;
+ height: 28px;
+ visibility: hidden;
+}
+
+:root[uidensity=compact] #pageActionSeparator {
+ height: 24px;
+}
+
+:root[uidensity=touch] #pageActionSeparator {
+ height: 30px;
+}
+
+:not(#pageActionSeparator):not([hidden]) ~ #pageActionSeparator {
+ /* Show the separator between the page actions and other elements when at
+ least of the latter is shown. */
+ visibility: visible;
+ margin-left: 6px;
+ margin-right: 6px;
+}
+
+#userContext-icons,
+#urlbar-zoom-button {
+ margin-left: 6px;
+ margin-right: 6px;
+}
+
.urlbar-icon {
padding: 0 6px;
/* 16x16 icon with border-box sizing */
width: 28px;
height: 16px;
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: 0.6;
@@ -237,17 +272,16 @@
#page-report-button {
list-style-image: url(chrome://browser/skin/notification-icons/popup.svg);
}
/* Zoom button */
#urlbar-zoom-button {
- margin: 0 3px;
font-size: .8em;
padding: 0 8px;
border-radius: 1em;
background-color: hsla(0,0%,0%,.05);
border: 1px solid ThreeDLightShadow;
}
#urlbar-zoom-button[animate="true"] {