1 files changed, 350 insertions, 0 deletions
diff --git a/browser/themes/shared/toolbarbuttons.css b/browser/themes/shared/toolbarbuttons.css
new file mode 100644
index 0000000000..0a51e9a19e
--- /dev/null
+++ b/browser/themes/shared/toolbarbuttons.css
@@ -0,0 +1,350 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root {
+  --toolbar-start-end-padding: 8px;
+  --toolbarbutton-outer-padding: 2px;
+  --toolbarbutton-inner-padding: 8px;
+
+  --toolbarbutton-hover-background: var(--button-hover-bgcolor);
+  --toolbarbutton-active-background: var(--button-active-bgcolor);
+
+  --toolbarseparator-color: color-mix(in srgb, currentColor 60%, transparent);
+
+  --bookmark-block-padding: 4px;
+
+  /* This default value of --toolbarbutton-height is defined to prevent
+     CSS errors for an invalid variable. The value should not get used,
+     as a more specific value should be set when the value will be used. */
+  --toolbarbutton-height: 0;
+}
+
+:root[uidensity=compact] {
+  --toolbarbutton-outer-padding: 3px;
+  --toolbarbutton-inner-padding: 6px;
+  --bookmark-block-padding: 1px;
+}
+
+:root[uidensity=touch] {
+  --toolbarbutton-inner-padding: 9px;
+  --bookmark-block-padding: 7px;
+}
+
+#TabsToolbar {
+  /* Override the inner padding to ensure the dimensions match the tabs, but also making sure
+     different types of buttons (combined-buttons-dropmarker or text) still look correct. */
+  --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2);
+}
+
+/* ::::: primary toolbar buttons ::::: */
+
+#tabbrowser-arrowscrollbox[scrolledtostart=true]::part(scrollbutton-up),
+#tabbrowser-arrowscrollbox[scrolledtoend=true]::part(scrollbutton-down),
+:root:not([customizing]) .toolbarbutton-1[disabled=true],
+/* specialcase the overflow and the hamburger button so they show up disabled in customize mode. */
+#nav-bar-overflow-button[disabled=true],
+#PanelUI-menu-button[disabled=true] {
+  opacity: 0.4;
+}
+
+.toolbarbutton-1 > .toolbarbutton-icon {
+  margin-inline-end: 0 !important;
+}
+
+.toolbarbutton-1 > .toolbarbutton-icon,
+.toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+  width: 16px;
+}
+
+.toolbarbutton-combined-buttons-dropmarker > .toolbarbutton-icon {
+  width: 12px;
+}
+
+#navigator-toolbox:not(:hover) #tabbrowser-arrowscrollbox:not([highlight])::part(scrollbutton-down) {
+  transition: 1s background-color ease-out;
+}
+
+#tabbrowser-arrowscrollbox[highlight]::part(scrollbutton-down) {
+  background-color: SelectedItem;
+}
+
+toolbar .toolbarbutton-1 {
+  appearance: none;
+  margin: 0;
+  padding: 0 var(--toolbarbutton-outer-padding);
+  -moz-box-pack: center;
+}
+
+#TabsToolbar .toolbarbutton-1 {
+  margin: 0 0 var(--tabs-navbar-shadow-size);
+}
+
+#tabbrowser-arrowscrollbox::part(scrollbutton-up),
+#tabbrowser-arrowscrollbox::part(scrollbutton-down) {
+  appearance: none;
+  background-clip: padding-box;
+  border: 4px solid transparent;
+  border-radius: calc(var(--tab-border-radius) + 4px);
+  margin: 0;
+  padding: 0 calc(var(--toolbarbutton-inner-padding) - 6px);
+}
+
+/*** Adds padding to end of toolbar while making that space click the first button ***/
+#PanelUI-menu-button {
+  padding-inline-end: var(--toolbar-start-end-padding);
+}
+
+toolbar .toolbarbutton-1 > .toolbarbutton-icon,
+toolbar .toolbarbutton-1 > .toolbarbutton-text,
+toolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
+  padding: var(--toolbarbutton-inner-padding);
+  border-radius: var(--toolbarbutton-border-radius);
+}
+
+#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
+#TabsToolbar .toolbarbutton-1 > .toolbarbutton-text,
+#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
+  border-radius: var(--tab-border-radius);
+}
+
+toolbar .toolbarbutton-1 > .toolbarbutton-icon {
+  /* horizontal padding + actual icon width */
+  width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
+  height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
+}
+
+toolbar .toolbarbutton-combined-buttons-dropmarker > .toolbarbutton-icon {
+  /* same height as regular buttons, but narrower, and for a 12x12 image */
+  padding-inline: 2px;
+  padding-block: calc(var(--toolbarbutton-inner-padding) + (16px - 12px) / 2);
+  width: calc(2 * 2px + 12px);
+}
+
+toolbar .toolbarbutton-1 > .toolbarbutton-text {
+  padding-top: calc(var(--toolbarbutton-inner-padding) - 1px);
+  padding-bottom: 0;
+  /* To make the hover feedback line up with sibling buttons, it needs the same
+   * height as the button icons and the same vertical padding, but as a minimum,
+   * because otherwise an increase in text sizes would break things.
+   */
+  min-height: calc(16px + 2 * var(--toolbarbutton-inner-padding));
+}
+
+@media (-moz-platform: macos) {
+  toolbar .toolbarbutton-1 > .toolbarbutton-text {
+    padding-top: calc(var(--toolbarbutton-inner-padding) + 1px);
+  }
+}
+
+toolbar .toolbaritem-combined-buttons {
+  margin-inline: 2px;
+}
+
+toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 {
+  padding-inline: 0;
+}
+
+toolbar .toolbaritem-combined-buttons:not(:hover) > separator {
+  content: "";
+  display: -moz-box;
+  width: 1px;
+  height: 16px;
+  margin-inline-end: -1px;
+  background-image: linear-gradient(currentColor 0, currentColor 100%);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 1px 16px;
+  opacity: .2;
+}
+
+toolbar[brighttext] .toolbaritem-combined-buttons > separator {
+  opacity: .3;
+}
+
+#tabbrowser-arrowscrollbox:not([scrolledtostart=true])::part(scrollbutton-up):hover,
+#tabbrowser-arrowscrollbox:not([scrolledtoend=true])::part(scrollbutton-down):hover,
+toolbarbutton.bookmark-item:not(.subviewbutton, [disabled=true], [open]):hover,
+toolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover > .toolbarbutton-icon,
+toolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover > .toolbarbutton-text,
+toolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover > .toolbarbutton-badge-stack {
+  background-color: var(--toolbarbutton-hover-background);
+  color: inherit;
+}
+
+#tabbrowser-arrowscrollbox:not([scrolledtostart=true])::part(scrollbutton-up):hover:active,
+#tabbrowser-arrowscrollbox:not([scrolledtoend=true])::part(scrollbutton-down):hover:active,
+toolbarbutton.bookmark-item:hover:active:not(.subviewbutton, [disabled="true"]),
+toolbarbutton.bookmark-item[open="true"],
+toolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active) > .toolbarbutton-icon,
+toolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active) > .toolbarbutton-text,
+toolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
+  background-color: var(--toolbarbutton-active-background);
+  color: inherit;
+}
+
+/* Keyboard focus styling */
+.titlebar-button:focus-visible,
+findbar toolbarbutton.tabbable:focus-visible,
+toolbarbutton.bookmark-item:not(.subviewbutton):focus-visible,
+toolbar .toolbarbutton-1:focus-visible > .toolbarbutton-icon,
+toolbar .toolbarbutton-1:focus-visible > .toolbarbutton-text,
+toolbar .toolbarbutton-1:focus-visible > .toolbarbutton-badge-stack {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-inset);
+}
+
+toolbar .toolbarbutton-1:focus-visible {
+  outline: none;
+}
+
+/* bookmarks menu button */
+
+/* ::::: bookmark buttons ::::: */
+
+#personal-toolbar-empty-description,
+toolbarbutton.bookmark-item:not(.subviewbutton) {
+  margin: 2px;
+  padding: var(--bookmark-block-padding) 4px;
+}
+
+#PersonalToolbar .toolbarbutton-1 {
+  /* These should match the sizing of the bookmark-items in the inline axis
+   * (padding and margin, respectively) */
+  --toolbarbutton-inner-padding: 4px;
+  --toolbarbutton-outer-padding: 2px;
+  margin-block: 2px;
+}
+
+:root[uidensity=compact] toolbarbutton.bookmark-item:not(.subviewbutton) {
+  margin-inline: 1px;
+}
+
+:root[uidensity=compact] #PersonalToolbar .toolbarbutton-1 {
+  --toolbarbutton-outer-padding: 1px;
+}
+
+/* Allow icons to grow with the toolbar to match bookmark item heights
+ *
+ * NOTE(emilio): This matches pre-existing behavior but it's inconsistent with
+ * how e.g. combined items work, and maybe we should just remove this.
+ */
+#PersonalToolbar .toolbarbutton-1 {
+  -moz-box-align: stretch;
+}
+#PersonalToolbar .toolbarbutton-1 > .toolbarbutton-icon {
+  height: auto;
+}
+#PersonalToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
+  align-items: center;
+}
+
+toolbarbutton.bookmark-item:not(.subviewbutton) {
+  border-radius: var(--toolbarbutton-border-radius);
+}
+
+toolbarbutton.bookmark-item:not(.subviewbutton) {
+  max-width: 13em;
+  appearance: none;
+}
+
+/**
+ * Ensure that the description is always at least as big as a bookmarks item,
+ * where its icon is 16px (which may be more than inline text height);
+ */
+#personal-toolbar-empty-description {
+  min-height: calc(16px + 2 * var(--bookmark-block-padding));
+}
+
+#bookmarks-toolbar-placeholder {
+  max-width: unset;
+}
+
+.bookmark-item > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* Force the display of the label for bookmarks */
+.bookmark-item > .toolbarbutton-text {
+  display: -moz-box !important;
+}
+
+#personal-bookmarks,
+#PlacesToolbar,
+#PlacesToolbarItems {
+  min-width: 0;
+}
+
+#PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon {
+  margin-inline-end: 0;
+}
+
+#managed-bookmarks > .toolbarbutton-icon,
+#bookmarks-toolbar-placeholder > .toolbarbutton-icon,
+#PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon[label]:not([label=""]),
+#PersonalToolbar #import-button > .toolbarbutton-icon,
+#OtherBookmarks.bookmark-item[container] > .toolbarbutton-icon {
+  margin-inline-end: 4px;
+}
+
+/* Separators */
+
+/* Override the toolkit styles, and make sure separators are draggable by
+ * making them wider, and using a pseudo-element for the visual separator. */
+#PlacesToolbarItems > toolbarseparator {
+  margin: 0;
+  padding-inline: 4px;
+  appearance: none;
+}
+
+/* When adjacent to the bookmarks items, give the bookmarks items a leading separator. */
+#PlacesToolbarItems > toolbarseparator::before {
+  content: "";
+  display: block;
+  border-inline-start: 1px solid;
+  border-image-source: linear-gradient(
+    transparent 3.75px,
+    var(--toolbarseparator-color) 3.75px,
+    var(--toolbarseparator-color) calc(100% - 3.75px),
+    transparent calc(100% - 3.75px) );
+  border-image-slice: 1;
+}
+
+@media (min-resolution: 2dppx) {
+  #PlacesToolbarItems > toolbarseparator::before {
+    border-inline-start-width: 0.5px;
+  }
+}
+
+/* The bookmarks toolbar is smaller than the other toolbars, so we
+ * need to override the badge position to not be cut off. */
+#PersonalToolbar .toolbarbutton-badge {
+  margin-top: -1px !important;
+}
+
+:root[uidensity=touch] #PersonalToolbar .toolbarbutton-badge {
+  margin-top: -4px !important;
+}
+
+/* Remove a pixel of margin on the end so that the badge doesn't
+ * overflow the toolbar and push the button into the overflow menu. */
+:root[uidensity=compact] .toolbarbutton-badge {
+  margin-inline-end: -7px !important;
+}
+
+/* Alternative style for .toolbarbutton-badge used by CFR notifications */
+.toolbarbutton-badge.feature-callout {
+  width: 14px;
+  height: 14px;
+  min-width: auto;
+  box-shadow: none;
+  border: none;
+  padding: 0;
+  display: block;
+  margin: -7px 0 0 !important;
+  margin-inline-end: -6px !important;
+  background: url(chrome://global/skin/icons/badge-blue.svg);
+}