color: #FF9F00;
}
+ #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
+ /*color: inherit;*/
+ }
+
#TabsToolbar:-moz-lwtheme {
/*background: linear-gradient(to top, @toolbarShadowColor@ 2px, transparent 2px);*/
}
margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
}
+.devtools-tooltip-variables-view-box .variable-or-property > .title {
+ -moz-padding-end: 6px;
+}
+
/* Tooltip: Tiles */
.devtools-tooltip-tiles {
}
.computedview-colorswatch {
- display: inline-block;
border-radius: 50%;
width: 1em;
height: 1em;
vertical-align: text-top;
-moz-margin-end: 5px;
+ display: inline-block;
+}
+
+.computedview-colorswatch::before {
+ content: '';
+ background-color: #9C9CFF;
+ background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
+ linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
+ background-size: 12px 12px;
+ background-position: 0 0, 6px 6px;
+ position: absolute;
+ border-radius: 50%;
+ width: 1em;
+ height: 1em;
+ z-index: -1;
}
}
.ruleview-colorswatch,
-.computedview-colorswatch,
-.markupview-colorswatch {
-/* box-shadow: 0 0 0 1px rgba(0,0,0,0.5); */
+.computedview-colorswatch {
+/* box-shadow: 0 0 0 1px #818181; */
}
.variables-view-scope:focus > .title,
list-style-image: url("debugger-blackbox.png");
}
+@media (min-resolution: 2dppx) {
+ #black-box {
+ list-style-image: url(debugger-blackbox@2x.png);
+ }
+}
+
#pretty-print {
font-weight: bold;
}
list-style-image: url("debugger-toggleBreakpoints.png");
}
+@media (min-resolution: 2dppx) {
+ #toggle-breakpoints {
+ list-style-image: url(debugger-toggleBreakpoints@2x.png);
+ }
+}
+
#sources-toolbar .devtools-toolbarbutton:not([label]) {
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
-moz-image-region: rect(16px, 32px, 32px, 16px);
}
+@media (min-resolution: 2dppx) {
+ #sources-toolbar .devtools-toolbarbutton:not([label]) {
+ -moz-image-region: rect(0px,32px,32px,0px);
+ }
+
+ #sources-toolbar .devtools-toolbarbutton:not([label]):hover {
+ -moz-image-region: rect(32px,32px,64px,0px);
+ }
+
+ #sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
+ -moz-image-region: rect(0px,64px,32px,32px);
+ }
+
+ #sources-toolbar .devtools-toolbarbutton:not([label])[checked]:hover {
+ -moz-image-region: rect(32px,64px,64px,32px);
+ }
+}
+
#sources .black-boxed {
color: #8050B0;
}
-moz-image-region: rect(0px,32px,16px,16px);
}
+@media (min-resolution: 2dppx) {
+ #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;
}
.dbg-expression-arrow {
+ background-image: url("commandline-icon.png");
+ background-position: 16px;
+ background-repeat: no-repeat;
+ background-size: 32px 16px;
width: 16px;
- height: auto;
+ height: 16px;
margin: 2px;
- background: -moz-image-rect(url("commandline-icon.png"), 0, 32, 16, 16);
+}
+
+@media (min-resolution: 2dppx) {
+ .dbg-expression-arrow {
+ background-image: url(commandline-icon@2x.png);
+ }
}
.dbg-expression-input {
.dbg-expression-button {
border: none;
background: none;
- cursor: pointer;
text-decoration: underline;
-}
+ cursor: pointer;
-.dbg-expression-button {
color: #9C9CFF; /* Blue highlight color */
}
/* Toolbar controls */
.devtools-sidebar-tabs > tabs > tab {
-/* min-height: 25px !important;
+/* min-height: 24px !important;
padding: 0 !important; */
}
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
+#debugger-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
+#sources-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon {
+ width: 16px;
+ height: 16px;
+}
+
#resume {
list-style-image: url("chrome://browser/skin/devtools/debugger-pause.png");
-moz-image-region: rect(0px, 16px, 16px, 0px);
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
+@media (min-resolution: 2dppx) {
+ #resume {
+ list-style-image: url(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] {
+ list-style-image: url(debugger-play@2x.png);
+ -moz-image-region: rect(0px, 32px, 32px, 0);
+ }
+
+ #resume[checked=true]:hover {
+ -moz-image-region: rect(0px, 64px, 32px, 32px);
+ }
+}
+
#resume ~ toolbarbutton {
/* transition: opacity 0.15s ease-in-out; */
}
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
+@media (min-resolution: 2dppx) {
+ #step-over {
+ list-style-image: url(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(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(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 {
/* background: none;
box-shadow: none;
list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
}
-#instruments-pane-toggle:hover,
-#instruments-pane-toggle:hover:active {
+#instruments-pane-toggle:hover {
-moz-image-region: rect(0px,32px,16px,16px);
}
+@media (min-resolution: 2dppx) {
+ #instruments-pane-toggle {
+ list-style-image: url(debugger-collapse@2x.png);
+ -moz-image-region: rect(0px,32px,32px,0px);
+ }
+
+ #instruments-pane-toggle[pane-collapsed] {
+ list-style-image: url(debugger-expand@2x.png);
+ }
+
+ #instruments-pane-toggle:hover {
+ -moz-image-region: rect(0px,64px,32px,32px);
+ }
+}
+
/* Horizontal vs. vertical layout */
#vertical-layout-panes-container {
min-width: 30px;
min-height: 28px;
margin: 0;
- list-style-image: url("profiler-stopwatch.png");
- -moz-image-region: rect(0px,32px,16px,16px);
+ list-style-image: url("profiler-stopwatch.svg");
}
#requests-menu-perf-notice-button .button-text {
/* Performance analysis buttons */
#requests-menu-network-summary-button {
- list-style-image: url("profiler-stopwatch.png");
- -moz-image-region: rect(0px,32px,16px,16px);
+ list-style-image: url("profiler-stopwatch.svg");
-moz-padding-end: 0;
cursor: pointer;
}
}
#profiler-start {
- list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch.png");
- -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#profiler-start:hover {
- -moz-image-region: rect(16px,16px,32px,0px);
-}
-
-#profiler-start[checked] {
- -moz-image-region: rect(0px,32px,16px,16px);
+ list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch-tbutton.svg");
}
+#profiler-start:hover,
+#profiler-start[checked],
#profiler-start[checked]:hover {
- -moz-image-region: rect(16px,32px,32px,16px);
+ list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch.svg");
}
}
.ruleview-warning {
- background: url("chrome://browser/skin/devtools/alerticon-warning.png");
+ background: url("alerticon-warning.png");
-moz-margin-start: 5px;
display: inline-block;
vertical-align: top;
height: 12px;
}
+@media (min-resolution: 2dppx) {
+ .ruleview-warning {
+ background-image: url("alerticon-warning@2x.png");
+ }
+}
+
.ruleview-ruleopen {
-moz-padding-end: 5px;
}
height: 1em;
vertical-align: text-top;
-moz-margin-end: 5px;
+ display: inline-block;
+}
+
+.ruleview-colorswatch::before {
+ content: '';
+ background-color: #9C9CFF;
+ background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
+ linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
+ background-size: 12px 12px;
+ background-position: 0 0, 6px 6px;
+ position: absolute;
+ border-radius: 50%;
+ width: 1em;
+ height: 1em;
+ z-index: -1;
}
.ruleview-overridden {
transition: opacity .5s ease-out 0s;
}
+@media (min-resolution: 2dppx) {
+ .web-audio-inspector .error {
+ background-image: url(alerticon-warning@2x.png);
+ }
+}
+
#inspector-pane-toggle {
background: none;
box-shadow: none;
margin-right: 0px !important;
}
}
+
+#inspector-pane-toggle {
+ background: none;
+ box-shadow: none;
+ border: none;
+ list-style-image: url("debugger-collapse.png");
+ -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+#inspector-pane-toggle[pane-collapsed] {
+ list-style-image: url("debugger-expand.png");
+}
+
+#inspector-pane-toggle:active {
+ -moz-image-region: rect(0px,32px,16px,16px);
+}
}
.message > .icon {
- background: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 0, 1, 0, 0) no-repeat;
- background-position: center;
flex: 0 0 auto;
margin: 3px 6px 0 0;
padding: 0 4px;
- width: 8px;
height: 1em;
align-self: flex-start;
}
+.message > .icon::before {
+ content: "";
+ background-image: url("chrome://browser/skin/devtools/webconsole.png");
+ background-position: 8px 8px;
+ background-repeat: no-repeat;
+ background-size: 48px 40px;
+ width: 8px;
+ height: 8px;
+ display: inline-block;
+}
+
+@media (min-resolution: 2dppx) {
+ .message > .icon::before {
+ background-image: url("chrome://browser/skin/devtools/webconsole@2x.png");
+ }
+}
+
.message > .message-body-wrapper {
flex: 1 1 100%;
margin: 3px;
-moz-border-end: solid #FF0000 6px;
}
-.message[category=network][severity=error] > .icon {
- background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 0, 16, 8, 8);
+.message[category=network][severity=error] > .icon::before {
+ background-position: -8px 0;
}
.message[category=network] > .message-body {
-moz-border-end: solid #9C9CFF 6px;
}
-.message[category=cssparser][severity=error] > .icon {
- background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 8, 16, 16, 8);
+.message[category=cssparser][severity=error] > .icon::before {
+ background-position: -8px -8px;
}
-.message[category=cssparser][severity=warn] > .icon {
- background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 8, 24, 16, 16);
+.message[category=cssparser][severity=warn] > .icon::before {
+ background-position: -16px -8px;
}
/* JS styles */
-moz-border-end: solid #FF9F00 6px;
}
-.message[category=exception][severity=error] > .icon {
- background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 16, 16, 24, 8);
+.message[category=exception][severity=error] > .icon::before {
+ background-position: -8px -16px;
}
-.message[category=exception][severity=warn] > .icon {
- background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 16, 24, 24, 16);
+.message[category=exception][severity=warn] > .icon::before {
+ background-position: -16px -16px;
}
/* Web Developer styles */
-moz-border-end: solid #8050B0 6px;
}
-.message[category=console][severity=error] > .icon,
-.message[category=output][severity=error] > .icon {
- background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 16, 32, 8);
+.message[category=console][severity=error] > .icon::before,
+.message[category=output][severity=error] > .icon::before {
+ background-position: -8px -24px;
}
-.message[category=console][severity=warn] > .icon {
- background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 24, 32, 16);
+.message[category=console][severity=warn] > .icon::before {
+ background-position: -16px -24px;
}
-.message[category=console][severity=info] > .icon {
- background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 32, 32, 24);
+.message[category=console][severity=info] > .icon::before {
+ background-position: -24px -24px;
}
/* Input and output styles */
-moz-border-end: solid #A09090 6px;
}
-.message[category=input] > .icon {
- background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 40, 32, 32);
+.message[category=input] > .icon::before {
+ background-position: -32px -24px;
}
-.message[category=output] > .icon {
- background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 48, 32, 40);
+.message[category=output] > .icon::before {
+ background-position: -40px -24px;
}
/* JSTerm Styles */
}
.jsterm-input-node {
- background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16) no-repeat;
+ background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
+ background-repeat: no-repeat;
+ background-size: 16px 16px;
+}
+
+@media (min-resolution: 2dppx) {
+ .jsterm-input-node {
+ background-image: -moz-image-rect(url('chrome://browser/skin/devtools/commandline-icon@2x.png'), 0, 64, 32, 32);
+ }
}
:-moz-any(.jsterm-input-node,
border-color: #FFCF00;
}
-.message[category=security][severity=error] > .icon {
- background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 32, 16, 40, 8);
+.message[category=security][severity=error] > .icon::before {
+ background-position: -8px -32px;
}
-.message[category=security][severity=warn] > .icon {
- background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 32, 24, 40, 16);
+.message[category=security][severity=warn] > .icon::before {
+ background-position: -16px -32px;
}
.navigation-marker {
.variable-or-property-non-writable-icon {
background: url("chrome://browser/skin/devtools/vview-lock.png") no-repeat;
+ background-size: cover;
width: 16px;
height: 16px;
opacity: 0.5;
@media (min-resolution: 2dppx) {
.variable-or-property-non-writable-icon > .title:after {
background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png");
- background-size: 32px;
}
}
.variable-or-property-frozen-label,
.variable-or-property-sealed-label,
.variable-or-property-non-extensible-label {
+ height: 16px;
-moz-padding-end: 4px;
}
/* Actions first */
+.variables-view-open-inspector {
+ -moz-box-ordinal-group: 1;
+}
+
+.variables-view-edit,
+.variables-view-add-property {
+ -moz-box-ordinal-group: 2;
+}
+
+.variable-or-property-frozen-label,
+.variable-or-property-sealed-label,
+.variable-or-property-non-extensible-label,
+.variable-or-property-non-writable-icon {
+ -moz-box-ordinal-group: 3;
+}
+
+.variables-view-delete {
+ -moz-box-ordinal-group: 4;
+}
+
.variables-view-container[actions-first] .variables-view-delete,
-.variables-view-container[actions-first] .variables-view-open-inspector,
-.variables-view-container[actions-first] .variables-view-add-property {
+.variables-view-container[actions-first] .variables-view-add-property,
+.variables-view-container[actions-first] .variables-view-open-inspector {
-moz-box-ordinal-group: 0;
}
/* Variables and properties editing */
.variables-view-delete {
- list-style-image: url("chrome://browser/skin/devtools/vview-delete.png");
- -moz-image-region: rect(0,16px,16px,0);
+ background: url("chrome://browser/skin/devtools/vview-delete.png");
+ background-size: cover;
+ width: 16px;
+ height: 16px;
+}
+
+@media (min-resolution: 2dppx) {
+ .variables-view-delete {
+ background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png");
+ }
}
.variables-view-delete:hover {
- -moz-image-region: rect(0,48px,16px,32px);
+ background-position: 32px;
}
.variables-view-delete:active {
- -moz-image-region: rect(0,32px,16px,16px);
+ background-position: 16px;
}
-.variable-or-property:focus .variables-view-delete {
-/* -moz-image-region: rect(0,16px,16px,0); */
+.variable-or-property:focus > .title > .variables-view-delete {
+/* background-position: 0px; */
}
.variables-view-edit {
- list-style-image: url("chrome://browser/skin/devtools/vview-edit.png");
- -moz-image-region: rect(0,16px,16px,0);
+ background: url("chrome://browser/skin/devtools/vview-edit.png");
+ background-size: cover;
+ width: 16px;
+ height: 16px;
cursor: pointer;
- padding-left: 2px;
+}
+
+@media (min-resolution: 2dppx) {
+ .variables-view-edit {
+ background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png");
+ }
}
.variables-view-edit:hover {
- -moz-image-region: rect(0,48px,16px,32px);
+ background-position: 32px;
}
.variables-view-edit:active {
- -moz-image-region: rect(0,32px,16px,16px);
+ background-position: 16px;
}
-.variable-or-property:focus .variables-view-edit {
-/* -moz-image-region: rect(0,16px,16px,0); */
+.variable-or-property:focus > .title > .variables-view-edit {
+/* background-position: 0px; */
}
.variables-view-open-inspector {
- list-style-image: url("chrome://browser/skin/devtools/vview-open-inspector.png");
- -moz-image-region: rect(0,16px,16px,0);
+ background: url("chrome://browser/skin/devtools/vview-open-inspector.png");
+ background-size: cover;
+ width: 16px;
+ height: 16px;
cursor: pointer;
}
.variables-view-open-inspector:hover {
- -moz-image-region: rect(0,48px,16px,32px);
+ background-position: 32px;
}
.variables-view-open-inspector:active {
- -moz-image-region: rect(0,32px,16px,16px);
+ background-position: 16px;
}
-.variable-or-property:focus .variables-view-open-inspector {
-/* -moz-image-region: rect(0,16px,16px,0); */
+.variable-or-property:focus > .title > .variables-view-open-inspector {
+/* background-position: 0px; */
}
-.variables-view-throbber {
- background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
- width: 16px;
- height: 16px;
-}
+/* Variables and properties input boxes */
-.element-value-input {
+.variable-or-property > .title > .separator + .element-value-input {
-moz-margin-start: -2px !important;
-moz-margin-end: 2px !important;
}
+.variable-or-property > .title > .separator[hidden=true] + .element-value-input {
+ -moz-margin-start: 4px !important;
+ -moz-margin-end: 2px !important;
+}
+
.element-name-input {
-moz-margin-start: -2px !important;
-moz-margin-end: 2px !important;
button[type="menu"] > menupopup > menuitem[_moz-menuactive="true"] {
}
+menulist > menupopup > menu[selected="true"],
+menulist > menupopup > menuitem[selected="true"],
+button[type="menu"] > menupopup > menu[selected="true"],
+button[type="menu"] > menupopup > menuitem[selected="true"] {
+}
+
menulist > menupopup menuseparator,
button[type="menu"] > menupopup menuseparator {
}
.checkbox-check[checked] {
}
-checkbox:hover::before,
-checkbox[checked]::before {
-}
-
-checkbox[checked]::before {
-}
-
radio {
}
.radio-check[selected] {
}
-radio:hover::before,
-radio[selected]::before {
-}
-
-radio[selected]::before {
-}
-
/* Category List */
#categories {