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

--HG--
extra : rebase_source : 638106ab10ac6ba85d2877aca24149c928412617

browser/base/content/browser.css

@@ -666,6 +666,7 @@ html|input.urlbar-input[textoverflow]:not([focused]) {
 
 #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,

browser/base/content/browser.xul

@@ -856,6 +856,10 @@
                 <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"
@@ -869,6 +873,7 @@
                        onclick="FullZoom.reset();"
                        tooltip="dynamic-shortcut-tooltip"
                        hidden="true"/>
+                <box id="pageActionSeparator"/>
                 <image id="pageActionButton"
                        class="urlbar-icon"
                        tooltiptext="&pageActionButton.tooltip;"
@@ -888,10 +893,6 @@
                   </hbox>
                 </hbox>
               </hbox>
-              <hbox id="userContext-icons" hidden="true">
-                <label id="userContext-label"/>
-                <image id="userContext-indicator"/>
-              </hbox>
             </textbox>
         </toolbaritem>
 

browser/components/contextualidentity/content/usercontext.css

@@ -92,6 +92,7 @@
 }
 
 #userContext-label {
+  margin-inline-start: 0;
   margin-inline-end: 3px;
   color: var(--identity-tab-color);
 }

browser/themes/shared/urlbar-searchbar.inc.css

@@ -117,6 +117,41 @@
   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 */
@@ -257,7 +292,6 @@
 /* Zoom button */
 
 #urlbar-zoom-button {
-  margin: 0 3px;
   font-size: .8em;
   padding: 0 8px;
   border-radius: 1em;