Bug 1378560 - The order of items in the url bar should be (from right-to-left) bookmarks, page action menu. r=Gijs
authorDrew Willcoxon <adw@mozilla.com>
Thu, 24 Aug 2017 10:01:01 -0700
changeset 376717 12052e2c9fe6567e29da21ae8ddddfb3eb25b380
parent 376716 88dfc4e305fbda7365deaf65ba6ce764ac010617
child 376718 4c4093ead1b2d5b90d43d5497672308e6a2b11b6
push id94144
push userryanvm@gmail.com
push dateFri, 25 Aug 2017 00:21:50 +0000
treeherdermozilla-inbound@942d868646cf [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1378560
milestone57.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
browser/base/content/browser.css
browser/base/content/browser.xul
browser/components/contextualidentity/content/usercontext.css
browser/themes/shared/urlbar-searchbar.inc.css
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -661,16 +661,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 @@
                          class="urlbar-icon"
                          observes="bookmarkThisPageBroadcaster"/>
                   <hbox id="star-button-animatable-box">
                     <image id="star-button-animatable-image"
                            observes="bookmarkThisPageBroadcaster"/>
                   </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
@@ -112,16 +112,51 @@
 /* URL bar and page action buttons */
 
 #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;
@@ -252,17 +287,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"] {