}
#developer-toolbar > toolbarbutton {
-/* margin: 0;
+/* border: none;
+ background-color: transparent;
+ margin: 0;
padding: 0 10px;
width: 32px; */
}
display: none;
}
-.developer-toolbar-button > .toolbarbutton-icon,
-#developer-toolbar-closebutton > .toolbarbutton-icon {
+.developer-toolbar-button > .toolbarbutton-icon {
width: 16px;
height: 16px;
}
}
}
-#developer-toolbar-closebutton {
- list-style-image: url("chrome://devtools/skin/close.png");
- -moz-image-region: rect(0px, 16px, 16px, 0px);
- min-width: 16px;
- width: 16px;
-}
-
-#developer-toolbar-closebutton > .toolbarbutton-icon {
-}
-
-#developer-toolbar-closebutton > .toolbarbutton-text {
- display: none;
-}
-
-#developer-toolbar-closebutton:hover,
-#developer-toolbar-closebutton:hover:active {
- -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-
-@media (min-resolution: 2dppx) {
- #developer-toolbar-closebutton {
- list-style-image: url("chrome://devtools/skin/close@2x.png");
- -moz-image-region: rect(0px, 32px, 32px, 0px);
- }
-
- #developer-toolbar-closebutton:hover,
- #developer-toolbar-closebutton:hover:active {
- -moz-image-region: rect(0px, 64px, 32px, 32px);
- }
-}
-
/* GCLI */
html|*#gcli-tooltip-frame,
border-bottom-width: 0;
}
+.devtools-responsiveui-textinput {
+/* -moz-appearance: none;
+ background: #333;
+ color: #fff;
+ border: 1px solid #111;
+ border-radius: 2px;
+ padding: 5px;*/
+ width: 200px;
+ margin: 0;
+}
+
+.devtools-responsiveui-textinput[attention] {
+/* border-color: #38ace6;
+ background: rgba(56,172,230,0.4);*/
+}
+
.devtools-responsiveui-menulist,
.devtools-responsiveui-toolbarbutton {
-moz-box-align: center;
}
.devtools-responsiveui-close {
- list-style-image: url("chrome://devtools/skin/close.png");
- -moz-image-region: rect(0px,16px,16px,0px);
+ list-style-image: url("chrome://devtools/skin/close.svg");
}
.devtools-responsiveui-close:hover {
- -moz-image-region: rect(0px,32px,16px,16px);
+ filter: url(images/filters.svg#checked-icon-state);
}
.devtools-responsiveui-rotate {
}
@media (min-resolution: 2dppx) {
- .devtools-responsiveui-close {
- list-style-image: url("chrome://devtools/skin/close@2x.png");
- }
-
- .devtools-responsiveui-close:hover {
- -moz-image-region: rect(0px,64px,32px,32px);
- }
-
.devtools-responsiveui-rotate {
list-style-image: url("chrome://devtools/skin/responsiveui-rotate@2x.png");
}
linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2));
}
+:root.theme-dark,
+:root.theme-light,
+:root.theme-firebug {
+ --draw-call-background: #403800;
+ --interesting-call-background: #272740;
+}
+
/* Reload and waiting notices */
.notice-container {
margin-top: -50vh;
- background-color: var(--theme-toolbar-background);
- color: var(--theme-body-color);
+ color: var(--theme-body-color-alt);
}
#empty-notice > button {
/* Snapshots pane */
-#snapshots-pane > tabs {
- -moz-border-end: 1px solid;
-}
-
-#snapshots-pane .devtools-toolbar {
- -moz-border-end: 1px solid;
-
- -moz-border-end-color: #9C9CFF; /* Match the splitter color. */
+#snapshots-pane {
+ border-inline-end: 1px solid var(--theme-splitter-color);
}
#record-snapshot {
.snapshot-item-thumbnail {
image-rendering: -moz-crisp-edges;
- background-image: linear-gradient(45deg, #504848 25%, transparent 25%, transparent 75%, #504848 75%, #504848), linear-gradient(45deg, #504848 25%, transparent 25%, transparent 75%, #504848 75%, #504848);
+ background-image: var(--checkerboard-pattern);
background-size: 12px 12px, 12px 12px;
background-position: 0px 0px, 6px 6px;
background-repeat: repeat, repeat;
}
.snapshot-item-thumbnail {
- background-color: #000000;
+ background-color: var(--theme-body-background);
}
.snapshot-item-details {
- -moz-padding-start: 6px;
+ padding-inline-start: 6px;
}
.snapshot-item-calls {
font-size: 80%;
}
-.snapshot-item-calls,
-.snapshot-item-save {
- color: var(--theme-body-color);
-}
-
.snapshot-item-save {
padding-bottom: 2px;
font-size: 90%;
.snapshot-item-calls,
.snapshot-item-save {
- color: #A09090; /* Foreground (Text) - Grey */
+ color: var(--theme-body-color-alt);
}
.snapshot-item-save {
}
#calls-slider {
- -moz-padding-end: 24px;
+ padding-inline-end: 24px;
}
#calls-slider .scale-slider {
background: transparent;
}
-#calls-list .side-menu-widget-item {
- padding: 0;
-}
-
/* Calls list items */
#calls-list .side-menu-widget-item {
- border-color: #504848;
+ padding: 0;
+ border-color: var(--theme-splitter-color);
border-bottom-color: transparent;
}
}
.call-item-view[draw-call] {
- background-color: #403800;
+ background-color: var(--draw-call-background);
}
.call-item-view[interesting-call] {
- background-color: #272740;
+ background-color: var(--interesting-call-background);
}
.call-item-gutter {
}
}
-.call-item-gutter {
- background-color: var(--theme-contrastsidebar-background);
- color: var(--theme-contrastsidebar-color);
- border-color: var(--theme-contrastsidebar-bordercolor);
-}
-
.call-item-index {
text-align: end;
}
}
.call-item-location {
- -moz-padding-start: 2px;
- -moz-padding-end: 6px;
+ padding-inline-start: 2px;
+ padding-inline-end: 6px;
text-align: end;
cursor: pointer;
color: var(--theme-highlight-bluegrey);
+ border-color: var(--theme-splitter-color);
}
.call-item-location:hover {
text-decoration: underline;
}
-.call-item-location {
- border-color: #A09090;
-}
-
.call-item-stack {
- -moz-padding-start: calc(3em + 22px);
+ padding-inline-start: calc(var(--gutter-width) + var(--gutter-padding-start));
padding-bottom: 10px;
}
}
.call-item-stack-fn-location {
- -moz-padding-start: 2px;
- -moz-padding-end: 6px;
+ padding-inline-start: 2px;
+ padding-inline-end: 6px;
text-align: end;
cursor: pointer;
text-decoration: underline;
/* Rendering preview */
#screenshot-container {
- background-image: linear-gradient(45deg, #504848 25%, transparent 25%, transparent 75%, #504848 75%, #504848), linear-gradient(45deg, #504848 25%, transparent 25%, transparent 75%, #504848 75%, #504848);
+ background-color: var(--theme-body-background);
+ background-image: var(--checkerboard-pattern);
background-size: 30px 30px, 30px 30px;
background-position: 0px 0px, 15px 15px;
background-repeat: repeat, repeat;
}
-#screenshot-container {
- background-color: #000000;
-}
-
@media (min-width: 701px) {
#screenshot-container {
width: 30vw;
/* Snapshot filmstrip */
#snapshot-filmstrip {
+ border-top: 1px solid var(--theme-splitter-color);
overflow: hidden;
}
#snapshot-filmstrip {
- border-top: 1px solid #000;
color: var(--theme-body-color);
}
.filmstrip-thumbnail {
image-rendering: -moz-crisp-edges;
- background-image: linear-gradient(45deg, #504848 25%, transparent 25%, transparent 75%, #504848 75%, #504848), linear-gradient(45deg, #504848 25%, transparent 25%, transparent 75%, #504848 75%, #504848);
+ background-color: var(--theme-body-background);
+ background-image: var(--checkerboard-pattern);
background-size: 12px 12px, 12px 12px;
background-position: 0px -1px, 6px 5px;
background-repeat: repeat, repeat;
cursor: pointer;
padding-top: 1px;
padding-bottom: 1px;
+ border-inline-end: 1px solid var(--theme-splitter-color);
transition: opacity 0.1s ease-in-out;
}
transform: scaleY(-1);
}
-.filmstrip-thumbnail {
- background-color: #000000;
-}
-
-.filmstrip-thumbnail {
- -moz-border-end: 1px solid var(--theme--contrastsidebar-bordercolor)
-}
-
#snapshot-filmstrip > .filmstrip-thumbnail:hover,
#snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] {
border: 1px solid var(--theme-highlight-blue);
--- /dev/null
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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/. */
+
+/**
+ * Frame Component
+ * Styles for React component at `devtools/client/shared/components/frame.js`
+ */
+
+.frame-link {
+ margin-left: 7px;
+ display: flex;
+}
+
+.frame-link .frame-link-source {
+ display: flex;
+}
+.frame-link a.frame-link-source {
+ cursor: pointer;
+ text-decoration: none;
+}
+.frame-link a.frame-link-source:hover {
+ text-decoration: underline;
+}
+
+.frame-link .frame-link-filename {
+ color: var(--theme-highlight-blue);
+ text-overflow: ellipsis;
+ overflow: hidden;
+ flex: 1;
+ text-align: right;
+ /* overrides styling some tools have with anchors */
+ text-decoration: none;
+ font-style: normal;
+}
+
+.frame-link .frame-link-host {
+ margin-inline-start: 5px;
+ font-size: 90%;
+ color: var(--theme-content-color2);
+}
+
+.frame-link .frame-link-function-display-name {
+ margin-inline-end: 5px;
+}
+
+.frame-link .frame-link-column,
+.frame-link .frame-link-line,
+.frame-link .frame-link-colon {
+ color: var(--theme-highlight-orange);
+ display: block;
+}
+
+.focused .frame-link .frame-link-filename,
+.focused .frame-link .frame-link-column,
+.focused .frame-link .frame-link-line,
+.focused .frame-link .frame-link-host,
+.focused .frame-link .frame-link-colon {
+ color: var(--theme-selection-color);
+}
--- /dev/null
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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/. */
+
+/**
+ * HSplitBox Component
+ * Styles for React component at `devtools/client/shared/components/h-split-box.js`
+ */
+
+.h-split-box,
+.h-split-box-pane {
+ overflow: auto;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.h-split-box {
+ display: flex;
+ flex-direction: row;
+ flex: 1;
+}
}
.theme-gutter {
- background-color: #000000;
+ background-color: var(--theme-tab-toolbar-background);
color: var(--theme-content-color3);
- border-color: #9C9CFF;
+ border-color: var(--theme-splitter-color);
}
-.theme-separator { /* original: grey */
- border-color: #8050B0;
+.theme-separator {
+ border-color: var(--theme-splitter-color);
}
.theme-fg-color1,
+/* vim:set ts=2 sw=2 sts=2 et: */
/* 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/. */
padding: 0;
}
-/* === BEGIN debugger.inc.css === */
-
/* Sources and breakpoints pane */
#sources-pane[selectedIndex="0"] + #sources-and-editor-splitter {
}
#sources-pane > tabs {
+/* -moz-border-end: 1px solid;*/
+}
+
+#sources-pane .devtools-toolbar {
+ border: none; /* Remove the devtools-toolbar bottom border. */
+/* -moz-border-end: 1px solid;*/
+}
+
+#sources-pane > tabs,
+#sources-pane .devtools-toolbar {
-moz-border-end-color: var(--theme-splitter-color);
}
+/* Sources and breakpoints list */
+
+.dbg-source-item {
+ padding: 2px 0px;
+}
+
+.dbg-wasm-item .icon {
+ display: block;
+ background-image: url(chrome://devtools/skin/images/webconsole.svg);
+ background-repeat: no-repeat;
+ background-size: 72px 60px;
+ /* show warning icon */
+ background-position: -24px -24px;
+ width: 10px;
+ height: 10px;
+ position: absolute;
+ margin-inline-start: -15px;
+ margin-top: 3px;
+}
+
+.dbg-breakpoint-line {
+ font-weight: 600;
+}
+
+.dbg-breakpoint-text {
+ -moz-padding-start: 6px;
+ font-style: italic;
+ font-size: 90%;
+}
+
+.dbg-breakpoint-checkbox {
+ width: 16px;
+ height: 16px;
+ margin: 2px;
+}
+
.dbg-breakpoint-condition-thrown-message {
display: none;
color: var(--theme-highlight-red);
#sources-toolbar > .devtools-toolbarbutton,
#sources-controls > .devtools-toolbarbutton {
- min-width: 32px;
+ min-width: 16px;
}
#sources-toolbar .devtools-toolbarbutton:not([label]) {
-moz-image-region: rect(0,16px,16px,0) !important;
}
+#toggle-breakpoints[checked] > image {
+ /* This button has a special checked image, don't make it blue */
+ filter: none;
+}
+
#toggle-promise-debugger {
/* TODO Bug 1186119: Add a toggle promise debugger image */
}
display: none;
}
-#sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
- background-image: none;
-/* box-shadow: inset -1px 0 0 #222426; */
-}
-
-#sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
- background-image: none;
-/* box-shadow: inset 1px 0 0 #222426; */
-}
-
/* Debugger unblackbox button */
#black-boxed-message-button > .button-box > .button-icon {
width: 16px;
height: 16px;
background-image: url("images/debugger-blackbox.png");
- background-position: -16px -16px;
- background-size: 32px 32px;
+ background-position: 0 0;
+ background-size: 32px 16px;
background-repeat: no-repeat;
-moz-margin-end: 5px;
}
padding: .25em;
}
-/* Tracer */
-
-#trace {
- list-style-image: url("tracer-icon.png");
- -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#trace:hover {
- -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-@media (min-resolution: 1.1dppx) {
- #trace {
- list-style-image: url(tracer-icon@2x.png);
- -moz-image-region: rect(0px,32px,32px,0px);
- }
-
- #trace:hover,
- #trace[checked] {
- -moz-image-region: rect(0px,64px,32px,32px);
- }
-}
-
-#clear-tracer {
- /* Make this button as narrow as the text inside it. */
- min-width: 1px;
-}
-
-.trace-name {
- -moz-padding-start: 4px !important;
-}
-
-/* Tracer dark+light theme */
-
-.trace-item {
- color: var(--theme-content-color1);
-}
-
-.trace-item.black-boxed {
- color: #A09090;
-}
-
-.trace-item.selected-matching {
- background-color: #004242; /* Select highlight blue at 40% alpha */
-}
-
-.selected > .trace-item {
- background-color: #004242; /* Select highlight blue at 75% alpha */
-}
-
-.trace-call {
- color: var(--theme-highlight-blue);
-}
-
-.trace-return,
-.trace-yield {
- color: var(--theme-highlight-green);
-}
-
-.trace-throw {
- color: var(--theme-highlight-red);
-}
-
-.trace-param {
- color: var(--theme-highlight-pink);
-}
-
-.trace-syntax {
- color: var(--theme-content-color2);
-}
-
/* Breadcrumbs stack frames view */
-.breadcrumbs-widget-item {
- max-width: none;
-}
-
-#stackframes {
- min-height: 25px;
-}
-
.dbg-stackframe-details {
-moz-padding-start: 4px;
}
.dbg-classic-stackframe {
display: block;
- padding: 0 4px;
}
.dbg-classic-stackframe-title {
font-weight: 600;
- color: #9C9CFF;
}
.dbg-classic-stackframe-details:-moz-locale-dir(ltr) {
.dbg-classic-stackframe-details-url {
max-width: 90%;
text-align: end;
- color: var(--theme-text-blue);
+}
+
+.dbg-classic-stackframe-details-url {
+ color: var(--theme-content-color1);
}
.dbg-classic-stackframe-details-sep {
}
.dbg-classic-stackframe-details-line {
- color: var(--theme-highlight-blue);
+ color: var(--theme-highlight-bluegrey);
}
-#callstack-list .side-menu-widget-item.selected label {
- color: #FFCF00;
+#callstack-list .selected label {
+ /* Text inside a selected item should not be custom colored. */
+ color: inherit !important;
}
-/* Sources and breakpoints view */
+/* Tracer */
-.dbg-breakpoint {
- -moz-margin-start: 4px;
+#trace {
+ list-style-image: url("images/tracer-icon.png");
}
-.dbg-breakpoint-line {
- font-weight: 600;
+@media (min-resolution: 1.1dppx) {
+ #trace {
+ list-style-image: url("images/tracer-icon@2x.png");
+ }
}
-.dbg-breakpoint-text {
- -moz-margin-start: 10px !important;
- font-style: italic;
- font-size: 90%;
+#clear-tracer {
+ /* Make this button as narrow as the text inside it. */
+ min-width: 1px;
}
-.dbg-breakpoint-checkbox {
- width: 16px;
- height: 16px;
- margin: 2px;
+.trace-name {
+ -moz-padding-start: 4px;
}
-/* Variable bubble view */
+/* Tracer dark+light theme */
-.devtools-tooltip-simple-text.token-undefined,
-.devtools-tooltip-simple-text.token-null {
- text-align: center;
- color: #A09090 !important; /* Override the theme's color. */
+.trace-item {
+ color: var(--theme-content-color1);
}
-.devtools-tooltip-simple-text.token-boolean {
- text-align: center;
- color: #9C9CFF !important;
+.trace-item.black-boxed {
+ color: #A09090;
}
-.devtools-tooltip-simple-text.token-number {
- text-align: center;
- color: #E7ADE7 !important;
+.trace-item.selected-matching {
+ background-color: #004242; /* Select highlight blue at 40% alpha */
}
-.devtools-tooltip-simple-text.token-string {
- text-align: start;
- color: #008484 !important;
+.selected > .trace-item {
+ background-color: #004242; /* Select highlight blue at 75% alpha */
}
-.devtools-tooltip-simple-text.token-other {
- text-align: center;
- color: #FF9F00 !important;
+.trace-call {
+ color: var(--theme-highlight-blue);
}
-/* Instruments pane (watch expressions, variables, event listeners...) */
+.trace-return,
+.trace-yield {
+ color: var(--theme-highlight-green);
+}
-#instruments-pane .side-menu-widget-container,
-#instruments-pane .side-menu-widget-empty-text {
-/* box-shadow: none !important; */
+.trace-throw {
+ color: var(--theme-highlight-red);
+}
+
+.trace-param {
+ color: var(--theme-highlight-pink);
+}
+
+.trace-syntax {
+ color: var(--theme-content-color2);
}
/* Watch expressions view */
/* Event listeners view */
-.dbg-event-listener {
- padding: 0 8px;
-}
-
.dbg-event-listener-type {
font-weight: 600;
}
+.dbg-event-listener-location {
+ color: var(--theme-highlight-pink);
+}
+
.dbg-event-listener-separator {
color: var(--theme-body-color-alt);
}
color: var(--theme-highlight-blue);
}
-.dbg-event-listener-location {
- color: var(--theme-highlight-pink);
-}
-
-#event-listeners .side-menu-widget-item.selected {
- background: none !important;
+#event-listeners .selected {
+ /* Selected items shouldn't be displayed differently. */
+ background: none;
+ color: var(--theme-content-color1);
}
/* Searchbox and the search operations help panel */
/* Searchbox results panel */
-.results-panel {
- padding: 4px;
+#results-panel {
+ border: none;
}
.results-panel-item {
- border: 1px solid #A09090;
- border-top-color: #8050B0;
- padding: 5px;
- cursor: pointer;
+ padding: 6px 8px;
+ border-top: 1px solid #A09090;
}
.results-panel-item:first-of-type {
- border-top-color: #9C9CFF;
+ border-top: none;
border-radius: 4px 4px 0 0;
}
border-radius: 4px;
}
-.results-panel-item:not(.selected):not(:hover) {
-/* text-shadow: 0 1px #fff;*/
+.results-panel-item-label {
+ font-weight: 600;
}
.results-panel-item-label-before {
- -moz-margin-end: 5px !important;
- color: var(--theme-content-color2);
- cursor: inherit;
+ -moz-padding-end: 6px;
}
.results-panel-item-label {
color: var(--theme-highlight-blue);
- font-weight: 600;
- cursor: inherit;
+}
+
+.results-panel-item-label-before {
+ color: var(--theme-content-color2);
}
.results-panel-item-label-below {
color: var(--theme-content-color3);
- cursor: inherit;
+}
+
+#results-panel .selected label {
+ /* Text inside a selected item should not be custom colored. */
+ color: inherit !important;
}
/* Sources search view */
#globalsearch {
min-height: 10px;
- max-height: 125px;
+ max-height: 50vh;
}
#globalsearch + .devtools-horizontal-splitter {
- -moz-border-top-colors: #9C9CFF;
+ -moz-border-top-colors: var(--theme-splitter-color);
}
.dbg-source-results {
}
.dbg-source-results:not(.selected):hover {
- background-color: #000000; /* Sidebar background */
+ background-color: var(--theme-sidebar-background);
}
.dbg-results-header {
.dbg-results-header-match-count {
-moz-padding-start: 6px;
- color: var(--theme-content-disabled);
+ color: var(--theme-body-color-inactive);
}
.dbg-results-line-number {
- background-color: var(--theme-toolbar-background);
- min-width: 40px;
+ min-width: 3em;
-moz-border-end: 1px solid #9C9CFF;
-moz-padding-end: 4px;
- padding-top: 2px;
text-align: end;
- color: var(--theme-body-color);
}
.dbg-results-line-contents {
-moz-padding-start: 4px;
- padding-top: 1px;
- padding-bottom: 1px;
-}
-
-.dbg-results-line-contents-string {
- padding: 1px;
-/* color: var(--theme-body-color-alt);*/
}
.dbg-results-line-contents-string[match=true] {
background: #E7ADE7;
color: var(--theme-selection-color);
- padding: 0;
border: 1px solid #9C9CFF;
border-radius: 4px;
+ margin-top: -1px !important;
+ margin-bottom: -1px !important;
cursor: pointer;
}
transform: scale(1.75, 1.75);
}
-/* Toolbar controls */
+.dbg-source-results:not(.selected):hover {
+ background-color: var(--theme-sidebar-background);
+}
-#toggle-panes {
- list-style-image: url("chrome://devtools/skin/images/debugger-expand.png");
- -moz-image-region: rect(0px, 16px, 16px, 0px);
+.dbg-results-header {
+ background-color: var(--theme-tab-toolbar-background);
}
-#toggle-panes:not([panesHidden]) {
- list-style-image: url("chrome://devtools/skin/images/debugger-collapse.png");
+.dbg-results-header {
+ color: var(--theme-content-color1);
}
-#toggle-panes:hover,
-#toggle-panes:hover:active {
- -moz-image-region: rect(0px, 32px, 16px, 16px);
+.dbg-search-result:hover {
+ background-color: #004242; /* Select highlight blue at 40% alpha */
}
-#resume {
- list-style-image: url("chrome://devtools/skin/images/debugger-pause.png");
- -moz-image-region: rect(0px, 16px, 16px, 0px);
+.dbg-results-header-match-count {
+ color: var(--theme-content-color3);
+}
+
+.dbg-results-line-number {
+ background-color: var(--theme-tab-toolbar-background);
+ color: var(--theme-body-color-alt);
}
-#resume:hover {
- -moz-image-region: rect(0px, 32px, 16px, 16px);
+.dbg-results-line-contents-string {
+ color: var(--theme-body-color-alt);
}
-#resume[checked=true] {
- list-style-image: url("chrome://devtools/skin/images/debugger-play.png");
+.theme-dark .dbg-results-line-contents-string[match=true] {
+ color: var(--theme-selection-color);
+}
+
+.theme-light .dbg-results-line-contents-string[match=true] {
+ color: var(--theme-body-color);
+}
+
+/* Toolbar controls */
+
+#resume {
+ list-style-image: url(images/debugger-pause.png);
+}
+
+#resume[checked] {
+ list-style-image: url(images/debugger-play.png);
}
@media (min-resolution: 1.1dppx) {
#resume {
list-style-image: url(images/debugger-pause@2x.png);
- -moz-image-region: rect(0px, 32px, 32px, 0px);
- }
-
- #resume:hover {
- -moz-image-region: rect(0px, 64px, 32px, 32px);
}
- #resume[checked=true] {
+ #resume[checked] {
list-style-image: url(images/debugger-play@2x.png);
}
}
}
#step-over {
- list-style-image: url("chrome://devtools/skin/images/debugger-step-over.png");
- -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-#step-over:hover {
- -moz-image-region: rect(0px, 32px, 16px, 16px);
+ list-style-image: url(images/debugger-step-over.png);
}
#step-in {
- list-style-image: url("chrome://devtools/skin/images/debugger-step-in.png");
- -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-#step-in:hover {
- -moz-image-region: rect(0px, 32px, 16px, 16px);
+ list-style-image: url(images/debugger-step-in.png);
}
#step-out {
- list-style-image: url("chrome://devtools/skin/images/debugger-step-out.png");
- -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-#step-out:hover {
- -moz-image-region: rect(0px, 32px, 16px, 16px);
+ list-style-image: url(images/debugger-step-out.png);
}
@media (min-resolution: 1.1dppx) {
#step-over {
list-style-image: url(images/debugger-step-over@2x.png);
- -moz-image-region: rect(0px, 32px, 32px, 0);
- }
-
- #step-over:hover {
- -moz-image-region: rect(0px, 64px, 32px, 32px);
}
#step-in {
list-style-image: url(images/debugger-step-in@2x.png);
- -moz-image-region: rect(0px, 32px, 32px, 0);
- }
-
- #step-in:hover {
- -moz-image-region: rect(0px, 64px, 32px, 32px);
}
#step-out {
list-style-image: url(images/debugger-step-out@2x.png);
- -moz-image-region: rect(0px, 32px, 32px, 0);
- }
-
- #step-out:hover {
- -moz-image-region: rect(0px, 64px, 32px, 32px);
}
}
#instruments-pane-toggle {
- list-style-image: url("chrome://devtools/skin/images/debugger-collapse.png");
+ list-style-image: var(--theme-pane-collapse-image);
}
#instruments-pane-toggle[pane-collapsed] {
- list-style-image: url("chrome://devtools/skin/images/debugger-expand.png");
-}
-
-@media (min-resolution: 1.1dppx) {
- #instruments-pane-toggle {
- list-style-image: url(images/debugger-collapse@2x.png);
- }
-
- #instruments-pane-toggle[pane-collapsed] {
- list-style-image: url(images/debugger-expand@2x.png);
- }
+ list-style-image: var(--theme-pane-expand-image);
}
/* Horizontal vs. vertical layout */
max-height: 80vh;
}
+#body[layout=vertical] #sources-pane > tabs {
+ -moz-border-end: none;
+}
+
#body[layout=vertical] #instruments-pane {
margin: 0 !important;
/* To prevent all the margin hacks to hide the sidebar. */
}
-#body[layout=vertical] #sources-pane > tabs {
- -moz-border-end: none;
-}
-
#body[layout=vertical] .side-menu-widget-container,
#body[layout=vertical] .side-menu-widget-empty-text {
box-shadow: none !important;
background-image: none !important;
}
-/* === END debugger.inc.css === */
+#body[layout=vertical] .side-menu-widget-group,
+#body[layout=vertical] .side-menu-widget-item {
+ -moz-margin-end: 0;
+}
--- /dev/null
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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/. */
+
+:root.theme-dark {
+}
+:root.theme-light {
+}
+++ /dev/null
-<!-- 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 height="0" xmlns="http://www.w3.org/2000/svg">
- <filter id="checked-icon-state">
- <feColorMatrix in="SourceGraphic" type="matrix"
- values="0 0 0 0 0.043
- 0 0 0 0 0.415
- 0 0 0 0 0.79
- 0 0 0 1 0"/>
- </filter>
-
- <!-- Web Audio Gradients -->
- <linearGradient id="bypass-light" x1="6%" y1="8%" x2="12%" y2="12%" spreadMethod="repeat">
- <stop offset="0%" stop-color="#f0f1f2"/> <!-- theme-toolbar-background -->
- <stop offset="50%" stop-color="#fff"/>
- </linearGradient>
-
- <linearGradient id="bypass-dark" x1="6%" y1="8%" x2="12%" y2="12%" spreadMethod="repeat">
- <stop offset="0%" stop-color="#343c45"/> <!-- theme-toolbar-background -->
- <stop offset="50%" stop-color="transparent"/>
- </linearGradient>
-</svg>
--- /dev/null
+/* In LCARStrek, we do not support dark and light devtools themes, it's all one. */
+@import url("dark-theme.css");
padding: 2px;
}
+:root[platform="mac"] xul|scrollbar {
+ border: none;
+}
+
/* Scrollbar code will reset the margin to the correct side depending on
where layout actually puts the scrollbar */
xul|scrollbar[orient="vertical"] {
margin-left: -10px;
- min-width: 3px;
- max-width: 3px;
+ min-width: 10px;
+ max-width: 10px;
}
xul|scrollbar[orient="horizontal"] {
margin-top: -10px;
- min-height: 3px;
- max-height: 3px;
-}
-
-xul|scrollbar xul|slider {
-/* background-color: transparent; */
- border-radius: 3px;
-}
-
-xul|scrollbar:not(:hover) xul|slider {
- background-color: rgba(64, 64, 72, 0.3);
+ min-height: 10px;
+ max-height: 10px;
}
xul|scrollbar xul|thumb {
+/* background-color: rgba(170, 170, 170, .2) !important; / --toolbar-tab-hover, in LCARStrek only in non-hover rule */
+/* -moz-appearance: none !important;*/
border-width: 0px !important;
-/* background-color: rgba(0,0,0,0.2) !important; */
background-image: none;
border-radius: 3px !important;
}
-@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-xul|scrollbar {
+scrollbar {
position: relative;
background-color: transparent;
background-image: none;
padding: 2px;
}
-:root[platform="mac"] xul|scrollbar {
+:root[platform="mac"] scrollbar {
border: none;
}
/* Scrollbar code will reset the margin to the correct side depending on
where layout actually puts the scrollbar */
-xul|scrollbar[orient="vertical"] {
+scrollbar[orient="vertical"] {
margin-left: -10px;
- min-width: 3px;
- max-width: 3px;
+ min-width: 10px;
+ max-width: 10px;
}
-xul|scrollbar[orient="horizontal"] {
+scrollbar[orient="horizontal"] {
margin-top: -10px;
- min-height: 3px;
- max-height: 3px;
+ min-height: 10px;
+ max-height: 10px;
}
-xul|scrollbar xul|slider {
-/* background-color: transparent; */
- border-radius: 3px;
-}
-
-xul|scrollbar:not(:hover) xul|slider {
+scrollbar:not(:hover) slider {
background-color: rgba(64, 64, 72, 0.3);
}
-xul|scrollbar xul|thumb {
+thumb {
border-width: 0px !important;
/* background-color: rgba(0,0,0,0.2) !important; */
background-image: none;
border-radius: 3px !important;
}
-xul|scrollbar:not(:hover) xul|thumb {
+scrollbar:not(:hover) thumb {
background-color: rgba(160, 144, 144, 0.3) !important;
}
-xul|scrollbar xul|scrollbarbutton,
-xul|scrollbar xul|gripper {
+scrollbar scrollbarbutton,
+scrollbar gripper {
display: none !important; /* need !important to override forced display in LCARStrek */
}
--- /dev/null
+<!-- 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" fill="#FFCF00">
+ <path d="M11.9 13.5V3.9c0-.3-.3-.7-.7-.7H2c-.3 0-.7.2-.7.7v9.6c0 .3.3.7.7.7h9.2c.6-.1.7-.6.7-.7zM2.1 9.3V4h9v5.3h-9zm0 3.9v-3h9v3h-9z"/>
+</svg>
--- /dev/null
+<!-- 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" fill="#FFCF00">
+ <path d="M-1.5 3.2h-9.6c-.1 0-.2.1-.2.2V13c0 .1.1.2.2.2h9.6c.1 0 .2-.1.2-.2V3.4c0-.1-.1-.2-.2-.2zm-3.6 8.9h-5V4.4h5v7.7zm3.2-.1h-2.7V4.4h2.7V12zM11.1 3.2H.9c-.3 0-.7.3-.7.7v9.2c0 .3.2.7.7.7h10.2c.3 0 .7-.3.7-.7V3.9c-.1-.6-.6-.7-.7-.7zM6.9 13H1.1V4H7v9zm4 0h-3V4h3v9z"/>
+</svg>
--- /dev/null
+<!-- 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" fill="#FFCF00">
+ <path d="M4.3 2.8v5.9c0 .2.2.4.5.4h5.7c.2 0 .5-.2.5-.4V2.8c0-.2-.2-.4-.5-.4H4.8c-.4 0-.5.3-.5.4zm5.8 2.8v2.6h-5V5.6h5zm0-2.5V5h-5V3.1h5z"/>
+ <path d="M7.1 9.9v2.2h-5V9.7h1.2V9H2.1V7h1.2v-.7H1.7c-.4 0-.5.3-.5.4v5.9c0 .2.2.4.5.4h5.7c.2 0 .5-.2.5-.4V9.9h-.8z"/>
+</svg>
--- /dev/null
+<!-- This Source Code Form is subject to the terms of the Mozilla Public\r
+ - License, v. 2.0. If a copy of the MPL was not distributed with this\r
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->\r
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#000000">\r
+ <path d="M6.052 1.13L1.164 5.57a.5.5 0 0 0 0 .74l5 4.56a.5.5 0 0 0 .673-.74l-5-4.559v.74l4.887-4.44a.5.5 0 0 0-.672-.741zM10.948 14.87l4.888-4.44a.5.5 0 0 0 0-.74l-5-4.56a.5.5 0 1 0-.673.74l5 4.559v-.74l-4.887 4.44a.5.5 0 0 0 .672.741z"/>\r
+</svg>\r
--- /dev/null
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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/. */
+
+/**
+ * JIT View
+ */
+
+#jit-optimizations-view {
+ width: 350px;
+ min-width: 200px;
+ white-space: nowrap;
+ --jit-tree-row-height: 14;
+ --jit-tree-header-height: 16;
+}
+
+/* Override layout styles applied by minimal-xul.css */
+#jit-optimizations-view div {
+ display: block;
+}
+#jit-optimizations-view span {
+ display: inline-block;
+}
+
+#jit-optimizations-view > div {
+ /* For elements that need to flex to fill the available space and/or
+ * scroll on overflow, we need to use the old flexbox model, since the
+ * parent nodes are in the XUL namespace. The new flexbox model can't
+ * properly compute dimensions and will ignore `flex: ${number}` properties,
+ * since no other parent node has a flex display. */
+ display: -moz-box;
+ -moz-box-flex: 1;
+ -moz-box-orient: vertical;
+}
+
+#jit-optimizations-view .optimization-header,
+#jit-optimizations-view .tree * {
+ /* We can, however, display child nodes as flex to take advantage of
+ * horizontal/vertical inlining. */
+ display: flex;
+}
+
+#jit-optimizations-view .optimization-header {
+ height: var(--jit-tree-header-height);
+ padding: 2px 5px;
+ background-color: var(--theme-tab-toolbar-background);
+}
+
+#jit-optimizations-view .header-title {
+ font-weight: bold;
+ padding-inline-end: 7px;
+}
+
+#jit-optimizations-view .tree {
+ display: -moz-box;
+ -moz-box-flex: 1;
+ -moz-box-orient: vertical;
+ overflow: auto;
+ background-color: var(--theme-body-background);
+}
+
+#jit-optimizations-view .tree-node {
+ height: var(--jit-tree-row-height);
+}
+
+#jit-optimizations-view .tree-node button {
+ display: none;
+}
+
+#jit-optimizations-view .optimization-outcome.success {
+ color: var(--theme-highlight-green);
+}
+#jit-optimizations-view .optimization-outcome.failure {
+ color: var(--theme-highlight-red);
+}
+
+.opt-icon::before {
+ background-image: url(chrome://devtools/skin/images/webconsole.svg);
+}
+
+.opt-icon::before {
+ display: inline-block;
+ content: "";
+ background-repeat: no-repeat;
+ background-size: 72px 60px;
+ /* show grey "i" bubble by default */
+ background-position: -36px -36px;
+ width: 10px;
+ height: 10px;
+ max-height: 12px;
+}
+
+.opt-icon::before {
+ margin: 1px 6px 0 0;
+}
+
+.opt-icon.warning::before {
+ background-position: -24px -24px;
+}
+
+/* Frame Component */
+.focused .frame-link-filename,
+.focused .frame-link-column,
+.focused .frame-link-line,
+.focused .frame-link-host,
+.focused .frame-link-colon {
+ color: var(--theme-selection-color);
+}
+
+.frame-link {
+ margin-inline-start: 7px;
+}
+
+.frame-link-filename {
+ color: var(--theme-highlight-blue);
+ cursor: pointer;
+}
+
+.frame-link-filename:hover {
+ text-decoration: underline;
+}
+
+.frame-link-column,
+.frame-link-line,
+.frame-link-colon {
+ color: var(--theme-highlight-orange);
+}
+
+.frame-link-host {
+ margin-inline-start: 5px;
+ font-size: 90%;
+ color: var(--theme-content-color2);
+}
+
+.frame-link-function-display-name {
+ margin-inline-end: 5px;
+}
:root.theme-light {
--table-splitter-color: #A09090;
--table-zebra-background: rgba(255,159,0,0.1);
+
+ --timing-blocked-color: #FF0000;
+ --timing-dns-color: #E7ADE7; /* pink */
+ --timing-connect-color: #FF9F00; /* orange */
+ --timing-send-color: #FFCF00; /* light blue */
+ --timig-wait-color: #9C9CFF; /* blue grey */
+ --timing-receive-color: #A09090; /* green */
+
+ --sort-ascending-image: url(chrome://devtools/skin/images/sort-arrows.svg#ascending);
+ --sort-descending-image: url(chrome://devtools/skin/images/sort-arrows.svg#descending);
}
#requests-menu-empty-notice {
#requests-menu-reload-notice-button {
min-height: 26px;
margin: 0;
+ background-color: var(--theme-toolbar-background);
}
/* Network requests table */
}
.requests-menu-subitem {
- padding: 4px;
+ padding: 3px;
}
.requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
.requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
}
-.requests-menu-header-button,
-#requests-menu-status-button {
+#requests-menu-status-button,
+.requests-menu-header-button {
background-color: transparent;
- border-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%) 1 1;
+ border-image: linear-gradient(transparent 15%,
+ var(--theme-splitter-color) 15%,
+ var(--theme-splitter-color) 85%,
+ transparent 85%) 1 1;
border-style: solid;
border-width: 0;
border-inline-start-width: 1px;
padding-inline-start: 13px;
padding-top: 2px;
text-align: center;
+/* color: inherit;*/
font-weight: inherit !important;
}
width: 7px;
}
-.requests-menu-header-button[sorted] > .button-box > .button-icon,
-.requests-menu-header-button[sorted] #requests-menu-waterfall-image {
- list-style-image: url('chrome://devtools/skin/images/sort-arrows.svg');
-}
-
.requests-menu-header-button[sorted=ascending] > .button-box > .button-icon,
.requests-menu-header-button[sorted=ascending] #requests-menu-waterfall-image {
- -moz-image-region: rect(4px, 19px, 7px, 14px);
+ list-style-image: var(--sort-ascending-image);
}
.requests-menu-header-button[sorted=descending] > .button-box > .button-icon,
.requests-menu-header-button[sorted=descending] #requests-menu-waterfall-image {
- -moz-image-region: rect(5px, 8px, 8px, 3px);
+ list-style-image: var(--sort-descending-image);
}
.requests-menu-header-button > .button-box > .button-text,
-moz-box-flex: 1;
}
-.requests-menu-header-button[sorted]:not(:hover) {
+.requests-menu-header-button[sorted],
+.requests-menu-header-button[sorted]:hover {
background-color: var(--theme-selection-background);
color: var(--theme-selection-color);
}
outline: 1px solid var(--table-splitter-color);
}
-.requests-menu-file {
- text-align: start;
-}
-
.requests-menu-security-and-domain {
width: 14vw;
- min-width: 10em;
}
.requests-security-state-icon {
.requests-menu-transferred {
max-width: 8em;
text-align: center;
- width: 4vw;
+ width: 8vw;
}
/* Network requests table: status codes */
.requests-menu-status-icon[code="cached"] {
border: 2px solid var(--theme-content-color2);
- background-color: transparent;
+ background-color: transparent;
}
.requests-menu-status-icon[code^="1"] {
.requests-menu-timings-division {
width: 100px;
- padding-top: 1px;
+ padding-top: 2px;
padding-inline-start: 4px;
- border-inline-start: 1px dotted #000000;
- font-size: 90%;
+ font-size: 75%;
pointer-events: none;
box-sizing: border-box;
text-align: start;
}
.requests-menu-timings-division:not(:first-child) {
- border-inline-start: 1px dotted;
+ border-inline-start: 1px dashed;
margin-inline-start: -100px !important; /* Don't affect layout. */
}
-moz-padding-start: 0px;
-moz-padding-end: 4px;
/* Background created on a <canvas> in js. */
- /* @see browser/devtools/netmonitor/netmonitor-view.js */
+ /* @see devtools/client/netmonitor/netmonitor-view.js */
background-image: -moz-element(#waterfall-background);
background-repeat: repeat-y;
background-position: -1px center;
}
.requests-menu-timings-box.blocked {
- background-color: #FF0000; /* red */
+ background-color: var(--timing-blocked-color);
}
.requests-menu-timings-box.dns {
- background-color: #E7ADE7; /* pink */
+ background-color: var(--timing-dns-color);
}
.requests-menu-timings-box.connect {
- background-color: #FF9F00; /* orange */
+ background-color: var(--timing-connect-color);
}
.requests-menu-timings-box.send {
- background-color: #FFCF00; /* light blue */
+ background-color: var(--timing-send-color);
}
.requests-menu-timings-box.wait {
- background-color: #9C9CFF; /* blue grey */
+ background-color: var(--timing-wait-color);
}
.requests-menu-timings-box.receive {
- background-color: #A09090; /* green */
+ background-color: var(--timing-receive-color);
}
/* SideMenuWidget */
/* Network request details */
#details-pane-toggle {
- list-style-image: url("chrome://devtools/skin/images/debugger-collapse.png");
+ list-style-image: var(--theme-pane-collapse-image);
}
#details-pane-toggle[pane-collapsed] {
- list-style-image: url("chrome://devtools/skin/images/debugger-expand.png");
-}
-
-@media (min-resolution: 1.1dppx) {
- #details-pane-toggle {
- list-style-image: url("chrome://devtools/skin/images/debugger-collapse@2x.png");
- }
-
- #details-pane-toggle[pane-collapsed] {
- list-style-image: url("chrome://devtools/skin/images/debugger-expand@2x.png");
- }
+ list-style-image: var(--theme-pane-expand-image);
}
/* Network request details tabpanels */
}
#headers-summary-resend {
- margin: 0 6px;
-/* min-height: 20px;*/
+ margin-top: -10px;
+ -moz-margin-end: 6px;
}
#toggle-raw-headers {
#timings-tabpanel .requests-menu-timings-box {
transition: transform 0.2s ease-out;
- min-width: 1px;
border: none;
+ min-width: 1px;
}
#timings-tabpanel .requests-menu-timings-total {
width: 4.5em;
}
-/* Footer */
-
-#requests-menu-footer {
- padding-top: 3px;
- background-color: var(--theme-toolbar-background);
- border-top: 1px solid var(--table-splitter-color);
-}
-
-.requests-menu-footer-button,
-.requests-menu-footer-label {
- min-width: 1em;
- margin: 0;
- -moz-margin-end: 3px;
+/* Main toolbar */
+.requests-menu-filter-button {
+/* -moz-appearance: none;
+ background: rgba(128,128,128,0.1);
border: none;
- padding: 0px 1vw;
-/* color: var(--theme-body-color);*/
-}
-
-.requests-menu-footer-spacer {
- min-width: 2px;
+ border-radius: 2px;
+ min-width: 0;
+ padding: 0 5px;
+ margin: 2px;
+ color: var(--theme-body-color);*/
}
-.requests-menu-footer-spacer,
-.requests-menu-footer-button {
+.requests-menu-filter-button:hover {
+/* background: rgba(128,128,128,0.2);*/
}
-.requests-menu-footer-button {
-}
-
-.requests-menu-footer-button:hover:active {
-}
-
-.requests-menu-footer-button:not(:active)[checked] {
-}
-
-.requests-menu-footer-label {
- font-weight: 600;
-}
-
-#requests-menu-filter-freetext-text {
- transition-property: max-width, -moz-padding-end, -moz-padding-start;
- transition-duration: 250ms;
- transition-timing-function: ease;
-}
-
-#requests-menu-filter-freetext-text:not([focused]):not([filled]) > .textbox-input-box {
- overflow: hidden;
-}
-
-#requests-menu-filter-freetext-text:not([focused]):not([filled]) {
- max-width: 20px !important;
- -moz-padding-end: 5px;
- -moz-padding-start: 22px;
- background-position: 8px center, top left, top left;
-}
-
-#requests-menu-filter-freetext-text[focused],
-#requests-menu-filter-freetext-text[filled] {
- max-width: 200px !important;
+.requests-menu-filter-button:hover:active {
+/* background-color: var(--theme-selection-background-semitransparent);*/
}
/* Performance analysis buttons */
#requests-menu-network-summary-button {
+ background: none;
+ box-shadow: none;
+ border-color: transparent;
list-style-image: url("images/profiler-stopwatch.svg");
-moz-padding-end: 0;
cursor: pointer;
-}
-
-#requests-menu-network-summary-label {
- -moz-padding-start: 0;
- cursor: pointer;
-}
-
-#requests-menu-network-summary-label:hover {
- text-decoration: underline;
+ margin-inline-end: 1em;
+ min-width: 0;
}
/* Performance analysis view */
/* Make the toolbar invisible, it only hold the back button */
-moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
background-color: #000000;
+ border: none;
+ margin: 0;
+ padding: 0;
}
#network-statistics-back-button {
min-width: 4em;
min-height: 100vh;
+ margin: 0;
+ padding: 0;
+ border-radius: 0;
+ border-top: none;
+ border-bottom: none;
+ -moz-border-start: none;
}
#network-statistics-view-splitter {
+/* border-color: rgba(0,0,0,0.2);*/
cursor: default;
pointer-events: none;
}
#network-statistics-charts {
min-height: 1px;
+}
+
+#network-statistics-charts {
background-color: var(--theme-sidebar-background);
}
width: 7em;
}
-/* Platform overrides (copied in from the old platform specific files) */
-:root[platform="win"] .requests-menu-header-button > .button-box {
- padding: 0;
-}
-
-:root[platform="win"] .requests-menu-timings-division {
- padding-top: 1px;
- font-size: 90%;
-}
-
-:root[platform="linux"] #headers-summary-resend {
- padding: 4px;
-}
-
-:root[platform="linux"] #toggle-raw-headers {
- padding: 4px;
-}
-
/* Responsive sidebar */
@media (max-width: 700px) {
#requests-menu-toolbar {
- height: 24px;
+ height: 22px;
}
.requests-menu-header-button {
}
}
-/* === END netmonitor.inc.css === */
+/* Platform overrides (copied in from the old platform specific files) */
+:root[platform="win"] .requests-menu-header-button > .button-box {
+ padding: 0;
+}
+
+:root[platform="win"] .requests-menu-timings-division {
+ padding-top: 1px;
+ font-size: 90%;
+}
+
+:root[platform="linux"] #headers-summary-resend {
+ padding: 4px;
+}
+
+:root[platform="linux"] #toggle-raw-headers {
+ padding: 4px;
+}
+
+/* Responsive sidebar */
+@media (max-width: 700px) {
+ :root[platform="linux"] .requests-menu-header-button {
+ font-size: 85%;
+ }
+}
* 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/. */
- :root {
- color: #FF9F00;
-}
-
.view-project-detail {
overflow: auto;
}
-/* This Source Code Form is subject to the terms of the Mozilla Public\r
- * License, v. 2.0. If a copy of the MPL was not distributed with this\r
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */\r
-\r
-/* === EQUALS scratchpad.inc.css === */\r
-\r
-#scratchpad-sidebar > tabs {\r
- height: 0;\r
- border: none;\r
-}\r
-\r
-#sp-toolbar {\r
- border: none;\r
-}\r
+/* 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/. */
+
+#scratchpad-sidebar > tabs {
+ height: 0;
+ border: none;
+}
+
+#sp-toolbar {
+ border: none;
+}
* 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/. */
-/* === file identical to shadereditor.inc.css === */
-
window {
padding: 0;
}
.notice-container {
margin-top: -50vh;
- background-color: var(--theme-toolbar-background);
color: var(--theme-body-color);
}
min-width: 150px;
}
-#shaders-pane + .devtools-side-splitter {
- border-color: transparent;
+.program-item {
+ padding: 2px 0px;
}
.side-menu-widget-item-checkbox {
}
.side-menu-widget-item-checkbox .checkbox-check {
- background-image: url("itemToggle.png");
+ background-image: url("images/itemToggle.png");
background-color: transparent;
background-repeat: no-repeat;
background-clip: content-box;
@media (min-resolution: 1.1dppx) {
.side-menu-widget-item-checkbox .checkbox-check {
- background-image: url("itemToggle@2x.png");
+ background-image: url("images/itemToggle@2x.png");
}
}
.editor-label {
padding: 1px 12px;
+ border-top: 1px solid;
+}
+
+.editor-label {
background: var(--theme-contrastsidebar-background);
color: var(--theme-contrastsidebar-color);
}
background-image: none !important;
}
- .devtools-side-splitter {
- border-top-color: transparent !important;
- }
-
.editor-label {
-moz-box-ordinal-group: 0;
}
-
- .editor-label:not([selected]) {
- }
}
/* Small draggable area on inline-start to avoid overlaps on scrollbars.*/
--devtools-splitter-inline-start-width: 1px;
--devtools-splitter-inline-end-width: 4px;
-}
-:root[devtoolstheme="light"],
-:root[devtoolstheme="dark"],
-:root[devtoolstheme="firebug"] {
/* These variables are used in browser.xul but inside the toolbox they are overridden by --theme-splitter-color */
--devtools-splitter-color: #9C9CFF;
}
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
.theme-dark,
-.theme-light {
- --smw-margin: #9C9CFF;
- --smw-item-top-border: #A09090;
- --smw-item-bottom-border: #008484;
-}
-
-.splitview-nav-container {
- background-color: var(--theme-toolbar-background);
- color: var(--theme-body-color);
+.theme-light,
+.theme-firebug {
+ --sidemenu-selected-arrow: url(images/itemArrow-dark-ltr.svg);
+ --sidemenu-selected-arrow-rtl: url(images/itemArrow-dark-rtl.svg);
}
.splitview-nav-container .devtools-throbber {
}
.splitview-nav {
- -moz-appearance: none;
- list-style-image: none;
list-style: none;
padding: 0;
margin: 0;
- margin: 0;
- border-inline-end: var(--smw-margin);
-/* box-shadow: inset -1px 0 0 var(--smw-margin);*/
-}
-
-.splitview-nav:-moz-locale-dir(rtl) {
-/* box-shadow: inset 1px 0 0 var(--smw-margin);*/
+ background-color: var(--theme-sidebar-background);
}
.splitview-nav > li {
- /* To compensate for the top and bottom borders */
- margin-top: 0;
- margin-bottom: -1px;
- -moz-padding-end: 8px;
+ padding-inline-end: 8px;
-moz-box-align: center;
outline: 0;
vertical-align: bottom;
-/* color: white;
- background-clip: padding-box;*/
-
- border-top: 1px solid var(--smw-item-top-border);
- border-bottom: 1px solid var(--smw-item-bottom-border);
-}
-
-.splitview-nav > li:last-of-type {
-/* box-shadow: inset 0 -1px 0 var(--smw-item-top-border);*/
+ border-bottom: 1px solid rgba(160,144,144,0.15);
}
.placeholder {
}
.splitview-nav > li.splitview-active {
+ background-color: var(--theme-selection-background);
+ color: var(--theme-selection-color);
+ background-image: var(--sidemenu-selected-arrow);
background-repeat: no-repeat;
background-position: center right;
- background-size: auto;
- border-bottom: 1px solid var(--smw-item-bottom-border);
-
- background-image: url("itemArrow-ltr.svg");
}
.splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
- background-repeat: no-repeat;
+ background-image: var(--sidemenu-selected-arrow-rtl);
background-position: center left;
-
- background-image: url("itemArrow-rtl.svg");
}
/* Toolbars */
.splitview-main > toolbar,
.loading .splitview-nav-container {
- border-inline-end: 1px solid var(--smw-margin);
+ border-inline-end: 1px solid var(--theme-splitter-color);
}
.splitview-main > .devtools-toolbarbutton {
+ font-size: 11px;
+/* padding: 0 8px;*/
width: auto;
min-width: 48px;
min-height: 0;
}
#storage-tree .tree-widget-item[type="store"]:after {
- background-image: url("chrome://devtools/skin/filetype-store.svg");
+ background-image: url("chrome://devtools/skin/images/filetypes/store.svg");
background-size: 18px 18px;
background-position: -1px 0;
}
.stylesheet-enabled {
padding: 8px 0;
margin: 0 8px;
- background-image: url("itemToggle.png");
+ background-image: url("images/itemToggle.png");
background-repeat: no-repeat;
background-clip: content-box;
background-position: 0 8px;
@media (min-resolution: 1.1dppx) {
.stylesheet-enabled {
- background-image: url("itemToggle@2x.png");
+ background-image: url("images/itemToggle@2x.png");
}
}
/* CSS Variables specific to the devtools toolbar that aren't defined by the themes */
.theme-light,
-.theme-dark {
+.theme-dark,
+.theme-firebug {
+ --toolbar-tab-hover: #FFCF00;
+ --toolbar-tab-hover-active: #FF9F00;
--searchbox-background-color: #000000;
--searchbox-border-color: #9C9CFF;
--searcbox-no-match-background-color: #400000;
--searcbox-no-match-border-color: #FF0000;
+ --magnifying-glass-image: url(images/magnifying-glass-light.png);
+ --magnifying-glass-image-2x: url(images/magnifying-glass-light@2x.png);
+ --tool-options-image: url(images/tool-options.svg);
+ --close-button-image: url(chrome://devtools/skin/images/close.svg);
+ --icon-filter: invert(1);
+ --dock-bottom-image: url(chrome://devtools/skin/images/dock-bottom.svg);
+ --dock-side-image: url(chrome://devtools/skin/images/dock-side.svg);
+ --dock-undock-image: url(chrome://devtools/skin/images/dock-undock.svg);
+ --toolbar-button-border-color: #A09090;
/* Toolbox buttons */
--command-paintflashing-image: url(images/command-paintflashing.svg);
.devtools-menulist,
.devtools-toolbarbutton,
.devtools-button {
-/* transition: background 0.05s ease-in-out; */
}
.devtools-menulist,
}
.devtools-menulist:-moz-focusring,
-.devtools-toolbarbutton:-moz-focusring {
+.devtools-toolbarbutton:-moz-focusring,
+.devtools-button:-moz-focusring {
outline: 1px dotted var(--theme-selection-color);
}
.devtools-button {
margin: 0;
padding: 0;
- min-width: 32px;
+ min-width: 16px;
background: var(--theme-toolbar-background);
color: var(--theme-body-color);
/* The icon is absolutely positioned in the button using ::before */
background-color: var(--theme-button-background);
}
-.devtools-toolbarbutton[standalone] {
+.devtools-toolbarbutton[standalone], .devtools-toolbarbutton[data-standalone] {
}
+
.devtools-toolbarbutton[label][standalone] {
}
+.devtools-menulist,
+.devtools-toolbarbutton,
+.devtools-button {
+}
+
/* Icon button styles */
.devtools-toolbarbutton:not([label]),
.devtools-toolbarbutton[text-as-image] {
- min-width: 20px;
+ min-width: 16px;
}
#toolbox-buttons .devtools-toolbarbutton[text-as-image] {
min-width: inherit;
}
-#toolbox-buttons .devtools-toolbarbutton:not([text-as-image]):not(:hover):not([open=true]) {
-/* background: transparent; */
-}
#toolbox-buttons .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker {
padding: 0 2px;
}
filter: url(images/filters.svg#checked-icon-state);
}
+/* Icon-and-text buttons */
+.devtools-toolbarbutton.icon-and-text .toolbarbutton-text {
+ margin-inline-start: .5em !important;
+ font-weight: 600;
+}
+
/* Text-only buttons */
.devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
+.devtools-toolbarbutton[data-text-only],
#toolbox-buttons .devtools-toolbarbutton[text-as-image] {
/* background-color: rgba(0, 0, 0, .2); / Splitter */
}
color: var(--theme-selection-color); */
}
-.devtools-toolbarbutton[checked=true]:hover {
+:root {
+ --clear-icon-url: url("chrome://devtools/skin/images/clear.svg");
}
-.devtools-option-toolbarbutton {
- list-style-image: url("chrome://devtools/skin/images/tool-options-tbutton.svg");
+.devtools-button.devtools-clear-icon::before {
+ background-image: var(--clear-icon-url);
}
-/* Toolbar button groups */
-.devtools-toolbarbutton-group > .devtools-toolbarbutton {
+.devtools-toolbarbutton.devtools-clear-icon {
+ list-style-image: var(--clear-icon-url);
+}
+
+.devtools-option-toolbarbutton {
+ list-style-image: var(--tool-options-image);
}
.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child {
.devtools-separator + .devtools-toolbarbutton {
}
-:root {
- --clear-icon-url: url("chrome://devtools/skin/images/clear.svg");
-}
-
-.devtools-button.devtools-clear-icon::before {
- background-image: var(--clear-icon-url);
-}
-
-.devtools-toolbarbutton.devtools-clear-icon {
- list-style-image: var(--clear-icon-url);
-}
-
/* Text input */
.devtools-textinput,
.devtools-searchinput {
/* -moz-appearance: none;
- margin: 0 3px;
- border: 1px solid rgb(88, 94, 101);
+ margin: 1 3px;
+ border: 1px solid;
border-radius: 2px;
- background-color: rgba(24, 29, 32, 1);
padding: 4px 6px;
- color: rgba(184, 200, 217, 1);*/
+ border-color: var(--theme-splitter-color);*/
}
:root[platform="mac"] .devtools-textinput,
/* border-radius: 20px;*/
}
-
.devtools-searchinput {
/* margin-top: 1px;
margin-bottom: 1px;
padding: 0;*/
-moz-padding-start: 22px;
-moz-padding-end: 4px;
+ background-image: var(--magnifying-glass-image);
background-position: 8px center;
background-size: 11px 11px;
background-repeat: no-repeat;
font-size: inherit;
-
- background-image: url("images/magnifying-glass.png");
}
.devtools-searchinput:-moz-locale-dir(rtl),
position: relative;
}
+/* The spacing is accomplished with a padding on the searchbox */
+.devtools-searchbox > .devtools-textinput,
+.devtools-searchbox > .devtools-searchinput {
+}
+
+/* Don't add 'double spacing' for inputs that are at beginning / end
+ of a toolbar (since the toolbar has it's own spacing). */
+.devtools-toolbar > .devtools-textinput:first-child,
+.devtools-toolbar > .devtools-searchinput:first-child {
+}
+.devtools-toolbar > .devtools-textinput:last-child,
+.devtools-toolbar > .devtools-searchinput:last-child {
+}
+.devtools-toolbar > .devtools-searchbox:first-child {
+}
+.devtools-toolbar > .devtools-searchbox:last-child {
+}
+
.devtools-rule-searchbox {
-moz-box-flex: 1;
width: 100%;
}
.devtools-searchinput-clear {
- background-image: url("chrome://devtools/skin/search-clear.svg");
+ background-image: url("chrome://devtools/skin/images/search-clear.svg");
}
.devtools-style-searchbox-no-match + .devtools-searchinput-clear {
- background-image: url("chrome://devtools/skin/search-clear-failed.svg") !important;
+ background-image: url("chrome://devtools/skin/images/search-clear-failed.svg") !important;
}
.devtools-searchinput-clear:hover {
}
.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
- list-style-image: url("chrome://devtools/skin/search-clear.svg");
+ list-style-image: url("chrome://devtools/skin/images/search-clear.svg");
-moz-image-region: rect(0, 16px, 16px, 0);
}
+.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
+}
+
.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover {
-moz-image-region: rect(0, 32px, 16px, 16px);
}
@media (min-resolution: 1.1dppx) {
.devtools-searchinput {
- background-image: url("images/magnifying-glass@2x.png");
+ background-image: var(--magnifying-glass-image-2x);
}
}
width: 16px;
}
+#toolbox-close::before,
.devtools-closebutton > image {
width: 16px;
height: 16px;
-moz-appearance: none;
- background-size: 32px 16px;
- background-image: url("chrome://devtools/skin/close@2x.png");
- background-position: 0 center;
+ background-size: cover;
+ background-image: var(--close-button-image);
+ background-position: center center;
background-repeat: no-repeat;
}
-.devtools-closebutton:hover > image,
-.devtools-closebutton:hover:active > image {
- background-position: -16px center;
+.devtools-closebutton > .toolbarbutton-icon {
+ /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must
+ use evil CSS to give the impression of smaller content */
}
.devtools-closebutton > .toolbarbutton-text {
display: none;
}
-#toolbox-close::before {
- background-image: url("chrome://devtools/skin/close@2x.png");
-}
-
/* In-tools sidebar */
.devtools-sidebar-tabs {
}
.devtools-sidebar-alltabs {
-/* height: 24px;
+/* -moz-appearance: none;
+ height: 24px;
line-height: 24px;
padding: 0 4px;
margin: 0;
.devtools-sidebar-tabs tabs > tab:hover:active {
}
-.devtools-sidebar-tabs tabs > tab[selected] + tab:hover {
-}
-
-.devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active {
-}
-
.devtools-sidebar-tabs tabs > tab[selected],
.devtools-sidebar-tabs tabs > tab[selected]:hover:active {
}
#toolbox-controls > toolbarbutton,
#toolbox-dock-buttons > toolbarbutton {
+ -moz-user-focus: normal;
min-width: 16px;
-/* padding: 1px 3px; */
+ width: 16px;
}
#toolbox-dock-buttons > toolbarbutton > image {
width: 16px;
height: 16px;
- background-size: 32px 16px;
+ background-size: 16px 16px;
background-position: 0 center;
background-repeat: no-repeat;
}
-#toolbox-dock-buttons > toolbarbutton:hover > image {
- background-position: -16px center;
-}
-
#toolbox-dock-bottom::before,
#toolbox-dock-bottom > image {
- background-image: url("chrome://devtools/skin/dock-bottom@2x.png");
+ background-image: var(--dock-bottom-image);
}
#toolbox-dock-side::before,
#toolbox-dock-side > image {
- background-image: url("chrome://devtools/skin/dock-side@2x.png");
+ background-image: var(--dock-side-image);
}
#toolbox-dock-window::before,
#toolbox-dock-window > image {
- background-image: url("chrome://devtools/skin/undock@2x.png");
+ background-image: var(--dock-undock-image);
}
#toolbox-dock-bottom-minimize {
}
#toolbox-dock-bottom-minimize > image {
- background-image: url("chrome://devtools/skin/dock-bottom-minimize@2x.png");
+ background-image: url("chrome://devtools/skin/images/dock-bottom-minimize@2x.png");
}
#toolbox-dock-bottom-minimize.minimized > image {
- background-image: url("chrome://devtools/skin/dock-bottom-maximize@2x.png");
+ background-image: url("chrome://devtools/skin/images/dock-bottom-maximize@2x.png");
}
#toolbox-dock-window,
/* Command buttons */
+.toolbox-dock-button,
.command-button {
-moz-appearance: none;
border: none;
filter: url(images/filters.svg#checked-icon-state);
}
+/* Toolbox buttons images */
+
#command-button-paintflashing > image,
#command-button-paintflashing::before {
background-image: var(--command-paintflashing-image);
background-image: var(--command-pick-image);
}
+#command-button-frames > image,
+#command-button-frames::before {
+ background-image: var(--command-frames-image);
+}
+
#command-button-splitconsole > image,
#command-button-splitconsole::before {
background-image: var(--command-splitconsole-image);
background-image: var(--command-measure-image);
}
-#command-button-frames > image,
-#command-button-frames::before {
- background-image: var(--command-frames-image);
-}
-
/* Tabs */
.devtools-tabbar {
visibility: collapse;
}
-#toolbox-deck[selectedIndex] > .toolbox-panel, /* workaround for Firefox 47 and older */
.toolbox-panel[selected] {
visibility: visible;
}
.devtools-tab {
min-width: 32px;
- max-width: 110px;
+ max-width: 100px;
color: #000000;
margin: 0;
-moz-margin-end: 3px;
}
.devtools-tab > image {
- -moz-margin-end: 0px;
-/* -moz-margin-start: 4px; */
+ margin: 0;
+/* margin-inline-start: 4px; */
max-height: 16px;
width: 16px; /* Prevents collapse during theme switching */
}
+.devtools-tab > label {
+ white-space: nowrap;
+/* margin: 0 4px;*/
+}
+
.devtools-tab:hover > image {
}
/* -moz-border-end: 1px solid var(--theme-splitter-color);
border-color: var(--theme-splitter-color); / Needed for responsive container at low width. */
}
+
+.devtools-invisible-splitter {
+ border-color: transparent;
+ background-color: transparent;
+}
+
/* Throbbers */
.devtools-throbber::before {
--theme-body-color: #FF9F00;
--theme-body-color-alt: #A09090;
+ --theme-body-color-inactive: #8050B0;
--theme-content-color1: #FF9F00;
--theme-content-color2: #A09090;
--theme-content-color3: #FF9F00;
--theme-content-color4: #9C9CFF;
- --theme-content-disabled: #8050B0;
--theme-text-blue: #3333FF;
--theme-highlight-green: #008484;
--theme-graphs-yellow: #FFCF00;
--theme-graphs-red: #FF0000;
--theme-graphs-grey: #A09090;
+ --theme-graphs-full-red: #FF0000;
+ --theme-graphs-full-blue: #0000FF;
/* Images */
--theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
/* Reload and waiting notices */
.notice-container {
margin-top: -50vh;
-}
-
-.notice-container {
- background-color: var(--theme-toolbar-background);
color: var(--theme-body-color-alt);
}
stroke-width: 1px;
fill: none;
- stroke: #A09090; /* Grey foreground text */
+ stroke: var(--theme-body-color-alt);
}
/* AudioParam connection edges */
}
.edgePath.param-connection path {
- stroke: #A09090; /* Grey foreground text */
+ stroke: var(--theme-body-color-alt);
}
/* Labels in AudioParam connection should have background that match
fill: var(--theme-body-background);
}
g.edgeLabel tspan {
- fill: var(--theme-highlight-color-blue);
+ fill: var(--theme-body-color-alt);
}
/* Audio Nodes */
.nodes rect {
stroke-width: 1px;
cursor: pointer;
-}
-.nodes rect {
stroke: var(--theme-splitter-color);
fill: var(--theme-toolbar-background);
}
*/
.theme-light .nodes g.bypassed rect {
- fill: url(chrome://devtools/skin/filters.svg#bypass-light);
+ fill: url(chrome://devtools/skin/images/filters.svg#bypass-light);
}
.theme-dark .nodes g.bypassed rect {
- fill: url(chrome://devtools/skin/filters.svg#bypass-dark);
+ fill: url(chrome://devtools/skin/images/filters.svg#bypass-dark);
}
.nodes g.bypassed.selected rect {
stroke: var(--theme-selection-background);
text {
fill: var(--theme-body-color-alt);
}
-g.selected text {
-/* fill: var(--theme-toolbar-background); */
-}
.nodes text {
cursor: pointer;
background: none;
box-shadow: none;
border: none;
- list-style-image: url("images/debugger-collapse.png");
- -moz-image-region: rect(0px,16px,16px,0px);
+ list-style-image: var(--theme-pane-collapse-image);
}
#inspector-pane-toggle > .toolbarbutton-icon {
}
#inspector-pane-toggle[pane-collapsed] {
- list-style-image: url("images/debugger-expand.png");
-}
-
-#inspector-pane-toggle:active {
- -moz-image-region: rect(0px,32px,16px,16px);
+ list-style-image: var(--theme-pane-expand-image);
}
/**
}
@media (min-resolution: 1.1dppx) {
- #inspector-pane-toggle {
- list-style-image: url("images/debugger-collapse@2x.png");
- -moz-image-region: rect(0px,32px,32px,0px);
- }
-
- #inspector-pane-toggle[pane-collapsed] {
- list-style-image: url("images/debugger-expand@2x.png");
- }
-
- #inspector-pane-toggle:active {
- -moz-image-region: rect(0px,64px,32px,32px);
- }
-
.web-audio-inspector .error {
background-image: url("images/alerticon-warning@2x.png");
}
margin-right: 0px !important;
}
}
-
-#inspector-pane-toggle {
- background: none;
- box-shadow: none;
- border: none;
- list-style-image: url("images/debugger-collapse.png");
- -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#inspector-pane-toggle[pane-collapsed] {
- list-style-image: url("images/debugger-expand.png");
-}
-
-#inspector-pane-toggle:active {
- -moz-image-region: rect(0px,32px,16px,16px);
-}
* 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/. */
-/* === BEGIN widgets.inc.css === */
-
.theme-dark,
.theme-light {
--table-splitter-color: #A09090;
--table-zebra-background: rgba(255,159,0,0.1);
- --smw-margin: #9C9CFF;
- --smw-item-top-border: #A09090;
- --smw-item-bottom-border: #008484;
+ --sidemenu-separator-color: rgba(160,144,144,0.15);
+ --sidemenu-selected-arrow: url(images/itemArrow-dark-ltr.svg);
+ --sidemenu-selected-arrow-rtl: url(images/itemArrow-dark-rtl.svg);
+ --delete-icon: url(chrome://devtools/skin/images/vview-delete.png);
+ --delete-icon-2x: url(chrome://devtools/skin/images/vview-delete@2x.png);
}
/* Generic pane helpers */
-.generic-toggled-side-pane {
- -moz-margin-start: 0px !important;
+.generic-toggled-pane {
+ -moz-margin-start: 0 !important;
/* Unfortunately, transitions don't work properly with locale-aware properties,
so both the left and right margins are set via js, while the start margin
is always overridden here. */
}
-.generic-toggled-side-pane[animated] {
+.generic-toggled-pane[animated] {
transition: margin 0.25s ease-in-out;
}
position: relative;
}
+@media (min-width: 701px) {
+ .devtools-responsive-container .generic-toggled-pane {
+ /* To hide generic-toggled-pane, negative margins are applied dynamically.
+ * In the default horizontal layout, the pane is on the side and should be
+ * hidden using negative -moz-margin-end only.
+ */
+ margin-top: 0 !important;
+ margin-bottom: 0 !important;
+ }
+}
@media (max-width: 700px) {
.devtools-responsive-container {
-moz-box-orient: vertical;
.devtools-responsive-container > .devtools-side-splitter {
/* This is a normally vertical splitter, but we have turned it horizontal
due to the smaller resolution */
- border: 0;
- margin: 0;
- min-height: 3px;
- height: 3px;
- margin-top: -3px;
+ min-height: calc(var(--devtools-splitter-top-width) +
+ var(--devtools-splitter-bottom-width) + 1px);
+ border-top-width: var(--devtools-splitter-top-width);
+ border-bottom-width: var(--devtools-splitter-bottom-width);
+ margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px);
+ margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width));
/* Reset the vertical splitter styles */
width: auto;
min-width: 0;
+ border-inline-end-width: 0;
+ border-inline-start-width: 0;
+ margin-inline-end: 0;
+ margin-inline-start: 0;
/* In some edge case the cursor is not changed to n-resize */
cursor: n-resize;
}
- .devtools-responsive-container > .devtools-sidebar-tabs {
+ .devtools-responsive-container > .devtools-sidebar-tabs:not([pane-collapsed]) {
+ /* When the panel is collapsed min/max height should not be applied because
+ collapsing relies on negative margins, which implies constant height. */
min-height: 35vh;
max-height: 75vh;
}
+
+ .devtools-responsive-container .generic-toggled-pane {
+ /* To hide generic-toggled-pane, negative margins are applied dynamically.
+ * If a vertical layout, the pane is on the bottom and should be hidden
+ * using negative bottom margin only.
+ */
+ -moz-margin-end: 0 !important;
+ }
}
/* BreacrumbsWidget */
.breadcrumbs-widget-container {
- -moz-margin-start: 2px;
-moz-margin-start: 2px;
max-height: 24px; /* Set max-height for proper sizing on linux */
height: 24px; /* Set height to prevent starting small waiting for content */
.scrollbutton-up > .toolbarbutton-icon,
.scrollbutton-down > .toolbarbutton-icon {
- /* margin: 0 5px; */
+ /* margin: 0 8px; */
}
.scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
* we can handle RTL support with a CSS transform).
*/
#breadcrumb-separator-normal {
- background: url("breadcrumbs-divider@2x.png") no-repeat center right;
+ background: url("images/breadcrumbs-divider@2x.png") no-repeat center right;
background-size: 12px 24px;
}
}
.breadcrumbs-widget-item:not([checked]) {
- background-image: -moz-element(#breadcrumb-separator-normal);
- background-repeat: no-repeat;
- background-position: center left;
+ background: -moz-element(#breadcrumb-separator-normal) no-repeat center left;
}
.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
- background-image: -moz-element(#breadcrumb-separator-after);
- background-repeat: no-repeat;
- background-position: 0 0;
+ background: -moz-element(#breadcrumb-separator-after) no-repeat 0 0;
}
.breadcrumbs-widget-item[checked] {
- background-image: -moz-element(#breadcrumb-separator-before);
- background-repeat: no-repeat;
- background-position: 0 0;
+ background: -moz-element(#breadcrumb-separator-before) no-repeat 0 0;
background-color: #008484; /* Select Highlight Blue */
}
color: var(--theme-highlight-lightorange);
}
-.breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-id,
-.breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-tag,
-.breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-pseudo-classes,
-.breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-classes {
- color: var(--theme-hover-color) !important;
-}
-
.breadcrumbs-widget-item {
color: var(--theme-highlight-lightorange);
}
+.breadcrumbs-widget-item:not([checked]):hover label {
+ color: var(--theme-hover-color) !important;
+}
+
.breadcrumbs-widget-item-id {
color: var(--theme-body-color-alt);
}
.simple-list-widget-perma-text,
.simple-list-widget-empty-text {
- color: var(--theme-body-color-alt);
padding: 4px 8px;
}
+.simple-list-widget-perma-text,
+.simple-list-widget-empty-text {
+ color: var(--theme-body-color-alt);
+}
+
/* FastListWidget */
.fast-list-widget-container {
transform: translateZ(1px);
}
-/* dark/light theme */
.fast-list-widget-empty-text {
- padding: 12px;
- font-weight: 600;
+ padding: 4px 8px;
+}
+
+.fast-list-widget-empty-text {
color: var(--theme-body-color-alt);
}
/* SideMenuWidget */
-/* SideMenuWidget container */
-
-.side-menu-widget-container:-moz-locale-dir(ltr),
-.side-menu-widget-empty-text:-moz-locale-dir(ltr) {
-}
-
-.side-menu-widget-container:-moz-locale-dir(rtl),
-.side-menu-widget-empty-text:-moz-locale-dir(rtl)[with-arrows=true]:-moz-locale-dir(rtl) {
+.side-menu-widget-container {
+ /* Hack: force hardware acceleration */
+ transform: translateZ(1px);
}
-.side-menu-widget-group {
- /* To allow visibility of the dark margin shadow. */
-/* -moz-margin-end: 1px; */
-}
+/* SideMenuWidget container */
.side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
/* To compensate for the arrow image's dark margin. */
-/* -moz-margin-end: -1px; */
+/* margin-inline-end: -1px;*/
}
/* SideMenuWidget groups */
.side-menu-widget-group-title {
padding: 4px;
- background-color: var(--theme-contrastsidebar-background);
- color: var(--theme-contrastsidebar-color);
+ font-weight: 600;
+ border-bottom: 1px solid var(--sidemenu-separator-color);
}
-/* SideMenuWidget items */
-
-.side-menu-widget-item {
- border-top: 1px solid var(--smw-item-top-border);
-/* border-bottom: 1px solid var(--smw-item-bottom-border);*/
+.side-menu-widget-group-title + .side-menu-widget-group-list .side-menu-widget-item-contents {
+ padding-inline-start: 20px;
}
-.side-menu-widget-item:last-of-type {
-/* box-shadow: inset 0 -1px 0 var(--smw-item-top-border);*/
- border-bottom: 1px solid var(--smw-item-top-border);
-}
+/* SideMenuWidget items */
.side-menu-widget-item {
- /* To compensate for the top and bottom borders */
- margin-top: -1px;
- margin-bottom: -1px;
+ border-bottom: 1px solid var(--sidemenu-separator-color);
background-clip: padding-box;
}
.side-menu-widget-item-arrow {
-moz-margin-start: -7px;
width: 7px; /* The image's width is 7 pixels */
- /* Cover the border of the side-menu-widget-item */
- margin-top: -1px;
- margin-bottom: -1px;
}
.side-menu-widget-item.selected > .side-menu-widget-item-arrow {
- background-size: auto, 1px 100%;
+ background-image: var(--sidemenu-selected-arrow);
+ background-size: auto;
background-repeat: no-repeat;
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
background-position: center right;
}
.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
+ background-image: var(--sidemenu-selected-arrow-rtl);
background-position: center left;
}
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
- background-image: url("itemArrow-ltr.svg");
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
- background-image: url("itemArrow-rtl.svg");
-}
-
/* SideMenuWidget items contents */
.side-menu-widget-item-contents {
padding: 4px;
/* To avoid having content overlapping the arrow image. */
- -moz-padding-end: 8px;
+ padding-inline-end: 8px;
}
.side-menu-widget-item-other {
/* To avoid having content overlapping the arrow image. */
- -moz-padding-end: 8px;
+ padding-inline-end: 8px;
/* To compensate for the .side-menu-widget-item-contents padding. */
- -moz-margin-start: -4px;
- -moz-margin-end: -8px;
+ margin-inline-start: -4px;
+ margin-inline-end: -8px;
color: var(--theme-selection-color);
}
-.side-menu-widget-item-other.selected {
+.side-menu-widget-group-title + .side-menu-widget-group-list .side-menu-widget-item-other {
+ /* To compensate for the .side-menu-widget-item-contents padding. */
+ margin-inline-start: -20px;
+}
+
+.side-menu-widget-item.selected .side-menu-widget-item-other:not(.selected) {
+ background-color: var(--theme-sidebar-background);
+ box-shadow: inset 2px 0 0 var(--theme-selection-background);
+ color: var(--theme-body-color);
+}
+
+.side-menu-widget-item.selected .side-menu-widget-item-other.selected {
background-color: var(--theme-selection-background);
color: var(--theme-selection-color);
}
/* SideMenuWidget misc */
-.theme-dark .side-menu-widget-container,
-.theme-dark .side-menu-widget-empty-text {
- background-color: var(--theme-toolbar-background);
-}
-
.side-menu-widget-empty-text {
- padding: 12px;
+ padding: 4px 8px;
+ background-color: var(--theme-sidebar-background);
}
/* VariablesView */
-.variables-view-container:not([empty]) {
+.variables-view-container {
/* Hack: force hardware acceleration */
transform: translateZ(1px);
}
.variables-view-empty-notice {
- color: var(--theme-body-color-alt);
padding: 2px;
}
+.variables-view-empty-notice {
+ color: var(--theme-body-color-alt);
+}
+
.variables-view-scope:focus > .title,
.theme-dark .variable-or-property:focus > .title {
background-color: var(--theme-selection-background);
background-size: cover;
width: 16px;
height: 16px;
- opacity: 0.5;
}
@media (min-resolution: 1.1dppx) {
- .variable-or-property-non-writable-icon > .title:after {
+ .variable-or-property-non-writable-icon {
background-image: url("chrome://devtools/skin/images/vview-lock@2x.png");
}
}
.variable-or-property[non-enumerable] > tooltip > label.enumerable,
.variable-or-property[non-configurable] > tooltip > label.configurable,
-.variable-or-property[non-writable] > tooltip > label.writable
+.variable-or-property[non-writable] > tooltip > label.writable,
.variable-or-property[non-extensible] > tooltip > label.extensible {
color: #A09090;
text-decoration: line-through;
}
.variables-view-delete {
- background-image: url("chrome://devtools/skin/images/vview-delete.png");
+ background-image: var(--delete-icon);
}
@media (min-resolution: 1.1dppx) {
.variables-view-delete {
- background-image: url("chrome://devtools/skin/images/vview-delete@2x.png");
+ background-image: var(--delete-icon-2x);
}
}
background-image: url("chrome://devtools/skin/images/vview-open-inspector.png");
}
+@media (min-resolution: 1.1dppx) {
+ .variables-view-open-inspector {
+ background-image: url("chrome://devtools/skin/images/vview-open-inspector@2x.png");
+ }
+}
+
/* Variables and properties input boxes */
.variable-or-property > .title > .separator + .element-value-input {
.bar-graph-widget-legend-item {
float: left;
- -moz-margin-end: 8px;
+ -moz-margin-end: 8px;
}
.bar-graph-widget-legend-item > [view="color"],
border: 1px solid #9C9CFF;
border-radius: 1px;
-moz-margin-end: 4px;
- pointer-events: none;
+ pointer-events: all;
+ cursor: pointer;
}
.bar-graph-widget-legend-item > [view="label"] {
overflow: auto;
}
-table-widget-body,
+.table-widget-body,
.table-widget-empty-text {
background-color: var(--theme-body-background);
}
color: inherit;
text-align: center;
font-weight: inherit !important;
- border-bottom-width: 0 !important;
- border-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%) 1 1;
+ border-image: linear-gradient(transparent 15%,
+ var(--theme-splitter-color) 15%,
+ var(--theme-splitter-color) 85%,
+ transparent 85%,
+ transparent calc(100% - 1px),
+ var(--theme-splitter-color) calc(100% - 1px)) 1 1;
background-repeat: no-repeat;
}
-table-widget-column-header:not([sorted]):hover {
+.table-widget-column-header:not([sorted]):hover {
/* background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1));*/
}
background-image: url("chrome://devtools/skin/images/sort-arrows.svg#descending");
}
+.table-widget-column[readonly] {
+ background-color: #402800;
+}
+
+.table-widget-body .devtools-side-splitter:last-of-type {
+ display: none;
+}
+
/* Cells */
.table-widget-cell {
color: var(--theme-body-color);
}
+.table-widget-cell[hidden] {
+ display: none;
+}
+
.table-widget-column-header + .table-widget-cell {
border-top: 1px solid var(--theme-splitter-color);
}
border-bottom: 1px solid var(--table-splitter-color);
}
-:root:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
-.table-widget-cell:not(.theme-selected)[odd] {
- background: var(--table-zebra-background);
+.table-widget-cell.even:not(.theme-selected) {
+ background-color: var(--table-zebra-background);
}
:root:not(.no-animate) .table-widget-cell.flash-out {
float: left;
margin: 3px 2px -3px;
background-repeat: no-repeat;
- background-image: url("chrome://devtools/skin/controls.png");
+ background-image: url("chrome://devtools/skin/images/controls.png");
background-size: 56px 28px;
cursor: pointer;
background-position: -28px -14px;
@media (min-resolution: 1.1dppx) {
.tree-widget-item:before {
- background-image: url("chrome://devtools/skin/controls@2x.png");
+ background-image: url("chrome://devtools/skin/images/controls@2x.png");
}
}
}
.tree-widget-item[type="dir"]::after {
- background-image: url("chrome://devtools/skin/filetype-dir-close.svg");
+ background-image: url("chrome://devtools/skin/images/filetypes/dir-close.svg");
background-position: 2px 0;
background-size: auto 16px;
width: 20px;
}
.tree-widget-item[type="dir"][expanded]:not([empty])::after {
- background-image: url("chrome://devtools/skin/filetype-dir-open.svg");
+ background-image: url("chrome://devtools/skin/images/filetypes/dir-open.svg");
}
.tree-widget-item[type="url"]::after {
- background-image: url("chrome://devtools/skin/filetype-globe.svg");
+ background-image: url("chrome://devtools/skin/images/filetypes/globe.svg");
background-size: auto 18px;
width: 18px;
}
-
-/* === BEGIN manifest-editor.inc.css === */
-
-/* Manifest Editor overrides */
-
-.variables-view-container.manifest-editor {
- background-color: #000000;
- padding: 20px 2px;
-}
-
-.manifest-editor .variable-or-property:focus > .title {
-/* background-color: #EDEDED;
- color: #000; */
- border-radius: 4px;
-}
-
-.manifest-editor .variables-view-property > .title > .name {
-/* color: #27406A; */
-}
-
-.manifest-editor .variable-or-property > .title > label,
-.manifest-editor textbox {
- font-family: monospace;
-}
-
-.manifest-editor .variable-or-property > .title > .token-string {
-/* color: #54BC6A; */
- font-weight: bold;
-}
-
-.manifest-editor .variable-or-property > .title > .token-boolean,
-.manifest-editor .variable-or-property > .title > .token-number {
-/* color: #009BD4; */
- font-weight: bold;
-}
-
-.manifest-editor .variable-or-property > .title > .token-undefined {
-/* color: #bbb; */
-}
-
-.manifest-editor .variable-or-property > .title > .token-null {
-/* color: #999; */
-}
-
-.manifest-editor .variable-or-property > .title > .token-other {
-/* color: #333; */
-}
-
-.manifest-editor .variables-view-variable {
- border-bottom: none;
-}
-
-.manifest-editor .variables-view-delete,
-.manifest-editor .variables-view-delete:hover,
-.manifest-editor .variables-view-delete:active,
-.manifest-editor .variable-or-property:focus .variables-view-delete,
-.manifest-editor .variables-view-add-property,
-.manifest-editor .variables-view-add-property:hover,
-.manifest-editor .variables-view-add-property:active,
-.manifest-editor .variable-or-property:focus .variables-view-add-property {
- list-style-image: none;
- -moz-image-region: initial;
-}
-
-.manifest-editor .variables-view-delete::before,
-.manifest-editor .variables-view-add-property::before {
- width: 11px;
- height: 11px;
- content: "";
- display: inline-block;
- background-size: 11px auto;
-}
-
-.manifest-editor .variables-view-delete::before {
- background-image: url("app-manager/remove.svg");
- background-size: 12px auto;
-}
-
-.manifest-editor .variables-view-add-property::before {
- background-image: url("app-manager/add.svg");
- -moz-margin-end: 2px;
-}
-
-/* === END manifest-editor.inc.css === */
-
-/* === END widgets.inc.css === */
projects / themes.git / commitdiff
