1 files changed, 311 insertions, 0 deletions
diff --git a/browser/themes/shared/devedition.inc.css b/browser/themes/shared/devedition.inc.css
new file mode 100644
index 000000000..a5c0db948
--- /dev/null
+++ b/browser/themes/shared/devedition.inc.css
@@ -0,0 +1,311 @@
+% 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/.
+
+/* devedition.css is loaded in browser.xul after browser.css when it is
+   preffed on.  The bulk of the styling is here in the shared file, but
+   there are overrides for each platform in their devedition.css files. */
+
+:root {
+  --tab-toolbar-navbar-overlap: 0px;
+  --navbar-tab-toolbar-highlight-overlap: 0px;
+  --space-above-tabbar: 0px;
+  --toolbarbutton-text-shadow: none;
+  --backbutton-urlbar-overlap: 0px;
+}
+
+:root[devtoolstheme="dark"] {
+  /* Chrome */
+  --chrome-background-color: #272b35;
+  --chrome-color: #F5F7FA;
+  --chrome-secondary-background-color: #393F4C;
+  --chrome-navigator-toolbox-separator-color: rgba(0,0,0,.2);
+  --chrome-nav-bar-separator-color: rgba(0,0,0,.2);
+  --chrome-nav-buttons-background: #252C33;
+  --chrome-nav-buttons-hover-background: #1B2127;
+  --chrome-nav-bar-controls-border-color: #1D2328;
+  --chrome-selection-color: #fff;
+  --chrome-selection-background-color: #5675B9;
+
+  /* Tabs */
+  --tabs-toolbar-color: #F5F7FA;
+  --tab-background-color: #272b35;
+  --tab-hover-background-color: #07090a;
+  --tab-selection-color: #f5f7fa;
+  --tab-selection-background-color: #5675B9;
+  --tab-selection-box-shadow: none;
+  --pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, rgba(0,0,0,0.4) 16%, transparent 70%);
+
+  /* Url and search bars */
+  --url-and-searchbar-background-color: #171B1F;
+  --urlbar-separator-color: #5F6670;
+  --urlbar-dropmarker-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
+  --urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px);
+  --urlbar-dropmarker-hover-region: rect(0, 22px, 14px, 11px);
+  --urlbar-dropmarker-active-region: rect(0px, 33px, 14px, 22px);
+  --urlbar-dropmarker-2x-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
+  --urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px);
+  --urlbar-dropmarker-hover-2x-region: rect(0, 22px, 14px, 11px);
+  --urlbar-dropmarker-active-2x-region: rect(0px, 33px, 14px, 22px);
+}
+
+/* Override the lwtheme-specific styling for toolbar buttons */
+:root[devtoolstheme="dark"],
+:root[devtoolstheme="dark"] toolbar:-moz-lwtheme {
+  --toolbarbutton-hover-background: rgba(25,33, 38,.6) linear-gradient(rgba(25,33,38,.6), rgba(25,33,38,.6)) padding-box;
+  --toolbarbutton-hover-boxshadow: none;
+  --toolbarbutton-hover-bordercolor: rgba(25,33,38,.6);
+  --toolbarbutton-active-background: rgba(25,33,38,1) linear-gradient(rgba(25,33,38,1), rgba(25,33,38,1)) border-box;
+  --toolbarbutton-active-boxshadow: none;
+  --toolbarbutton-active-bordercolor: rgba(25,33,38,.8);
+  --toolbarbutton-checkedhover-backgroundcolor: #3C5283;
+
+}
+
+:root[devtoolstheme="light"] {
+  --url-and-searchbar-background-color: #fff;
+
+  --chrome-background-color: #E3E4E6;
+  --chrome-color: #18191a;
+  --chrome-secondary-background-color: #f5f6f7;
+  --chrome-navigator-toolbox-separator-color: #cccccc;
+  --chrome-nav-bar-separator-color: #B6B6B8;
+  --chrome-nav-buttons-background: #ffffff; /* --theme-body-background */
+  --chrome-nav-buttons-hover-background: #DADBDB;
+  --chrome-nav-bar-controls-border-color: #ccc;
+  --chrome-selection-color: #f5f7fa;
+  --chrome-selection-background-color: #4c9ed9;
+
+  --tab-background-color: #E3E4E6;
+  --tab-hover-background-color: #D7D8DA;
+  --tab-selection-color: #f5f7fa;
+  --tab-selection-background-color: #4c9ed9;
+  --tab-selection-box-shadow: none;
+  --pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, transparent 16%);
+}
+
+/* Override the lwtheme-specific styling for toolbar buttons */
+:root[devtoolstheme="light"],
+:root[devtoolstheme="light"] toolbar:-moz-lwtheme {
+  --toolbarbutton-hover-background: #eaeaea;
+  --toolbarbutton-hover-boxshadow: none;
+  --toolbarbutton-hover-bordercolor: rgba(0,0,0,0.1);
+  --toolbarbutton-active-background: #d7d7d8 border-box;
+  --toolbarbutton-active-boxshadow: none;
+  --toolbarbutton-active-bordercolor: rgba(0,0,0,0.15);
+  --toolbarbutton-checkedhover-backgroundcolor: #d7d7d8;
+}
+
+/* Give some space to drag the window around while customizing
+   (normal space to left and right of tabs doesn't work in this case) */
+#main-window[tabsintitlebar][customizing] {
+  --space-above-tabbar: 9px;
+}
+
+/* Override @tabCurveHalfWidth@ and @tabCurveWidth@.  XXX: Switch to a CSS variable once the perf is sorted out - bug 1088771 */
+.tab-background-middle {
+  border-left-width: 0;
+  border-right-width: 0;
+  margin: 0;
+}
+
+.tab-background,
+.tabs-newtab-button {
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+}
+
+.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
+  padding-inline-end: 0;
+  padding-inline-start: 0;
+}
+
+.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 {
+  width: 0;
+}
+
+.tab-background-start[selected=true]::after,
+.tab-background-end[selected=true]::after {
+  margin-inline-start: 0;
+}
+/* End override @tabCurveHalfWidth@ and @tabCurveWidth@ */
+
+#urlbar ::-moz-selection,
+#navigator-toolbox .searchbar-textbox ::-moz-selection,
+.browserContainer > findbar ::-moz-selection {
+  background-color: var(--chrome-selection-background-color);
+  color: var(--chrome-selection-color);
+}
+
+/* Change the base colors for the browser chrome */
+
+#tabbrowser-tabs,
+#TabsToolbar,
+#browser-panel {
+  background: var(--chrome-background-color);
+  color: var(--chrome-color);
+}
+
+#navigator-toolbox:-moz-lwtheme::after {
+  border-bottom-color: var(--chrome-navigator-toolbox-separator-color);
+}
+
+#navigator-toolbox > toolbar:not(#TabsToolbar):not(#toolbar-menubar),
+.browserContainer > findbar,
+#browser-bottombox {
+  background-color: var(--chrome-secondary-background-color) !important;
+  background-image: none !important;
+  color: var(--chrome-color);
+}
+
+/* Default findbar text color doesn't look good - Bug 1125677 */
+.browserContainer > findbar .findbar-find-status,
+.browserContainer > findbar .found-matches {
+  color: inherit;
+}
+
+#navigator-toolbox .toolbarbutton-1,
+.browserContainer > findbar .findbar-button,
+#PlacesToolbar toolbarbutton.bookmark-item {
+  color: var(--chrome-color);
+  text-shadow: var(--toolbarbutton-text-shadow);
+}
+
+/* Using toolbar[brighttext] instead of important to override linux */
+toolbar[brighttext] #downloads-indicator-counter {
+  text-shadow: var(--toolbarbutton-text-shadow);
+  color: var(--chrome-color);
+}
+
+#TabsToolbar {
+  text-shadow: none !important;
+}
+
+/* URL bar and search bar*/
+#urlbar,
+#navigator-toolbox .searchbar-textbox {
+  background-color: var(--url-and-searchbar-background-color) !important;
+  background-image: none !important;
+  color: inherit !important;
+  border: 1px solid var(--chrome-nav-bar-controls-border-color) !important;
+  box-shadow: none !important;
+}
+
+%filter substitution
+%define selectorPrefix :root[devtoolstheme="dark"] 
+%define selectorSuffix :-moz-lwtheme
+%define iconVariant -white
+%include identity-block/icons.inc.css
+
+#urlbar {
+  border-inline-start: none !important;
+  opacity: 1 !important;
+}
+
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
+  overflow: -moz-hidden-unscrollable;
+  clip-path: none;
+  margin-inline-start: 0;
+}
+
+:root[devtoolstheme="dark"] #urlbar-zoom-button:hover {
+  background-color: rgba(255,255,255,.2);
+}
+
+:root[devtoolstheme="dark"] #urlbar-zoom-button:hover:active {
+  background-color: rgba(255,255,255,.3);
+}
+
+/* Nav bar specific stuff */
+#nav-bar {
+  margin-top: 0 !important;
+  border-top: none !important;
+  border-bottom: none !important;
+  border-radius: 0 !important;
+  box-shadow: 0 -1px var(--chrome-nav-bar-separator-color) !important;
+}
+
+/* No extra vertical padding for nav bar */
+#nav-bar-customization-target,
+#nav-bar {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+/* Use smaller back button icon */
+#back-button {
+  -moz-image-region: rect(0, 54px, 18px, 36px);
+}
+
+@media (min-resolution: 1.1dppx) {
+  #back-button {
+    -moz-image-region: rect(0, 108px, 36px, 72px);
+  }
+}
+
+.tab-background {
+  visibility: hidden;
+}
+
+/* Tab separators */
+.tabbrowser-tab::after,
+.tabbrowser-tab::before {
+  background: currentColor;
+  opacity: 0.2 !important;
+}
+
+.tabbrowser-arrowscrollbox > .scrollbutton-down,
+.tabbrowser-arrowscrollbox > .scrollbutton-up {
+  background-color: var(--tab-background-color);
+  border-color: transparent;
+}
+
+.tabbrowser-tab {
+  /* We normally rely on other tab elements for pointer events, but this
+     theme hides those so we need it set here instead */
+  pointer-events: auto;
+}
+
+.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"]) {
+  background-image: var(--pinned-tab-glow);
+  background-position: center;
+  background-size: 100%;
+}
+
+.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]) {
+  background-position: left bottom var(--tab-toolbar-navbar-overlap);
+  background-size: 34px 100%;
+}
+
+.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover,
+.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover,
+.tabbrowser-tab:hover {
+  background-color: var(--tab-hover-background-color);
+}
+
+.tabbrowser-tab[visuallyselected] {
+  color: var(--tab-selection-color) !important; /* Override color: inherit */
+  background-color: var(--tab-selection-background-color);
+}
+
+.tab-icon-sound[soundplaying],
+.tab-icon-sound[muted] {
+  filter: url(chrome://browser/skin/filters.svg#fill) !important; /* removes drop-shadow filter */
+}
+
+/* Don't need space for the tab curves (66px - 30px) */
+.tabs-newtab-button {
+  width: 36px;
+}
+
+.tabs-newtab-button:hover {
+  /* Important needed because !important is used in browser.css */
+  background-color: var(--tab-hover-background-color) !important;
+  background-image: none;
+}