second part of syncing LCARStrek with Firefox 55 browser windows theme changes
authorRobert Kaiser <kairo@kairo.at>
Sun, 13 Aug 2017 23:48:00 +0000 (01:48 +0200)
committerRobert Kaiser <kairo@kairo.at>
Sun, 13 Aug 2017 23:48:00 +0000 (01:48 +0200)
17 files changed:
LCARStrek/browser/aboutNetError.css
LCARStrek/browser/browser.css
LCARStrek/browser/customizableui/panelUI.css
LCARStrek/browser/download.svg [new file with mode: 0644]
LCARStrek/browser/downloads/downloads.css
LCARStrek/browser/downloads/indicator.css
LCARStrek/browser/error-pages.css
LCARStrek/browser/fxa/sync-illustration.svg [changed mode: 0644->0755]
LCARStrek/browser/newtab/newTab.css
LCARStrek/browser/notification-icons.svg
LCARStrek/browser/preferences/in-content-old/preferences.css
LCARStrek/browser/preferences/in-content/icons.svg
LCARStrek/browser/preferences/in-content/preferences.css
LCARStrek/browser/privatebrowsing/aboutPrivateBrowsing.css
LCARStrek/browser/privatebrowsing/check.svg [deleted file]
LCARStrek/browser/searchbar.css
LCARStrek/browser/sidebar/close.svg [new file with mode: 0644]

index 3042a671644567350507a4f165bdcd4a23e953c9..bbaa0a8050fb5dd2bf9155ca71384dc5b1d7dce4 100644 (file)
@@ -4,16 +4,8 @@
 
 @import url("chrome://browser/skin/error-pages.css");
 
-body {
-  background-image: linear-gradient(-45deg, #A09090,     #A09090 33%,
-                                            #000000 33%, #000000 66%,
-                                            #A09090 66%, #A09090);
-}
-
-body.certerror {
-  background-image: linear-gradient(-45deg, #FFCF00,     #FFCF00 33%,
-                                            #000000 33%, #000000 66%,
-                                            #FFCF00 66%, #FFCF00);
+:root {
+  --exception-button-container-background: #A09090;
 }
 
 body.captiveportal .title {
@@ -57,11 +49,6 @@ body:not(.neterror) #netErrorAndCaptivePortalButtonContainer {
 
 #errorTryAgain {
   margin-top: 1.2em;
-  min-width: 150px;
-}
-
-#returnButton {
-  min-width: 250px;
 }
 
 #advancedButton {
@@ -88,14 +75,10 @@ body:not(.neterror) #advancedButton {
   display: none;
 }
 
-.container {
-  position: relative;
-}
-
 #advancedPanelContainer {
   position: absolute;
-  padding: 24px 0;
   width: 100%;
+  left: 0;
 }
 
 .advanced-panel {
@@ -103,10 +86,9 @@ body:not(.neterror) #advancedButton {
   display: none;
   background-color: var(--in-content-box-background);
   border: 1px var(--in-content-box-border-color) solid;
-  /* Don't use top padding because the default p style has top padding, and it
-   * makes the overall div look uneven */
-  padding: 0 12px 12px 12px;
-  font-size: 0.9em;
+  margin: 48px auto;
+  min-width: var(--in-content-container-min-width);
+  max-width: var(--in-content-container-max-width);
 }
 
 #overrideWeakCryptoPanel {
@@ -138,6 +120,7 @@ span#hostname {
 }
 
 #badCertTechnicalInfo {
+  margin: 3em;
   overflow: auto;
   white-space: pre-wrap;
 }
@@ -151,10 +134,10 @@ span#hostname {
   background-color: var(--in-content-box-background) !important;
   border-top: 1px solid var(--in-content-border-color);
   position: absolute;
-  left: 0%;
-  top: 100%;
-  width: 65%;
+  width: 100%;
   padding: 1em 17.5%;
+  box-sizing: border-box;
+
 }
 
 #certificateErrorText {
@@ -167,3 +150,10 @@ span#hostname {
   color: var(--in-content-page-color);
   text-decoration: none;
 }
+
+.exceptionDialogButtonContainer {
+  background-color: var(--exception-button-container-background);
+  display: flex;
+  justify-content: end;
+  padding: 10px;
+}
index e9cb07f3efd5ea7a4a5e721ae3d48bebde41fb91..376fa833168c8aed199d3ad2392f3116aa7077b4 100644 (file)
@@ -425,41 +425,6 @@ menubar {
 
 /* ::::: bookmark buttons ::::: */
 
-toolbarbutton.bookmark-item:not(.subviewbutton),
-#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
-/*  margin: 0;
-  padding: 2px 3px;
-  -moz-appearance: none;
-  border: 1px solid transparent;*/
-}
-
-toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]) {
-/*  border-color: var(--toolbarbutton-hover-bordercolor);
-  background: var(--toolbarbutton-hover-background);*/
-}
-
-toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),toolbarbutton.bookmark-item[open="true"] {
-/*  border-color: var(--toolbarbutton-active-bordercolor);
-  box-shadow: var(--toolbarbutton-active-boxshadow);
-  background: var(--toolbarbutton-active-background);*/
-}
-
-.bookmark-item > .toolbarbutton-icon,
-#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
-  width: 16px;
-  height: 16px;
-  margin-inline-start: 1px;
-  margin-inline-end: 2px;
-  margin-top: 1px;
-  margin-bottom: 1px;
-}
-
-/* Force the display of the label for bookmarks */
-.bookmark-item > .toolbarbutton-text,
-#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
-  display: -moz-box !important;
-}
-
 .bookmark-item > .toolbarbutton-menu-dropmarker {
   display: none;
 }
@@ -474,6 +439,8 @@ toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-p
   list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
 }
 
+/* === BEGIN bookmarked-notification.inc.css === */
+
 /* ----- BOOKMARK STAR ANIMATION ----- */
 
 @keyframes animation-bookmarkAdded {
@@ -526,6 +493,7 @@ toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-p
 
 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
   list-style-image: none !important;
+/*  fill: transparent;*/
 }
 
 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
@@ -535,6 +503,8 @@ toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-p
   animation-timing-function: ease-out;
 }
 
+/* === END bookmarked-notification.inc.css === */
+
 /* ::::: bookmark menus ::::: */
 
 menu.bookmark-item,
@@ -618,3925 +588,3586 @@ menuitem.bookmark-item {
   opacity: 0.7;
 }
 
-/* ::::: primary toolbar buttons ::::: */
-
 /* === BEGIN toolbarbuttons.inc.css === */
 
-/* Whole section of this included file: */
-:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
-          #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
-          #social-share-button, #open-file-button, #find-button, #developer-button,
-          #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
-          #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
-          #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
-          #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu),
-#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-  list-style-image: url("chrome://browser/skin/ToolbarFx.png");
-}
+/* ::::: primary toolbar buttons ::::: */
 
-#back-button {
-  -moz-image-region: rect(0, 36px, 18px, 18px);
+.toolbarbutton-1:not([type="menu-button"]) {
+  -moz-box-orient: vertical;
 }
 
-#back-button:hover:not([disabled="true"]) {
-  -moz-image-region: rect(18px, 36px, 36px, 18px);
+.toolbarbutton-1,
+.toolbarbutton-1 > .toolbarbutton-menubutton-button {
+/*  min-width: 36px;
+  min-height: 36px;*/
 }
 
-#back-button[disabled="true"] {
-  -moz-image-region: rect(36px, 36px, 54px, 18px);
+.toolbarbutton-1,
+.toolbarbutton-1 > .toolbarbutton-menubutton-button,
+.toolbarbutton-1[disabled="true"]:hover:active,
+.toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
+  padding: 1px 2px;
 }
 
-#forward-button {
-  -moz-image-region: rect(0, 72px, 18px, 54px);
+.toolbarbutton-1:hover:active,
+.toolbarbutton-1[open="true"],
+.toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
+  padding-top: 2px;
+  padding-bottom: 0px;
+  padding-inline-start: 3px;
+  padding-inline-end: 1px;
 }
 
-#forward-button:hover:not([disabled="true"]) {
-  -moz-image-region: rect(18px, 72px, 36px, 54px);
+#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
+#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
+#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
+#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
+#main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
 }
 
-#forward-button[disabled="true"] {
-  -moz-image-region: rect(36px, 72px, 54px, 54px);
+.toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
+.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
 }
 
-#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
-#forward-button:-moz-locale-dir(rtl) {
-  transform: scaleX(-1);
+toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
+toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
 }
 
-#home-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 126px, 18px, 108px);
+.toolbarbutton-1 > .toolbarbutton-icon,
+.toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
 }
 
-#home-button[cui-areatype="toolbar"]:hover {
-  -moz-image-region: rect(18px, 126px, 36px, 108px);
+.findbar-button,
+#nav-bar .toolbarbutton-1,
+#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
 }
 
-#bookmarks-menu-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 144px, 18px, 126px);
+#nav-bar .toolbarbutton-1:not([type=menu-button]),
+#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
+#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
 }
 
-#bookmarks-menu-button[cui-areatype="toolbar"]:hover,
-#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
-  -moz-image-region: rect(18px, 144px, 36px, 126px);
+#nav-bar #PanelUI-menu-button {
+/*  padding-inline-start: 7px;
+  padding-inline-end: 5px;*/
 }
 
-/* When "new tab" page shows up, the menubutton-button (star button) is disabled */
-#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
-  -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
-  background-color: transparent !important;
+#nav-bar .toolbarbutton-1[type=panel],
+#nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
+/*  padding-left: 5px;
+  padding-right: 5px;*/
 }
 
-#bookmarks-menu-button[cui-areatype="toolbar"][starred] {
-  -moz-image-region: rect(0, 162px, 18px, 144px);
+#nav-bar .toolbarbutton-1 > menupopup {
+/*  margin-top: -3px;*/
 }
 
-#bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
-#bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
-#bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
-  /* When starred and clicked (for edit/delete dialog),
-   * then only the menubutton-button itself is open, but not the whole menubutton. */
-  -moz-image-region: rect(18px, 162px, 36px, 144px);
+#nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
+  margin-top: -4px;
 }
 
-#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-  -moz-image-region: rect(0, 630px, 18px, 612px);
+#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
+/*  padding-inline-end: 0;*/
 }
 
-#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
-  padding: 1px;
-  -moz-box-align: center;
+#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
+/*  padding-inline-start: 0;
+  -moz-box-align: center;*/
 }
 
-#bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
-#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-  -moz-image-region: rect(18px, 630px, 36px, 612px);
+.findbar-button > .toolbarbutton-text,
+toolbarbutton.bookmark-item:not(.subviewbutton),
+#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
+#nav-bar .toolbarbutton-1 > .toolbarbutton-text,
+#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
+#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
+#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
+/*  padding: 2px 6px;
+  border: 1px solid;
+  border-color: transparent;
+  transition-property: background-color, border-color;
+  transition-duration: 150ms;*/
+}
+/*
+#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon,
+#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack,
+#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
+   padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px;
 }
+*/
 
-#bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
-#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
-  padding-top: 2px;
-  padding-bottom: 0px;
-  padding-inline-start: 2px;
-  padding-inline-end: 0px;
+/* Help SDK icons fit: */
+toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
+toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+  width: 16px;
 }
 
-#history-panelmenu[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 180px, 18px, 162px);
+#nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
+  /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
+  width: 32px;
 }
 
-#history-panelmenu[cui-areatype="toolbar"]:hover,
-#history-panelmenu[cui-areatype="toolbar"][open="true"] {
-  -moz-image-region: rect(18px, 180px, 36px, 162px);
+#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
+#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
+#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon,
+#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
+#nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
+/*  padding-inline-end: 17px;*/
 }
 
-#downloads-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 198px, 18px, 180px);
+#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
+#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon {
+  /* horizontal padding + border + icon width */
+/*  max-width: 43px;*/
 }
 
-#downloads-button[cui-areatype="toolbar"]:hover,
-#downloads-button[cui-areatype="toolbar"][open="true"] {
-  -moz-image-region: rect(18px, 198px, 36px, 180px);
+#nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
 }
 
-#add-ons-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 216px, 18px, 198px);
+#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
 }
 
-#add-ons-button[cui-areatype="toolbar"]:hover {
-  -moz-image-region: rect(18px, 216px, 36px, 198px);
+#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
 }
 
-#open-file-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 234px, 18px, 216px);
+#nav-bar .toolbaritem-combined-buttons {
+/*  margin-left: 2px;
+  margin-right: 2px;*/
 }
 
-#open-file-button[cui-areatype="toolbar"]:hover {
-  -moz-image-region: rect(18px, 234px, 36px, 216px);
+#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
+/*  padding-left: 0;
+  padding-right: 0;*/
 }
 
-#save-page-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 252px, 18px, 234px);
+#nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
+#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true]) + .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true])::before {
+/*
+  content: "";
+  display: -moz-box;
+  width: 1px;
+  height: 16px;
+  margin-inline-end: -1px;
+*/
 }
 
-#save-page-button[cui-areatype="toolbar"]:hover {
-  -moz-image-region: rect(18px, 252px, 36px, 234px);
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
 }
 
-#sync-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 792px, 18px, 774px);
+.findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
+toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]),
+#nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
+#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
+#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
+#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
+#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
+#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
+#nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
 }
 
-#sync-button[cui-areatype="toolbar"]:hover {
-  -moz-image-region: rect(18px, 792px, 36px, 774px);
+.findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
+toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),
+toolbarbutton.bookmark-item[open="true"],
+#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
+#nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
+#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
+#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
+#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
 }
 
-#containers-panelmenu[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 810px, 18px, 792px);
+#TabsToolbar .toolbarbutton-1,
+#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
+.tabbrowser-arrowscrollbox > .scrollbutton-up,
+.tabbrowser-arrowscrollbox > .scrollbutton-down {
 }
 
-#containers-panelmenu[cui-areatype="toolbar"]:hover {
-  -moz-image-region: rect(18px, 810px, 36px, 792px);
+#TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
+#TabsToolbar .toolbarbutton-1[open],
+#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
+.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
+.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
 }
 
-#feed-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 288px, 18px, 270px);
-}
+/* unified back/forward button */
 
-#feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
-#feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
-  -moz-image-region: rect(18px, 288px, 36px, 270px);
+#forward-button {
+  -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
 }
 
-#feed-button[cui-areatype="toolbar"][disabled="true"] {
-  -moz-image-region: rect(36px, 288px, 54px, 270px);
+#forward-button > menupopup {
+  margin-top: 1px !important;
 }
 
-#social-share-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0px, 306px, 18px, 288px);
+#forward-button > .toolbarbutton-icon {
+  background-clip: padding-box !important;
+  /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
+  /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
 }
 
-#social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
-#social-share-button[cui-areatype="toolbar"][open="true"] {
-  -moz-image-region: rect(18px, 306px, 36px, 288px);
+#forward-button {
+  margin-inline-start: -4px !important;
+  padding-left: 5px;
+  padding-right: 5px;
+  margin-top: 3px;
+  margin-bottom: 3px;
+  border-radius: 0 10000px 10000px 0;
+/*  max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
 }
 
-#social-share-button[cui-areatype="toolbar"][disabled="true"] {
-  -moz-image-region: rect(36px, 306px, 54px, 288px);
+#forward-button:-moz-locale-dir(rtl) {
+  border-radius: 10000px 0 0 10000px;
 }
 
-#characterencoding-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 324px, 18px, 306px);
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
+  transition: margin-left 150ms ease-out;
 }
 
-#characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
-#characterencoding-button[cui-areatype="toolbar"][open="true"] {
-  -moz-image-region: rect(18px, 324px, 36px, 306px);
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
+  margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
 }
 
-#characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
-  -moz-image-region: rect(36px, 324px, 54px, 306px);
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
+  /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
+  transition-delay: 100s;
 }
 
-#new-window-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 342px, 18px, 324px);
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
+  /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
+  margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
 }
 
-#new-window-button[cui-areatype="toolbar"]:hover {
-  -moz-image-region: rect(18px, 342px, 36px, 324px);
+#back-button {
+/*  padding-top: 3px !important;
+  padding-bottom: 3px !important;
+  padding-inline-start: 5px !important;
+  padding-inline-end: 0 !important;*/
+  position: relative;
+  z-index: 1;
+  border-radius: 10000px;
+  width: 30px;
+  height: 30px;
+  margin-top: -2px;
+  margin-bottom: -2px;
 }
 
-#e10s-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 342px, 18px, 324px);
+#back-button:-moz-locale-dir(rtl) {
 }
 
-#e10s-button[cui-areatype="toolbar"]:hover {
-  -moz-image-region: rect(18px, 342px, 36px, 324px);
+#back-button > menupopup {
+  margin-top: -1px !important;
 }
 
-#e10s-button > .toolbarbutton-icon {
-  transform: scaleY(-1);
+#back-button > .toolbarbutton-icon {
+  border-radius: 10000px !important;
+  background-clip: padding-box !important;
+/*  background-color: hsla(210,25%,98%,.08) !important;
+  padding: 6px !important;
+  border-style: none !important;
+  box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
+              0 0 0 1px hsla(210,4%,10%,.25);*/
+  transition-property: background-color, box-shadow !important;
+  transition-duration: 250ms !important;
 }
 
-#new-tab-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 360px, 18px, 342px);
+#back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
+/*  background-color: hsla(210,4%,10%,.08) !important;*/
 }
 
-#new-tab-button[cui-areatype="toolbar"]:hover {
-  -moz-image-region: rect(18px, 360px, 36px, 342px);
+#back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
+#back-button[open="true"] > .toolbarbutton-icon {
+/*  background-color: hsla(210,4%,10%,.12) !important;
+  box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
+              0 0 0 1px hsla(210,4%,10%,.25),
+              0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
 }
 
-#privatebrowsing-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 378px, 18px, 360px);
+#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
+  transform: scaleX(-1);
 }
 
-#privatebrowsing-button[cui-areatype="toolbar"]:hover {
-  -moz-image-region: rect(18px, 378px, 36px, 360px);
+#forward-button > .toolbarbutton-menu-dropmarker,
+#back-button > .toolbarbutton-menu-dropmarker {
+  display: none;
 }
 
-#find-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 396px, 18px, 378px);
+/*
+.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
+.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://browser/skin/menu-back.png") !important;
 }
 
-#find-button[cui-areatype="toolbar"]:hover {
-  -moz-image-region: rect(18px, 396px, 36px, 378px);
+.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
+.unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
 }
 
-#print-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 414px, 18px, 396px);
+#home-button.bookmark-item {
+  list-style-image: url("chrome://browser/skin/Toolbar.png");
 }
 
-#print-button[cui-areatype="toolbar"]:hover {
-  -moz-image-region: rect(18px, 414px, 36px, 396px);
+#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
+#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
+#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
+#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
+#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
+#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
+#home-button.bookmark-item:-moz-lwtheme-brighttext {
+  position: relative;
+  z-index: 1;
+  list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
 }
 
-#fullscreen-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 432px, 18px, 414px);
+#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
+#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
+  list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
 }
+*/
 
-#fullscreen-button[cui-areatype="toolbar"]:hover {
-  -moz-image-region: rect(18px, 432px, 36px, 414px);
+#downloads-button > .toolbarbutton-icon {
+  margin: 0;
 }
 
-#developer-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 450px, 18px, 432px);
-}
+/* tabview menu item */
 
-#developer-button[cui-areatype="toolbar"]:hover,
-#developer-button[cui-areatype="toolbar"][open="true"] {
-  -moz-image-region: rect(18px, 450px, 36px, 432px);
+#menu_tabview {
+  list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
+  -moz-image-region: rect(1px, 89px, 17px, 73px);
 }
 
-#preferences-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 468px, 18px, 450px);
+#menu_tabview[groups="0"] {
+  -moz-image-region: rect(1px, 17px, 17px, 1px);
 }
 
-#preferences-button[cui-areatype="toolbar"]:hover {
-  -moz-image-region: rect(18px, 468px, 36px, 450px);
+#menu_tabview[groups="1"] {
+  -moz-image-region: rect(1px, 35px, 17px, 19px);
 }
 
-#PanelUI-menu-button {
-  -moz-image-region: rect(0, 486px, 18px, 468px);
+#menu_tabview[groups="2"] {
+  -moz-image-region: rect(1px, 53px, 17px, 37px);
 }
 
-#PanelUI-menu-button:hover,
-#PanelUI-menu-button[open="true"] {
-  -moz-image-region: rect(18px, 486px, 36px, 468px);
+#menu_tabview[groups="3"] {
+  -moz-image-region: rect(1px, 71px, 17px, 55px);
 }
 
-#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
-  -moz-image-region: rect(0, 504px, 18px, 486px);
-}
+/* zoom control text (reset) button special case: */
 
-#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
-  -moz-image-region: rect(18px, 504px, 36px, 486px);
+#nav-bar #zoom-reset-button > .toolbarbutton-text {
+  /* To make this line up with the icons, it needs the same height (18px) +
+   * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
+   * increase in text sizes would break things...
+   */
+  min-height: 20px;
 }
 
-#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
-  -moz-image-region: rect(36px, 504px, 54px, 486px);
+toolbarbutton.bookmark-item:not(.subviewbutton),
+#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
+/*  margin: 0;
+  padding: 2px 3px;
+  -moz-appearance: none;
+  border: 1px solid transparent;*/
 }
 
-#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
-  -moz-image-region: rect(0, 522px, 18px, 504px);
+toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]) {
+/*  border-color: var(--toolbarbutton-hover-bordercolor);
+  background: var(--toolbarbutton-hover-background);*/
 }
 
-#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
-  -moz-image-region: rect(18px, 522px, 36px, 504px);
+toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),toolbarbutton.bookmark-item[open="true"] {
+/*  border-color: var(--toolbarbutton-active-bordercolor);
+  box-shadow: var(--toolbarbutton-active-boxshadow);
+  background: var(--toolbarbutton-active-background);*/
 }
 
-#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
-  -moz-image-region: rect(36px, 522px, 54px, 504px);
+.bookmark-item > .toolbarbutton-icon,
+#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+  margin-inline-start: 1px;
+  margin-inline-end: 2px;
+  margin-top: 1px;
+  margin-bottom: 1px;
 }
 
-#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
-  -moz-image-region: rect(0, 540px, 18px, 522px);
+/* Force the display of the label for bookmarks */
+.bookmark-item > .toolbarbutton-text,
+#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
+  display: -moz-box !important;
 }
 
-#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
-  -moz-image-region: rect(18px, 540px, 36px, 522px);
-}
+/* === END toolbarbuttons.inc.css === */
 
-#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
-  -moz-image-region: rect(36px, 540px, 54px, 522px);
+/* === BEGIN toolbarbutton-icons.inc.css === */
+
+:root {
+  --toolbarbutton-icon-fill: #FFCF00;
+  --toolbarbutton-icon-fill-inverted: #000000;
+  --toolbarbutton-icon-fill-disabled: #8050B0;
+  --toolbarbutton-icon-fill-attention: #008484;
 }
 
-#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
-  -moz-image-region: rect(0, 558px, 18px, 540px);
+/* Whole section of this included file: */
+:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
+          #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
+          #social-share-button, #open-file-button, #find-button, #developer-button,
+          #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
+          #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
+          #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
+          #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu),
+#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+  list-style-image: url("chrome://browser/skin/ToolbarFx.png");
 }
 
-#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
-  -moz-image-region: rect(18px, 558px, 36px, 540px);
+#back-button {
+  -moz-image-region: rect(0, 36px, 18px, 18px);
 }
 
-#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
-  -moz-image-region: rect(36px, 558px, 54px, 540px);
+#back-button:hover:not([disabled="true"]) {
+  -moz-image-region: rect(18px, 36px, 36px, 18px);
 }
 
-#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
-  -moz-image-region: rect(0, 576px, 18px, 558px);
+#back-button[disabled="true"] {
+  -moz-image-region: rect(36px, 36px, 54px, 18px);
 }
 
-#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
-  -moz-image-region: rect(18px, 576px, 36px, 558px);
-}
-
-#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
-  -moz-image-region: rect(36px, 576px, 54px, 558px);
+#forward-button {
+  -moz-image-region: rect(0, 72px, 18px, 54px);
 }
 
-#nav-bar-overflow-button {
-  -moz-image-region: rect(0, 612px, 18px, 594px);
+#forward-button:hover:not([disabled="true"]) {
+  -moz-image-region: rect(18px, 72px, 36px, 54px);
 }
 
-#nav-bar-overflow-button:hover,
-#nav-bar-overflow-button[open="true"] {
-  -moz-image-region: rect(18px, 612px, 36px, 594px);
+#forward-button[disabled="true"] {
+  -moz-image-region: rect(36px, 72px, 54px, 54px);
 }
 
-#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
+#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
+#forward-button:-moz-locale-dir(rtl) {
   transform: scaleX(-1);
 }
 
-#nav-bar-overflow-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
-  display: none;
+#home-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 126px, 18px, 108px);
 }
 
-#tabview-button {
-  -moz-image-region: rect(0, 648px, 18px, 630px);
+#home-button[cui-areatype="toolbar"]:hover {
+  -moz-image-region: rect(18px, 126px, 36px, 108px);
 }
 
-#tabview-button:hover {
-  -moz-image-region: rect(18px, 648px, 36px, 630px);
+#bookmarks-menu-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 144px, 18px, 126px);
 }
 
-#email-link-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 666px, 18px, 648px);
+#bookmarks-menu-button[cui-areatype="toolbar"]:hover,
+#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
+  -moz-image-region: rect(18px, 144px, 36px, 126px);
 }
 
-#email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
-  -moz-image-region: rect(18px, 666px, 36px, 648px);
+/* When "new tab" page shows up, the menubutton-button (star button) is disabled */
+#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
+  -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
+  background-color: transparent !important;
 }
 
-#email-button[cui-areatype="toolbar"][disabled="true"] {
-  -moz-image-region: rect(36px, 666px, 54px, 648px);
+#bookmarks-menu-button[cui-areatype="toolbar"][starred] {
+  -moz-image-region: rect(0, 162px, 18px, 144px);
 }
 
-#sidebar-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 684px, 18px, 666px);
+#bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
+#bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
+#bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
+  /* When starred and clicked (for edit/delete dialog),
+   * then only the menubutton-button itself is open, but not the whole menubutton. */
+  -moz-image-region: rect(18px, 162px, 36px, 144px);
 }
 
-#sidebar-button[cui-areatype="toolbar"]:hover {
-  -moz-image-region: rect(18px, 684px, 36px, 666px);
+#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+  -moz-image-region: rect(0, 630px, 18px, 612px);
 }
 
-#panic-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 702px, 18px, 684px);
+#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
+  padding: 1px;
+  -moz-box-align: center;
 }
 
-#panic-button[cui-areatype="toolbar"]:hover,
-#panic-button[cui-areatype="toolbar"][open] {
-  -moz-image-region: rect(18px, 702px, 36px, 684px);
+#bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
+#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+  -moz-image-region: rect(18px, 630px, 36px, 612px);
 }
 
-#panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
-  transform: scaleX(-1);
+#bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
+#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
+  padding-top: 2px;
+  padding-bottom: 0px;
+  padding-inline-start: 2px;
+  padding-inline-end: 0px;
 }
 
-#webide-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 738px, 18px, 720px);
+#history-panelmenu[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 180px, 18px, 162px);
 }
 
-#webide-button[cui-areatype="toolbar"]:hover {
-  -moz-image-region: rect(18px, 738px, 36px, 720px);
+#history-panelmenu[cui-areatype="toolbar"]:hover,
+#history-panelmenu[cui-areatype="toolbar"][open="true"] {
+  -moz-image-region: rect(18px, 180px, 36px, 162px);
 }
 
-#pocket-button {
-  fill: currentColor !important;
+#downloads-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 198px, 18px, 180px);
 }
 
-/* === END toolbarbuttons.inc.css === */
-
-/* === BEGIN menupanel.inc.css === */
-
-/* Menu panel and palette styles */
-
-toolbaritem[sdkstylewidget="true"] > toolbarbutton,
-:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
-          #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
-          #social-share-button, #open-file-button, #find-button, #developer-button,
-          #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
-          #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
-          #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
-          #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
-          #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
-          #social-share-button, #open-file-button, #find-button, #developer-button,
-          #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
-          #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
-          #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
-          #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) {
-  list-style-image: url(chrome://browser/skin/menuPanel.svg);
+#downloads-button[cui-areatype="toolbar"]:hover,
+#downloads-button[cui-areatype="toolbar"][open="true"] {
+  -moz-image-region: rect(18px, 198px, 36px, 180px);
 }
 
-:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
-          #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
-          #social-share-button, #open-file-button, #find-button, #developer-button,
-          #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
-          #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
-          #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
-          #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"] > .toolbarbutton-icon,
-:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
-          #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
-          #social-share-button, #open-file-button, #find-button, #developer-button,
-          #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
-          #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
-          #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
-          #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon,
-:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
-          #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
-          #social-share-button, #open-file-button, #find-button, #developer-button,
-          #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
-          #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
-          #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
-          #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
-:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
-          #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
-          #social-share-button, #open-file-button, #find-button, #developer-button,
-          #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
-          #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
-          #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
-          #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
-  filter: url(chrome://global/skin/filters.svg#fill);
-  fill: currentColor;
+#add-ons-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 216px, 18px, 198px);
 }
 
-#home-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #home-button {
-  -moz-image-region: rect(0px, 128px, 32px, 96px);
+#add-ons-button[cui-areatype="toolbar"]:hover {
+  -moz-image-region: rect(18px, 216px, 36px, 198px);
 }
 
-#bookmarks-menu-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
-  -moz-image-region: rect(0px, 192px, 32px, 160px);
+#open-file-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 234px, 18px, 216px);
 }
 
-#history-panelmenu[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #history-panelmenu {
-  -moz-image-region: rect(0px, 224px, 32px, 192px);
+#open-file-button[cui-areatype="toolbar"]:hover {
+  -moz-image-region: rect(18px, 234px, 36px, 216px);
 }
 
-#downloads-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #downloads-button {
-  -moz-image-region: rect(0px, 256px, 32px, 224px);
+#save-page-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 252px, 18px, 234px);
 }
 
-#add-ons-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #add-ons-button {
-  -moz-image-region: rect(0px, 288px, 32px, 256px);
+#save-page-button[cui-areatype="toolbar"]:hover {
+  -moz-image-region: rect(18px, 252px, 36px, 234px);
 }
 
-#open-file-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #open-file-button {
-  -moz-image-region: rect(0px, 320px, 32px, 288px);
+#sync-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 792px, 18px, 774px);
 }
 
-#save-page-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #save-page-button {
-  -moz-image-region: rect(0px, 352px, 32px, 320px);
+#sync-button[cui-areatype="toolbar"]:hover {
+  -moz-image-region: rect(18px, 792px, 36px, 774px);
 }
 
-#sync-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #sync-button {
-  -moz-image-region: rect(0px, 1024px, 32px, 992px);
+#containers-panelmenu[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 810px, 18px, 792px);
 }
 
-#containers-panelmenu[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #containers-panelmenu {
-  -moz-image-region: rect(0px, 1056px, 32px, 1024px);
+#containers-panelmenu[cui-areatype="toolbar"]:hover {
+  -moz-image-region: rect(18px, 810px, 36px, 792px);
 }
 
-#feed-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #feed-button {
-  -moz-image-region: rect(0px, 416px, 32px, 384px);
+#feed-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 288px, 18px, 270px);
 }
 
-#social-share-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #social-share-button {
-  -moz-image-region: rect(0px, 448px, 32px, 416px);
+#feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
+#feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
+  -moz-image-region: rect(18px, 288px, 36px, 270px);
 }
 
-#characterencoding-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #characterencoding-button {
-  -moz-image-region: rect(0px, 480px, 32px, 448px);
+#feed-button[cui-areatype="toolbar"][disabled="true"] {
+  -moz-image-region: rect(36px, 288px, 54px, 270px);
 }
 
-#new-window-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #new-window-button {
-  -moz-image-region: rect(0px, 512px, 32px, 480px);
+#social-share-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0px, 306px, 18px, 288px);
 }
 
-#e10s-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #e10s-button {
-  -moz-image-region: rect(0px, 512px, 32px, 480px);
+#social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
+#social-share-button[cui-areatype="toolbar"][open="true"] {
+  -moz-image-region: rect(18px, 306px, 36px, 288px);
 }
 
-#new-tab-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #new-tab-button {
-  -moz-image-region: rect(0px, 544px, 32px, 512px);
+#social-share-button[cui-areatype="toolbar"][disabled="true"] {
+  -moz-image-region: rect(36px, 306px, 54px, 288px);
 }
 
-#privatebrowsing-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
-  -moz-image-region: rect(0px, 576px, 32px, 544px);
+#characterencoding-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 324px, 18px, 306px);
 }
 
-#tabview-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #tabview-button {
-  -moz-image-region: rect(0px, 608px, 32px, 576px);
+#characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
+#characterencoding-button[cui-areatype="toolbar"][open="true"] {
+  -moz-image-region: rect(18px, 324px, 36px, 306px);
 }
 
-#find-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #find-button {
-  -moz-image-region: rect(0px, 640px, 32px, 608px);
+#characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
+  -moz-image-region: rect(36px, 324px, 54px, 306px);
 }
 
-#print-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #print-button {
-  -moz-image-region: rect(0px, 672px, 32px, 640px);
+#new-window-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 342px, 18px, 324px);
 }
 
-#fullscreen-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #fullscreen-button {
-  -moz-image-region: rect(0px, 704px, 32px, 672px);
+#new-window-button[cui-areatype="toolbar"]:hover {
+  -moz-image-region: rect(18px, 342px, 36px, 324px);
 }
 
-#developer-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #developer-button {
-  -moz-image-region: rect(0px, 736px, 32px, 704px);
+#e10s-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 342px, 18px, 324px);
 }
 
-#preferences-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #preferences-button {
-  -moz-image-region: rect(0px, 768px, 32px, 736px);
+#e10s-button[cui-areatype="toolbar"]:hover {
+  -moz-image-region: rect(18px, 342px, 36px, 324px);
 }
 
-#email-link-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #email-link-button {
-  -moz-image-region: rect(0, 800px, 32px, 768px);
+#e10s-button > .toolbarbutton-icon {
+  transform: scaleY(-1);
 }
 
-#email-link-button[cui-areatype="menu-panel"][disabled="true"],
-toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
-  -moz-image-region: rect(64px, 800px, 96px, 768px);
+#new-tab-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 360px, 18px, 342px);
 }
 
-#sidebar-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #sidebar-button {
-  -moz-image-region: rect(0, 864px, 32px, 832px);
+#new-tab-button[cui-areatype="toolbar"]:hover {
+  -moz-image-region: rect(18px, 360px, 36px, 342px);
 }
 
-#panic-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #panic-button {
-  -moz-image-region: rect(0, 896px, 32px, 864px);
+#privatebrowsing-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 378px, 18px, 360px);
 }
 
-#webide-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #webide-button {
-  -moz-image-region: rect(0px, 960px, 32px, 928px);
+#privatebrowsing-button[cui-areatype="toolbar"]:hover {
+  -moz-image-region: rect(18px, 378px, 36px, 360px);
 }
 
-toolbaritem[sdkstylewidget="true"] > toolbarbutton {
-  -moz-image-region: rect(0, 832px, 32px, 800px);
+#find-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 396px, 18px, 378px);
 }
 
-/* Wide panel control icons */
+#find-button[cui-areatype="toolbar"]:hover {
+  -moz-image-region: rect(18px, 396px, 36px, 378px);
+}
 
-#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
-#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
-toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
-toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
-  list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
+#print-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 414px, 18px, 396px);
 }
 
-#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
-#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
-toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
-toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
-  filter: url(chrome://global/skin/filters.svg#fill);
-  fill: currentColor;
+#print-button[cui-areatype="toolbar"]:hover {
+  -moz-image-region: rect(18px, 414px, 36px, 396px);
 }
 
-#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
-toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
+#fullscreen-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 432px, 18px, 414px);
 }
 
-#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
-toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
+#fullscreen-button[cui-areatype="toolbar"]:hover {
+  -moz-image-region: rect(18px, 432px, 36px, 414px);
 }
 
-#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
-toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
-  -moz-image-region: rect(0px, 64px, 16px, 48px);
+#developer-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 450px, 18px, 432px);
 }
 
-#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
-toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
-  -moz-image-region: rect(0px, 80px, 16px, 64px);
+#developer-button[cui-areatype="toolbar"]:hover,
+#developer-button[cui-areatype="toolbar"][open="true"] {
+  -moz-image-region: rect(18px, 450px, 36px, 432px);
 }
 
-#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
-toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
-  -moz-image-region: rect(0px, 96px, 16px, 80px);
+#preferences-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 468px, 18px, 450px);
 }
 
-#add-share-provider {
-  list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
-  -moz-image-region: rect(0px, 96px, 16px, 80px);
+#preferences-button[cui-areatype="toolbar"]:hover {
+  -moz-image-region: rect(18px, 468px, 36px, 450px);
 }
 
-/* === END menupanel.inc.css === */
+#PanelUI-menu-button {
+  -moz-image-region: rect(0, 486px, 18px, 468px);
+}
 
-.toolbarbutton-1:not([type="menu-button"]) {
-  -moz-box-orient: vertical;
+#PanelUI-menu-button:hover,
+#PanelUI-menu-button[open="true"] {
+  -moz-image-region: rect(18px, 486px, 36px, 468px);
 }
 
-.toolbarbutton-1,
-.toolbarbutton-1 > .toolbarbutton-menubutton-button {
-/*  min-width: 36px;
-  min-height: 36px;*/
+#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
+  -moz-image-region: rect(0, 504px, 18px, 486px);
 }
 
-.toolbarbutton-1,
-.toolbarbutton-1 > .toolbarbutton-menubutton-button,
-.toolbarbutton-1[disabled="true"]:hover:active,
-.toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
-  padding: 1px 2px;
+#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
+  -moz-image-region: rect(18px, 504px, 36px, 486px);
 }
 
-.toolbarbutton-1:hover:active,
-.toolbarbutton-1[open="true"],
-.toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
-  padding-top: 2px;
-  padding-bottom: 0px;
-  padding-inline-start: 3px;
-  padding-inline-end: 1px;
+#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
+  -moz-image-region: rect(36px, 504px, 54px, 486px);
 }
 
-#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
-#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
-#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
-#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
-#main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
+#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
+  -moz-image-region: rect(0, 522px, 18px, 504px);
 }
 
-.toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
-.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
+#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
+  -moz-image-region: rect(18px, 522px, 36px, 504px);
 }
 
-toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
-toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
+#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
+  -moz-image-region: rect(36px, 522px, 54px, 504px);
 }
 
-.toolbarbutton-1 > .toolbarbutton-icon,
-.toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
+#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
+  -moz-image-region: rect(0, 540px, 18px, 522px);
 }
 
-.findbar-button,
-#nav-bar .toolbarbutton-1,
-#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
+#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
+  -moz-image-region: rect(18px, 540px, 36px, 522px);
 }
 
-#nav-bar .toolbarbutton-1:not([type=menu-button]),
-#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
-#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
+#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
+  -moz-image-region: rect(36px, 540px, 54px, 522px);
 }
 
-#nav-bar #PanelUI-menu-button {
-/*  padding-inline-start: 7px;
-  padding-inline-end: 5px;*/
+#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
+  -moz-image-region: rect(0, 558px, 18px, 540px);
 }
 
-#nav-bar .toolbarbutton-1[type=panel],
-#nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
-/*  padding-left: 5px;
-  padding-right: 5px;*/
+#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
+  -moz-image-region: rect(18px, 558px, 36px, 540px);
 }
 
-#nav-bar .toolbarbutton-1 > menupopup {
-/*  margin-top: -3px;*/
+#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
+  -moz-image-region: rect(36px, 558px, 54px, 540px);
 }
 
-#nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
-  margin-top: -4px;
+#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
+  -moz-image-region: rect(0, 576px, 18px, 558px);
 }
 
-#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
-/*  padding-inline-end: 0;*/
+#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
+  -moz-image-region: rect(18px, 576px, 36px, 558px);
 }
 
-#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
-/*  padding-inline-start: 0;
-  -moz-box-align: center;*/
+#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
+  -moz-image-region: rect(36px, 576px, 54px, 558px);
 }
 
-.findbar-button > .toolbarbutton-text,
-#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
-#nav-bar .toolbarbutton-1 > .toolbarbutton-text,
-#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
-#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
-#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
-window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
-/*  padding: 2px 6px;
-  border: 1px solid;
-  border-color: transparent;
-  transition-property: background-color, border-color;
-  transition-duration: 150ms;*/
+#nav-bar-overflow-button {
+  -moz-image-region: rect(0, 612px, 18px, 594px);
 }
-/*
-#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon,
-#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack,
-#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
-   padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px;
+
+#nav-bar-overflow-button:hover,
+#nav-bar-overflow-button[open="true"] {
+  -moz-image-region: rect(18px, 612px, 36px, 594px);
 }
-*/
 
-/* Help SDK icons fit: */
-toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
-toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
-  width: 16px;
+#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
+  transform: scaleX(-1);
 }
 
-#nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
-  /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
-  width: 32px;
+#nav-bar-overflow-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
+  display: none;
 }
 
-#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
-#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
-#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon,
-#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
-#nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
-/*  padding-inline-end: 17px;*/
+#tabview-button {
+  -moz-image-region: rect(0, 648px, 18px, 630px);
 }
 
-#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
-#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon {
-  /* horizontal padding + border + icon width */
-/*  max-width: 43px;*/
+#tabview-button:hover {
+  -moz-image-region: rect(18px, 648px, 36px, 630px);
 }
 
-#nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
+#email-link-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 666px, 18px, 648px);
 }
 
-#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
+#email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
+  -moz-image-region: rect(18px, 666px, 36px, 648px);
 }
 
-#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+#email-button[cui-areatype="toolbar"][disabled="true"] {
+  -moz-image-region: rect(36px, 666px, 54px, 648px);
 }
 
-#nav-bar .toolbaritem-combined-buttons {
-/*  margin-left: 2px;
-  margin-right: 2px;*/
+#sidebar-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 684px, 18px, 666px);
 }
 
-#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
-/*  padding-left: 0;
-  padding-right: 0;*/
+#sidebar-button[cui-areatype="toolbar"]:hover {
+  -moz-image-region: rect(18px, 684px, 36px, 666px);
 }
 
-#nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
-#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true]) + .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true])::before {
-/*
-  content: "";
-  display: -moz-box;
-  width: 1px;
-  height: 16px;
-  margin-inline-end: -1px;
-*/
+#panic-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 702px, 18px, 684px);
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
+#panic-button[cui-areatype="toolbar"]:hover,
+#panic-button[cui-areatype="toolbar"][open] {
+  -moz-image-region: rect(18px, 702px, 36px, 684px);
 }
 
-.findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
-#nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
-#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
-#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
-#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
-#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
-#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
-window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
-#nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
-}
-
-.findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
-#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
-#nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
-#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
-#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
-#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
-}
-
-#TabsToolbar .toolbarbutton-1,
-#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
-.tabbrowser-arrowscrollbox > .scrollbutton-up,
-.tabbrowser-arrowscrollbox > .scrollbutton-down {
-}
-
-#TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
-#TabsToolbar .toolbarbutton-1[open],
-#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
-.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
-.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
-}
-
-/* unified back/forward button */
-
-#forward-button {
-  -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
-}
-
-#forward-button > menupopup {
-  margin-top: 1px !important;
-}
-
-#forward-button > .toolbarbutton-icon {
-  background-clip: padding-box !important;
-  /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
-  /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
-}
-
-#forward-button {
-  margin-inline-start: -4px !important;
-  padding-left: 5px;
-  padding-right: 5px;
-  margin-top: 3px;
-  margin-bottom: 3px;
-  border-radius: 0 10000px 10000px 0;
-/*  max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
-}
-
-#forward-button:-moz-locale-dir(rtl) {
-  border-radius: 10000px 0 0 10000px;
-}
-
-window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
-  transition: margin-left 150ms ease-out;
-}
-
-window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
-  margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
-}
-
-window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
-  /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
-  transition-delay: 100s;
-}
-
-window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
-  /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
-  margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
-}
-
-#back-button {
-/*  padding-top: 3px !important;
-  padding-bottom: 3px !important;
-  padding-inline-start: 5px !important;
-  padding-inline-end: 0 !important;*/
-  position: relative;
-  z-index: 1;
-  border-radius: 10000px;
-  width: 30px;
-  height: 30px;
-  margin-top: -2px;
-  margin-bottom: -2px;
-}
-
-#back-button:-moz-locale-dir(rtl) {
-}
-
-#back-button > menupopup {
-  margin-top: -1px !important;
-}
-
-#back-button > .toolbarbutton-icon {
-  border-radius: 10000px !important;
-  background-clip: padding-box !important;
-/*  background-color: hsla(210,25%,98%,.08) !important;
-  padding: 6px !important;
-  border-style: none !important;
-  box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
-              0 0 0 1px hsla(210,4%,10%,.25);*/
-  transition-property: background-color, box-shadow !important;
-  transition-duration: 250ms !important;
-}
-
-#back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
-/*  background-color: hsla(210,4%,10%,.08) !important;*/
-}
-
-#back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
-#back-button[open="true"] > .toolbarbutton-icon {
-/*  background-color: hsla(210,4%,10%,.12) !important;
-  box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
-              0 0 0 1px hsla(210,4%,10%,.25),
-              0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
-}
-
-#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
-  transform: scaleX(-1);
-}
-
-#forward-button > .toolbarbutton-menu-dropmarker,
-#back-button > .toolbarbutton-menu-dropmarker {
-  display: none;
-}
-
-/*
-.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
-.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
-  list-style-image: url("chrome://browser/skin/menu-back.png") !important;
-}
-
-.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
-.unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
-  list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
-}
-
-#home-button.bookmark-item {
-  list-style-image: url("chrome://browser/skin/Toolbar.png");
-}
-
-#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
-#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
-#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
-#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
-#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
-#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
-#home-button.bookmark-item:-moz-lwtheme-brighttext {
-  position: relative;
-  z-index: 1;
-  list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
-}
-
-#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
-#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
-  list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
-}
-*/
-
-#downloads-button > .toolbarbutton-icon {
-  margin: 0;
-}
-
-/* tabview menu item */
-
-#menu_tabview {
-  list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
-  -moz-image-region: rect(1px, 89px, 17px, 73px);
-}
-
-#menu_tabview[groups="0"] {
-  -moz-image-region: rect(1px, 17px, 17px, 1px);
-}
-
-#menu_tabview[groups="1"] {
-  -moz-image-region: rect(1px, 35px, 17px, 19px);
-}
-
-#menu_tabview[groups="2"] {
-  -moz-image-region: rect(1px, 53px, 17px, 37px);
-}
-
-#menu_tabview[groups="3"] {
-  -moz-image-region: rect(1px, 71px, 17px, 55px);
-}
-
-/* zoom control text (reset) button special case: */
-
-#nav-bar #zoom-reset-button > .toolbarbutton-text {
-  /* To make this line up with the icons, it needs the same height (18px) +
-   * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
-   * increase in text sizes would break things...
-   */
-  min-height: 20px;
-}
-
-/* ::::: fullscreen window controls ::::: */
-
-#minimize-button,
-#restore-button,
-#close-button {
-  -moz-appearance: none;
-  border: none;
-/*  margin: 0 !important;
-  padding: 6px 12px;*/
-}
-
-#minimize-button {
-  list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
-}
-
-#minimize-button:hover {
-  list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-hover);
-}
-
-#restore-button {
-  list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
-}
-
-#restore-button:hover {
-  list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-hover);
-}
-
-#minimize-button:hover,
-#restore-button:hover {
-/*  background-color: hsla(0, 0%, 0%, .12);*/
-}
-
-#minimize-button:hover:active,
-#restore-button:hover:active {
-/*  background-color: hsla(0, 0%, 0%, .22);*/
-}
-
-#close-button {
-  list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
-}
-
-#close-button:hover {
-/*  background-color: hsl(355, 86%, 49%);*/
-  list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-hover);
-}
-
-#close-button:hover:active {
-/*  background-color: hsl(355, 82%, 69%);*/
-}
-
-/* ::::: Location Bar ::::: */
-
-#urlbar,
-.searchbar-textbox {
-  border-radius: 5px;
-  margin: 2px 0;
-  margin-inline-start: 3px;
-}
-
-#urlbar {
-  /* make color as light as possible to deal with dark non-domain parts */
-  color: #FFBFFF;
-}
-
-#urlbar:-moz-lwtheme,
-.searchbar-textbox:-moz-lwtheme {
-  /* background-color: rgba(255,255,255,.8);
-  @navbarTextboxCustomBorder@
-  color: black; */
-}
-
-#urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
-.searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
-/*  background-color: rgba(255,255,255,.9);*/
-}
-
-#urlbar:-moz-lwtheme[focused]:not([readonly]),
-.searchbar-textbox:-moz-lwtheme[focused] {
-/*  background-color: white;*/
-}
-
-window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
-/*  border-inline-start: none;
-  margin-left: 0;*/
-}
-
-window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
-/*  border-top-left-radius: 0;
-  border-bottom-left-radius: 0; */
-}
-
-window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
-/*  border-top-right-radius: 0;
-  border-bottom-right-radius: 0; */
-}
-
-window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
-/*  clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
-/*  margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
-}
-
-window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
-window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
-  /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
+#panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
   transform: scaleX(-1);
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
-  -moz-box-direction: reverse;
-}
-
-html|*.urlbar-input:-moz-lwtheme::placeholder,
-.searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::placeholder {
-  color: #E7ADE7;
-}
-
-#urlbar-container {
-  -moz-box-orient: horizontal;
-  -moz-box-align: stretch;
-}
-
-.urlbar-textbox-container {
-  -moz-box-align: stretch;
-}
-
-.urlbar-input-box {
-  margin-inline-start: 0;
-}
-
-.urlbar-input-box,
-#urlbar-display-box {
-  padding-inline-start: 4px;
-/*  border-inline-start: 1px solid var(--urlbar-separator-color);
-  border-inline-end: 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; */
-}
-
-#urlbar-icons {
-  -moz-box-align: center;
-}
-
-.urlbar-icon {
-  padding: 0 2px;
-  /* 16x16 icon with border-box sizing */
-  width: 20px;
-  height: 16px;
-}
-
-/* ::::: URL Bar Zoom Reset Button ::::: */
-
-@keyframes urlbar-zoom-reset-pulse {
-  0% {
-    transform: scale(0);
-  }
-  75% {
-    transform: scale(1.5);
-  }
-  100% {
-    transform: scale(1.0);
-  }
-}
-
-#urlbar-zoom-button {
-/*  -moz-appearance: none;*/
-/*  color: inherit;*/
-}
-
-.search-go-container {
-  padding: 2px;
-}
-
-.search-go-container > .search-go-button {
-  padding: 0;
-}
-
-#urlbar-search-footer {
-  border-top: 1px solid var(--panel-separator-color);
-}
-
-#urlbar-search-settings {
-}
-
-#urlbar-search-settings:hover {
-}
-
-#urlbar-search-settings:hover:active {
-}
-
-#urlbar-search-splitter {
-  /* The splitter width should equal the location and search bars' combined
-     neighboring margin and border width. */
-  min-width: 8px;
-  margin: 0 -4px;
-  position: relative;
-  border: none;
-  background: transparent;
-}
-
-.urlbar-display {
-  border-inline-end: 1px solid #9C9CFF;
-  margin-inline-end: 3px;
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-inline-start: 0;
-  color: #8050B0;
-}
-
-/* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
-
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
-  border-bottom: 1px solid var(--panel-separator-color);
-  background-color: #000000;
-  padding: 6px 0;
-  padding-inline-start: 44px;
-  padding-inline-end: 6px;
-  background-image: url("chrome://browser/skin/info.svg");
-  background-clip: padding-box;
-  background-position: 20px center;
-  background-repeat: no-repeat;
-  background-size: 16px 16px;
-}
-
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
-  background-position: right 20px center;
-}
-
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
-  margin: 0;
-  padding: 0;
-}
-
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
-  margin-inline-start: 0;
-}
-
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
-  -moz-appearance: none;
-  min-width: 80px;
-  border-radius: 3px;
-  padding: 4px 16px;
-  margin: 0;
-  margin-inline-start: 10px;
-}
-
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
-}
-
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
+#webide-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 738px, 18px, 720px);
 }
 
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
+#webide-button[cui-areatype="toolbar"]:hover {
+  -moz-image-region: rect(18px, 738px, 36px, 720px);
 }
 
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
+#pocket-button {
+  fill: currentColor !important;
 }
 
-/* === END urlbarSearchSuggestionsNotification.inc.css === */
+/* === END toolbarbutton-icons.inc.css === */
 
-#search-container {
-  min-width: calc(54px + 11ch);
-}
+/* === BEGIN menupanel.inc.css === */
 
-/* identity box */
+/* Menu panel and palette styles */
 
-#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
-  background-color: var(--identity-box-verified-background-color);
+toolbaritem[sdkstylewidget="true"] > toolbarbutton,
+:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
+          #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
+          #social-share-button, #open-file-button, #find-button, #developer-button,
+          #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
+          #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
+          #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
+          #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
+          #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
+          #social-share-button, #open-file-button, #find-button, #developer-button,
+          #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
+          #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
+          #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
+          #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) {
+  list-style-image: url(chrome://browser/skin/menuPanel.svg);
 }
 
-#identity-box:-moz-focusring {
-  outline: 1px dotted;
-  outline-offset: -1px;
+:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
+          #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
+          #social-share-button, #open-file-button, #find-button, #developer-button,
+          #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
+          #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
+          #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
+          #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"] > .toolbarbutton-icon,
+:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
+          #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
+          #social-share-button, #open-file-button, #find-button, #developer-button,
+          #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
+          #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
+          #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
+          #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon,
+:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
+          #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
+          #social-share-button, #open-file-button, #find-button, #developer-button,
+          #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
+          #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
+          #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
+          #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
+:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
+          #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
+          #social-share-button, #open-file-button, #find-button, #developer-button,
+          #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
+          #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
+          #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
+          #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
+  filter: url(chrome://global/skin/filters.svg#fill);
+  fill: currentColor;
 }
 
-#identity-box.verifiedDomain:-moz-focusring,
-#identity-box.verifiedIdentity:-moz-focusring {
-  outline-color: #000000;
+#home-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #home-button {
+  -moz-image-region: rect(0px, 128px, 32px, 96px);
 }
 
-/* Location bar dropmarker */
-
-.urlbar-history-dropmarker:not(:hover):not([open="true"]) {
-  background-color: transparent;
+#bookmarks-menu-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
+  -moz-image-region: rect(0px, 192px, 32px, 160px);
 }
 
-#urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
-#urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
-#urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
-  border: none;
-  border-radius: 0px;
-  transition: opacity 0.15s ease;
+#history-panelmenu[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #history-panelmenu {
+  -moz-image-region: rect(0px, 224px, 32px, 192px);
 }
 
-#urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
-  transition: none;
+#downloads-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #downloads-button {
+  -moz-image-region: rect(0px, 256px, 32px, 224px);
 }
 
-#navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
-  opacity: 0;
+#add-ons-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #add-ons-button {
+  -moz-image-region: rect(0px, 288px, 32px, 256px);
 }
 
-.urlbar-history-dropmarker:hover {
+#open-file-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #open-file-button {
+  -moz-image-region: rect(0px, 320px, 32px, 288px);
 }
 
-.urlbar-history-dropmarker:hover:active,
-.urlbar-history-dropmarker[open="true"] {
+#save-page-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #save-page-button {
+  -moz-image-region: rect(0px, 352px, 32px, 320px);
 }
 
-/* page proxy icon */
-/* === BEGIN identity-block.inc.css === */
+#sync-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #sync-button {
+  -moz-image-region: rect(0px, 1024px, 32px, 992px);
+}
 
-/* === BEGIN identity-block/icons.inc.css === */
+#containers-panelmenu[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #containers-panelmenu {
+  -moz-image-region: rect(0px, 1056px, 32px, 1024px);
+}
 
-#identity-icon {
-  list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
+#feed-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #feed-button {
+  -moz-image-region: rect(0px, 416px, 32px, 384px);
 }
 
-#identity-box:hover > #identity-icon:not(.no-hover),
-#identity-box[open=true] > #identity-icon {
-  list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
+#social-share-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #social-share-button {
+  -moz-image-region: rect(0px, 448px, 32px, 416px);
 }
 
-#identity-box.grantedPermissions > #identity-icon {
-  list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
+#characterencoding-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #characterencoding-button {
+  -moz-image-region: rect(0px, 480px, 32px, 448px);
 }
 
-#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
-#identity-box.grantedPermissions[open=true] > #identity-icon {
-  list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
+#new-window-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #new-window-button {
+  -moz-image-region: rect(0px, 512px, 32px, 480px);
 }
 
-#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
-  list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
+#e10s-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #e10s-button {
+  -moz-image-region: rect(0px, 512px, 32px, 480px);
 }
 
-#tracking-protection-icon {
-  list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
+#new-tab-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #new-tab-button {
+  -moz-image-region: rect(0px, 544px, 32px, 512px);
 }
 
-#tracking-protection-icon[state="loaded-tracking-content"] {
-  list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
+#privatebrowsing-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
+  -moz-image-region: rect(0px, 576px, 32px, 544px);
 }
 
+#tabview-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #tabview-button {
+  -moz-image-region: rect(0px, 608px, 32px, 576px);
+}
 
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
-  list-style-image: url(chrome://browser/skin/connection-secure.svg);
-  visibility: visible;
+#find-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #find-button {
+  -moz-image-region: rect(0px, 640px, 32px, 608px);
 }
 
-#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
-  list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
-  visibility: visible;
+#print-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #print-button {
+  -moz-image-region: rect(0px, 672px, 32px, 640px);
 }
 
-#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
-  list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
-  visibility: visible;
+#fullscreen-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #fullscreen-button {
+  -moz-image-region: rect(0px, 704px, 32px, 672px);
 }
 
-/* === END identity-block/icons.inc.css === */
+#developer-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #developer-button {
+  -moz-image-region: rect(0px, 736px, 32px, 704px);
+}
 
-#identity-box {
-  font-size: .9em;
-  border-radius: 2px;
-  padding: 3px 5px;
-  overflow: hidden;
-  /* The padding-left and padding-right transitions handle the delayed hiding of
-     the forward button when hovered. */
-  transition: background-color 150ms ease, padding-left, padding-right;
+#preferences-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #preferences-button {
+  -moz-image-region: rect(0px, 768px, 32px, 736px);
 }
 
-#identity-box:-moz-locale-dir(ltr) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+#email-link-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #email-link-button {
+  -moz-image-region: rect(0, 800px, 32px, 768px);
 }
 
-#identity-box:-moz-locale-dir(rtl) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+#email-link-button[cui-areatype="menu-panel"][disabled="true"],
+toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
+  -moz-image-region: rect(64px, 800px, 96px, 768px);
 }
 
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
-  border-inline-end: 1px solid #008484;
+#sidebar-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #sidebar-button {
+  -moz-image-region: rect(0, 864px, 32px, 832px);
 }
 
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
-  color: #008484;
+#panic-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #panic-button {
+  -moz-image-region: rect(0, 896px, 32px, 864px);
 }
 
-#urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
-  border-inline-end: 1px solid #9C9CFF;
+#webide-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #webide-button {
+  -moz-image-region: rect(0px, 960px, 32px, 928px);
 }
 
-#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
-  color: #9C9CFF;
+toolbaritem[sdkstylewidget="true"] > toolbarbutton {
+  -moz-image-region: rect(0, 832px, 32px, 800px);
 }
 
+/* Wide panel control icons */
 
-#identity-icon-labels:-moz-locale-dir(ltr) {
-  padding-left: 2px;
+#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
+#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
+toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
+toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
+  list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
 }
 
-#identity-icon-labels:-moz-locale-dir(rtl) {
-  padding-right: 2px;
+#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
+#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
+toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
+toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
+  filter: url(chrome://global/skin/filters.svg#fill);
+  fill: currentColor;
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
-/*   border-radius: 0;
-  padding-inline-start: 2px; */
-  padding-inline-end: 2px;
-  margin-inline-end: 1px;
+#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
+toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
-  padding-inline-start: 2px;
+#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
+toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
-  /* Forward button hiding is delayed when hovered, so we should use the same
-     delay for the identity box. We handle both horizontal paddings (for LTR and
-     RTL), the latter two delays here are for padding-left and padding-right. */
-  transition-delay: 0s, 100s, 100s;
+#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
+toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
+  -moz-image-region: rect(0px, 64px, 16px, 48px);
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
-  /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
-  padding-inline-start: 2.01px;
+#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
+toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
+  -moz-image-region: rect(0px, 80px, 16px, 64px);
 }
 
-/* MAIN IDENTITY ICON */
-
-#identity-icon {
-  width: 16px;
-  height: 16px;
+#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
+toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
+  -moz-image-region: rect(0px, 96px, 16px, 80px);
 }
 
-#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
-  opacity: .3;
+#add-share-provider {
+  list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
+  -moz-image-region: rect(0px, 96px, 16px, 80px);
 }
 
-#urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
-  -moz-image-region: inherit;
-  list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
-  width: 16px;
-  height: 16px;
-}
+/* === END menupanel.inc.css === */
 
-#urlbar[actiontype="extension"] > #identity-box > #identity-icon {
-  -moz-image-region: inherit;
-  list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
-  width: 16px;
-  height: 16px;
+/* ::::: fullscreen window controls ::::: */
+
+#minimize-button,
+#restore-button,
+#close-button {
+  -moz-appearance: none;
+  border: none;
+/*  margin: 0 !important;
+  padding: 6px 12px;*/
 }
 
-/* SHARING ICON */
+#minimize-button {
+  list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
+}
 
-#sharing-icon {
-  width: 16px;
-  height: 16px;
-  margin-inline-start: -16px;
-  position: relative;
-  display: none;
+#minimize-button:hover {
+  list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-hover);
 }
 
-#identity-box[sharing="camera"] > #sharing-icon {
-  list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
+#restore-button {
+  list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
 }
 
-#identity-box[sharing="microphone"] > #sharing-icon {
-  list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
+#restore-button:hover {
+  list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-hover);
 }
 
-#identity-box[sharing="screen"] > #sharing-icon {
-  list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
+#minimize-button:hover,
+#restore-button:hover {
+/*  background-color: hsla(0, 0%, 0%, .12);*/
+}
 
+#minimize-button:hover:active,
+#restore-button:hover:active {
+/*  background-color: hsla(0, 0%, 0%, .22);*/
 }
 
-#identity-box[sharing] > #sharing-icon {
-  display: -moz-box;
-  animation-delay: -1.5s;
+#close-button {
+  list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
 }
 
-#identity-box[sharing] > #identity-icon,
-#sharing-icon {
-  animation: 3s linear identity-box-sharing-icon-pulse infinite;
+#close-button:hover {
+/*  background-color: hsl(355, 86%, 49%);*/
+  list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-hover);
 }
 
-@keyframes identity-box-sharing-icon-pulse {
-/* This should remain identical to tab-sharing-icon-pulse in tabs.inc.css */
-  0%, 16.66%, 83.33%, 100% {
-    opacity: 0;
-  }
-  33.33%, 66.66% {
-    opacity: 1;
-  }
+#close-button:hover:active {
+/*  background-color: hsl(355, 82%, 69%);*/
 }
 
-/* TRACKING PROTECTION ICON */
+/* ::::: Location Bar ::::: */
 
-#tracking-protection-icon {
-  width: 16px;
-  height: 16px;
-  margin-inline-start: 2px;
-  margin-inline-end: 0;
+#urlbar,
+.searchbar-textbox {
+  border-radius: 5px;
+  margin: 2px 0;
+  margin-inline-start: 3px;
 }
 
-#tracking-protection-icon[animate] {
-  transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
+#urlbar {
+  /* make color as light as possible to deal with dark non-domain parts */
+  color: #FFBFFF;
 }
 
-#tracking-protection-icon:not([state]) {
-  margin-inline-end: -18px;
-  pointer-events: none;
-  opacity: 0;
-  /* Only animate the shield in, when it disappears hide it immediately. */
-  transition: none;
+#urlbar:-moz-lwtheme,
+.searchbar-textbox:-moz-lwtheme {
+  /* background-color: rgba(255,255,255,.8);
+  @navbarTextboxCustomBorder@
+  color: black; */
 }
 
-#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
-  visibility: collapse;
+#urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
+.searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
+/*  background-color: rgba(255,255,255,.9);*/
 }
 
-/* CONNECTION ICON */
-
-#connection-icon {
-  width: 16px;
-  height: 16px;
-  margin-inline-start: 2px;
-  visibility: collapse;
+#urlbar:-moz-lwtheme[focused]:not([readonly]),
+.searchbar-textbox:-moz-lwtheme[focused] {
+/*  background-color: white;*/
 }
 
-/* === END identity-block.inc.css === */
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
+/*  border-inline-start: none;
+  margin-left: 0;*/
+}
 
-#page-proxy-favicon {
-  -moz-image-region: rect(0, 16px, 16px, 0);
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
+/*  border-top-left-radius: 0;
+  border-bottom-left-radius: 0; */
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
-/*  margin-inline-end: 1px;*/
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
+/*  border-top-right-radius: 0;
+  border-bottom-right-radius: 0; */
 }
 
-#identity-box:hover > #page-proxy-favicon {
-  -moz-image-region: rect(0, 32px, 16px, 16px);
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
+/*  clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
+/*  margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
 }
 
-#identity-box:hover:active > #page-proxy-favicon,
-#identity-box[open=true] > #page-proxy-favicon {
-  -moz-image-region: rect(0, 48px, 16px, 32px);
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
+  /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
+  transform: scaleX(-1);
 }
 
-#identity-box:hover {
-  background-color: #FFCF00;
-  color: #000000;
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
+  -moz-box-direction: reverse;
 }
 
-#identity-box:hover:active,
-#identity-box[open=true] {
-  background-color: #FF9F00;
-  color: #000000;
+html|*.urlbar-input:-moz-lwtheme::placeholder,
+.searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::placeholder {
+  color: #E7ADE7;
 }
 
-#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
-#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
-#urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
-  background-color: #A09090;
-  color: #000000;
+#urlbar-container {
+  -moz-box-orient: horizontal;
+  -moz-box-align: stretch;
 }
 
-#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
-#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
-#urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
-  color: #000000;
+.urlbar-textbox-container {
+  -moz-box-align: stretch;
 }
 
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
-  background-color: #008484;
-  color: #000000;
+.urlbar-input-box {
+  margin: 0;
 }
 
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
-  color: #000000;
+.urlbar-input-box,
+#urlbar-display-box {
+  padding-inline-start: 4px;
+/*  border-inline-start: 1px solid var(--urlbar-separator-color);
+  border-inline-end: 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; */
 }
 
-#identity-box:hover > image,
-#identity-box:hover:active > image,
-#identity-box[open=true] > image {
-  filter: url(chrome://global/skin/filters.svg#active-icon-state);
+#urlbar-icons {
+  -moz-box-align: center;
 }
 
-/* autocomplete */
+.urlbar-icon {
+  padding: 0 2px;
+  /* 16x16 icon with border-box sizing */
+  width: 20px;
+  height: 16px;
+}
 
-/* === BEGIN autocomplete.inc.css === */
+/* ::::: URL Bar Zoom Reset Button ::::: */
 
-#PopupAutoComplete > richlistbox > richlistitem {
-  height: 20px;
-  min-height: 20px;
-  border: 0;
-  border-radius: 0;
-  padding: 0px 1px 0px 1px;
+@keyframes urlbar-zoom-reset-pulse {
+  0% {
+    transform: scale(0);
+  }
+  75% {
+    transform: scale(1.5);
+  }
+  100% {
+    transform: scale(1.0);
+  }
 }
 
-#PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
-  margin-inline-start: 4px;
-  margin-inline-end: 0;
+#urlbar-zoom-button {
+/*  -moz-appearance: none;*/
+/*  color: inherit;*/
 }
 
-#PopupAutoComplete > richlistbox > richlistitem > .ac-title {
-  font: icon;
-  margin-inline-start: 4px;
+.search-go-container {
+  padding: 2px;
 }
 
-#PopupAutoComplete > richlistbox {
+.search-go-container > .search-go-button {
   padding: 0;
 }
 
-/* Login form autocompletion */
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
-  display: initial;
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
-}
-
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted);
+#urlbar-search-footer {
+  border-top: 1px solid var(--panel-separator-color);
 }
 
-/* Insecure field warning */
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
-  background-color: var(--arrowpanel-dimmed);
-  border-bottom: 1px solid var(--panel-separator-color);
-  padding-bottom: 4px;
-  padding-top: 4px;
+#urlbar-search-settings {
 }
 
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] {
-  background-color: var(--arrowpanel-dimmed-further);
-  color: #FFCF00;
+#urlbar-search-settings:hover {
 }
 
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title {
-  color: #A09090;
-  font-size: 1em;
+#urlbar-search-settings:hover:active {
 }
 
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title {
-  color: inherit;
+#urlbar-search-splitter {
+  /* The splitter width should equal the location and search bars' combined
+     neighboring margin and border width. */
+  min-width: 8px;
+  margin: 0 -4px;
+  position: relative;
+  border: none;
+  background: transparent;
 }
 
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
-  list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
+.urlbar-display {
+  border-inline-end: 1px solid #9C9CFF;
+  margin-inline-end: 3px;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-inline-start: 0;
+  color: #8050B0;
 }
 
-/* === END autocomplete.inc.css === */
+/* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
 
-#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
-  border-top: 1px solid #A09090;
+#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
+  border-bottom: 1px solid var(--panel-separator-color);
+  background-color: #000000;
+  padding: 6px 0;
+  padding-inline-start: 44px;
+  padding-inline-end: 6px;
+  background-image: url("chrome://browser/skin/info.svg");
+  background-clip: padding-box;
+  background-position: 20px center;
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
 }
 
-#treecolAutoCompleteImage {
-  max-width: 36px;
+#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
+  background-position: right 20px center;
 }
 
-/*
-.autocomplete-richlistbox {
-  padding: 4px;
+#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
+  margin: 0;
+  padding: 0;
 }
 
-.autocomplete-richlistitem {
-  height: 30px;
-  min-height: 30px;
-  font: message-box;
-  border-radius: 2px;
-  border: 1px solid transparent;
+#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
+  margin-inline-start: 0;
 }
-*/
-.ac-title {
-  font-size: 14px;
+
+#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
+  -moz-appearance: none;
+  min-width: 80px;
+  border-radius: 3px;
+  padding: 4px 16px;
+  margin: 0;
+  margin-inline-start: 10px;
 }
 
-.ac-tags {
-  font-size: 12px;
-}
-/*
-html|span.ac-tag {
-  border-radius: 2px;
-  border: 1px solid transparent;
-  padding: 0 1px;
+#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
 }
-*/
 
-.ac-separator,
-.ac-url,
-.ac-action {
-  font-size: 12px;
+#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
 }
 
-html|span.ac-emphasize-text-title,
-html|span.ac-emphasize-text-tag,
-html|span.ac-emphasize-text-url {
-  font-weight: 600;
+#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
 }
 
-.ac-type-icon[type=bookmark] {
-  list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
+#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
 }
 
-.ac-type-icon[type=bookmark][selected][current] {
-/*  list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
+/* === END urlbarSearchSuggestionsNotification.inc.css === */
+
+#search-container {
+  min-width: calc(54px + 11ch);
 }
 
-.ac-result-type-bookmark {
-  list-style-image: url("chrome://browser/skin/places/bookmark.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-  width: 16px;
-  height: 16px;
+/* identity box */
+
+#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
+  background-color: var(--identity-box-verified-background-color);
 }
 
-richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark {
-/*  -moz-image-region: rect(0px 48px 16px 32px);*/
+#identity-box:-moz-focusring {
+  outline: 1px dotted;
+  outline-offset: -1px;
 }
 
-.ac-type-icon[type=keyword],
-.ac-site-icon[type=searchengine] {
-  list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
+#identity-box.verifiedDomain:-moz-focusring,
+#identity-box.verifiedIdentity:-moz-focusring {
+  outline-color: #000000;
 }
 
-.ac-type-icon[type=keyword][selected],
-.ac-site-icon[type=searchengine][selected] {
-  list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
+/* Location bar dropmarker */
+
+.urlbar-history-dropmarker:not(:hover):not([open="true"]) {
+  background-color: transparent;
 }
 
-.ac-result-type-tag {
-  list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
-  width: 16px;
-  height: 16px;
+#urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
+#urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
+#urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
+  border: none;
+  border-radius: 0px;
+  transition: opacity 0.15s ease;
 }
 
-.ac-type-icon[type=switchtab],
-.ac-type-icon[type=remotetab] {
-  list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
+#urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
+  transition: none;
 }
 
-.ac-type-icon[type=switchtab][selected],
-.ac-type-icon[type=remotetab][selected] {
-  list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
+#navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
+  opacity: 0;
 }
 
-.autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
-.autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
-{
-  color: #8050B0;
-  font-size: smaller;
+.urlbar-history-dropmarker:hover {
 }
 
-.autocomplete-treebody::-moz-tree-cell(suggesthint) {
-  border-top: 1px solid #9C9CFF;
+.urlbar-history-dropmarker:hover:active,
+.urlbar-history-dropmarker[open="true"] {
 }
 
-/* combined go/reload/stop button in location bar */
+/* page proxy icon */
+/* === BEGIN identity-block.inc.css === */
 
-#urlbar-go-button,
-#urlbar-reload-button,
-#urlbar-stop-button {
-  border-style: none;
-  list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
-/*  margin: 0 9px; */
-  margin-inline-start: 0px;
-  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;
+/* === BEGIN identity-block/icons.inc.css === */
+
+#identity-icon {
+  list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
 }
 
-/* XXX: temporary for Photon preview changes */
-#reload-button,
-#stop-button {
-  list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
+#identity-box:hover > #identity-icon:not(.no-hover),
+#identity-box[open=true] > #identity-icon {
+  list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
 }
 
-#urlbar:-moz-locale-dir(ltr) > toolbarbutton {
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
+#identity-box.grantedPermissions > #identity-icon {
+  list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
 }
 
-#urlbar:-moz-locale-dir(rtl) > toolbarbutton {
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
+#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
+#identity-box.grantedPermissions[open=true] > #identity-icon {
+  list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
 }
 
-#urlbar > toolbarbutton:not([disabled=true]):active:hover,
-#urlbar-reload-button:not(:hover) {
-  border-inline-start-style: none;
-  padding-inline-start: 3px;
+#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
+  list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
 }
 
-#reload-button,
-#urlbar-reload-button {
-  -moz-image-region: rect(0px, 14px, 14px, 0px);
+#tracking-protection-icon {
+  list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
 }
 
-#reload-button[disabled=true],
-#urlbar-reload-button[disabled=true] {
-  -moz-image-region: rect(28px, 14px, 42px, 0px);
+#tracking-protection-icon[state="loaded-tracking-content"] {
+  list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
 }
 
-#reload-button:not([disabled=true]):hover,
-#urlbar-reload-button:not([disabled=true]):hover {
-  -moz-image-region: rect(14px, 14px, 28px, 0px);
+
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
+  list-style-image: url(chrome://browser/skin/connection-secure.svg);
+  visibility: visible;
 }
 
-#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
-#urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
-  transform: scaleX(-1);
+#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
+  list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
+  visibility: visible;
 }
 
-#urlbar-go-button {
-  -moz-image-region: rect(0, 42px, 14px, 28px);
+#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
+  list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
+  visibility: visible;
 }
 
-#urlbar-go-button:hover {
-  -moz-image-region: rect(14px, 42px, 28px, 28px);
+/* === END identity-block/icons.inc.css === */
+
+#identity-box {
+  font-size: .9em;
+  border-radius: 2px;
+  padding: 3px 5px;
+  overflow: hidden;
+  /* The padding-left and padding-right transitions handle the delayed hiding of
+     the forward button when hovered. */
+  transition: background-color 150ms ease, padding-left, padding-right;
 }
 
-#urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
-  transform: scaleX(-1);
+#identity-box:-moz-locale-dir(ltr) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
-#stop-button,
-#urlbar-stop-button {
-  -moz-image-region: rect(0px, 28px, 14px, 14px);
+#identity-box:-moz-locale-dir(rtl) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
-#stop-button:hover,
-#urlbar-stop-button:hover {
-  -moz-image-region: rect(14px, 28px, 28px, 14px);
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
+  border-inline-end: 1px solid #008484;
 }
 
-@media (min-resolution: 1.1dppx) {
-  #reload-button,
-  #stop-button,
-  #urlbar-go-button,
-  #urlbar-reload-button,
-  #urlbar-stop-button {
-    list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
-  }
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
+  color: #008484;
+}
 
-  #reload-button > .toolbarbutton-icon,
-  #stop-button > .toolbarbutton-icon,
-  #urlbar-go-button > .toolbarbutton-icon,
-  #urlbar-reload-button > .toolbarbutton-icon,
-  #urlbar-stop-button > .toolbarbutton-icon {
-    width: 14px;
-  }
+#urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
+  border-inline-end: 1px solid #9C9CFF;
+}
 
-  #urlbar-go-button {
-    -moz-image-region: rect(0, 84px, 28px, 56px);
-  }
+#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
+  color: #9C9CFF;
+}
 
-  #urlbar-go-button:hover {
-    -moz-image-region: rect(28px, 84px, 56px, 56px);
-  }
 
-  #urlbar-go-button:hover:active {
-    -moz-image-region: rect(56px, 84px, 84px, 56px);
-  }
+#identity-icon-labels:-moz-locale-dir(ltr) {
+  padding-left: 2px;
+}
 
-  #reload-button,
-  #urlbar-reload-button {
-    -moz-image-region: rect(0, 28px, 28px, 0);
-  }
+#identity-icon-labels:-moz-locale-dir(rtl) {
+  padding-right: 2px;
+}
 
-  #reload-button:not([disabled]):hover,
-  #urlbar-reload-button:not([disabled]):hover {
-    -moz-image-region: rect(28px, 28px, 56px, 0);
-  }
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
+/*   border-radius: 0;
+  padding-inline-start: 2px; */
+  padding-inline-end: 2px;
+  margin-inline-end: 1px;
+}
 
-  #reload-button:not([disabled]):hover:active,
-  #urlbar-reload-button:not([disabled]):hover:active {
-    -moz-image-region: rect(56px, 28px, 84px, 0);
-  }
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
+  padding-inline-start: 2px;
+}
 
-  #stop-button,
-  #urlbar-stop-button {
-    -moz-image-region: rect(0, 56px, 28px, 28px);
-  }
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
+  /* Forward button hiding is delayed when hovered, so we should use the same
+     delay for the identity box. We handle both horizontal paddings (for LTR and
+     RTL), the latter two delays here are for padding-left and padding-right. */
+  transition-delay: 0s, 100s, 100s;
+}
 
-  #stop-button:not([disabled]):hover,
-  #urlbar-stop-button:not([disabled]):hover {
-    -moz-image-region: rect(28px, 56px, 56px, 28px);
-  }
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
+  /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
+  padding-inline-start: 2.01px;
+}
 
-  #stop-button:hover:active,
-  #urlbar-stop-button:hover:active {
-    -moz-image-region: rect(56px, 56px, 84px, 28px);
-  }
+/* MAIN IDENTITY ICON */
+
+#identity-icon {
+  width: 16px;
+  height: 16px;
 }
 
-/* popup blocker button */
+#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
+  opacity: .3;
+}
 
-#page-report-button {
-  list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
-  -moz-image-region: rect(0, 16px, 16px, 0);
+#urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
+  -moz-image-region: inherit;
+  list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg);
+  context-properties: fill;
+  fill: #FFCF00;
+  width: 16px;
+  width: 16px;
+  height: 16px;
 }
 
-#page-report-button:hover ,
-#page-report-button:hover:active,
-#page-report-button[open="true"] {
-  -moz-image-region: rect(0, 32px, 16px, 16px);
+#urlbar[actiontype="extension"] > #identity-box > #identity-icon {
+  -moz-image-region: inherit;
+  list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
+  width: 16px;
+  height: 16px;
 }
 
-/* Reader mode button */
+/* SHARING ICON */
 
-#reader-mode-button {
-  list-style-image: url("chrome://browser/skin/readerMode.svg");
-  -moz-image-region: rect(0, 16px, 16px, 0);
+#sharing-icon {
+  width: 16px;
+  height: 16px;
+  margin-inline-start: -16px;
+  position: relative;
+  display: none;
 }
 
-#reader-mode-button:hover,
-#reader-mode-button[readeractive]:hover {
-  -moz-image-region: rect(0, 32px, 16px, 16px);
+#identity-box[sharing="camera"] > #sharing-icon {
+  list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
 }
 
-#reader-mode-button:hover:active,
-#reader-mode-button[readeractive] {
-  -moz-image-region: rect(0, 48px, 16px, 32px);
+#identity-box[sharing="microphone"] > #sharing-icon {
+  list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
 }
 
-/* social share panel */
+#identity-box[sharing="screen"] > #sharing-icon {
+  list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
 
-/* === BEGIN social.inc.css === */
+}
 
-#manage-share-providers {
-  list-style-image: url("chrome://browser/skin/ToolbarFx.png");
-  -moz-image-region: rect(0, 468px, 18px, 450px);
+#identity-box[sharing] > #sharing-icon {
+  display: -moz-box;
+  animation-delay: -1.5s;
 }
 
-#manage-share-providers > .toolbarbutton-icon {
-  min-height: 18px;
-  min-width: 18px;
+#identity-box[sharing] > #identity-icon,
+#sharing-icon {
+  animation: 3s linear identity-box-sharing-icon-pulse infinite;
 }
 
-.social-panel > .panel-arrowcontainer > .panel-arrowcontent {
-  padding: 0;
+@keyframes identity-box-sharing-icon-pulse {
+/* This should remain identical to tab-sharing-icon-pulse in tabs.inc.css */
+  0%, 16.66%, 83.33%, 100% {
+    opacity: 0;
+  }
+  33.33%, 66.66% {
+    opacity: 1;
+  }
 }
-/* fixup corners for share panel */
-.social-panel > .social-panel-frame {
-  border-radius: inherit;
+
+/* TRACKING PROTECTION ICON */
+
+#tracking-protection-icon {
+  width: 16px;
+  height: 16px;
+  margin-inline-start: 2px;
+  margin-inline-end: 0;
 }
 
-/* === END social.inc.css === */
+#tracking-protection-icon[animate] {
+  transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
+}
 
-.social-panel-frame {
-  border-radius: inherit;
+#tracking-protection-icon:not([state]) {
+  margin-inline-end: -18px;
+  pointer-events: none;
+  opacity: 0;
+  /* Only animate the shield in, when it disappears hide it immediately. */
+  transition: none;
 }
 
-.social-share-frame {
-  min-width: 756px;
-  height: 150px;
+#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
+  visibility: collapse;
 }
 
-#share-container {
-  min-width: 756px;
-  background-color: white;
-  background-repeat: no-repeat;
-  background-position: center center;
+/* CONNECTION ICON */
+
+#connection-icon {
+  width: 16px;
+  height: 16px;
+  margin-inline-start: 2px;
+  visibility: collapse;
 }
-#share-container[loading] {
-  background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
+
+/* REMOTE CONTROL ICON */
+
+#main-window[remotecontrol] #remote-control-icon {
+  list-style-image: url(chrome://browser/content/robot.ico);
+  visibility: visible;
+  width: 16px;
+  height: 16px;
+  margin-inline-start: 2px;
 }
-#share-container > browser {
-  transition: opacity 150ms ease-in-out;
-  opacity: 1;
+
+/* === END identity-block.inc.css === */
+
+#page-proxy-favicon {
+  -moz-image-region: rect(0, 16px, 16px, 0);
 }
-#share-container[loading] > browser {
-  opacity: 0;
+
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
+/*  margin-inline-end: 1px;*/
 }
 
-.social-share-toolbar {
-  border-bottom: 1px solid #9C9CFF;
-  padding: 2px;
+#identity-box:hover > #page-proxy-favicon {
+  -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
-#social-share-provider-buttons {
-  padding: 0;
-  margin: 0;
+#identity-box:hover:active > #page-proxy-favicon,
+#identity-box[open=true] > #page-proxy-favicon {
+  -moz-image-region: rect(0, 48px, 16px, 32px);
 }
 
-.share-provider-button {
-  padding: 5px;
-  margin: 2px;
+#identity-box:hover {
+  background-color: #FFCF00;
+  color: #000000;
 }
 
-.share-provider-button > .toolbarbutton-text {
-  display: none;
+#identity-box:hover:active,
+#identity-box[open=true] {
+  background-color: #FF9F00;
+  color: #000000;
 }
-.share-provider-button > .toolbarbutton-icon {
-  width: 16px;
-  min-height: 16px;
-  max-height: 16px;
+
+#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
+#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
+#urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
+  background-color: #A09090;
+  color: #000000;
 }
 
-#social-share-panel {
-  min-height: 100px;
-  min-width: 766px;
+#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
+#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
+#urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
+  color: #000000;
 }
 
-#share-container,
-.social-share-frame {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: inherit;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: inherit;
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
+  background-color: #008484;
+  color: #000000;
 }
 
-#social-share-panel > .social-share-toolbar {
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
+  color: #000000;
 }
 
-#social-share-provider-buttons {
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
+#identity-box:hover > image,
+#identity-box:hover:active > image,
+#identity-box[open=true] > image {
+  filter: url(chrome://global/skin/filters.svg#active-icon-state);
 }
 
-/* bookmarks menu-button */
+/* autocomplete */
 
-#bookmarks-menu-button.bookmark-item {
-  list-style-image: url("chrome://browser/skin/places/bookmark.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
+/* === BEGIN autocomplete.inc.css === */
+
+#PopupAutoComplete > richlistbox > richlistitem {
+  height: 20px;
+  min-height: 20px;
+  border: 0;
+  border-radius: 0;
+  padding: 0px 1px 0px 1px;
 }
 
-#bookmarks-menu-button.bookmark-item[starred] {
-  -moz-image-region: rect(0px 32px 16px 16px);
+#PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
+  margin-inline-start: 4px;
+  margin-inline-end: 0;
 }
 
-#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-  padding-top: 2px;
-  padding-bottom: 2px;
+#PopupAutoComplete > richlistbox > richlistitem > .ac-title {
+  font: icon;
+  margin-inline-start: 4px;
 }
 
-#BMB_bookmarksPopup[side="top"],
-#BMB_bookmarksPopup[side="bottom"] {
-  margin-left: -20px;
-  margin-right: -20px;
+#PopupAutoComplete > richlistbox {
+  padding: 0;
 }
 
-#BMB_bookmarksPopup[side="left"],
-#BMB_bookmarksPopup[side="right"] {
-  margin-top: -20px;
-  margin-bottom: -20px;
+/* Login form autocompletion */
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
+  display: initial;
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
 }
 
-/* bookmarking panel */
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted);
+}
 
-#editBookmarkPanelStarIcon {
-  list-style-image: url("chrome://browser/skin/places/starred48.png");
-  width: 48px;
-  height: 48px;
+/* Insecure field warning */
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
+  background-color: var(--arrowpanel-dimmed);
+  border-bottom: 1px solid var(--panel-separator-color);
+  padding-bottom: 4px;
+  padding-top: 4px;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] {
+  background-color: var(--arrowpanel-dimmed-further);
+  color: #FFCF00;
 }
 
-#editBookmarkPanelStarIcon[unstarred] {
-  list-style-image: url("chrome://browser/skin/places/unstarred48.png");
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title {
+  color: #A09090;
+  font-size: 1em;
 }
 
-#editBookmarkPanelTitle {
-  font-size: 130%;
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title {
+  color: inherit;
 }
 
-#editBookmarkPanelHeader,
-#editBookmarkPanelContent {
-  margin-bottom: .5em;
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
+  list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
 }
 
-/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
-#editBMPanel_folderTree {
-  min-width: 27em;
+/* === END autocomplete.inc.css === */
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
+  border-top: 1px solid #A09090;
 }
 
-/* ::::: content area ::::: */
+#treecolAutoCompleteImage {
+  max-width: 36px;
+}
 
-#sidebar-box {
-  background-color: #9C9CFF;
-  color: #000000;
+/*
+.autocomplete-richlistbox {
+  padding: 4px;
 }
 
-#sidebar {
-  background-color: #000000;
+.autocomplete-richlistitem {
+  height: 30px;
+  min-height: 30px;
+  font: message-box;
+  border-radius: 2px;
+  border: 1px solid transparent;
+}
+*/
+.ac-title {
+  font-size: 14px;
 }
 
-#sidebar-splitter {
-  margin-inline-start: 0;
+.ac-tags {
+  font-size: 12px;
+}
+/*
+html|span.ac-tag {
+  border-radius: 2px;
+  border: 1px solid transparent;
+  padding: 0 1px;
 }
+*/
 
-#sidebar-header {
-  color: #000000;
-  padding: 2px;
+.ac-separator,
+.ac-url,
+.ac-action {
+  font-size: 12px;
 }
 
-#sidebar-title {
-  padding-inline-start: 0px;
+html|span.ac-emphasize-text-title,
+html|span.ac-emphasize-text-tag,
+html|span.ac-emphasize-text-url {
+  font-weight: 600;
 }
 
-#sidebar-header > .close-icon {
-/*  padding: 4px 2px;
-  margin: 0;
-  border: none;*/
-  list-style-image: url("chrome://global/skin/icons/close-button.gif");
+.ac-type-icon[type=bookmark] {
+  list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
 }
 
-#sidebar-header > .close-icon:hover,
-#sidebar-header > .close-icon:hover:active {
-  list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
+.ac-type-icon[type=bookmark][selected][current] {
+/*  list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
 }
 
-#sidebar-splitter:-moz-locale-dir(ltr),
-#sidebar:-moz-locale-dir(ltr) {
-  border-radius: 0 5px 0 0;
+.ac-result-type-bookmark {
+  list-style-image: url("chrome://browser/skin/places/bookmark.png");
+  -moz-image-region: rect(0px 16px 16px 0px);
+  width: 16px;
+  height: 16px;
 }
 
-#sidebar-splitter:-moz-locale-dir(rtl),
-#sidebar:-moz-locale-dir(rtl) {
-  border-radius: 5px 0 0 0;
+richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark {
+/*  -moz-image-region: rect(0px 48px 16px 32px);*/
 }
 
-.browserContainer > findbar {
-/*
-  background-color: -moz-dialog;
-  color: -moz-DialogText;
-*/
+.ac-type-icon[type=keyword],
+.ac-site-icon[type=searchengine] {
+  list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg");
+  context-properties: fill;
+  fill: #FFCF00;
 }
 
-/* Tabstrip */
+.ac-type-icon[type=keyword][selected],
+.ac-site-icon[type=searchengine][selected] {
+  list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg");
+  context-properties: fill;
+  fill: #000000;
+}
 
-#TabsToolbar {
-  min-height: 0;
-  padding: 0;
-  -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
+.ac-result-type-tag {
+  list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
+  width: 16px;
+  height: 16px;
 }
 
-#TabsToolbar .toolbar-holder {
-  background-color: #000000; /* correct effect of being an actual toolbar */
+.ac-type-icon[type=switchtab],
+.ac-type-icon[type=remotetab] {
+  list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
 }
 
-#main-window[disablechrome] #TabsToolbar,
-#TabsToolbar[tabsontop="false"] {
-  border-bottom: 1px solid #008484;
+.ac-type-icon[type=switchtab][selected],
+.ac-type-icon[type=remotetab][selected] {
+  list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
 }
 
-/* === BEGIN tabs.inc.css === */
+.autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
+.autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
+{
+  color: #8050B0;
+  font-size: smaller;
+}
 
-:root {
-  /* --tab-toolbar-navbar-overlap: 1px; */
-  /* --navbar-tab-toolbar-highlight-overlap: 1px; */
-  /* --tab-min-height: 31px; */
+.autocomplete-treebody::-moz-tree-cell(suggesthint) {
+  border-top: 1px solid #9C9CFF;
 }
-#TabsToolbar {
-  /* --tab-stroke-background-size: auto 100%; */
+
+/* combined go/reload/stop button in location bar */
+
+#urlbar-go-button,
+#reload-button,
+#stop-button {
+  border-style: none;
+  list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
+/*  margin: 0 9px; */
+  margin-inline-start: 0px;
+  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;
 }
 
-.tabbrowser-tab,
-.tabs-newtab-button,
-#TabsToolbar > #new-tab-button {
-  margin-top: 0px;
+/* XXX: temporary for Photon preview changes */
+#reload-button,
+#stop-button {
+  list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
 }
 
-.tabbrowser-tab {
-  padding: 1px 4px 2px;
+#urlbar:-moz-locale-dir(ltr) > toolbarbutton {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
 }
 
-.tabbrowser-tab:first-of-type {
-  margin-inline-start: 2px;
+#urlbar:-moz-locale-dir(rtl) > toolbarbutton {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
 }
 
-.tabs-newtab-button,
-#TabsToolbar > #new-tab-button,
-#TabsToolbar > toolbarpaletteitem > #new-tab-button,
-#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
-  border-radius: 8px 8px 0px 0px;
-  margin-inline-start: 0;
+#urlbar > toolbarbutton:not([disabled=true]):active:hover,
+#reload-button:not(:hover) {
+  border-inline-start-style: none;
+  padding-inline-start: 3px;
 }
 
-.tabs-newtab-button:not(:hover),
-#TabsToolbar > #new-tab-button:not(:hover),
-#TabsToolbar > toolbarpaletteitem > #new-tab-button,
-#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
-  background-color: #C09070;
+#reload-button,
+#reload-button {
+  -moz-image-region: rect(0px, 14px, 14px, 0px);
 }
 
-/* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
-.tabbrowser-tab[visuallyselected=true] {
-/*  position: relative;
-  z-index: 2;*/
+#reload-button[disabled=true],
+#reload-button[disabled=true] {
+  -moz-image-region: rect(28px, 14px, 42px, 0px);
 }
 
-.tab-background-middle {
+#reload-button:not([disabled=true]):hover,
+#reload-button:not([disabled=true]):hover {
+  -moz-image-region: rect(14px, 14px, 28px, 0px);
 }
 
-.tab-content {
+#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
+#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
+  transform: scaleX(-1);
 }
 
-.tab-content[pinned] {
+#urlbar-go-button {
+  -moz-image-region: rect(0, 42px, 14px, 28px);
 }
 
-.tab-throbber,
-.tab-icon-image,
-.tab-sharing-icon-overlay,
-.tab-icon-sound,
-.tab-close-button {
+#urlbar-go-button:hover {
+  -moz-image-region: rect(14px, 42px, 28px, 28px);
 }
 
-.tab-throbber,
-.tab-sharing-icon-overlay,
-.tab-icon-image {
-  height: 16px;
-  width: 16px;
-  margin-inline-end: 3px;
+#urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
+  transform: scaleX(-1);
 }
 
-.tab-icon-image {
-  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
+#stop-button,
+#stop-button {
+  -moz-image-region: rect(0px, 28px, 14px, 14px);
 }
 
-.tab-icon-image[sharing]:not([selected]),
-.tab-sharing-icon-overlay {
-  animation: 3s linear tab-sharing-icon-pulse infinite;
+#stop-button:hover,
+#stop-button:hover {
+  -moz-image-region: rect(14px, 28px, 28px, 14px);
 }
 
-@keyframes tab-sharing-icon-pulse {
-/* This should remain identical to identity-box-sharing-icon-pulse in identity-block.inc.css */
-  0%, 16.66%, 83.33%, 100% {
-    opacity: 0;
+@media (min-resolution: 1.1dppx) {
+  #reload-button,
+  #stop-button,
+  #urlbar-go-button,
+  #reload-button,
+  #stop-button {
+    list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
+  }
+
+  #reload-button > .toolbarbutton-icon,
+  #stop-button > .toolbarbutton-icon,
+  #urlbar-go-button > .toolbarbutton-icon,
+  #reload-button > .toolbarbutton-icon,
+  #stop-button > .toolbarbutton-icon {
+    width: 14px;
+  }
+
+  #urlbar-go-button {
+    -moz-image-region: rect(0, 84px, 28px, 56px);
+  }
+
+  #urlbar-go-button:hover {
+    -moz-image-region: rect(28px, 84px, 56px, 56px);
+  }
+
+  #urlbar-go-button:hover:active {
+    -moz-image-region: rect(56px, 84px, 84px, 56px);
   }
-  33.33%, 66.66% {
-    opacity: 1;
+
+  #reload-button,
+  #reload-button {
+    -moz-image-region: rect(0, 28px, 28px, 0);
   }
-}
 
-.tab-icon-image[sharing]:not([selected]) {
-  animation-delay: -1.5s;
-}
+  #reload-button:not([disabled]):hover,
+  #reload-button:not([disabled]):hover {
+    -moz-image-region: rect(28px, 28px, 56px, 0);
+  }
 
-.tab-sharing-icon-overlay {
-  /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
-  margin-inline-start: -22px;
-  position: relative;
-}
+  #reload-button:not([disabled]):hover:active,
+  #reload-button:not([disabled]):hover:active {
+    -moz-image-region: rect(56px, 28px, 84px, 0);
+  }
 
-.tab-sharing-icon-overlay[sharing="camera"] {
-  list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
-}
+  #stop-button,
+  #stop-button {
+    -moz-image-region: rect(0, 56px, 28px, 28px);
+  }
 
-.tab-sharing-icon-overlay[sharing="microphone"] {
-  list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
-}
+  #stop-button:not([disabled]):hover,
+  #stop-button:not([disabled]):hover {
+    -moz-image-region: rect(28px, 56px, 56px, 28px);
+  }
 
-.tab-sharing-icon-overlay[sharing="screen"] {
-  list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
+  #stop-button:hover:active,
+  #stop-button:hover:active {
+    -moz-image-region: rect(56px, 56px, 84px, 28px);
+  }
 }
 
-.tab-icon-overlay {
-  width: 16px;
-  height: 16px;
-  margin-top: -8px;
-  margin-inline-start: -15px;
-  margin-inline-end: -1px;
-  position: relative;
-}
+/* popup blocker button */
 
-.tab-icon-overlay[crashed] {
-  list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
+#page-report-button {
+  list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
+  -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
-.tab-icon-overlay[soundplaying],
-.tab-icon-overlay[muted]:not([crashed]),
-.tab-icon-overlay[blocked]:not([crashed]) {
-  border-radius: 10px;
+#page-report-button:hover ,
+#page-report-button:hover:active,
+#page-report-button[open="true"] {
+  -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
-.tab-icon-overlay[soundplaying]:hover,
-.tab-icon-overlay[muted]:hover,
-.tab-icon-overlay[blocked]:not([crashed]):hover {
-  background-color: #FFCF00;
-}
+/* Reader mode button */
 
-.tab-icon-overlay[soundplaying] {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
+#reader-mode-button {
+  list-style-image: url("chrome://browser/skin/readerMode.svg");
+  -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
-.tab-icon-overlay[muted]:not([crashed]) {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
+#reader-mode-button:hover,
+#reader-mode-button[readeractive]:hover {
+  -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
-.tab-icon-overlay[blocked]:not([crashed]) {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
+#reader-mode-button:hover:active,
+#reader-mode-button[readeractive] {
+  -moz-image-region: rect(0, 48px, 16px, 32px);
 }
 
-#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
-.tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
-}
+/* social share panel */
 
-#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
-.tab-icon-overlay[mouted][selected]:-moz-lwtheme-brighttext:not(:hover) {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
-}
+/* === BEGIN social.inc.css === */
 
-#TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover),
-.tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
+#manage-share-providers {
+  list-style-image: url("chrome://browser/skin/ToolbarFx.png");
+  -moz-image-region: rect(0, 468px, 18px, 450px);
 }
 
-.tab-throbber[busy] {
-  list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
+#manage-share-providers > .toolbarbutton-icon {
+  min-height: 18px;
+  min-width: 18px;
 }
 
-.tab-throbber[progress] {
-  list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
+.social-panel > .panel-arrowcontainer > .panel-arrowcontent {
+  padding: 0;
+}
+/* fixup corners for share panel */
+.social-panel > .social-panel-frame {
+  border-radius: inherit;
 }
 
-@media (min-resolution: 1.1dppx) {
-  .tab-throbber[busy] {
-    list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
-  }
+/* === END social.inc.css === */
 
-  .tab-throbber[progress] {
-    list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
-  }
+.social-panel-frame {
+  border-radius: inherit;
 }
 
-.tab-throbber[pinned],
-.tab-icon-image[pinned] {
-  margin-inline-start: 2px;
-  margin-inline-end: 2px;
+.social-share-frame {
+  min-width: 756px;
+  height: 150px;
 }
 
-.tab-label {
-  /* this needs to add up to the 16px of the icon image */
-  height: 12px;
-  margin-top: 2px !important;
-  margin-bottom: 2px !important;
+#share-container {
+  min-width: 756px;
+  background-color: white;
+  background-repeat: no-repeat;
+  background-position: center center;
 }
-
-.tab-icon-sound {
-  margin-inline-start: 4px;
-  width: 16px;
-  height: 16px;
-  padding: 0;
+#share-container[loading] {
+  background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
 }
-
-.tab-icon-sound[soundplaying],
-.tab-icon-sound[muted],
-.tab-icon-sound[blocked] {
-  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
-  filter: url(chrome://global/skin/filters.svg#fill);
-  fill: currentColor;
+#share-container > browser {
+  transition: opacity 150ms ease-in-out;
+  opacity: 1;
 }
-
-.tab-icon-sound[muted] {
-  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
+#share-container[loading] > browser {
+  opacity: 0;
 }
 
-.tab-icon-sound[blocked] {
-  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
+.social-share-toolbar {
+  border-bottom: 1px solid #9C9CFF;
+  padding: 2px;
 }
 
-.tab-close-button {
-  margin-top: 1px;
+#social-share-provider-buttons {
   padding: 0;
+  margin: 0;
 }
 
-.tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
-.tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
-  transition: opacity .3s linear var(--soundplaying-removal-delay);
-  opacity: 0;
+.share-provider-button {
+  padding: 5px;
+  margin: 2px;
 }
 
-.tab-background,
-.tabs-newtab-button {
-  /* overlap the tab curves */
+.share-provider-button > .toolbarbutton-text {
+  display: none;
 }
-
-.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
+.share-provider-button > .toolbarbutton-icon {
+  width: 16px;
+  min-height: 16px;
+  max-height: 16px;
 }
 
-/* Tab Overflow */
-.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
-.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
+#social-share-panel {
+  min-height: 100px;
+  min-width: 766px;
 }
 
-.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
-.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
+#share-container,
+.social-share-frame {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: inherit;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: inherit;
 }
 
-.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
+#social-share-panel > .social-share-toolbar {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
 }
 
-.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
+#social-share-provider-buttons {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
 }
 
-.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
-.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
+/* bookmarks menu-button */
+
+#bookmarks-menu-button.bookmark-item {
+  list-style-image: url("chrome://browser/skin/places/bookmark.png");
+  -moz-image-region: rect(0px 16px 16px 0px);
 }
 
-.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
-.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
+#bookmarks-menu-button.bookmark-item[starred] {
+  -moz-image-region: rect(0px 32px 16px 16px);
 }
 
-.tab-background-start[selected=true]::after,
-.tab-background-start[selected=true]::before,
-.tab-background-start,
-.tab-background-end,
-.tab-background-end[selected=true]::after,
-.tab-background-end[selected=true]::before {
+#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+  padding-top: 2px;
+  padding-bottom: 2px;
 }
 
-.tabbrowser-tab:not([visuallyselected=true]),
-.tabbrowser-tab:-moz-lwtheme {
+#BMB_bookmarksPopup[side="top"],
+#BMB_bookmarksPopup[side="bottom"] {
+  margin-left: -20px;
+  margin-right: -20px;
 }
 
-/* tabbrowser-tab focus ring */
-.tabbrowser-tab:focus {
-  outline: 1px dotted;
+#BMB_bookmarksPopup[side="left"],
+#BMB_bookmarksPopup[side="right"] {
+  margin-top: -20px;
+  margin-bottom: -20px;
 }
 
-/* Selected tab */
+/* bookmarking panel */
 
-.tabbrowser-tab[visuallyselected="true"] {
+#editBookmarkPanelStarIcon {
+  list-style-image: url("chrome://browser/skin/places/starred48.png");
+  width: 48px;
+  height: 48px;
 }
 
-/* End selected tab */
-
-/* Tab pointer-events */
-/*
-.tabbrowser-tab {
-  pointer-events: none;
+#editBookmarkPanelStarIcon[unstarred] {
+  list-style-image: url("chrome://browser/skin/places/unstarred48.png");
 }
 
-.tab-background-middle,
-.tabs-newtab-button,
-.tab-icon-overlay[soundplaying],
-.tab-icon-overlay[muted]:not([crashed]),
-.tab-icon-overlay[blocked]:not([crashed]),
-.tab-icon-sound,
-.tab-close-button {
-  pointer-events: auto;
+#editBookmarkPanelTitle {
+  font-size: 130%;
 }
-*/
-/* Pinned tabs */
 
-/*
-.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
-.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
-*/
-.tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
-  background-color: #E7ADE7;
+#editBookmarkPanelHeader,
+#editBookmarkPanelContent {
+  margin-bottom: .5em;
 }
 
-.tab-label[attention]:not([selected="true"]) {
-  font-weight: bold;
+/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
+#editBMPanel_folderTree {
+  min-width: 27em;
 }
 
-.tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
-  background-color: #3333FF;
+/* ::::: content area ::::: */
+
+/* === BEGIN sidebar.inc.css === */
+
+#sidebar-box {
+  --icon-fill: #FFCF00;
+  --header-background-color: #9C9CFF;
+  --header-background-color-hover: #FFCF00;
+  --title-font-size: 13px;
+
+  background-color: #9C9CFF;
   color: #000000;
 }
 
-/* Tab separators */
-/*
-.tabbrowser-tab::after,
-.tabbrowser-tab::before {
-  width: 1px;
-  margin-inline-start: -1px;
-  background-image: linear-gradient(transparent 5px,
-                                    currentColor 5px,
-                                    currentColor calc(100% - 4px),
-                                    transparent calc(100% - 4px));
-  opacity: 0.2;
+#sidebar-header {
+  color: #000000;
+  padding: 2px;
 }
 
-#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
-#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
-  opacity: 0.4;
-}
-*/
-/* Also show separators beside the selected tab when dragging it. */
-/*
-#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
-.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
-#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
-  content: "";
-  display: -moz-box;
+#sidebar-splitter {
+  margin-inline-start: 0;
 }
-*/
-/* New tab button */
 
-.tabs-newtab-button {
-  width: 28px;
-  /* width: calc(36px + var(--tab-curve-width)); */
+#sidebar-splitter:-moz-locale-dir(ltr),
+#sidebar:-moz-locale-dir(ltr) {
+  border-radius: 0 5px 0 0;
 }
-@media (min-resolution: 1.1dppx) {
-  /* image preloading hack from like lowdpi styles */
-  #tabbrowser-tabs::before {
-  }
-
-  .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
-  .tabs-newtab-button:hover {
-  }
 
-  .tab-background-middle[selected=true] {
-  }
+#sidebar-splitter:-moz-locale-dir(rtl),
+#sidebar:-moz-locale-dir(rtl) {
+  border-radius: 5px 0 0 0;
+}
 
-  .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
-  .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
-  }
+#sidebar-throbber[loading="true"] {
+  list-style-image: url("chrome://global/skin/icons/loading.png");
+}
 
-  .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
-  .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
+@media (min-resolution: 2dppx) {
+  .sidebar-throbber[loading="true"],
+  #sidebar-throbber[loading="true"] {
+    list-style-image: url("chrome://global/skin/icons/loading@2x.png");
+    width: 16px;
   }
 }
 
-/* All tabs menupopup */
+#sidebar-title {
+  padding-inline-start: 0px;
+}
 
-.alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
-  background-color: #402800;
+#sidebar-title {
+  margin: 0;
+  padding: 0;
+  padding-inline-start: 8px;
+  padding-inline-end: 4px;
 }
 
-.alltabs-endimage[soundplaying],
-.alltabs-endimage[muted],
-.alltabs-endimage[blocked] {
-  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
-  filter: url(chrome://global/skin/filters.svg#fill);
+#sidebar-switcher-arrow,
+#sidebar-close > .toolbarbutton-icon {
+  -moz-context-properties: fill;
   fill: currentColor;
+  opacity: 0.8;
 }
 
-.alltabs-endimage[muted] {
-  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
+#sidebar-switcher-arrow {
+/*  list-style-image: url(chrome://browser/skin/arrow-dropdown.svg);*/
+  list-style-image: url(chrome://global/skin/arrow/arrow-down.gif);
+  width: 12px;
+  height: 12px;
 }
 
-.alltabs-endimage[blocked] {
-  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
+#sidebar-switcher-arrow:hover {
+  list-style-image: url(chrome://global/skin/arrow/arrow-down-hover.gif);
 }
 
-/* === END tabs.inc.css === */
-
-/* Tab DnD indicator */
-.tab-drop-indicator {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
-  margin-bottom: -11px;
+#sidebar-header > .close-icon {
+/*  padding: 4px 2px;
+  margin: 0;
+  border: none;*/
+  list-style-image: url("chrome://global/skin/icons/close-button.gif");
 }
 
-/* Tab close button */
-.tab-close-button {
-  list-style-image: url("chrome://global/skin/icons/close-button.gif") !important;
-  -moz-image-region: auto !important;
+#sidebar-header > .close-icon:hover,
+#sidebar-header > .close-icon:hover:active {
+  list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
 }
 
-.tab-close-button:hover,
-.tab-close-button:hover[selected="true"] {
-  list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
-  -moz-image-region: auto !important;
+#sidebar-close {
+  -moz-appearance: none;
+  list-style-image: url(chrome://browser/skin/sidebar/close.svg);
+  margin: 0;
+  padding: 4px;
+  border-radius: 4px;
 }
-
-.tab-close-button:hover:active,
-.tab-close-button:hover:active[selected="true"] {
-  list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
-  -moz-image-region: auto !important;
+/*
+#sidebar-switcher-target {
+  -moz-appearance: none;
+  color: inherit;
+  margin-inline-end: 4px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  padding: 2px 4px;
 }
 
-.tab-close-button > .button-icon,
-.tab-close-button > .button-box > .button-icon,
-.tab-close-button > .toolbarbutton-icon {
-  width: auto !important;
+#sidebar-switcher-target:hover,
+#sidebar-close:hover {
+  background: hsla(240, 5%, 5%, 0.05);
 }
 
+#sidebar-switcher-target:hover {
+  border-color: rgba(0, 0, 0, 0.2);
+}
 
-/* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
-
-.tabbrowser-arrowscrollbox > .scrollbutton-up,
-.tabbrowser-arrowscrollbox > .scrollbutton-down {
-  margin: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  background-origin: border-box;
+#sidebar-close:hover:active,
+#sidebar-switcher-target:hover:active,
+#sidebar-switcher-target.active {
+  background: hsla(240, 5%, 5%, 0.1);
 }
 
-#main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
-#main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
-.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
-.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
- }
+#sidebar-switcher-target:hover:active,
+#sidebar-switcher-target.active {
+  border-color: rgba(0, 0, 0, 0.25);
+}
+*/
+#sidebarMenu-popup .subviewbutton {
+  min-width: 190px;
+}
 
-.tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
-.tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
- }
+#sidebar-extensions:empty + toolbarseparator {
+  display: none;
+}
 
-.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
-.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
-/*  transform: scaleX(-1);*/
+/* Allow room for the checkbox drawn as a background image at the start of the toolbarbutton */
+#sidebarMenu-popup .subviewbutton-iconic > .toolbarbutton-icon {
+  padding-inline-start: 16px;
+}
+#sidebarMenu-popup .subviewbutton-iconic > .toolbarbutton-text {
+  padding-inline-start: 0;
 }
 
-.tabbrowser-arrowscrollbox > .scrollbutton-down {
-  transition: 1s background-color ease-out;
+#sidebar-box[sidebarcommand="viewWebPanelsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
+  list-style-image: url(chrome://mozapps/skin/places/defaultFavicon.svg);
 }
 
-.tabbrowser-arrowscrollbox > .scrollbutton-down[highlight] {
-  background-color: #008484;
+#sidebar-switcher-bookmarks > .toolbarbutton-icon,
+#sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
+/*  list-style-image: url(chrome://browser/skin/bookmark.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+  opacity: 0.8;*/
+  list-style-image: url(chrome://browser/skin/places/bookmark.png);
+  -moz-image-region: rect(0px 16px 16px 0px);
 }
 
-.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
-.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
-/*  border-width: 0 2px 0 0;
-  border-style: solid;
-  border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
+#sidebar-switcher-history > .toolbarbutton-icon,
+#sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
+/*  list-style-image: url(chrome://browser/skin/history.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+  opacity: 0.8;*/
+  list-style-image: url(chrome://browser/skin/places/history.png);
 }
 
-.tabs-newtab-button > .toolbarbutton-icon {
-  margin-top: -1px;
-  margin-bottom: -1px;
+#sidebar-switcher-tabs > .toolbarbutton-icon,
+#sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
+/*  list-style-image: url(chrome://browser/skin/synced-tabs.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+  opacity: 0.8;*/
+  list-style-image: url(chrome://browser/skin/urlbar-tab.svg#tab);
 }
 
-.tabs-newtab-button,
-#TabsToolbar > #new-tab-button,
-#TabsToolbar > toolbarpaletteitem > #new-tab-button,
-#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
-  list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
-  -moz-image-region: auto;
+/* === END sidebar.inc.css === */
+
+#sidebar {
+  background-color: #000000;
 }
 
-.tabs-newtab-button,
-.tabs-newtab-button:hover,
-#TabsToolbar > #new-tab-button,
-#TabsToolbar > #new-tab-button:hover {
+.browserContainer > findbar {
+/*
+  background-color: -moz-dialog;
+  color: -moz-DialogText;
+*/
 }
 
-#main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
-#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
-#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
-.tabs-newtab-button:-moz-lwtheme-brighttext,
-#TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
-#TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
+/* Tabstrip */
+
+#TabsToolbar {
+  min-height: 0;
+  padding: 0;
+  -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
 }
 
-#TabsToolbar > #new-tab-button {
-  width: 26px;
-  -moz-box-orient: horizontal;
+#TabsToolbar .toolbar-holder {
+  background-color: #000000; /* correct effect of being an actual toolbar */
 }
 
-#alltabs-button {
-  list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
+#main-window[disablechrome] #TabsToolbar,
+#TabsToolbar[tabsontop="false"] {
+  border-bottom: 1px solid #008484;
 }
 
-#alltabs-button:hover,
-#alltabs-button:hover:active,
-#alltabs-button[open="true"] {
-  list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
+/* === BEGIN tabs.inc.css === */
+
+:root {
+  /* --tab-toolbar-navbar-overlap: 1px; */
+  /* --navbar-tab-toolbar-highlight-overlap: 1px; */
+  /* --tab-min-height: 31px; */
+}
+#TabsToolbar {
+  /* --tab-stroke-background-size: auto 100%; */
 }
 
-#main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
-#alltabs-button:-moz-lwtheme-brighttext {
+.tabbrowser-tab,
+.tabs-newtab-button,
+#TabsToolbar > #new-tab-button {
+  margin-top: 0px;
 }
 
-#alltabs-button > .toolbarbutton-icon {
-/*  margin: 0 2px;*/
+.tabbrowser-tab {
+  padding: 1px 4px 2px;
 }
 
-#alltabs-button > .toolbarbutton-menu-dropmarker {
-  display: none;
+.tabbrowser-tab:first-of-type {
+  margin-inline-start: 2px;
 }
 
-/* All tabs menupopup */
-.alltabs-item > .menu-iconic-left > .menu-iconic-icon {
-  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
-  -moz-image-region: auto;
+.tabs-newtab-button,
+#TabsToolbar > #new-tab-button,
+#TabsToolbar > toolbarpaletteitem > #new-tab-button,
+#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
+  border-radius: 8px 8px 0px 0px;
+  margin-inline-start: 0;
 }
 
-.alltabs-item[selected="true"] {
-  font-weight: bold;
+.tabs-newtab-button:not(:hover),
+#TabsToolbar > #new-tab-button:not(:hover),
+#TabsToolbar > toolbarpaletteitem > #new-tab-button,
+#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
+  background-color: #C09070;
 }
 
-.alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
-  list-style-image: url("chrome://global/skin/icons/loading.png");
+/* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
+.tabbrowser-tab[visuallyselected=true] {
+/*  position: relative;
+  z-index: 2;*/
 }
 
-@media (min-resolution: 1.1dppx) {
-  .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
-    list-style-image: url("chrome://global/skin/icons/loading@2x.png");
-  }
+.tab-background-middle {
 }
 
-toolbarbutton.chevron {
-  list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
+.tab-content {
 }
 
-toolbarbutton.chevron:hover {
-  list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
-}
-/*
-toolbar[brighttext] toolbarbutton.chevron {
-  list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
-}
-*/
-toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
-toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
-  transform: scaleX(-1);
+.tab-content[pinned] {
 }
 
-toolbarbutton.chevron > .toolbarbutton-text,
-toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
-  display: none;
+.tab-throbber,
+.tab-icon-image,
+.tab-sharing-icon-overlay,
+.tab-icon-sound,
+.tab-close-button {
 }
 
-toolbarbutton.chevron > .toolbarbutton-icon {
-  margin: 0;
+.tab-throbber,
+.tab-sharing-icon-overlay,
+.tab-icon-image {
+  height: 16px;
+  width: 16px;
+  margin-inline-end: 3px;
 }
 
-#sidebar-throbber[loading="true"] {
-  list-style-image: url("chrome://global/skin/icons/loading.png");
-  margin-inline-end: 4px;
+.tab-icon-image {
+  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
 }
 
-@media (min-resolution: 1.1dppx) {
-  #sidebar-throbber[loading="true"] {
-    list-style-image: url("chrome://global/skin/icons/loading@2x.png");
-    width: 16px;
-  }
+.tab-icon-image[sharing]:not([selected]),
+.tab-sharing-icon-overlay {
+  animation: 3s linear tab-sharing-icon-pulse infinite;
 }
 
-/* Bookmarks toolbar */
-#PlacesToolbarDropIndicator {
-  list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
+@keyframes tab-sharing-icon-pulse {
+/* This should remain identical to identity-box-sharing-icon-pulse in identity-block.inc.css */
+  0%, 16.66%, 83.33%, 100% {
+    opacity: 0;
+  }
+  33.33%, 66.66% {
+    opacity: 1;
+  }
 }
 
-toolbarbutton.bookmark-item[dragover="true"][open="true"] {
-  background-color: #008484 !important;
-  color: #FFCF00 !important;
+.tab-icon-image[sharing]:not([selected]) {
+  animation-delay: -1.5s;
 }
 
-/* rules for menupopup drop indicators */
-.menupopup-drop-indicator-bar {
+.tab-sharing-icon-overlay {
+  /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
+  margin-inline-start: -22px;
   position: relative;
-  /* these two margins must together compensate the indicator's height */
-  margin-top: -1px;
-  margin-bottom: -1px;
 }
 
-.menupopup-drop-indicator {
-  list-style-image: none;
-  height: 2px;
-  margin-inline-end: -4em;
-  background-color: #008484;
+.tab-sharing-icon-overlay[sharing="camera"] {
+  list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
 }
 
-/* === BEGIN notification-icons.inc.css === */
+.tab-sharing-icon-overlay[sharing="microphone"] {
+  list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
+}
 
-#notification-popup-box {
-  border-radius: 3px 0 0 3px;
-  padding: 5px 0px;
-  margin: -5px 0px;
-  margin-inline-end: -5px;
-  padding-inline-end: 5px;
+.tab-sharing-icon-overlay[sharing="screen"] {
+  list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
 }
 
-.notification-anchor-icon,
-#blocked-permissions-container > .blocked-permission-icon {
+.tab-icon-overlay {
   width: 16px;
   height: 16px;
-  margin-inline-start: 2px;
+  margin-top: -8px;
+  margin-inline-start: -15px;
+  margin-inline-end: -1px;
+  position: relative;
 }
 
-/* This class can be used alone or in combination with the class defining the
-   type of icon displayed. This rule must be defined before the others in order
-   for its list-style-image to be overridden. */
-.notification-anchor-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#default-info);
+.tab-icon-overlay[crashed] {
+  list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
 }
 
-.notification-anchor-icon:-moz-focusring {
-  outline: 1px dotted #008484;
+.tab-icon-overlay[soundplaying],
+.tab-icon-overlay[muted]:not([crashed]),
+.tab-icon-overlay[blocked]:not([crashed]) {
+  border-radius: 10px;
 }
 
-@media (min-resolution: 1.1dppx) {
-  .notification-anchor-icon {
-    list-style-image: url(chrome://global/skin/icons/info.svg);
-  }
+.tab-icon-overlay[soundplaying]:hover,
+.tab-icon-overlay[muted]:hover,
+.tab-icon-overlay[blocked]:not([crashed]):hover {
+  background-color: #FFCF00;
 }
 
-.notification-anchor-icon:not(.plugin-blocked),
-#blocked-permissions-container > .blocked-permission-icon {
-  filter: url(chrome://global/skin/filters.svg#fill);
-  fill: currentColor;
+.tab-icon-overlay[soundplaying] {
+  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
 }
 
-/* INDIVIDUAL NOTIFICATIONS */
+.tab-icon-overlay[muted]:not([crashed]) {
+  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
+}
 
-.popup-notification-icon[popupid="web-notifications"],
-.desktop-notification-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
+.tab-icon-overlay[blocked]:not([crashed]) {
+  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
 }
 
-.desktop-notification-icon.blocked-permission-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
+#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
+.tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
+  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
 }
 
-.geo-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
+#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
+.tab-icon-overlay[mouted][selected]:-moz-lwtheme-brighttext:not(:hover) {
+  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
 }
 
-.geo-icon.blocked-permission-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
+#TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover),
+.tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
+  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
 }
 
-.popup-notification-icon[popupid="geolocation"] {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
+.tab-throbber[busy] {
+  list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
 }
 
-.popup-notification-icon[popupid="indexedDB-permissions-prompt"],
-.indexedDB-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
+.tab-throbber[progress] {
+  list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
 }
 
-.indexedDB-icon.blocked-permission-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
+@media (min-resolution: 1.1dppx) {
+  .tab-throbber[busy] {
+    list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
+  }
+
+  .tab-throbber[progress] {
+    list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
+  }
 }
 
-.login-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
+.tab-throbber[pinned],
+.tab-icon-image[pinned] {
+  margin-inline-start: 2px;
+  margin-inline-end: 2px;
 }
 
-.popup-notification-icon[popupid="password"] {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
+.tab-label {
+  /* this needs to add up to the 16px of the icon image */
+  height: 12px;
+  margin-top: 2px !important;
+  margin-bottom: 2px !important;
 }
 
-.camera-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
+.tab-icon-sound {
+  margin-inline-start: 4px;
+  width: 16px;
+  height: 16px;
+  padding: 0;
 }
 
-.camera-icon.in-use {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
+.tab-icon-sound[soundplaying],
+.tab-icon-sound[muted],
+.tab-icon-sound[blocked] {
+  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
+  filter: url(chrome://global/skin/filters.svg#fill);
+  fill: currentColor;
 }
 
-.camera-icon.blocked-permission-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
+.tab-icon-sound[muted] {
+  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
 }
 
-.microphone-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
+.tab-icon-sound[blocked] {
+  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
 }
 
-.microphone-icon.in-use {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
+.tab-close-button {
+  margin-top: 1px;
+  padding: 0;
 }
 
-.microphone-icon.blocked-permission-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
+.tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
+.tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
+  transition: opacity .3s linear var(--soundplaying-removal-delay);
+  opacity: 0;
 }
 
-.popup-notification-icon.microphone-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
+.tab-background,
+.tabs-newtab-button {
+  /* overlap the tab curves */
 }
 
-.screen-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
+.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
 }
 
-.screen-icon.in-use {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
+/* Tab Overflow */
+.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
+.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
 }
 
-.screen-icon.blocked-permission-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
+.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
+.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
 }
 
-#webRTC-preview:not([hidden]) {
-  display: -moz-stack;
-  border-radius: 4px;
-  border: 1px solid #A09090;
-  overflow: hidden;
-  min-width: 300px;
-  min-height: 10em;
+.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
 }
 
-html|*#webRTC-previewVideo {
-  width: 300px;
-  /* If we don't set the min-width, width is ignored. */
-  min-width: 300px;
-  max-height: 200px;
+.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
 }
 
-#webRTC-previewWarning {
-  background: #FF0000 url("chrome://browser/skin/warning-white.svg") no-repeat .75em .75em;
-  margin: 0;
-  padding: .5em;
-  padding-inline-start: calc(1.5em + 16px);
-  border-top: 1px solid #A09090;
+.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
+.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
 }
 
-#webRTC-previewWarning > .text-link {
-  margin-inline-start: 0;
+.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
+.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
 }
 
-/* This icon has a block sign in it, so we don't need a blocked version. */
-.popup-icon {
-  list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
+.tab-background-start[selected=true]::after,
+.tab-background-start[selected=true]::before,
+.tab-background-start,
+.tab-background-end,
+.tab-background-end[selected=true]::after,
+.tab-background-end[selected=true]::before {
 }
 
-/* EME */
-
-.popup-notification-icon[popupid="drmContentPlaying"],
-.drm-icon {
-  list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
+.tabbrowser-tab:not([visuallyselected=true]),
+.tabbrowser-tab:-moz-lwtheme {
 }
 
-.drm-icon:hover:active {
-  list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
+/* tabbrowser-tab focus ring */
+.tabbrowser-tab:focus {
+  outline: 1px dotted;
 }
 
-#eme-notification-icon[firstplay=true] {
-  animation: emeTeachingMoment 0.2s linear 0s 5 normal;
-}
+/* Selected tab */
 
-@keyframes emeTeachingMoment {
-  0% {transform: translateX(0); }
-  25% {transform: translateX(3px) }
-  75% {transform: translateX(-3px) }
-  100% { transform: translateX(0); }
+.tabbrowser-tab[visuallyselected="true"] {
 }
 
-/* INSTALL ADDONS */
+/* End selected tab */
 
-.install-icon {
-  list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
+/* Tab pointer-events */
+/*
+.tabbrowser-tab {
+  pointer-events: none;
 }
 
-.popup-notification-icon[popupid="xpinstall-disabled"],
-.popup-notification-icon[popupid="addon-install-blocked"],
-.popup-notification-icon[popupid="addon-install-origin-blocked"] {
-  list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
+.tab-background-middle,
+.tabs-newtab-button,
+.tab-icon-overlay[soundplaying],
+.tab-icon-overlay[muted]:not([crashed]),
+.tab-icon-overlay[blocked]:not([crashed]),
+.tab-icon-sound,
+.tab-close-button {
+  pointer-events: auto;
 }
+*/
+/* Pinned tabs */
 
-.popup-notification-icon[popupid="addon-progress"] {
-  list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
+/*
+.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
+.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
+*/
+.tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
+  background-color: #E7ADE7;
 }
 
-.popup-notification-icon[popupid="addon-install-failed"] {
-  list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
+.tab-label[attention]:not([selected="true"]) {
+  font-weight: bold;
 }
 
-.popup-notification-icon[popupid="addon-install-confirmation"] {
-  list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
+.tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
+  background-color: #3333FF;
+  color: #000000;
 }
 
-#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
-  list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
+/* Tab separators */
+/*
+.tabbrowser-tab::after,
+.tabbrowser-tab::before {
+  width: 1px;
+  margin-inline-start: -1px;
+  background-image: linear-gradient(transparent 5px,
+                                    currentColor 5px,
+                                    currentColor calc(100% - 4px),
+                                    transparent calc(100% - 4px));
+  opacity: 0.2;
 }
 
-.popup-notification-icon[popupid="addon-install-complete"] {
-  list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
+#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
+#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
+  opacity: 0.4;
 }
-
-.popup-notification-icon[popupid="addon-install-restart"] {
-  list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
+*/
+/* Also show separators beside the selected tab when dragging it. */
+/*
+#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
+.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
+#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
+  content: "";
+  display: -moz-box;
 }
+*/
+/* New tab button */
 
-.popup-notification-icon[popupid="click-to-play-plugins"] {
-  list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
+.tabs-newtab-button {
+  width: 28px;
+  /* width: calc(36px + var(--tab-curve-width)); */
 }
+@media (min-resolution: 1.1dppx) {
+  /* image preloading hack from like lowdpi styles */
+  #tabbrowser-tabs::before {
+  }
 
-/* OFFLINE APPS */
+  .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
+  .tabs-newtab-button:hover {
+  }
 
-.popup-notification-icon[popupid*="offline-app-requested"],
-.popup-notification-icon[popupid="offline-app-usage"] {
-  list-style-image: url(chrome://global/skin/icons/question-64.png);
-}
+  .tab-background-middle[selected=true] {
+  }
 
-/* PLUGINS */
+  .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
+  .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
+  }
 
-.plugin-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
+  .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
+  .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
+  }
 }
 
-.plugin-icon.plugin-blocked {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
+/* All tabs menupopup */
+
+.alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
+  background-color: #402800;
 }
 
-#notification-popup-box[hidden] {
-  /* Override display:none to make the pluginBlockedNotification animation work
-     when showing the notification repeatedly. */
-  display: -moz-box;
-  visibility: collapse;
+.alltabs-endimage[soundplaying],
+.alltabs-endimage[muted],
+.alltabs-endimage[blocked] {
+  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
+  filter: url(chrome://global/skin/filters.svg#fill);
+  fill: currentColor;
 }
 
-#plugins-notification-icon.plugin-blocked[showing] {
-  animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
+.alltabs-endimage[muted] {
+  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
 }
 
-@keyframes pluginBlockedNotification {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+.alltabs-endimage[blocked] {
+  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
 }
 
-/* SOCIAL API */
+/* === END tabs.inc.css === */
 
-.popup-notification-icon[popupid="servicesInstall"] {
-  list-style-image: url(chrome://browser/skin/social/services-64.png);
+/* Tab DnD indicator */
+.tab-drop-indicator {
+  list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
+  margin-bottom: -11px;
 }
 
-.service-icon {
-  list-style-image: url(chrome://browser/skin/social/services-16.png);
+/* Tab close button */
+.tab-close-button {
+  list-style-image: url("chrome://global/skin/icons/close-button.gif") !important;
+  -moz-image-region: auto !important;
 }
 
-/* TRANSLATION */
+.tab-close-button:hover,
+.tab-close-button:hover[selected="true"] {
+  list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
+  -moz-image-region: auto !important;
+}
 
-.translation-icon {
-  list-style-image: url(chrome://browser/skin/translation-16.png);
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
+.tab-close-button:hover:active,
+.tab-close-button:hover:active[selected="true"] {
+  list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
+  -moz-image-region: auto !important;
 }
 
-.translation-icon.in-use {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
+.tab-close-button > .button-icon,
+.tab-close-button > .button-box > .button-icon,
+.tab-close-button > .toolbarbutton-icon {
+  width: auto !important;
 }
 
-/* UPDATE */
 
-.popup-notification-icon[popupid="update-available"],
-.popup-notification-icon[popupid="update-manual"],
-.popup-notification-icon[popupid="update-restart"] {
-  background: #74BF43 url(chrome://browser/skin/notification-icons.svg#update) no-repeat center;
-  border-radius: 50%;
+/* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
+
+.tabbrowser-arrowscrollbox > .scrollbutton-up,
+.tabbrowser-arrowscrollbox > .scrollbutton-down {
+  margin: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  background-origin: border-box;
 }
 
-/* === END notification-icons.inc.css === */
+#main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
+#main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
+.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
+.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
+ }
+
+.tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
+.tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
+ }
 
-.popup-notification-body[popupid="addon-progress"],
-.popup-notification-body[popupid="addon-install-confirmation"] {
-  width: 28em;
-  max-width: 28em;
+.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
+.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
+/*  transform: scaleX(-1);*/
 }
 
-.addon-install-confirmation-name {
-  font-weight: bold;
+.tabbrowser-arrowscrollbox > .scrollbutton-down {
+  transition: 1s background-color ease-out;
 }
 
-.addon-webext-perm-header {
-  font-size: 1.3em;
+.tabbrowser-arrowscrollbox > .scrollbutton-down[highlight] {
+  background-color: #008484;
 }
 
-.addon-webext-name {
-  display: inline;
-  font-weight: bold;
-  margin: 0;
+.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
+.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
+/*  border-width: 0 2px 0 0;
+  border-style: solid;
+  border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
 }
 
-.addon-addon-icon {
-  width: 14px;
-  height: 14px;
-  list-style-image: url("chrome://browser/skin/menuPanel.svg");
-  -moz-image-region: rect(0px, 288px, 32px, 256px);
+.tabs-newtab-button > .toolbarbutton-icon {
+  margin-top: -1px;
+  margin-bottom: -1px;
 }
 
-.addon-toolbar-icon {
-  width: 14px;
-  height: 14px;
-  list-style-image: url("chrome://browser/skin/ToolbarFx.png");
-  -moz-image-region: rect(0, 486px, 18px, 468px);
+.tabs-newtab-button,
+#TabsToolbar > #new-tab-button,
+#TabsToolbar > toolbarpaletteitem > #new-tab-button,
+#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
+  list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
+  -moz-image-region: auto;
 }
 
-/* Notification icon box */
-
-.notification-anchor-icon:-moz-focusring {
-/*  outline: 1px dotted -moz-DialogText;*/
+.tabs-newtab-button,
+.tabs-newtab-button:hover,
+#TabsToolbar > #new-tab-button,
+#TabsToolbar > #new-tab-button:hover {
 }
 
-/* Translation infobar */
-
-/* === BEGIN infobar.inc.css === */
-
-notification[value="translation"] .messageImage {
-  list-style-image: url("chrome://browser/skin/translation-16.png");
-  -moz-image-region: rect(0, 32px, 16px, 16px);
+#main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
+#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
+#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
+.tabs-newtab-button:-moz-lwtheme-brighttext,
+#TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
+#TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
 }
 
-@media (min-resolution: 1.25dppx) {
-  notification[value="translation"] .messageImage {
-    list-style-image: url("chrome://browser/skin/translation-16@2x.png");
-    -moz-image-region: rect(0, 64px, 32px, 32px);
-  }
+#TabsToolbar > #new-tab-button {
+  width: 26px;
+  -moz-box-orient: horizontal;
 }
 
-notification[value="translation"][state="translating"] .messageImage {
-  list-style-image: url("chrome://browser/skin/translating-16.png");
-  -moz-image-region: auto;
+#alltabs-button {
+  list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
 }
 
-@media (min-resolution: 1.25dppx) {
-  notification[value="translation"][state="translating"] .messageImage {
-    list-style-image: url("chrome://browser/skin/translating-16@2x.png");
-  }
+#alltabs-button:hover,
+#alltabs-button:hover:active,
+#alltabs-button[open="true"] {
+  list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
 }
 
-notification[value="translation"] hbox[anonid="details"] {
-  overflow: hidden;
+#main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
+#alltabs-button:-moz-lwtheme-brighttext {
 }
 
-notification[value="translation"] button,
-notification[value="translation"] menulist {
-  min-width: 0;
+#alltabs-button > .toolbarbutton-icon {
+/*  margin: 0 2px;*/
 }
 
-notification[value="translation"] menulist > .menulist-dropmarker {
+#alltabs-button > .toolbarbutton-menu-dropmarker {
+  display: none;
 }
 
-.translation-menupopup arrowscrollbox {
-  padding-bottom: 0;
+/* All tabs menupopup */
+.alltabs-item > .menu-iconic-left > .menu-iconic-icon {
+  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
+  -moz-image-region: auto;
 }
 
-.translation-attribution {
-  cursor: pointer;
-  -moz-box-align: end;
-  font-size: small;
+.alltabs-item[selected="true"] {
+  font-weight: bold;
 }
 
-.translation-attribution > label {
-  margin-bottom: 0;
+.alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
+  list-style-image: url("chrome://global/skin/icons/loading.png");
 }
 
-.translation-attribution > image {
-  width: 70px;
+@media (min-resolution: 1.1dppx) {
+  .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
+    list-style-image: url("chrome://global/skin/icons/loading@2x.png");
+  }
 }
 
-.translation-welcome-panel {
-  width: 305px;
+toolbarbutton.chevron {
+  list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
 }
 
-.translation-welcome-logo {
-  height: 32px;
-  width: 32px;
-  list-style-image: url(chrome://browser/skin/translation-16@2x.png);
-  -moz-image-region: rect(0, 64px, 32px, 32px);
+toolbarbutton.chevron:hover {
+  list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
 }
-
-.translation-welcome-content {
-  margin-inline-start: 16px;
+/*
+toolbar[brighttext] toolbarbutton.chevron {
+  list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
+}
+*/
+toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
+toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
+  transform: scaleX(-1);
 }
 
-.translation-welcome-headline {
-  font-size: larger;
-  font-weight: bold;
+toolbarbutton.chevron > .toolbarbutton-text,
+toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
+  display: none;
 }
 
-.translation-welcome-body {
-  padding: 1em 0;
-  margin: 0 0;
+toolbarbutton.chevron > .toolbarbutton-icon {
+  margin: 0;
 }
 
-/* === END infobar.inc.css === */
+#sidebar-throbber[loading="true"] {
+  list-style-image: url("chrome://global/skin/icons/loading.png");
+  margin-inline-end: 4px;
+}
 
-notification[value="translation"] {
-  min-height: 40px;
+@media (min-resolution: 1.1dppx) {
+  #sidebar-throbber[loading="true"] {
+    list-style-image: url("chrome://global/skin/icons/loading@2x.png");
+    width: 16px;
+  }
 }
 
-.translation-menupopup {
-  -moz-appearance: none;
+/* Bookmarks toolbar */
+#PlacesToolbarDropIndicator {
+  list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
 }
 
-/* Bookmarks roots menu-items */
-#subscribeToPageMenuitem:not([disabled]),
-#subscribeToPageMenupopup {
-  list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
+toolbarbutton.bookmark-item[dragover="true"][open="true"] {
+  background-color: #008484 !important;
+  color: #FFCF00 !important;
 }
 
-#bookmarksToolbarFolderMenu,
-#BMB_bookmarksToolbar,
-#panelMenu_bookmarksToolbar {
-  list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
-  -moz-image-region: auto;
+/* rules for menupopup drop indicators */
+.menupopup-drop-indicator-bar {
+  position: relative;
+  /* these two margins must together compensate the indicator's height */
+  margin-top: -1px;
+  margin-bottom: -1px;
 }
 
-#BMB_unsortedBookmarks,
-#panelMenu_unsortedBookmarks {
-  list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
-  -moz-image-region: auto;
+.menupopup-drop-indicator {
+  list-style-image: none;
+  height: 2px;
+  margin-inline-end: -4em;
+  background-color: #008484;
 }
 
-/* Status panel */
+/* === BEGIN notification-icons.inc.css === */
 
-.statuspanel-label {
-  margin: 0;
-  padding: 2px 4px;
-  background: #404000;
-  border: 1px none #9C9CFF;
-  border-top-style: solid;
-  color: #FF9F00;
-  text-shadow: none;
+#notification-popup-box {
+  border-radius: 3px 0 0 3px;
+  padding: 5px 0px;
+  margin: -5px 0px;
+  margin-inline-end: -5px;
+  padding-inline-end: 5px;
 }
 
-.statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
-.statuspanel-label:-moz-locale-dir(rtl)[mirror] {
-  border-right-style: solid;
-  border-top-right-radius: .3em;
-  margin-right: 1em;
+.notification-anchor-icon,
+#blocked-permissions-container > .blocked-permission-icon {
+  width: 16px;
+  height: 16px;
+  margin-inline-start: 2px;
 }
 
-.statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
-.statuspanel-label:-moz-locale-dir(ltr)[mirror] {
-  border-left-style: solid;
-  border-top-left-radius: .3em;
-  margin-left: 1em;
+/* This class can be used alone or in combination with the class defining the
+   type of icon displayed. This rule must be defined before the others in order
+   for its list-style-image to be overridden. */
+.notification-anchor-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#default-info);
 }
 
-/* HACK to abolish devily color on main content */
-
-#content {
-  background-color: transparent !important;
+.notification-anchor-icon:-moz-focusring {
+  outline: 1px dotted #008484;
 }
 
-/* === BEGIN fullscreen/warning.inc.css === */
+@media (min-resolution: 1.1dppx) {
+  .notification-anchor-icon {
+    list-style-image: url(chrome://global/skin/icons/info.svg);
+  }
+}
 
-html|*.pointerlockfswarning {
-  align-items: center;
-  background: rgba(0, 0, 0, 0.9);
-  border: 2px solid #A09090;
-  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
-  border-radius: 8px;
-  padding: 24px 16px;
-  font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
+.notification-anchor-icon:not(.plugin-blocked),
+#blocked-permissions-container > .blocked-permission-icon {
+  filter: url(chrome://global/skin/filters.svg#fill);
+  fill: currentColor;
 }
 
-html|*.pointerlockfswarning::before {
-  margin: 0;
-  width: 24px; height: 24px;
-}
+/* INDIVIDUAL NOTIFICATIONS */
 
-html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
-html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
-  content: url("chrome://browser/skin/fullscreen/secure.svg");
+.focus-tab-by-prompt-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#focus-tab-by-prompt);
 }
 
-html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
-  content: url("chrome://browser/skin/fullscreen/insecure.svg");
+.popup-notification-icon[popupid="persistent-storage"],
+.persistent-storage-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#persistent-storage);
 }
-html|*.pointerlockfswarning-domain-text,
-html|*.pointerlockfswarning-generic-text {
-  font-size: 21px;
-  font-weight: lighter;
-  color: #A09090;
-  margin: 0 16px;
+
+.persistent-storage-icon.blocked-permission-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#persistent-storage-blocked);
 }
 
-html|*.pointerlockfswarning-domain {
-  font-weight: bold;
-  margin: 0;
+.popup-notification-icon[popupid="web-notifications"],
+.desktop-notification-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
 }
 
-html|*#fullscreen-exit-button,
-html|*.pointerlockfswarning-exit-button {
-  margin: 0;
+.desktop-notification-icon.blocked-permission-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
+}
 
-  border-radius: 300px;
-  border: none;
-  background-color: #C09070;
-  color: #000000;
+.geo-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
 }
 
-/* === END fullscreen/warning.inc.css === */
+.geo-icon.blocked-permission-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
+}
 
-/* === BEGIN ctrlTab.inc.css === */
+.popup-notification-icon[popupid="geolocation"] {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
+}
 
-/* Ctrl-Tab */
+.popup-notification-icon[popupid="indexedDB-permissions-prompt"],
+.indexedDB-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
+}
 
-#ctrlTab-panel {
-  -moz-appearance: none;
-  background: rgba(0%,0%,0%,.7);
-  color: #FF9F00;
-  border-style: none;
-  padding: 20px 10px 10px;
-  font-weight: bold;
+.indexedDB-icon.blocked-permission-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
 }
 
-.ctrlTab-favicon[src] {
-  background-color: #000000;
-  width: 20px;
-  height: 20px;
-  padding: 2px;
+.login-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
 }
 
-.ctrlTab-preview-inner > .tabPreview-canvas {
-/*  box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
+.popup-notification-icon[popupid="password"] {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
 }
 
-.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
-  margin-bottom: 2px;
+.camera-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
 }
 
-.ctrlTab-preview-inner {
-  padding: 8px;
-  border: 2px solid transparent;
-  border-radius: .5em;
+.camera-icon.in-use {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
 }
 
-.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
-  margin: -10px -10px 0;
+.camera-icon.blocked-permission-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
 }
 
-#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
-  background-color: #000000;
+.microphone-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
 }
 
-.ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
-  color: #A09090;
-  background-color: #000000;
-  text-shadow: none;
-  border-color: #9C9CFF;
+.microphone-icon.in-use {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
 }
 
-#ctrlTab-showAll {
-  margin-top: .5em;
+.microphone-icon.blocked-permission-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
 }
 
-/* === END ctrlTab.inc.css === */
+.popup-notification-icon.microphone-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
+}
 
-/* === BEGIN commandline.inc.css === */
+.screen-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
+}
 
-/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
-   We are copy/pasting variables from light-theme and dark-theme,
-   since they aren't loaded in this context (within browser.css). */
-:root #developer-toolbar {
-  --gcli-background-color: #000000; /* --theme-toolbar-background */
-  --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
-  --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
-  --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
-  --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
-  --selection-background: #008484; /* --theme-selection-background */
-  --selection-color: #000000; /* --theme-selection-color */
-  --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
-  --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
+.screen-icon.in-use {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
 }
 
-/* Developer toolbar */
+.screen-icon.blocked-permission-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
+}
 
-#developer-toolbar {
-  border-top: 3px solid var(--gcli-background-color);
-  border-bottom: none;
+#webRTC-preview:not([hidden]) {
+  display: -moz-stack;
+  border-radius: 4px;
+  border: 1px solid #A09090;
+  overflow: hidden;
+  min-width: 300px;
+  min-height: 10em;
 }
 
-#developer-toolbar .toolbar-holder {
-  background-color: #8050B0;
-  color: #FFCF00;
+html|*#webRTC-previewVideo {
+  width: 300px;
+  /* If we don't set the min-width, width is ignored. */
+  min-width: 300px;
+  max-height: 200px;
 }
 
-#developer-toolbar .toolbar-holder {
-  background-color: #8050B0;
-  color: #FFCF00;
+#webRTC-previewWarning {
+  background: #FF0000 url("chrome://browser/skin/warning-white.svg") no-repeat .75em .75em;
+  margin: 0;
+  padding: .5em;
+  padding-inline-start: calc(1.5em + 16px);
+  border-top: 1px solid #A09090;
 }
 
-#developer-toolbar .toolbar-startcap,
-#developer-toolbar .toolbar-endcap{
-  background-color: #6000CF;
+#webRTC-previewWarning > .text-link {
+  margin-inline-start: 0;
 }
 
-#developer-toolbar {
-/*  padding: 0;
-  min-height: 32px; */
+/* This icon has a block sign in it, so we don't need a blocked version. */
+.popup-icon {
+  list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
 }
 
-#developer-toolbar > toolbarbutton {
-/*  border: none;
-  background-color: transparent;
-  margin: 0;
-  padding: 0 10px;
-  width: 32px; */
+/* EME */
+
+.popup-notification-icon[popupid="drmContentPlaying"],
+.drm-icon {
+  list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
 }
 
-.developer-toolbar-button > image {
-/*  margin: auto 10px; */
+.drm-icon:hover:active {
+  list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
 }
 
-#developer-toolbar-toolbox-button > label {
-  display: none;
+#eme-notification-icon[firstplay=true] {
+  animation: emeTeachingMoment 0.2s linear 0s 5 normal;
 }
 
-.developer-toolbar-button > .toolbarbutton-icon {
-  width: 16px;
-  height: 16px;
+@keyframes emeTeachingMoment {
+  0% {transform: translateX(0); }
+  25% {transform: translateX(3px) }
+  75% {transform: translateX(-3px) }
+  100% { transform: translateX(0); }
 }
 
-#developer-toolbar-toolbox-button {
-  list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
+/* INSTALL ADDONS */
+
+.install-icon {
+  list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
 }
 
-#developer-toolbar-toolbox-button > label {
-  display: none;
+.popup-notification-icon[popupid="xpinstall-disabled"],
+.popup-notification-icon[popupid="addon-install-blocked"],
+.popup-notification-icon[popupid="addon-install-origin-blocked"] {
+  list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
 }
 
-#developer-toolbar-toolbox-button:hover,
-#developer-toolbar-toolbox-button:hover:active,
-#developer-toolbar-toolbox-button[checked=true] {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
+.popup-notification-icon[popupid="addon-progress"] {
+  list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
 }
 
-@media (min-resolution: 2dppx) {
-  #developer-toolbar-toolbox-button {
-    list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
-    -moz-image-region: rect(0px, 32px, 32px, 0px);
-  }
+.popup-notification-icon[popupid="addon-install-failed"] {
+  list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
+}
 
-  #developer-toolbar-toolbox-button:hover,
-  #developer-toolbar-toolbox-button:hover:active,
-  #developer-toolbar-toolbox-button[checked=true] {
-    -moz-image-region: rect(0px, 64px, 32px, 32px);
-  }
+.popup-notification-icon[popupid="addon-install-confirmation"] {
+  list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
 }
 
-/* GCLI */
+#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
+  list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
+}
 
-html|*#gcli-tooltip-frame,
-html|*#gcli-output-frame {
-  padding: 0;
-  border-width: 0;
-  background-color: transparent;
+.popup-notification-icon[popupid="addon-install-complete"] {
+  list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
 }
 
-#gcli-output,
-#gcli-tooltip {
-  border-width: 0;
-  background-color: transparent;
+.popup-notification-icon[popupid="addon-install-restart"] {
+  list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
 }
 
-.gclitoolbar-input-node,
-.gclitoolbar-complete-node {
-  margin: 1px 3px;
-  -moz-box-align: center;
-  padding-top: 0;
-  padding-bottom: 0;
-  padding-right: 8px;
-  background-color: transparent;
+.popup-notification-icon[popupid="click-to-play-plugins"] {
+  list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
 }
 
-.gclitoolbar-input-node {
-/*  line-height: 32px;
-  outline-style: none; */
-  background-repeat: no-repeat;
-  background-color: var(--gcli-input-background);
+/* OFFLINE APPS */
+
+.popup-notification-icon[popupid*="offline-app-requested"],
+.popup-notification-icon[popupid="offline-app-usage"] {
+  list-style-image: url(chrome://global/skin/icons/question-64.png);
 }
 
-.gclitoolbar-input-node[focused="true"] {
-  background-color: var(--gcli-input-focused-background);
+/* PLUGINS */
+
+.plugin-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
 }
 
-.gclitoolbar-input-node::before {
-  content: "";
-  display: inline-block;
-  -moz-box-ordinal-group: 0;
-  width: 16px;
-  height: 16px;
-  margin: 0 2px;
-  background-image: var(--command-line-image);
+.plugin-icon.plugin-blocked {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
 }
 
-.gclitoolbar-input-node[focused="true"]::before {
-  background-image: var(--command-line-image-focus);
+#notification-popup-box[hidden] {
+  /* Override display:none to make the pluginBlockedNotification animation work
+     when showing the notification repeatedly. */
+  display: -moz-box;
+  visibility: collapse;
 }
 
-.gclitoolbar-input-node:not([focused="true"]) {
-  border-color: transparent;
+#plugins-notification-icon.plugin-blocked[showing] {
+  animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
 }
 
-.gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
-  background-color: var(--selection-background);
-  color: var(--selection-color);
+@keyframes pluginBlockedNotification {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
-.gclitoolbar-complete-node {
-  padding-left: 21px;
-  background-color: transparent;
-  color: transparent;
-  z-index: 100;
-  pointer-events: none;
+/* SOCIAL API */
+
+.popup-notification-icon[popupid="servicesInstall"] {
+  list-style-image: url(chrome://browser/skin/social/services-64.png);
 }
 
-.gcli-in-incomplete,
-.gcli-in-error,
-.gcli-in-ontab,
-.gcli-in-todo,
-.gcli-in-closebrace,
-.gcli-in-param,
-.gcli-in-valid {
-  margin: 0;
-  padding: 0;
+.service-icon {
+  list-style-image: url(chrome://browser/skin/social/services-16.png);
 }
 
-.gcli-in-incomplete {
-  border-bottom: 2px dotted #8050B0;
+/* TRANSLATION */
+
+.translation-icon {
+  list-style-image: url(chrome://browser/skin/translation-16.png);
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 
-.gcli-in-error {
-  border-bottom: 2px dotted #FF0000;
+.translation-icon.in-use {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
 }
 
-.gcli-in-ontab {
-  color: #9C9CFF;
+/* UPDATE */
+
+.popup-notification-icon[popupid="update-available"],
+.popup-notification-icon[popupid="update-manual"],
+.popup-notification-icon[popupid="update-restart"] {
+  background: #74BF43 url(chrome://browser/skin/notification-icons.svg#update) no-repeat center;
+  border-radius: 50%;
 }
 
-.gcli-in-todo {
-  color: #795900;
+/* === END notification-icons.inc.css === */
+
+.popup-notification-body[popupid="addon-progress"],
+.popup-notification-body[popupid="addon-install-confirmation"] {
+  width: 28em;
+  max-width: 28em;
 }
 
-.gcli-in-closebrace {
-  color: #8050B0;
+.addon-install-confirmation-name {
+  font-weight: bold;
 }
 
-/* === END commandline.inc.css === */
-
-/* === BEGIN responsivedesign.inc.css === */
-
-/* Responsive Mode */
-
-.browserContainer[responsivemode] {
-  background-color: #221500;
-  padding: 0 20px 20px 20px;
+html|*.addon-webext-perm-list {
+  margin-block-end: 0;
+  padding-inline-start: 10px;
 }
 
-.browserStack[responsivemode] {
-  box-shadow: 0 0 7px #9C9CFF;
+.addon-webext-perm-text {
+  margin-inline-start: 0;
 }
 
-.devtools-responsiveui-toolbar {
-  background: transparent;
-  /* text color is textColor from dark theme, since no theme is applied to
-   * the responsive toolbar.
-   */
-  color: #FF9F00;
-  margin: 10px 0;
+.popup-notification-description[popupid="addon-webext-permissions"] {
+  margin: 0;
   padding: 0;
-  box-shadow: none;
-  border-bottom-width: 0;
 }
 
-.devtools-responsiveui-textinput {
-/*  -moz-appearance: none;
-  background: #333;
-  color: #fff;
-  border: 1px solid #111;
-  border-radius: 2px;
-  padding: 0 5px;*/
-  width: 200px;
+.addon-webext-name {
+  display: inline;
+  font-weight: bold;
   margin: 0;
 }
 
-.devtools-responsiveui-textinput[attention] {
-/*  border-color: #38ace6;
-  background: rgba(56,172,230,0.4);*/
+.addon-addon-icon {
+  width: 14px;
+  height: 14px;
+  list-style-image: url("chrome://browser/skin/menuPanel.svg");
+  -moz-image-region: rect(0px, 288px, 32px, 256px);
 }
 
-.devtools-responsiveui-menulist,
-.devtools-responsiveui-toolbarbutton {
-  -moz-box-align: center;
-  min-width: 32px;
-/*  min-height: 22px;*/
-/*  margin: 0 3px; */
+.addon-toolbar-icon {
+  width: 14px;
+  height: 14px;
+  list-style-image: url("chrome://browser/skin/ToolbarFx.png");
+  -moz-image-region: rect(0, 486px, 18px, 468px);
 }
 
-.devtools-responsiveui-menulist .menulist-editable-box {
-  background-color: transparent;
-}
+/* Notification icon box */
 
-.devtools-responsiveui-menulist html|*.menulist-editable-input {
-  color: inherit;
-  text-align: center;
+.notification-anchor-icon:-moz-focusring {
+/*  outline: 1px dotted -moz-DialogText;*/
 }
 
-.devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
-/*  background: hsla(212,7%,57%,.35);*/
-}
+/* Translation infobar */
 
-.devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
-  width: 16px;
-  height: 16px;
+/* === BEGIN infobar.inc.css === */
+
+notification[value="translation"] .messageImage {
+  list-style-image: url("chrome://browser/skin/translation-16.png");
+  -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
-.devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
-  -moz-box-orient: horizontal;
+@media (min-resolution: 1.25dppx) {
+  notification[value="translation"] .messageImage {
+    list-style-image: url("chrome://browser/skin/translation-16@2x.png");
+    -moz-image-region: rect(0, 64px, 32px, 32px);
+  }
 }
 
-.devtools-responsiveui-menulist:-moz-focusring,
-.devtools-responsiveui-toolbarbutton:-moz-focusring {
-/*  outline: 1px dotted hsla(210,30%,85%,0.7);
-  outline-offset: -4px;*/
+notification[value="translation"][state="translating"] .messageImage {
+  list-style-image: url("chrome://browser/skin/translating-16.png");
+  -moz-image-region: auto;
 }
 
-.devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
-  display: none;
+@media (min-resolution: 1.25dppx) {
+  notification[value="translation"][state="translating"] .messageImage {
+    list-style-image: url("chrome://browser/skin/translating-16@2x.png");
+  }
 }
 
-.devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
-/*  border-color: hsla(210,8%,5%,.6);
-  background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
-  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
+notification[value="translation"] hbox[anonid="details"] {
+  overflow: hidden;
 }
 
-.devtools-responsiveui-menulist[open=true],
-.devtools-responsiveui-toolbarbutton[open=true],
-.devtools-responsiveui-toolbarbutton[checked=true] {
-/*  border-color: hsla(210,8%,5%,.6) !important;
-  background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
-  box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
+notification[value="translation"] button,
+notification[value="translation"] menulist {
+  min-width: 0;
 }
 
-.devtools-responsiveui-toolbarbutton[checked=true] {
-/*  color: hsl(208,100%,60%); */
+notification[value="translation"] menulist > .menulist-dropmarker {
 }
 
-.devtools-responsiveui-toolbarbutton[checked=true]:hover {
-/*  background-color: transparent !important;*/
+.translation-menupopup arrowscrollbox {
+  padding-bottom: 0;
 }
 
-.devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
-/*  background-color: hsla(210,8%,5%,.2) !important;*/
+.translation-attribution {
+  cursor: pointer;
+  -moz-box-align: end;
+  font-size: small;
 }
 
-.devtools-responsiveui-menulist > .menulist-label-box {
-  text-align: center;
+.translation-attribution > label {
+  margin-bottom: 0;
 }
 
-.devtools-responsiveui-menulist > .menulist-dropmarker {
-/*  display: -moz-box;
-  background-color: transparent;
-  list-style-image: url("chrome://devtools/skin/dropmarker.svg");
-  -moz-box-align: center;
-  border-width: 0;
-  min-width: 16px;*/
+.translation-attribution > image {
+  width: 70px;
 }
 
-.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-/*  color: inherit;
-  border-width: 0;
-  border-inline-end: 1px solid hsla(210,8%,5%,.45);
-  box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
+.translation-welcome-panel {
+  width: 305px;
 }
 
-.devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
-/*  box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
+.translation-welcome-logo {
+  height: 32px;
+  width: 32px;
+  list-style-image: url(chrome://browser/skin/translation-16@2x.png);
+  -moz-image-region: rect(0, 64px, 32px, 32px);
 }
 
-.devtools-responsiveui-toolbarbutton[type=menu-button] {
-/*  padding: 0 1px;*/
-  -moz-box-align: stretch;
+.translation-welcome-content {
+  margin-inline-start: 16px;
 }
 
-.devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
-.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
-/*  list-style-image: url("chrome://devtools/skin/dropmarker.svg");
-  -moz-box-align: center;
-  padding: 0 3px;*/
+.translation-welcome-headline {
+  font-size: larger;
+  font-weight: bold;
 }
 
-.devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
-.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
-  margin-left: 3px;
+.translation-welcome-body {
+  padding: 1em 0;
+  margin: 0 0;
 }
 
-.devtools-responsiveui-close {
-  list-style-image: url("chrome://devtools/skin/close.svg");
+/* === END infobar.inc.css === */
+
+notification[value="translation"] {
+  min-height: 40px;
 }
 
-.devtools-responsiveui-close:hover {
-  filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
+.translation-menupopup {
+  -moz-appearance: none;
 }
 
-.devtools-responsiveui-close > image {
-  filter: invert(1);
+/* Bookmarks roots menu-items */
+#subscribeToPageMenuitem:not([disabled]),
+#subscribeToPageMenupopup {
+  list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
 }
 
-.devtools-responsiveui-rotate {
-  list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
-  -moz-image-region: rect(0px,16px,16px,0px);
+#bookmarksToolbarFolderMenu,
+#BMB_bookmarksToolbar,
+#panelMenu_bookmarksToolbar {
+  list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
+  -moz-image-region: auto;
 }
 
-.devtools-responsiveui-rotate:hover {
-  -moz-image-region: rect(0px,32px,16px,16px);
+#BMB_unsortedBookmarks,
+#panelMenu_unsortedBookmarks {
+  list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
+  -moz-image-region: auto;
 }
 
-@media (min-resolution: 2dppx) {
-  .devtools-responsiveui-rotate {
-    list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
-  }
+/* Status panel */
 
-  .devtools-responsiveui-rotate:hover {
-    -moz-image-region: rect(0px,64px,32px,32px);
-  }
+.statuspanel-label {
+  margin: 0;
+  padding: 2px 4px;
+  background: #404000;
+  border: 1px none #9C9CFF;
+  border-top-style: solid;
+  color: #FF9F00;
+  text-shadow: none;
 }
 
-.devtools-responsiveui-touch {
-  list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
-  -moz-image-region: rect(0px,16px,16px,0px);
+.statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
+.statuspanel-label:-moz-locale-dir(rtl)[mirror] {
+  border-right-style: solid;
+  border-top-right-radius: .3em;
+  margin-right: 1em;
 }
 
-.devtools-responsiveui-touch:hover,
-.devtools-responsiveui-touch[checked],
-.devtools-responsiveui-touch[checked]:hover {
-  -moz-image-region: rect(0px,32px,16px,16px);
+.statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
+.statuspanel-label:-moz-locale-dir(ltr)[mirror] {
+  border-left-style: solid;
+  border-top-left-radius: .3em;
+  margin-left: 1em;
 }
 
-@media (min-resolution: 2dppx) {
-  .devtools-responsiveui-touch {
-    list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
-    -moz-image-region: rect(0px,32px,32px,0px);
-  }
+/* HACK to abolish devily color on main content */
 
-  .devtools-responsiveui-touch:hover,
-  .devtools-responsiveui-touch[checked],
-  .devtools-responsiveui-touch[checked]:hover {
-    -moz-image-region: rect(0px,64px,32px,32px);
-  }
+#content {
+  background-color: transparent !important;
 }
 
-.devtools-responsiveui-screenshot {
-  list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
+/* === BEGIN fullscreen/warning.inc.css === */
 
-.devtools-responsiveui-screenshot:hover {
-  -moz-image-region: rect(0px,32px,16px,16px);
+html|*.pointerlockfswarning {
+  align-items: center;
+  background: rgba(0, 0, 0, 0.9);
+  border: 2px solid #A09090;
+  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
+  border-radius: 8px;
+  padding: 24px 16px;
+  font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
 }
 
-@media (min-resolution: 2dppx) {
-  .devtools-responsiveui-screenshot {
-    list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
-  }
-
-  .devtools-responsiveui-screenshot:hover {
-    -moz-image-region: rect(0px,64px,32px,32px);
-  }
+html|*.pointerlockfswarning::before {
+  margin: 0;
+  width: 24px; height: 24px;
 }
 
-.devtools-responsiveui-resizebarV {
-  width: 7px;
-  height: 24px;
-  cursor: ew-resize;
-  transform: translate(12px, -12px);
-  background-size: cover;
-  background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
+html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
+html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
+  content: url("chrome://browser/skin/fullscreen/secure.svg");
 }
 
-.devtools-responsiveui-resizebarH {
-  width: 24px;
-  height: 7px;
-  cursor: ns-resize;
-  transform: translate(-12px, 12px);
-  background-size: cover;
-  background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
+html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
+  content: url("chrome://browser/skin/fullscreen/insecure.svg");
 }
-
-.devtools-responsiveui-resizehandle {
-  width: 16px;
-  height: 16px;
-  cursor: se-resize;
-  transform: translate(12px, 12px);
-  background-size: cover;
-  background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
+html|*.pointerlockfswarning-domain-text,
+html|*.pointerlockfswarning-generic-text {
+  font-size: 21px;
+  font-weight: lighter;
+  color: #A09090;
+  margin: 0 16px;
 }
 
-/* FxOS custom mode with additional buttons and phone look'n feel */
-
-/* Hide devtools manual resizer */
-.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
-.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
-.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
-  display: none;
+html|*.pointerlockfswarning-domain {
+  font-weight: bold;
+  margin: 0;
 }
 
-/* Gives responsive mode a phone look'n feel */
-.browserStack[responsivemode].fxos-mode {
-  padding: 60px 15px 0;
-
-  border-radius: 25px / 20px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border: 1px solid #FFFFFF;
-  border-bottom-width: 0;
-
-  background-color: #353535;
-
-  box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
+html|*#fullscreen-exit-button,
+html|*.pointerlockfswarning-exit-button {
+  margin: 0;
 
-  background-image: linear-gradient(to right, #111 11%, #333 56%);
-  min-width: 320px;
+  border-radius: 300px;
+  border: none;
+  background-color: #C09070;
+  color: #000000;
 }
 
-.devtools-responsiveui-hardware-buttons {
-  -moz-appearance: none;
-  padding: 20px;
-
-  border: 1px solid #FFFFFF;
-  border-bottom-left-radius: 25px;
-  border-bottom-right-radius: 25px;
-  border-top-width: 0;
-
-  box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
+/* === END fullscreen/warning.inc.css === */
 
-  background-image: linear-gradient(to right, #111 11%, #333 56%);
-}
+/* === BEGIN ctrlTab.inc.css === */
 
-.devtools-responsiveui-home-button {
-  -moz-user-focus: ignore;
-  width: 40px;
-  height: 30px;
-  list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
-}
+/* Ctrl-Tab */
 
-.devtools-responsiveui-sleep-button {
-  -moz-user-focus: ignore;
+#ctrlTab-panel {
   -moz-appearance: none;
-  /* compensate browserStack top padding */
-  margin-top: -67px;
-  margin-right: 10px;
-
-  min-width: 10px;
-  width: 50px;
-  height: 5px;
-
-  border: 1px solid #444;
-  border-top-right-radius: 12px;
-  border-top-left-radius: 12px;
-  border-bottom-color: transparent;
-
-  background-image: linear-gradient(to top, #111 11%, #333 56%);
+  background: rgba(0%,0%,0%,.7);
+  color: #FF9F00;
+  border-style: none;
+  padding: 20px 10px 10px;
+  font-weight: bold;
 }
 
-.devtools-responsiveui-sleep-button:hover:active {
-  background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
+.ctrlTab-favicon[src] {
+  background-color: #000000;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
 }
 
-.devtools-responsiveui-volume-buttons {
-  margin-left: -29px;
+.ctrlTab-preview-inner > .tabPreview-canvas {
+/*  box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
 }
 
-.devtools-responsiveui-volume-up-button,
-.devtools-responsiveui-volume-down-button {
-  -moz-user-focus: ignore;
-  -moz-appearance: none;
-  border: 1px solid red;
-  min-width: 8px;
-  height: 40px;
-
-  border: 1px solid #444;
-  border-right-color: transparent;
-
-  background-image: linear-gradient(to right, #111 11%, #333 56%);
+.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
+  margin-bottom: 2px;
 }
 
-.devtools-responsiveui-volume-up-button:hover:active,
-.devtools-responsiveui-volume-down-button:hover:active {
-  background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
+.ctrlTab-preview-inner {
+  padding: 8px;
+  border: 2px solid transparent;
+  border-radius: .5em;
 }
 
-.devtools-responsiveui-volume-up-button {
-  border-top-left-radius: 12px;
+.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
+  margin: -10px -10px 0;
 }
 
-.devtools-responsiveui-volume-down-button {
-  border-bottom-left-radius: 12px;
+#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
+  background-color: #000000;
 }
 
-@media (min-resolution: 2dppx) {
-  .devtools-responsiveui-resizebarV {
-    background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
-  }
-
-  .devtools-responsiveui-resizebarH {
-    background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
-  }
+.ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
+  color: #A09090;
+  background-color: #000000;
+  text-shadow: none;
+  border-color: #9C9CFF;
+}
 
-  .devtools-responsiveui-resizehandle {
-    background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
-  }
+#ctrlTab-showAll {
+  margin-top: .5em;
 }
 
-/* === END responsivedesign.inc.css === */
+/* === END ctrlTab.inc.css === */
 
 /* === including indicator.css is done at the start of the file === */
 
@@ -4880,6 +4511,7 @@ notification.pluginVulnerable .messageImage {
   background-attachment: fixed;
 }
 
+#widget-overflow-fixed-list > toolbarpaletteitem[place="panel"],
 toolbarpaletteitem[place="toolbar"] {
   transition: border-width 250ms ease-in-out;
 }
@@ -4909,6 +4541,7 @@ toolbarpaletteitem toolbarbutton[disabled] {
 /*  color: inherit !important;*/
 }
 
+#widget-overflow-fixed-list > toolbarpaletteitem[notransition][place="panel"],
 toolbarpaletteitem[notransition].panel-customization-placeholder,
 toolbarpaletteitem[notransition][place="toolbar"],
 toolbarpaletteitem[notransition][place="palette"],
@@ -4941,6 +4574,11 @@ toolbarpaletteitem[place="toolbar"] {
   margin-left: 0;
 }
 
+#widget-overflow-fixed-list > toolbarpaletteitem[place="panel"] {
+  border-top: 0px solid transparent;
+  border-bottom: 0px solid transparent;
+}
+
 #customization-palette:not([hidden]) {
   margin-bottom: 25px;
 }
@@ -5626,6 +5264,18 @@ menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
 
 /* === END contextmenu.inc.css === */
 
+/* Make context menu items larger when opened through touch. */
+#contentAreaContextMenu[touchmode] menu,
+#contentAreaContextMenu[touchmode] menuitem {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+#contentAreaContextMenu[touchmode] > #context-navigation > menuitem {
+  padding-top: 7px;
+  padding-bottom: 7px;
+}
+
 #context-navigation {
 }
 
index d5731b3418f3e254ee07cd2c88a4914c40a94dbd..a929de58aad68a115dca74b96b86241b003afc54 100644 (file)
   min-height: 16px;
 }
 
-#PanelUI-update-restart-menu-item::after,
-#PanelUI-update-available-menu-item::after,
-#PanelUI-update-manual-menu-item::after {
+.panel-banner-item[notificationid^=update]::after {
   background: #008484 url(chrome://browser/skin/update-badge.svg) no-repeat center;
   border-radius: 50%;
 }
 
-#PanelUI-update-restart-menu-item,
-#PanelUI-update-available-menu-item,
-#PanelUI-update-manual-menu-item {
+.panel-banner-item[notificationid^=update] {
   list-style-image: url(chrome://branding/content/icon16.png);
 }
 
@@ -315,7 +311,7 @@ panelview[id^=PanelUI-webext-] {
 }
 
 panelview:not([mainview]) .toolbarbutton-text,
-.cui-widget-panel toolbarbutton > .toolbarbutton-text {
+.cui-widget-panel toolbarbutton:not([wrap]) > .toolbarbutton-text {
   text-align: start;
   display: -moz-box;
 }
@@ -464,7 +460,7 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
 
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
-#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > .PanelUI-notification-menu-item,
+#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > .panel-banner-item,
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label,
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon,
@@ -577,16 +573,13 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 
 #PanelUI-fxa-container:not([fxastatus="signedin"]) > toolbarseparator,
 #PanelUI-fxa-container:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
-#PanelUI-fxa-container:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator,
-#PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
-#PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
+#PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon {
   display: none;
 }
 
 #PanelUI-fxa-container[fxastatus="login-failed"] > #PanelUI-fxa-status::after,
-#PanelUI-fxa-container[fxastatus="unverified"] > #PanelUI-fxa-status::after,
-#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status::after {
+#PanelUI-fxa-container[fxastatus="unverified"] > #PanelUI-fxa-status::after {
   content: url("chrome://browser/skin/warning.svg");
   width: 47px;
   padding-top: 1px;
@@ -596,8 +589,8 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   top: 25%;
 }
 
-#PanelUI-footer-addons > toolbarbutton::after,
-.PanelUI-notification-menu-item::after {
+.addon-banner-item::after,
+.panel-banner-item::after {
   content: "";
   width: 16px;
   height: 16px;
@@ -605,9 +598,9 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   display: -moz-box;
 }
 
-#PanelUI-footer-addons > toolbarbutton {
+.addon-banner-item {
   background-color: #A09090;
-  /* Force border to override `#PanelUI-footer-addons > toolbarbutton` selector below */
+  /* Force border to override `.addon-banner-item` selector below */
   /*border-top: 1px solid hsl(45, 100%, 77%) !important;*/
   display: flex;
   flex: 1 1 0%;
@@ -616,20 +609,20 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   border-inline-start-style: none;
 }
 
-#PanelUI-footer-addons > toolbarbutton:hover {
+.addon-banner-item:hover {
   background-color: #FFCF00;
 }
 
-#PanelUI-footer-addons > toolbarbutton:active {
+.addon-banner-item:active {
   background-color: #FF9F00;
 }
 
-#PanelUI-footer-addons > toolbarbutton > .toolbarbutton-icon {
+.addon-banner-item > .toolbarbutton-icon {
   width: 14px;
   height: 14px;
 }
 
-#PanelUI-footer-addons > toolbarbutton::after {
+.addon-banner-item::after {
   background: #FF0000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
 }
 
@@ -666,11 +659,11 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 /*  margin: 0;*/
 }
 
-.PanelUI-notification-menu-item,
+.addon-banner-item,
+.panel-banner-item,
 #PanelUI-help,
 #PanelUI-fxa-label,
 #PanelUI-fxa-icon,
-#PanelUI-footer-addons > toolbarbutton,
 #PanelUI-customize,
 #PanelUI-quit {
   margin: 0;
@@ -684,13 +677,13 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   -moz-box-orient: horizontal;
 }
 
-.PanelUI-notification-menu-item {
+.panel-banner-item {
   border-top: 1px solid var(--panel-separator-color);
   border-bottom: 1px solid transparent;
   margin-bottom: -1px;
 }
 
-.PanelUI-notification-menu-item > .toolbarbutton-text {
+.panel-banner-item > .toolbarbutton-text {
   width: 0; /* Fancy cropping solution for flexbox. */
 }
 
@@ -799,9 +792,9 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   min-width: 44px;
 }
 
-.PanelUI-notification-menu-item > .toolbarbutton-text,
+.addon-banner-item > .toolbarbutton-text,
+.panel-banner-item > .toolbarbutton-text,
 #PanelUI-fxa-label > .toolbarbutton-text,
-#PanelUI-footer-addons > toolbarbutton > .toolbarbutton-text,
 #PanelUI-customize > .toolbarbutton-text {
   margin: 0;
   padding: 0 6px;
@@ -814,7 +807,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   display: none;
 }
 
-.PanelUI-notification-menu-item > .toolbarbutton-icon,
+.panel-banner-item > .toolbarbutton-icon,
 #PanelUI-fxa-label > .toolbarbutton-icon,
 #PanelUI-fxa-icon > .toolbarbutton-icon,
 #PanelUI-customize > .toolbarbutton-icon,
@@ -829,23 +822,21 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 }
 
 #PanelUI-fxa-label,
-#PanelUI-footer-addons > toolbarbutton,
+.addon-banner-item,
 #PanelUI-customize {
   flex: 1;
   padding-inline-start: 15px;
   border-inline-start-style: none;
 }
 
-#PanelUI-fxa-container[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
-#PanelUI-fxa-container[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label,
-#PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
-#PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
+#PanelUI-fxa-container[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
+#PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label {
   padding-inline-start: 0px;
 }
 
 /* descend from #PanelUI-footer to add specificity, or else the
    padding-inline-start will be overridden */
-#PanelUI-footer > .PanelUI-notification-menu-item {
+#PanelUI-footer > .panel-banner-item {
   width: calc(var(--panel-ui-menuPanelWidth) + 30px);
   padding-inline-start: 15px;
   border-inline-start-style: none;
@@ -933,6 +924,8 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 .fxaSyncIllustration {
   width: 180px;
   height: var(--panel-ui-sync-illustration-height);
+  -moz-context-properties: fill;
+  fill: #A09090;
 }
 
 .PanelUI-remotetabs-prefs-button > .toolbarbutton-text {
@@ -976,7 +969,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   display: none;
 }
 
-#PanelUI-fxa-icon[syncstatus="active"]:not([disabled]) {
+#PanelUI-fxa-icon[syncstatus="active"] {
   list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
 }
 
@@ -999,7 +992,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 
 #PanelUI-fxa-label,
 #PanelUI-fxa-icon,
-#PanelUI-footer-addons > toolbarbutton,
+.addon-banner-item,
 #PanelUI-customize,
 #PanelUI-help,
 #PanelUI-quit {
@@ -1007,22 +1000,12 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 }
 
 #PanelUI-fxa-container[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
-#PanelUI-fxa-container[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
+#PanelUI-fxa-container:not([fxastatus="signedin"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
 #PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
-#PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {
+#PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
   display: none;
 }
 
-#PanelUI-fxa-container[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
-#PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
-  display: none;
-}
-
-#PanelUI-fxa-status[disabled],
-#PanelUI-fxa-icon[disabled] {
-  pointer-events: none;
-}
-
 #PanelUI-fxa-avatar {
   width: 32px;
   height: 32px;
@@ -1037,8 +1020,8 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   margin-inline-end: 0;
 }
 
-#PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
-#PanelUI-fxa-container[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
+#PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
+#PanelUI-fxa-container > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
   list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
 }
 
@@ -1053,60 +1036,62 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 }
 
 #PanelUI-help[disabled],
-#PanelUI-quit[disabled],
-#PanelUI-fxa-icon[disabled],
-#PanelUI-fxa-avatar[disabled],
-#PanelUI-fxa-label[disabled] > .toolbarbutton-icon,
-#PanelUI-fxa-status::after {
+#PanelUI-quit[disabled] {
   -moz-image-region: rect(0, 48px, 16px, 32px);
 }
 
-#PanelUI-fxa-status:not([disabled]):hover,
-#PanelUI-fxa-icon:not([disabled]):hover,
+#PanelUI-fxa-status:hover,
+#PanelUI-fxa-icon:hover,
 #PanelUI-help:not([disabled]):hover,
 #PanelUI-customize:hover,
 #PanelUI-quit:not([disabled]):hover {
 }
 
-#PanelUI-fxa-status:not([disabled]):hover:active,
-#PanelUI-fxa-icon:not([disabled]):hover:active,
+#PanelUI-fxa-status:hover:active,
+#PanelUI-fxa-icon:hover:active,
 #PanelUI-help:not([disabled]):hover:active,
 #PanelUI-customize:hover:active,
 #PanelUI-quit:not([disabled]):hover:active {
 }
 
-#PanelUI-fxa-status:not([disabled]):hover,
-#PanelUI-fxa-status:not([disabled]):hover:active,
-#PanelUI-fxa-icon:not([disabled]):hover,
-#PanelUI-fxa-icon:not([disabled]):hover:active {
+#PanelUI-fxa-status:hover,
+#PanelUI-fxa-status:hover:active,
+#PanelUI-fxa-icon:hover,
+#PanelUI-fxa-icon:hover:active {
 }
 
-#PanelUI-fxa-container[fxastatus="error"],
-#PanelUI-footer-fxa[fxastatus="error"] {
+#PanelUI-fxa-container[fxastatus="login-failed"],
+#PanelUI-fxa-container[fxastatus="unverified"],
+#PanelUI-footer-fxa[fxastatus="login-failed"],
+#PanelUI-footer-fxa[fxastatus="unverified"] {
   background-color: #FF0000;
   color: #000000;
 }
 
-#PanelUI-fxa-container[fxastatus="error"] > #PanelUI-fxa-status:hover,
-#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
+#PanelUI-fxa-container[fxastatus="login-failed"] > #PanelUI-fxa-status:hover,
+#PanelUI-fxa-container[fxastatus="unverified"] > #PanelUI-fxa-status:hover,
+#PanelUI-footer-fxa[fxastatus="login-failed"] > #PanelUI-fxa-status:hover,
+#PanelUI-footer-fxa[fxastatus="unverified"] > #PanelUI-fxa-status:hover {
   background-color: #FFCF00;
 }
 
-#PanelUI-fxa-container[fxastatus="error"] > #PanelUI-fxa-status:hover:active,
-#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
+#PanelUI-fxa-container[fxastatus="login-failed"] > #PanelUI-fxa-status:hover:active,
+#PanelUI-fxa-container[fxastatus="unverified"] > #PanelUI-fxa-status:hover:active,
+#PanelUI-footer-fxa[fxastatus="login-failed"] > #PanelUI-fxa-status:hover:active,
+#PanelUI-footer-fxa[fxastatus="unverified"] > #PanelUI-fxa-status:hover:active {
   background-color: #FF9F00;
 }
 
-.PanelUI-notification-menu-item {
+.panel-banner-item {
   background-color: #008484;
   color: #000000;
 }
 
-.PanelUI-notification-menu-item:not([disabled]):hover {
+.panel-banner-item:not([disabled]):hover {
   background-color: #FFCF00;
 }
 
-.PanelUI-notification-menu-item:not([disabled]):hover:active {
+.panel-banner-item:not([disabled]):hover:active {
   background-color: #FF9F00;
 }
 
@@ -1198,13 +1183,13 @@ panelview .toolbarbutton-1,
 /*  font: menu;*/
 }
 
-.PanelUI-subView .subviewbutton[shortcut]::after {
+.subviewbutton[shortcut]::after {
   content: attr(shortcut);
   float: right;
   color: #A09090;
 }
 
-.PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
+.subviewbutton[shortcut]::after {
   margin-inline-start: 10px;
 }
 
@@ -1315,9 +1300,11 @@ menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
 }
 */
 
+#widget-overflow-scroller > toolbarseparator,
 .PanelUI-subView menuseparator,
 .PanelUI-subView toolbarseparator,
-.cui-widget-panelview menuseparator {
+.cui-widget-panelview menuseparator,
+.cui-widget-panel toolbarseparator  {
   -moz-appearance: none;
   min-height: 0;
   border-top: 1px solid var(--panel-separator-color);
@@ -1523,7 +1510,7 @@ toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem]
   margin-bottom: 10px;
 }
 
-#widget-overflow-list {
+.widget-overflow-list {
   width: var(--panel-ui-menuPanelWidth);
   padding-left: 10px;
   padding-right: 10px;
@@ -1550,7 +1537,7 @@ toolbarbutton[overflowedItem=true] {
   padding-inline-start: .5em;
 }
 
-#widget-overflow-list > .toolbaritem-combined-buttons {
+.widget-overflow-list > .toolbaritem-combined-buttons {
   min-height: 28px;
 }
 
diff --git a/LCARStrek/browser/download.svg b/LCARStrek/browser/download.svg
new file mode 100644 (file)
index 0000000..e405d37
--- /dev/null
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M14.6 9.1L9 14.6a1.159 1.159 0 0 1-1 .4 1.5 1.5 0 0 1-1.1-.4L1.3 9.1C.8 8.5.9 8 1.7 8H5V2a.945.945 0 0 1 1-1h4a.945.945 0 0 1 1 1v6h3.2c.8 0 1 .5.4 1.1z"/>
+</svg>
index 3d0ef277375e5613c90695d092792cc4e257e962..ce1c7b914eece6b67784c241bcc7797bae2efff4 100644 (file)
@@ -82,52 +82,14 @@ richlistitem[type="download"] > toolbarseparator {
   padding-inline-end: 10px;
 }
 
-#downloadsPanel[hasdownloads] #downloadsFooterButtons:not(.downloadsHideDropmarker) > #downloadsHistory {
-  padding-inline-start: 68px;
-}
-
-toolbarseparator.downloadsDropmarkerSplitter {
-  margin: 7px 0;
-}
-
 richlistitem[type="download"] > toolbarseparator {
   margin: 10px 0;
 }
 
-richlistitem[type="download"]:hover > toolbarseparator,
-#downloadsFooter:hover toolbarseparator.downloadsDropmarkerSplitter,
-#downloadsFooter[showingdropdown] toolbarseparator {
-  margin: 0;
-}
-
-.downloadsDropmarker {
-  padding: 0 21px;
-}
-
-.downloadsDropmarker > .button-box > hbox {
-  display: none;
-}
-
-.downloadsDropmarker > .button-box > .button-menu-dropmarker {
-  display: -moz-box;
-  padding: 0;
+richlistitem[type="download"]:hover > toolbarseparator {
   margin: 0;
 }
 
-.downloadsDropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon {
-  width: 16px;
-  height: 16px;
-/*  list-style-image: url("chrome://global/skin/icons/menubutton-dropmarker.svg");
-  filter: url("chrome://global/skin/filters.svg#fill");
-  fill: currentColor;*/
-}
-
-/* Override default icon size which is too small for this dropdown */
-.downloadsDropmarker > .button-box > .button-menu-dropmarker {
-  width: 16px;
-  height: 16px;
-}
-
 #downloadsSummary {
   -moz-user-focus: normal;
 }
index b89998cfb338124eb90b2d696de4c9d0dd862851..96c59b09d9e9c677149bd721014f8b310e51f19c 100644 (file)
@@ -5,7 +5,9 @@
 /* === BEGIN indicator.inc.css === */
 
 #downloads-indicator-progress-icon {
-  background: var(--downloads-indicator-image-attention) bottom no-repeat;
+  background: var(--downloads-indicator-image) bottom no-repeat;
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill-attention);
   background-size: 18px;
   margin-top: 18px;
   /* From javascript side we use animation delay from 0s to -100s to show
@@ -20,7 +22,6 @@
 }
 /*
 toolbar[brighttext] #downloads-indicator-progress-icon {
-  background-image: var(--downloads-indicator-image-attention-inverted);
   animation-name: indicatorArrowProgressDark;
 }
 */
@@ -87,19 +88,14 @@ toolbar[brighttext] #downloads-indicator-progress-icon {
 
 /*** Main indicator icon ***/
 
-/*@media not all and (min-resolution: 1.1dppx) {*/
-  #downloads-button {
-    --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 0, 198, 18, 180);
-    --downloads-indicator-image-hover: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 18, 198, 36, 180);
-    --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 36, 198, 54, 180);
-/*    --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180);
-    --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 18, 198, 36, 180);*/
-  }
-/*}*/
-
+#downloads-button {
+  --downloads-indicator-image: url("chrome://browser/skin/download.svg");
+}
 
 #downloads-indicator-icon {
   background: var(--downloads-indicator-image) center no-repeat;
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
   width: 18px;
   height: 18px;
   background-size: 18px;
@@ -108,12 +104,12 @@ toolbar[brighttext] #downloads-indicator-progress-icon {
 #downloads-button:hover > #downloads-indicator-anchor > #downloads-indicator-icon,
 #downloads-button[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon,
 #downloads-button[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon {
-  background-image: var(--downloads-indicator-image-hover);
+  fill: var(--toolbarbutton-icon-fill-inverted);
   color: #000000;
 }
 
 toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
-/*  background-image: var(--downloads-indicator-image-inverted); */
+/*  fill: var(--toolbarbutton-icon-fill-inverted);*/
 }
 
 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
@@ -147,7 +143,7 @@ toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-in
 }
 
 #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
-  background-image: var(--downloads-indicator-image-attention);
+  fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 #downloads-button[cui-areatype="menu-panel"][attention="success"] {
@@ -155,25 +151,6 @@ toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-in
   -moz-image-region: auto;
 }
 
-/* In the next few rules, we use :not([counter]) as a shortcut that is
-   equivalent to -moz-any([progress], [paused]). */
-
-#downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background: var(--downloads-indicator-image) center no-repeat;
-  background-size: 12px;
-}
-
-#downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background-image: var(--downloads-indicator-image-attention);
-}
-
-#downloads-button:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
-#downloads-button[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
-#downloads-button:not([counter])[attention="success"]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background-image: var(--downloads-indicator-image-hover);
-  background-size: 12px;
-}
-
 /*** Download notifications ***/
 
 #downloads-indicator-notification {
@@ -219,62 +196,6 @@ toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-in
   animation-duration: 1s;
 }
 
-/*** Progress bar and text ***/
-
-#downloads-indicator-counter {
-  height: 9px;
-  margin: -3px 0 0;
-  color: #FFCF00;
-  font-size: 9px;
-  line-height: 9px;
-  text-align: center;
-}
-
-toolbar[brighttext] #downloads-indicator-counter {
-/*  color: white;
-  text-shadow: 0 0 1px rgba(0,0,0,.7),
-               0 1px 1.5px rgba(0,0,0,.5);*/
-}
-
-#downloads-button[counter]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
-#downloads-button[counter][open="true"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  color: #000000;
-}
-
-#downloads-indicator-progress {
-  width: 16px;
-  height: 5px;
-  min-width: 0;
-  min-height: 0;
-  margin-top: 1px;
-  margin-bottom: 2px;
-  border-radius: 2px;
-  background-color: #795900;
-}
-
-#downloads-indicator-progress > .progress-bar {
-  -moz-appearance: none;
-  min-width: 0;
-  min-height: 0;
-  background-color: #008484;
-  border-radius: 2px 0 0 2px;
-}
-
-#downloads-indicator-progress > .progress-remainder {
-  min-width: 0;
-  min-height: 0;
-  background-color: #A09090;
-  border-radius: 0 2px 2px 0;
-}
-
-#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
-  background-color: #8050B0;
-}
-
-#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
-  background-color: #404048;
-}
-
 toolbar[mode="full"] > #downloads-button > .toolbarbutton-text {
   margin: 0;
   text-align: center;
index ceef6ec02b63c5f70256c6cc282c7fb9c824ba14..b56f6246fe2de1319090250b2817a32d7f64417f 100644 (file)
@@ -20,6 +20,7 @@ body {
 .button-container {
   display: flex;
   flex-flow: row wrap;
+  justify-content: end;
 }
 
 .button-spacer {
old mode 100644 (file)
new mode 100755 (executable)
index 0d19135..fb0d272
@@ -1,30 +1,15 @@
-<?xml version="1.0" encoding="utf-8"?>
 <!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 320 280" xmlns:xlink="http://www.w3.org/1999/xlink" >
-<style>
-       #blueFill:target ~ use,
-       #blueFill:target ~ g {
-               fill: #9C9CFF;
-       }
-
-       svg {
-               fill:#A09090;
-       }
-</style>
-<defs>
-    <g id="logo">
-        <path d="M46.352,148.919 L46.352,148.919 L44.938,150.333 L43.523,148.919 L43.523,148.919 L37.866,143.262 L39.281,141.848 L44.938,147.505 L50.594,141.848 L52.009,143.262 L46.352,148.919 ZM43.937,134.000 L45.938,134.000 L45.938,142.000 L43.937,142.000 L43.937,134.000 ZM43.937,122.000 L45.938,122.000 L45.938,130.000 L43.937,130.000 L43.937,122.000 Z"/>
-        <path d="M306.641,132.110 L300.984,126.453 L295.328,132.110 L293.913,130.696 L300.984,123.625 L308.055,130.696 L306.641,132.110 ZM302.000,223.969 L300.000,223.969 L300.000,215.969 L302.000,215.969 L302.000,223.969 ZM302.000,211.969 L300.000,211.969 L300.000,203.969 L302.000,203.969 L302.000,211.969 ZM302.000,199.969 L300.000,199.969 L300.000,191.969 L302.000,191.969 L302.000,199.969 ZM302.000,187.969 L300.000,187.969 L300.000,179.969 L302.000,179.969 L302.000,187.969 ZM302.000,175.969 L300.000,175.969 L300.000,167.969 L302.000,167.969 L302.000,175.969 ZM302.000,163.969 L300.000,163.969 L300.000,155.969 L302.000,155.969 L302.000,163.969 ZM300.000,131.969 L302.000,131.969 L302.000,139.969 L300.000,139.969 L300.000,131.969 ZM302.000,151.969 L300.000,151.969 L300.000,143.969 L302.000,143.969 L302.000,151.969 ZM300.000,227.969 L302.000,227.969 L302.000,232.000 L302.000,234.000 L300.000,234.000 L292.000,234.000 L292.000,232.000 L300.000,232.000 L300.000,227.969 Z"/>
-        <path d="M101.335,236.009 L99.921,234.594 L105.578,228.938 L99.921,223.281 L101.335,221.866 L108.406,228.938 L101.335,236.009 ZM100.000,229.938 L92.000,229.938 L92.000,227.937 L100.000,227.937 L100.000,229.938 ZM80.000,227.937 L88.000,227.937 L88.000,229.938 L80.000,229.938 L80.000,227.937 Z"/>
-        <path d="M182.000,54.000 L182.000,52.000 L190.000,52.000 L190.000,54.000 L182.000,54.000 ZM170.000,52.000 L178.000,52.000 L178.000,54.000 L170.000,54.000 L170.000,52.000 ZM168.488,60.071 L161.417,53.000 L168.488,45.929 L169.902,47.343 L164.245,53.000 L169.902,58.657 L168.488,60.071 Z"/>
-        <path d="M297.688,276.000 L102.312,276.000 C97.721,276.000 94.000,272.279 94.000,267.688 L94.000,260.000 L306.000,260.000 L306.000,267.688 C306.000,272.279 302.279,276.000 297.688,276.000 ZM117.906,150.312 C117.906,145.721 121.628,142.000 126.218,142.000 L273.688,142.000 C278.279,142.000 282.000,145.721 282.000,150.312 L282.000,256.000 L117.906,256.000 L117.906,150.312 ZM132.000,242.000 L270.000,242.000 L270.000,156.000 L132.000,156.000 L132.000,242.000 Z"/>
-        <path d="M307.074,115.969 L206.926,115.969 C203.101,115.969 200.000,112.868 200.000,109.042 L200.000,38.926 C200.000,35.101 203.101,32.000 206.926,32.000 L307.074,32.000 C310.899,32.000 314.000,35.101 314.000,38.926 L314.000,109.042 C314.000,112.868 310.899,115.969 307.074,115.969 ZM210.000,65.875 C210.000,64.770 209.105,63.875 208.000,63.875 C206.895,63.875 206.000,64.770 206.000,65.875 L206.000,82.000 C206.000,83.105 206.895,84.000 208.000,84.000 C209.105,84.000 210.000,83.105 210.000,82.000 L210.000,65.875 ZM302.000,42.000 L216.000,42.000 L216.000,106.000 L302.000,106.000 L302.000,42.000 Z"/>
-        <path d="M65.844,240.000 L26.156,240.000 C23.861,240.000 22.000,238.139 22.000,235.844 L22.000,162.156 C22.000,159.861 23.861,158.000 26.156,158.000 L65.844,158.000 C68.139,158.000 70.000,159.861 70.000,162.156 L70.000,235.844 C70.000,238.139 68.139,240.000 65.844,240.000 ZM46.000,236.000 C48.287,236.000 50.141,234.195 50.141,231.969 C50.141,229.742 48.287,227.938 46.000,227.938 C43.713,227.938 41.859,229.742 41.859,231.969 C41.859,234.195 43.713,236.000 46.000,236.000 ZM66.000,168.000 L26.000,168.000 L26.000,224.000 L66.000,224.000 L66.000,168.000 Z"/>
-        <path d="M171.906,86.156 C171.906,102.329 159.026,115.469 143.017,115.797 L143.039,115.955 L28.850,115.955 L28.869,115.797 C12.872,115.475 -0.000,102.333 -0.000,86.156 C-0.000,71.661 10.336,59.603 23.994,57.019 C23.620,55.457 23.401,53.834 23.401,52.156 C23.401,40.714 32.606,31.438 43.962,31.438 C47.561,31.438 50.941,32.375 53.884,34.012 C53.883,33.930 53.878,33.848 53.878,33.766 C53.878,17.137 67.301,3.656 83.858,3.656 C97.763,3.656 109.453,13.164 112.843,26.059 C116.677,23.334 121.343,21.719 126.393,21.719 C139.394,21.719 149.933,32.331 149.933,45.422 C149.933,49.572 148.868,53.468 147.007,56.861 C161.114,59.082 171.906,71.351 171.906,86.156 Z"/>
-    </g>
-</defs>
-<g id="blueFill"></g>
-<use xlink:href="#logo" />
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 320 280" preserveAspectRatio="xMidYMid">
+  <path fill="context-fill" d="M46.352,148.919 L46.352,148.919 L44.938,150.333 L43.523,148.919 L43.523,148.919 L37.866,143.262 L39.281,141.848 L44.938,147.505 L50.594,141.848 L52.009,143.262 L46.352,148.919 ZM43.937,134.000 L45.938,134.000 L45.938,142.000 L43.937,142.000 L43.937,134.000 ZM43.937,122.000 L45.938,122.000 L45.938,130.000 L43.937,130.000 L43.937,122.000 Z"/>
+  <path fill="context-fill" d="M306.641,132.110 L300.984,126.453 L295.328,132.110 L293.913,130.696 L300.984,123.625 L308.055,130.696 L306.641,132.110 ZM302.000,223.969 L300.000,223.969 L300.000,215.969 L302.000,215.969 L302.000,223.969 ZM302.000,211.969 L300.000,211.969 L300.000,203.969 L302.000,203.969 L302.000,211.969 ZM302.000,199.969 L300.000,199.969 L300.000,191.969 L302.000,191.969 L302.000,199.969 ZM302.000,187.969 L300.000,187.969 L300.000,179.969 L302.000,179.969 L302.000,187.969 ZM302.000,175.969 L300.000,175.969 L300.000,167.969 L302.000,167.969 L302.000,175.969 ZM302.000,163.969 L300.000,163.969 L300.000,155.969 L302.000,155.969 L302.000,163.969 ZM300.000,131.969 L302.000,131.969 L302.000,139.969 L300.000,139.969 L300.000,131.969 ZM302.000,151.969 L300.000,151.969 L300.000,143.969 L302.000,143.969 L302.000,151.969 ZM300.000,227.969 L302.000,227.969 L302.000,232.000 L302.000,234.000 L300.000,234.000 L292.000,234.000 L292.000,232.000 L300.000,232.000 L300.000,227.969 Z"/>
+  <path fill="context-fill" d="M101.335,236.009 L99.921,234.594 L105.578,228.938 L99.921,223.281 L101.335,221.866 L108.406,228.938 L101.335,236.009 ZM100.000,229.938 L92.000,229.938 L92.000,227.937 L100.000,227.937 L100.000,229.938 ZM80.000,227.937 L88.000,227.937 L88.000,229.938 L80.000,229.938 L80.000,227.937 Z"/>
+  <path fill="context-fill" d="M182.000,54.000 L182.000,52.000 L190.000,52.000 L190.000,54.000 L182.000,54.000 ZM170.000,52.000 L178.000,52.000 L178.000,54.000 L170.000,54.000 L170.000,52.000 ZM168.488,60.071 L161.417,53.000 L168.488,45.929 L169.902,47.343 L164.245,53.000 L169.902,58.657 L168.488,60.071 Z"/>
+  <path fill="context-fill" d="M297.688,276.000 L102.312,276.000 C97.721,276.000 94.000,272.279 94.000,267.688 L94.000,260.000 L306.000,260.000 L306.000,267.688 C306.000,272.279 302.279,276.000 297.688,276.000 ZM117.906,150.312 C117.906,145.721 121.628,142.000 126.218,142.000 L273.688,142.000 C278.279,142.000 282.000,145.721 282.000,150.312 L282.000,256.000 L117.906,256.000 L117.906,150.312 ZM132.000,242.000 L270.000,242.000 L270.000,156.000 L132.000,156.000 L132.000,242.000 Z"/>
+  <path fill="context-fill" d="M307.074,115.969 L206.926,115.969 C203.101,115.969 200.000,112.868 200.000,109.042 L200.000,38.926 C200.000,35.101 203.101,32.000 206.926,32.000 L307.074,32.000 C310.899,32.000 314.000,35.101 314.000,38.926 L314.000,109.042 C314.000,112.868 310.899,115.969 307.074,115.969 ZM210.000,65.875 C210.000,64.770 209.105,63.875 208.000,63.875 C206.895,63.875 206.000,64.770 206.000,65.875 L206.000,82.000 C206.000,83.105 206.895,84.000 208.000,84.000 C209.105,84.000 210.000,83.105 210.000,82.000 L210.000,65.875 ZM302.000,42.000 L216.000,42.000 L216.000,106.000 L302.000,106.000 L302.000,42.000 Z"/>
+  <path fill="context-fill" d="M65.844,240.000 L26.156,240.000 C23.861,240.000 22.000,238.139 22.000,235.844 L22.000,162.156 C22.000,159.861 23.861,158.000 26.156,158.000 L65.844,158.000 C68.139,158.000 70.000,159.861 70.000,162.156 L70.000,235.844 C70.000,238.139 68.139,240.000 65.844,240.000 ZM46.000,236.000 C48.287,236.000 50.141,234.195 50.141,231.969 C50.141,229.742 48.287,227.938 46.000,227.938 C43.713,227.938 41.859,229.742 41.859,231.969 C41.859,234.195 43.713,236.000 46.000,236.000 ZM66.000,168.000 L26.000,168.000 L26.000,224.000 L66.000,224.000 L66.000,168.000 Z"/>
+  <path fill="context-fill" d="M171.906,86.156 C171.906,102.329 159.026,115.469 143.017,115.797 L143.039,115.955 L28.850,115.955 L28.869,115.797 C12.872,115.475 -0.000,102.333 -0.000,86.156 C-0.000,71.661 10.336,59.603 23.994,57.019 C23.620,55.457 23.401,53.834 23.401,52.156 C23.401,40.714 32.606,31.438 43.962,31.438 C47.561,31.438 50.941,32.375 53.884,34.012 C53.883,33.930 53.878,33.848 53.878,33.766 C53.878,17.137 67.301,3.656 83.858,3.656 C97.763,3.656 109.453,13.164 112.843,26.059 C116.677,23.334 121.343,21.719 126.393,21.719 C139.394,21.719 149.933,32.331 149.933,45.422 C149.933,49.572 148.868,53.468 147.007,56.861 C161.114,59.082 171.906,71.351 171.906,86.156 Z"/>
 </svg>
+
index 202d13f3202bdf29caa625e015dc95c5774df69d..7570d86b6245e764f38dd97c4010c2fced2d1a43 100644 (file)
@@ -196,10 +196,7 @@ body.compact .newtab-thumbnail.placeholder {
   opacity: 0;
 }
 
-.newtab-site[type=affiliate] .newtab-thumbnail,
-.newtab-site[type=enhanced] .newtab-thumbnail,
-.newtab-site[type=organic] .newtab-thumbnail,
-.newtab-site[type=sponsored] .newtab-thumbnail {
+.newtab-site[type=affiliate] .newtab-thumbnail {
   background-position: center center;
 }
 
@@ -207,10 +204,7 @@ body.compact .newtab-site[type=affiliate] .newtab-thumbnail {
   background-position: center 30%;
 }
 
-.newtab-site[type=affiliate] .newtab-thumbnail,
-body:not(.compact) .newtab-site[type=enhanced] .newtab-thumbnail,
-body:not(.compact) .newtab-site[type=organic] .newtab-thumbnail,
-body:not(.compact) .newtab-site[type=sponsored] .newtab-thumbnail {
+.newtab-site[type=affiliate] .newtab-thumbnail {
   background-size: auto;
 }
 
@@ -232,30 +226,14 @@ body.compact .newtab-title {
   background-clip: padding-box;
 }
 
-.newtab-title,
-.newtab-suggested {
+.newtab-title {
   color: #000000;
 }
 
-body.compact .newtab-title,
-body.compact .newtab-suggested {
+body.compact .newtab-title {
   color: #000000;
 }
 
-.newtab-suggested {
-  background-color: #9C9CFF;
-}
-
-.newtab-suggested:hover {
-  background-color: #FFCF00;
-  border: 1px solid #9C9CFF;
-}
-
-.newtab-suggested[active] {
-  background-color: #FF9F00;
-  border: 0;
-}
-
 body:not(.compact) .newtab-site:hover .newtab-title {
   background-color: #FFCF00;
 /*  border-color: #333;
index 3524fa60ec8811f3b0bb151f96a0fc4aa6725a44..2a0c4f1696781cdc34637c7a43db9835e78bee22 100644 (file)
@@ -69,6 +69,7 @@
   <defs>
     <path id="camera-icon" d="m 2,23 a 3,3 0 0 0 3,3 l 14,0 a 3,3 0 0 0 3,-3 l 0,-4 6,5.5 c 0.5,0.5 1,0.7 2,0.5 l 0,-18 c -1,-0.2 -1.5,0 -2,0.5 l -6,5.5 0,-4 a 3,3 0 0 0 -3,-3 l -14,0 a 3,3 0 0 0 -3,3 z" />
     <path id="desktop-notification-icon" d="m 2,20 a 4,4 0 0 0 4,4 l 13,0 7,7 0,-7 a 4,4 0 0 0 4,-4 l 0,-12 a 4,4 0 0 0 -4,-4 l -20,0 a 4,4 0 0 0 -4,4 z m 5,-2 a 1,1 0 1 1 0,-2 l 10,0 a 1,1 0 1 1 0,2 z m 0,-4 a 1,1 0 1 1 0,-2 l 14,0 a 1,1 0 1 1 0,2 z m 0,-4 a 1,1 0 1 1 0,-2 l 18,0 a 1,1 0 1 1 0,2 z" />
+    <path id="focus-tab-by-prompt-icon" d="M29.43,25,18.57,3.8A2.92,2.92,0,0,0,16,2a2.92,2.92,0,0,0-2.57,1.8L2.57,25a3.47,3.47,0,0,0,0,3.4A3.15,3.15,0,0,0,5.33,30H26.66a3.15,3.15,0,0,0,2.77-1.6A3.47,3.47,0,0,0,29.43,25ZM16,7.2a2.3,2.3,0,0,1,2.37,2.4L18,18a1.88,1.88,0,0,1-2,2,1.88,1.88,0,0,1-2-2l-.4-8.4A2.3,2.3,0,0,1,16,7.2ZM16,28a3,3,0,0,1,0-6,3,3,0,0,1,0,6Z"/>
     <path id="geo-linux-icon" d="m 2,15.9 a 14,14 0 1 1 0,0.2 z m 4,2.1 a 10,10 0 0 0 8,8 l 0,-4 4,0 0,4 a 10,10 0 0 0 8,-8 l -4,0 0,-4 4,0 a 10,10 0 0 0 -8,-8 l 0,4 -4,0 0,-4 a 10,10 0 0 0 -8,8 l 4,0 0,4 z" />
     <path id="geo-linux-detailed-icon" d="m 2,15.9 a 14,14 0 1 1 0,0.2 z m 3,2.1 a 11,11 0 0 0 9,9 l 1,-5 2,0 1,5 a 11,11 0 0 0 9,-9 l -5,-1 0,-2 5,-1 a 11,11 0 0 0 -9,-9 l -1,5 -2,0 -1,-5 a 11,11 0 0 0 -9,9 l 5,1 0,2 z" />
     <path id="geo-osx-icon" d="m 0,16 16,0 0,16 12,-28 z" />
@@ -79,6 +80,7 @@
     <path id="login-detailed-icon" d="m 1,27 0,3.5 a 0.5,0.5 0 0 0 0.5,0.5 l 5,0 a 0.5,0.5 0 0 0 0.5,-0.5 l 0,-1.5 1.5,0 a 0.5,0.5 0 0 0 0.5,-0.5 l 0,-1.5 1,0 a 0.5,0.5 0 0 0 0.5,-0.5 l 0,-1 1,0 a 0.5,0.5 0 0 0 0.5,-0.5 l 0,-2 2,0 2.5,-2.5 q 0.5,-0.5 1,0 l 1,1 c 0.5,0.5 1,0.5 1.5,-0.5 l 1,-2 a 9,9 0 1 0 -8,-8 l -2,1 c -1,0.5 -1,1 -0.5,1.5 l 1.5,1.5 q 0.5,0.5 0,1 z m 21,-19.1 a 2,2 0 1 1 0,0.2 z" />
     <path id="microphone-icon" d="m 8,14 0,4 a 8,8 0 0 0 6,7.7 l 0,2.3 -2,0 a 2,2 0 0 0 -2,2 l 12,0 a 2,2 0 0 0 -2,-2 l -2,0 0,-2.3 a 8,8 0 0 0 6,-7.7 l 0,-4 -2,0 0,4 a 6,6 0 0 1 -12,0 l 0,-4 z m 4,4 a 4,4 0 0 0 8,0 l 0,-12 a 4,4 0 0 0 -8,0 z" />
     <path id="microphone-detailed-icon" d="m 8,18 a 8,8 0 0 0 6,7.7 l 0,2.3 -1,0 a 3,2 0 0 0 -3,2 l 12,0 a 3,2 0 0 0 -3,-2 l -1,0 0,-2.3 a 8,8 0 0 0 6,-7.7 l 0,-4 a 1,1 0 0 0 -2,0 l 0,4 a 6,6 0 0 1 -12,0 l 0,-4 a 1,1 0 0 0 -2,0 z m 4,0 a 4,4 0 0 0 8,0 l 0,-12 a 4,4 0 0 0 -8,0 z" />
+    <path id="persistent-storage-icon" d="M26 21.1H6c-1.1 0-2 .9-2 2V27c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2v-3.9c0-1.1-.9-2-2-2zM24.1 27c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM25 3H7C5.3 3 4 4.4 4 6.2v13.3c.6-.3 1.3-.5 2-.5h20c.7 0 1.4.2 2 .5V6.2C28 4.4 26.7 3 25 3z"/>
     <path id="plugin-icon" d="m 2,26 a 2,2 0 0 0 2,2 l 24,0 a 2,2 0 0 0 2,-2 l 0,-16 a 2,2 0 0 0 -2,-2 l -24,0 a 2,2 0 0 0 -2,2 z m 2,-20 10,0 0,-2 a 2,2 0 0 0 -2,-2 l -6,0 a 2,2 0 0 0 -2,2 z m 14,0 10,0 0,-2 a 2,2 0 0 0 -2,-2 l -6,0 a 2,2 0 0 0 -2,2 z" />
     <path id="popup-icon" d="m 2,24 a 4,4 0 0 0 4,4 l 8,0 a 10,10 0 0 1 -2,-4 l -4,0 a 2,2 0 0 1 -2,-2 l 0,-12 18,0 0,2 a 10,10 0 0 1 4,2 l 0,-8 a 4,4 0 0 0 -4,-4 l -18,0 a 4,4 0 0 0 -4,4 z m 12,-2.1 a 8,8 0 1 1 0,0.2 m 10.7,-4.3 a 5,5 0 0 0 -6.9,6.9 z m -5.4,8.4 a 5,5 0 0 0 6.9,-6.9 z" />
     <path id="screen-icon" d="m 2,18 a 2,2 0 0 0 2,2 l 2,0 0,-6 a 4,4 0 0 1 4,-4 l 14,0 0,-6 a 2,2 0 0 0 -2,-2 l -18,0 a 2,2 0 0 0 -2,2 z m 6,10 a 2,2 0 0 0 2,2 l 18,0 a 2,2 0 0 0 2,-2 l 0,-14 a 2,2 0 0 0 -2,-2 l -18,0 a 2,2 0 0 0 -2,2 z" />
   <use id="camera-blocked" class="blocked" xlink:href="#camera-icon" />
   <use id="desktop-notification" xlink:href="#desktop-notification-icon" />
   <use id="desktop-notification-blocked" class="blocked" xlink:href="#desktop-notification-icon" />
+  <use id="focus-tab-by-prompt" xlink:href="#focus-tab-by-prompt-icon" />
   <use id="geo-osx" xlink:href="#geo-osx-icon" />
   <use id="geo-osx-blocked" class="blocked" xlink:href="#geo-osx-icon" />
   <use id="geo-linux" xlink:href="#geo-linux-icon" />
   <use id="microphone-indicator" xlink:href="#microphone-icon"/>
   <use id="microphone-blocked" class="blocked" xlink:href="#microphone-icon" />
   <use id="microphone-detailed" xlink:href="#microphone-detailed-icon" />
+  <use id="persistent-storage" xlink:href="#persistent-storage-icon" />
+  <use id="persistent-storage-blocked" class="blocked" xlink:href="#persistent-storage-icon" />
   <use id="plugin" xlink:href="#plugin-icon" />
   <use id="plugin-blocked" class="blocked" xlink:href="#plugin-icon" />
   <use id="popup" xlink:href="#popup-icon" />
index 142ea10d19cd1914ca8f8dc3dbfd242fd1044c20..68a025be3c485357c8e15c4095112c0e1917140b 100644 (file)
@@ -535,6 +535,9 @@ description > html|a {
 
 .fxaSyncIllustration {
   margin-top: 35px;
+  width: 231px;
+  -moz-context-properties: fill;
+  fill: #9C9CFF;
 }
 
 #syncOptions caption {
@@ -586,10 +589,6 @@ description > html|a {
   margin-inline-end: 14px !important;
 }
 
-.fxaSyncIllustration {
-  width: 231px;
-}
-
 #fxaLoginStatus[hasName] #fxaEmailAddress1 {
   font-size: 1.1rem;
 }
index 4ddb4101ae5e151271fd3f204106b57a472367ff..3e9dd6a61e53d0629295f12bfe7c56c0c7a8c235 100644 (file)
@@ -2,7 +2,7 @@
 <!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <style>
     use:not(:target) {
       display: none;
     </g>
     <g id="sync-shape">
       <path d="M17.024,3.351 c-0.562,0.331 -1.311,0.879 -1.821,1.698 -0.367,0.592 -0.752,1.288 -1.08,1.914 0.987,0.413 1.862,1.095 2.476,2.029 0.614,0.957 0.929,2.122 0.83,3.351 -0.201,1.787 -1.359,3.433 -3.046,4.36 -0.696,-0.774 -1.951,-2.945 -1.951,-2.945 -0.007,0.007 -0.004,2.556 -0.871,4.334 -0.573,1.184 -1.24,2.202 -2.305,2.995 1.431,0.51 2.915,0.886 4.282,0.909 l 0.162,0.002 c 2.99,0.021 5.844,-0.48 5.844,-0.48 0,0 -1.236,-0.802 -1.808,-1.346 1.86,-1.072 3.111,-2.791 3.634,-4.708 0.283,-0.759 0.478,-1.566 0.57,-2.409 C 22.383,9.011 20.33,5.278 17.024,3.351 Z M 6.569,12.302 C 6.526,10.271 7.755,8.327 9.644,7.29 c 0.696,0.774 2.32,2.899 2.32,2.899 0,0 -0.064,-5.157 1.657,-7.973 -6.097,-0.668 -9.69,0.443 -9.69,0.443 0,0 1.763,0.607 2.333,1.136 C 6.122,3.891 5.984,3.992 5.85,4.096 4.4,5.064 3.368,6.449 2.825,7.994 2.436,8.892 2.171,9.863 2.06,10.887 1.622,14.886 3.629,18.572 6.871,20.515 7.39,20.124 7.975,19.631 8.61,18.983 9.189,18.389 9.647,17.682 10.021,16.967 8.082,16.208 6.714,14.404 6.569,12.302 Z"/>
-      <path d="M0.9,19.9h3.3H15h3.3c0.5,0,0.9-0.4,0.9-0.9v-1.1c0-1-0.5-1.9-1.2-2.5c-2.3-1.8-4.6-2.9-5.1-3.1
-      c-0.1,0-0.1-0.1-0.1-0.2v-1.6c0.3-0.5,0.4-1,0.5-1.5c0.2,0.1,0.6,0.1,1-1.3c0.3-1.1,0.1-1.5-0.2-1.6C15,1.7,13,1.6,13,1.6
-      S12.7,1,11.8,0.5C11.3,0.2,10.5-0.1,9.5,0C9.1,0,8.8,0.1,8.5,0.2c-0.4,0.1-0.7,0.3-1,0.5C7.1,1,6.8,1.2,6.4,1.6
-      c-0.5,0.5-1,1.2-1.1,2C5.1,4.3,5.1,5,5.4,5.8C5,5.7,4.6,5.9,5,7.4c0.3,1.1,0.6,1.4,0.8,1.4c0.1,0.6,0.3,1.3,0.7,1.9v1.4
-      c0,0.1,0,0.1-0.1,0.2c-0.5,0.2-2.8,1.4-5.1,3.1C0.5,16,0,16.9,0,17.9V19C0,19.5,0.4,19.9,0.9,19.9"/>
+      <path d="M3.2,22h3.3h10.8h3.3c0.5,0,0.9-0.4,0.9-0.9V20c0-1-0.5-1.9-1.2-2.5c-2.3-1.8-4.6-2.9-5.1-3.1
+        c-0.1,0-0.1-0.1-0.1-0.2v-1.6c0.3-0.5,0.4-1,0.5-1.5c0.2,0.1,0.6,0.1,1-1.3c0.3-1.1,0.1-1.5-0.2-1.6c0.9-4.4-1.1-4.5-1.1-4.5
+        S15,3.1,14.1,2.6c-0.5-0.3-1.3-0.6-2.3-0.5c-0.4,0-0.7,0.1-1,0.2c-0.4,0.1-0.7,0.3-1,0.5C9.4,3.1,9.1,3.3,8.7,3.7
+        c-0.5,0.5-1,1.2-1.1,2C7.4,6.4,7.4,7.1,7.7,7.9C7.3,7.8,6.9,8,7.3,9.5c0.3,1.1,0.6,1.4,0.8,1.4c0.1,0.6,0.3,1.3,0.7,1.9v1.4
+        c0,0.1,0,0.1-0.1,0.2c-0.5,0.2-2.8,1.4-5.1,3.1C2.8,18.1,2.3,19,2.3,20v1.1C2.3,21.6,2.7,22,3.2,22"/>
     </g>
     <g id="advanced-shape">
-      <path d="M19.3,13.4C19.3,13.4,19.3,13.4,19.3,13.4L19.3,13.4C19.3,13.4,19.3,13.4,19.3,13.4L19.3,13.4z
-      M19.3,13.4c-0.1,1-0.5,1.8-1.2,2.4c-0.5,0.5-1.1,0.9-1.7,1.2c-0.2,0.4-0.4,0.7-0.8,1c-0.5,0.4-1.3,0.8-2.1,1
-      c-0.9,0.2-1.6,0.3-2.3,0.3h-0.9c0.1,0.2,0.2,0.2,0.4,0.2c-1.1-0.1-2.1-0.3-2.9-0.5c0.2,0.2,0.5,0.4,0.8,0.4c-1.5-0.3-2.9-1-4.1-1.9
-      c-0.3-0.2-0.4-0.3-0.5-0.4c-1-0.8-1.7-1.6-2.3-2.6c-0.7-1.1-1.1-2.5-1.3-4.1c-0.1,0.5-0.1,0.9-0.1,1.1C0.1,10.2,0.1,9,0.4,7.9
-      C0.3,8.2,0.1,8.6,0,9c0.1-0.8,0.4-1.8,0.9-2.8C1,5.8,1.2,5.5,1.3,5.4V4.3c0-0.1,0-0.3,0.1-0.6c0-0.2,0.1-0.4,0.2-0.6v0.1
-      c0,0,0-0.1,0-0.1c0-0.1,0-0.1,0-0.1c0-0.1,0-0.2,0.1-0.2v0.1c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1s0-0.1,0-0.2C2,2.2,2,2.1,2,2.1
-      C2.2,2,2.2,1.9,2.3,1.9V2c0,0.2,0.1,0.5,0.3,1l0-0.1C2.8,3.1,3,3.4,3.4,3.7c0.8-0.2,1.5-0.3,2.4-0.1C5.9,3.5,5.9,3.4,6,3.3v0.1
-      C6.1,3.2,6.3,3.1,6.6,3v0c0.2-0.1,0.5-0.3,1-0.4L7.5,2.6c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0,0.2,0,0.3,0c0.1,0,0.3,0,0.4,0
-      c-0.1,0-0.1,0.1-0.1,0.1c0,0-0.1,0.1-0.1,0.1s-0.1,0-0.1,0h0.1C7.8,3.2,7.4,3.7,7.2,4.4c-0.1,0-0.1,0.1-0.1,0.2l0.1,0.1
-      c0.2,0.3,0.5,0.5,0.9,0.5h1.4c0.2,0.1,0.3,0.2,0.3,0.2c0,0.2-0.1,0.4-0.3,0.6c0,0.1-0.1,0.2-0.3,0.4C8.5,7,8,7.3,7.7,7.6v0.1
-      c0,0,0,0,0,0.1c0,0,0,0,0,0.1c-0.1,0-0.1,0-0.1,0.1C7.7,7.9,7.8,8,7.8,8.2c0,0.2,0,0.4-0.1,0.6c0,0-0.1-0.1-0.1-0.1
-      c-0.1,0-0.1,0-0.1,0c0.1,0.1,0.2,0.1,0.2,0.2V9c0,0-0.1,0-0.1,0c0,0-0.1-0.1-0.1-0.1l-0.1,0c-0.1,0-0.1,0-0.2-0.1
-      c-0.1,0-0.1,0-0.1,0L7,8.7c-0.1,0-0.1,0-0.1,0L7,8.7c-0.1,0-0.1,0-0.2,0l-0.1,0C6.5,8.8,6.4,9,6.4,9.3c0,0.6,0.4,1.1,1.1,1.5
-      C7.7,11,8,11.1,8.3,11.2c0.3,0,0.5,0,0.7,0c0.2-0.1,0.4-0.1,0.6-0.2s0.4-0.2,0.5-0.2c0.7-0.2,1.4,0,1.9,0.5c0.2,0.1,0.2,0.2,0.1,0.4
-      c-0.1,0.2-0.2,0.3-0.4,0.2c-0.1,0-0.2,0-0.2,0c-0.1,0-0.1,0-0.3,0.1S11.1,12,11,12s-0.2,0.1-0.3,0.2c-0.1,0.1-0.3,0.2-0.4,0.3
-      c-0.9,0.5-1.9,0.6-3,0.4c0.4,0.4,0.7,0.7,1.1,0.9c0.1,0,0.2,0.1,0.6,0.1c0.3,0,0.5,0.1,0.6,0.2C9.4,14,9.1,14,8.9,14.1
-      c0.8,0.5,1.7,0.7,2.8,0.5c0.4-0.1,0.7-0.2,1-0.4c-0.1,0.1-0.1,0.3-0.2,0.4c0.1,0.1,0.4-0.1,0.6-0.5c0.1-0.1,0.3-0.3,0.6-0.4
-      c0,0,0,0.1,0,0.2c0,0.1,0,0.1,0,0.2s0,0.1,0.1,0.1c0.4,0,0.7-0.4,1.1-1.3c0.3-0.6,0.5-1.3,0.6-2.2c0.1,0.2,0.2,0.5,0.2,0.8
-      c0.2-0.5,0.3-1,0.3-1.3c0-0.3,0-1.3-0.1-2.9c0.3,0.4,0.5,0.7,0.7,1.1c0.1-1.2-0.1-2.2-0.5-3.1c-0.4-0.8-0.9-1.5-1.4-1.9
-      c0.5,0.1,1,0.3,1.4,0.6l-0.3-0.2c-1.4-1.4-3.1-2.2-5.1-2.4c-2-0.2-3.8,0.3-5.4,1.4c-0.6,0-1.1,0-1.5,0.1C3.6,2.7,3.5,2.6,3.5,2.5
-      C5.3,0.8,7.4,0,9.9,0s4.6,0.8,6.5,2.4L16.2,2c0.6,0.3,1,0.7,1.4,1.2l-0.1-0.3l0,0.1l0-0.1c0.9,0.7,1.4,1.6,1.7,2.7
-      c0.2,0.9,0.2,1.6,0.1,2.3c0.1,0.1,0.1,0.1,0.1,0.3l0.3-1.1c0.1,0.3,0.2,0.7,0.2,1C20,8.5,20,8.9,20,9.2c0,0.4-0.1,0.7-0.1,1
-      c-0.1,0.3-0.1,0.7-0.2,1s-0.2,0.6-0.3,0.8c-0.1,0.2-0.2,0.5-0.3,0.7C19.1,12.8,19.2,13,19.3,13.4L19.3,13.4z"/>
+      <path d="M21.3,15.6L21.3,15.6L21.3,15.6L21.3,15.6L21.3,15.6z M21.3,15.6c-0.1,1-0.5,1.8-1.2,2.4
+        c-0.5,0.5-1.1,0.9-1.7,1.2c-0.2,0.4-0.4,0.7-0.8,1c-0.5,0.4-1.3,0.8-2.1,1c-0.9,0.2-1.6,0.3-2.3,0.3h-0.9c0.1,0.2,0.2,0.2,0.4,0.2
+        c-1.1-0.1-2.1-0.3-2.9-0.5c0.2,0.2,0.5,0.4,0.8,0.4c-1.5-0.3-2.9-1-4.1-1.9c-0.3-0.2-0.4-0.3-0.5-0.4c-1-0.8-1.7-1.6-2.3-2.6
+        c-0.7-1.1-1.1-2.5-1.3-4.1c-0.1,0.5-0.1,0.9-0.1,1.1c-0.2-1.3-0.2-2.5,0.1-3.6c-0.1,0.3-0.3,0.7-0.4,1.1c0.1-0.8,0.4-1.8,0.9-2.8
+        C3,8.1,3.2,7.8,3.3,7.7V6.6c0-0.1,0-0.3,0.1-0.6c0-0.2,0.1-0.4,0.2-0.6v0.1V5.4c0-0.1,0-0.1,0-0.1c0-0.1,0-0.2,0.1-0.2v0.1V5.1V5
+        c0,0,0-0.1,0-0.2C4,4.4,4,4.3,4,4.3c0.2-0.1,0.2-0.2,0.3-0.2v0.1c0,0.2,0.1,0.5,0.3,1l0,0C4.8,5.3,5,5.7,5.4,5.9
+        c0.8-0.2,1.5-0.3,2.4-0.1c0.1,0,0.1-0.1,0.2-0.2v0.1c0.1-0.2,0.3-0.3,0.6-0.4l0,0c0.2-0.1,0.5-0.3,1-0.4H9.5
+        c0.1-0.1,0.2-0.1,0.3-0.1s0.2,0,0.3,0s0.3,0,0.4,0c-0.1,0-0.1,0.1-0.1,0.1L10.3,5h-0.1h0.1C9.8,5.5,9.4,6,9.2,6.7
+        c-0.1,0-0.1,0.1-0.1,0.2L9.2,7c0.2,0.3,0.5,0.5,0.9,0.5h1.4c0.2,0.1,0.3,0.2,0.3,0.2c0,0.2-0.1,0.4-0.3,0.6c0,0.1-0.1,0.2-0.3,0.4
+        C10.5,9.2,10,9.6,9.7,9.9V10c0,0,0,0,0,0.1c0,0,0,0,0,0.1c-0.1,0-0.1,0-0.1,0.1c0.1-0.1,0.2,0,0.2,0.2s0,0.4-0.1,0.6L9.6,11
+        c-0.1,0-0.1,0-0.1,0c0.1,0.1,0.2,0.1,0.2,0.2v0.1H9.6l-0.1-0.1H9.4c-0.1,0-0.1,0-0.2-0.1c-0.1,0-0.1,0-0.1,0L9,10.9
+        c-0.1,0-0.1,0-0.1,0H9c-0.1,0-0.1,0-0.2,0H8.7c-0.2,0.1-0.3,0.3-0.3,0.6c0,0.6,0.4,1.1,1.1,1.5c0.2,0.2,0.5,0.3,0.8,0.4
+        c0.3,0,0.5,0,0.7,0c0.2-0.1,0.4-0.1,0.6-0.2S12,13,12.1,13c0.7-0.2,1.4,0,1.9,0.5c0.2,0.1,0.2,0.2,0.1,0.4
+        c-0.1,0.2-0.2,0.3-0.4,0.2c-0.1,0-0.2,0-0.2,0c-0.1,0-0.1,0-0.3,0.1s-0.1,0-0.2,0s-0.2,0.1-0.3,0.2c-0.1,0.1-0.3,0.2-0.4,0.3
+        c-0.9,0.5-1.9,0.6-3,0.4c0.4,0.4,0.7,0.7,1.1,0.9c0.1,0,0.2,0.1,0.6,0.1c0.3,0,0.5,0.1,0.6,0.2c-0.2-0.1-0.5-0.1-0.7,0
+        c0.8,0.5,1.7,0.7,2.8,0.5c0.4-0.1,0.7-0.2,1-0.4c-0.1,0.1-0.1,0.3-0.2,0.4c0.1,0.1,0.4-0.1,0.6-0.5c0.1-0.1,0.3-0.3,0.6-0.4
+        c0,0,0,0.1,0,0.2s0,0.1,0,0.2s0,0.1,0.1,0.1c0.4,0,0.7-0.4,1.1-1.3c0.3-0.6,0.5-1.3,0.6-2.2c0.1,0.2,0.2,0.5,0.2,0.8
+        c0.2-0.5,0.3-1,0.3-1.3s0-1.3-0.1-2.9c0.3,0.4,0.5,0.7,0.7,1.1c0.1-1.2-0.1-2.2-0.5-3.1c-0.4-0.8-0.9-1.5-1.4-1.9
+        c0.5,0.1,1,0.3,1.4,0.6L17.8,6c-1.4-1.4-3.1-2.2-5.1-2.4S8.9,4,7.3,5.1c-0.6,0-1.1,0-1.5,0.1C5.6,4.9,5.5,4.8,5.5,4.8
+        C7.3,3,9.4,2.2,11.9,2.2s4.6,0.8,6.5,2.4l-0.2-0.4c0.6,0.3,1,0.7,1.4,1.2l-0.1-0.3v0.1l0,0c0.9,0.7,1.4,1.6,1.7,2.7
+        c0.2,0.9,0.2,1.6,0.1,2.3c0.1,0.1,0.1,0.1,0.1,0.3l0.3-1.1c0.1,0.3,0.2,0.7,0.2,1c0.1,0.4,0.1,0.8,0.1,1.1c0,0.4-0.1,0.7-0.1,1
+        c-0.1,0.3-0.1,0.7-0.2,1s-0.2,0.6-0.3,0.8c-0.1,0.2-0.2,0.5-0.3,0.7C21.1,15.1,21.2,15.2,21.3,15.6L21.3,15.6z"/>
     </g>
     <g id="searchResults-shape">
       <path d="M8,16.3c1.5,0,3-0.4,4.3-1.3l4.6,4.6c0.3,0.3,0.8,0.4,1.2,0.3s0.8-0.5,0.9-0.9s0-0.9-0.3-1.2l-4.5-4.5
                        S4.5,8.3,4.5,7.9C4.5,6,6,4.5,7.8,4.5L7.8,4.5z"/>
     </g>
   </defs>
-  <use id="general" xlink:href="#general-shape"/>
-  <use id="general-active" xlink:href="#general-shape"/>
-  <use id="content" xlink:href="#content-shape"/>
-  <use id="content-active" xlink:href="#content-shape"/>
-  <use id="security" xlink:href="#security-shape"/>
-  <use id="security-active" xlink:href="#security-shape"/>
-  <use id="sync" xlink:href="#sync-shape"/>
-  <use id="sync-active" xlink:href="#sync-shape"/>
-  <use id="advanced" xlink:href="#advanced-shape"/>
-  <use id="advanced-active" xlink:href="#advanced-shape"/>
-  <use id="searchResults" xlink:href="#searchResults-shape"/>
-  <use id="searchResults-active" xlink:href="#searchResults-shape"/>
+  <use id="general" href="#general-shape"/>
+  <use id="general-active" href="#general-shape"/>
+  <use id="content" href="#content-shape"/>
+  <use id="content-active" href="#content-shape"/>
+  <use id="security" href="#security-shape"/>
+  <use id="security-active" href="#security-shape"/>
+  <use id="sync" href="#sync-shape"/>
+  <use id="sync-active" href="#sync-shape"/>
+  <use id="advanced" href="#advanced-shape"/>
+  <use id="advanced-active" href="#advanced-shape"/>
+  <use id="searchResults" href="#searchResults-shape"/>
+  <use id="searchResults-active" href="#searchResults-shape"/>
 </svg>
index c8cd2a5cba4a5db0efd61658c73db704cc81a95a..2b6abadf83199529cee87c6971823ab5393f572c 100644 (file)
@@ -68,6 +68,10 @@ treecol {
   white-space: nowrap;
 }
 
+.accessory-button {
+  min-width: 145px;
+}
+
 /* Category List */
 
 #categories {
@@ -163,11 +167,6 @@ treecol {
   display: none;
 }
 
-#header-advanced {
-  border-bottom: none;
-  padding-bottom: 0;
-}
-
 .indent {
   margin-top: 7px;
   margin-bottom: 7px;
@@ -237,10 +236,6 @@ treecol {
 
 /* Applications Pane Styles */
 
-#applicationsContent {
-  padding: 15px 0;
-}
-
 #filter {
   margin-inline-start: 0;
 }
@@ -288,6 +283,21 @@ treecol {
   margin-left: 0;
 }
 
+/* This learn-more link is inserted at the end of a
+   xul:description element so it should behave like normal text. */
+#trackingProtectionLearnMore {
+  white-space: normal;
+  margin-inline-start: 0;
+}
+
+#trackingProtectionAdvancedSettings {
+  margin-inline-start: 15px;
+}
+
+#crashReporterGroup {
+  margin-top: 0;
+}
+
 /* Collapse the non-active vboxes in decks to use only the height the
    active vbox needs */
 #historyPane:not([selectedIndex="1"]) > #historyDontRememberPane,
@@ -515,6 +525,9 @@ description > html|a {
 
 .fxaSyncIllustration {
   margin-top: 35px;
+  width: 231px;
+  -moz-context-properties: fill;
+  fill: #9C9CFF;
 }
 
 #syncOptions caption {
@@ -566,10 +579,6 @@ description > html|a {
   margin-inline-end: 14px !important;
 }
 
-.fxaSyncIllustration {
-  width: 231px;
-}
-
 #fxaLoginStatus[hasName] #fxaEmailAddress1 {
   font-size: 1.1rem;
 }
@@ -690,6 +699,32 @@ description > html|a {
   background-color: var(--in-content-category-background-hover);
   border-color: var(--in-content-category-background-hover);
 }
+.help-button {
+  position: fixed;
+  left: 0;
+
+  /* Needs to have enough gap from the bottom to not
+     get behind the status panel (bug 1357841). */
+  bottom: 2rem;
+  font-size: 13px;
+  line-height: 13px;
+  height: 14px;
+  background-position: 15px;
+  padding-inline-start: 35px;
+  white-space: nowrap;
+}
+
+.help-button:-moz-locale-dir(rtl) {
+  left: auto;
+  right: 0;
+  background-position: right 15px top 0;
+}
+
+.help-button:link,
+.help-button:visited {
+  color: var(--in-content-category-text);
+  text-decoration: none;
+}
 
 /* === END shared/incontentprefs/preferences.inc.css === */
 
index a617056961d8189fd640ba27e759776b42ea1aa3..716415f5083e5cc7eac4d49684f8ffd0c26cc0a1 100644 (file)
@@ -5,14 +5,7 @@
 @import url("chrome://global/skin/in-content/info-pages.css");
 
 :root {
-  --color-grey-lightest: #FFCF00;
   --color-grey: #A09090;
-
-  --color-blue: #336699;
-  --color-blue-dark: #FFCF00;
-  --color-blue-darker: #6000CF;
-
-  --icon-margin: 64px;
 }
 
 html.private {
@@ -21,36 +14,20 @@ html.private {
   --in-content-page-background: #000000;
 }
 
-body {
-  padding: 40px;
-}
-
 a:link {
-  color: var(--color-blue);
-  text-decoration: none;
-}
-
-a:hover {
-  color: var(--color-blue-dark);
   text-decoration: underline;
 }
 
-a:hover:active {
-  color: var(--color-blue-darker);
-}
-
-a:visited {
-  color: var(--color-blue-darker);
-}
-
 .about-content-container {
   max-width: 780px;
 }
 
+.container {
+  max-width: 48em;
+}
+
 .section-main {
   margin-bottom: 48px;
-  margin-inline-start: var(--icon-margin);
-  padding-inline-start: 24px;
 }
 
 .section-main:last-child {
@@ -67,8 +44,8 @@ p {
 
 .list-row > ul > li {
   float: left;
-  width: 220px;
-  line-height: 1.5em;
+  width: 16em;
+  line-height: 2em;
   margin-inline-start: 1em;
   margin-bottom: 0;
 }
@@ -79,17 +56,15 @@ p {
 
 .title {
   background-image: url("chrome://browser/skin/privatebrowsing/private-browsing.svg");
-  background-size: 64px;
-  background-position: left, center;
-  font-weight: lighter;
-  line-height: 1.5em;
-  min-height: 64px;
-  margin-inline-start: 0;
-  padding-inline-start: calc(var(--icon-margin) + 24px);
+  background-position: left center;
+  background-size: 2em;
+  line-height: 2em;
+  margin-inline-start: calc(-2em - 10px);
+  padding-inline-start: calc(2em + 10px);
 }
 
 .title:dir(rtl) {
-  background-position: right, center;
+  background-position: right center;
 }
 
 .about-subheader {
@@ -97,12 +72,13 @@ p {
   align-items: center;
   font-size: 1.5em;
   font-weight: lighter;
-  min-height: 32px;
   background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection.svg");
   background-repeat: no-repeat;
-  background-size: 32px;
-  margin-inline-start: calc(var(--icon-margin) - 32px);
-  padding-inline-start: 56px;
+  background-position: left center;
+  background-size: 1.5em;
+  line-height: 1.5em;
+  margin-inline-start: calc(-1.5em - 10px);
+  padding-inline-start: calc(1.5em + 10px);
 }
 
 .about-subheader:dir(rtl) {
@@ -114,20 +90,15 @@ p {
 }
 
 .about-info {
-  font-size: .875em;
+  font-size: .9em;
 }
 
 .tpTitle {
   margin-inline-end: 12px;
 }
 
-.private strong {
-  color: var(--color-grey-lightest);
-  font-weight: normal;
-}
-
 a.button {
-  padding: 5px 40px;
+  padding: 3px 20px;
   background-color: #C09070;
   color: #000000;
   border: 0px solid #C09070;
@@ -164,69 +135,42 @@ a.button:active {
 .toggle + .toggle-btn {
   box-sizing: border-box;
   cursor: pointer;
-  min-width: 60px;
-  height: 24px;
-  border-radius: 24px;
+  min-width: 42px;
+  height: 26px;
+  border-radius: 13px;
   background-color: var(--color-grey);
-  border: 0px var(--color-grey) solid;
-  padding: 2px;
+  padding: 1px;
 }
 
-.toggle + .toggle-btn::after,
-.toggle + .toggle-btn::before {
+.toggle + .toggle-btn::after {
   position: relative;
   display: block;
   content: "";
-  width: 19px;
+  width: 24px;
   height: 100%;
-}
-
-.toggle + .toggle-btn::after {
   left: 0;
-/*  box-shadow: 0 0 1px 1px hsla(0, 0%, 0%, .1),
-              0 1px 0 hsla(0, 0%, 0%, .2);*/
   border-radius: 50%;
   background: #000000;
   transition: left .2s ease;
 }
 
-.toggle + .toggle-btn::before {
-  float: left;
-  left: 9px;
-  visibility: hidden;
-  background-size: 16px;
-  background-repeat: no-repeat;
-  background-color: transparent;
-  background-image: url("chrome://browser/skin/privatebrowsing/check.svg");
-}
-
 .toggle + .toggle-btn:dir(rtl)::after {
   left: auto;
   right: 0;
   transition-property: right;
 }
 
-.toggle + .toggle-btn:dir(rtl)::before {
-  float: right;
-  left: auto;
-  right: 9px;
-}
-
 .toggle:checked + .toggle-btn {
   background: #008484;
-  border: 0px solid #008484;
 }
 
 .toggle:checked + .toggle-btn::after {
-  left: 35px;
+  left: 16px;
 }
 
 .toggle:checked + .toggle-btn:dir(rtl)::after {
-  right: 35px;
-}
-
-.toggle:checked + .toggle-btn::before {
-  visibility: visible;
+  left: auto;
+  right: 16px;
 }
 
 .toggle:-moz-focusring + .toggle-btn {
diff --git a/LCARStrek/browser/privatebrowsing/check.svg b/LCARStrek/browser/privatebrowsing/check.svg
deleted file mode 100644 (file)
index a2dafc5..0000000
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- 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/. -->
-
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-  <path fill="#008484" d="M30.057,9.752L15.9,23.909h0l-4.044,4.045-4.045-4.045h0l-6.068-6.067,4.045-4.045,6.068,6.067L26.012,5.707Z"/>
-</svg>
index 33a176d715c1547bada049630abd7df2a0d104d5..b590e1dd3acfa886e6061df4ce53009c687901cd 100644 (file)
@@ -2,17 +2,6 @@
  * 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/. */
 
-#PopupSearchAutoComplete {
-  /* JS code forces the panel to have the width of the searchbar rather than
-   * the width of the textfield. Alignment of the panel with the searchbar is
-   * obtained with negative margins here: margin-inline-start when the text
-   * field is in the same direction as the rest of the UI, margin-inline-end
-   * when the textfield's direction has been reversed.
-   * (eg. using ctrl+shift+X) */
-  margin-inline-start: -25px;
-  margin-inline-end: -18px;
-}
-
 .autocomplete-textbox-container {
   -moz-box-align: stretch;
 }
   background-image: none;
 }
 
+.searchbar-engine-one-off-item:not([selected]):not(.dummy):hover,
+.search-setting-button:hover,
+.addengine-item:hover {
+  background-color: #FFCF00;
+  color: #000000;
+}
+
 .searchbar-engine-one-off-item[selected] {
   background-color: #008484;
   background-image: none;
diff --git a/LCARStrek/browser/sidebar/close.svg b/LCARStrek/browser/sidebar/close.svg
new file mode 100644 (file)
index 0000000..2d2d8cd
--- /dev/null
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M9.061,8l3.47-3.47A.75.75,0,0,0,11.47,3.47L8,6.939,4.53,3.47A.75.75,0,0,0,3.47,4.53L6.939,8,3.47,11.47A.75.75,0,1,0,4.53,12.53L8,9.061l3.47,3.47A.75.75,0,0,0,12.53,11.47Z"/>
+</svg>