diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css
index ff13cf0cb415..8f706b0ec6e7 100644
--- a/browser/base/content/browser.css
+++ b/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,
diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul
index ee084b15bd50..a9b2093006e9 100644
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -856,6 +856,10 @@
+
+
+
+
+
-
-
-
-
diff --git a/browser/components/contextualidentity/content/usercontext.css b/browser/components/contextualidentity/content/usercontext.css
index 540c1f9ced3b..d5f846dfe44c 100644
--- a/browser/components/contextualidentity/content/usercontext.css
+++ b/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);
}
diff --git a/browser/themes/shared/urlbar-searchbar.inc.css b/browser/themes/shared/urlbar-searchbar.inc.css
index 61be55097477..e79e5281d8c0 100644
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/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;