first part of syncing LCARStrek with Firefox 32 windows theme changes
authorRobert Kaiser <robert@widebook.box.kairo.at>
Sun, 17 Aug 2014 20:21:57 +0000 (22:21 +0200)
committerRobert Kaiser <robert@widebook.box.kairo.at>
Sun, 17 Aug 2014 20:21:57 +0000 (22:21 +0200)
19 files changed:
LCARStrek/browser/browser.css
LCARStrek/browser/devtools/alerticon-warning@2x.png [new file with mode: 0644]
LCARStrek/browser/devtools/common.css
LCARStrek/browser/devtools/computedview.css
LCARStrek/browser/devtools/dark-theme.css
LCARStrek/browser/devtools/debugger-blackbox@2x.png [new file with mode: 0644]
LCARStrek/browser/devtools/debugger-collapse@2x.png [new file with mode: 0644]
LCARStrek/browser/devtools/debugger-expand@2x.png [new file with mode: 0644]
LCARStrek/browser/devtools/debugger-pause@2x.png [new file with mode: 0644]
LCARStrek/browser/devtools/debugger-toggleBreakpoints@2x.png [new file with mode: 0644]
LCARStrek/browser/devtools/debugger.css
LCARStrek/browser/devtools/editor-breakpoint@2x.png [new file with mode: 0644]
LCARStrek/browser/devtools/netmonitor.css
LCARStrek/browser/devtools/profiler.css
LCARStrek/browser/devtools/ruleview.css
LCARStrek/browser/devtools/webaudioeditor.css
LCARStrek/browser/devtools/webconsole.css
LCARStrek/browser/devtools/widgets.css
LCARStrek/browser/preferences/in-content/preferences.css

index f37015b08227198a3360f7ce5b7cf85f370836e1..f2b1fedca654e2871aafa28630b6116e1c7fdb24 100644 (file)
@@ -114,6 +114,10 @@ menubar {
     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);*/
   }
diff --git a/LCARStrek/browser/devtools/alerticon-warning@2x.png b/LCARStrek/browser/devtools/alerticon-warning@2x.png
new file mode 100644 (file)
index 0000000..c4a5c79
Binary files /dev/null and b/LCARStrek/browser/devtools/alerticon-warning@2x.png differ
index 6d8d2e7b1395db339babfd5d182f87a328cc4a1d..fed30341221afa6c8faeb6a3c167f6885b09a25d 100644 (file)
@@ -235,6 +235,10 @@ notification {
   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 {
index 3523ce287ea2eb5d9ce0fc93e59598f207654e9d..95730f7eec825abdef990b31a60bb663ca4638e8 100644 (file)
@@ -172,10 +172,24 @@ body {
 }
 
 .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;
 }
index 48def1132b26e2e52a07a6d564da97b7ccbe2d1b..cadd342941152b116547f667dc57de28f383453a 100644 (file)
 }
 
 .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,
diff --git a/LCARStrek/browser/devtools/debugger-blackbox@2x.png b/LCARStrek/browser/devtools/debugger-blackbox@2x.png
new file mode 100644 (file)
index 0000000..8f797ca
Binary files /dev/null and b/LCARStrek/browser/devtools/debugger-blackbox@2x.png differ
diff --git a/LCARStrek/browser/devtools/debugger-collapse@2x.png b/LCARStrek/browser/devtools/debugger-collapse@2x.png
new file mode 100644 (file)
index 0000000..6797bef
Binary files /dev/null and b/LCARStrek/browser/devtools/debugger-collapse@2x.png differ
diff --git a/LCARStrek/browser/devtools/debugger-expand@2x.png b/LCARStrek/browser/devtools/debugger-expand@2x.png
new file mode 100644 (file)
index 0000000..a81b21e
Binary files /dev/null and b/LCARStrek/browser/devtools/debugger-expand@2x.png differ
diff --git a/LCARStrek/browser/devtools/debugger-pause@2x.png b/LCARStrek/browser/devtools/debugger-pause@2x.png
new file mode 100644 (file)
index 0000000..1dd4334
Binary files /dev/null and b/LCARStrek/browser/devtools/debugger-pause@2x.png differ
diff --git a/LCARStrek/browser/devtools/debugger-toggleBreakpoints@2x.png b/LCARStrek/browser/devtools/debugger-toggleBreakpoints@2x.png
new file mode 100644 (file)
index 0000000..a90d5f6
Binary files /dev/null and b/LCARStrek/browser/devtools/debugger-toggleBreakpoints@2x.png differ
index b3dfbab5d553fc56cabcb6d9ca0c64d54b980096..3f3299c1fdbeb86075360783712ceb5059733f09 100644 (file)
@@ -27,6 +27,12 @@ window {
   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;
 }
@@ -35,6 +41,12 @@ window {
   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);
 }
@@ -51,6 +63,24 @@ window {
   -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;
 }
@@ -112,6 +142,18 @@ window {
   -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;
@@ -277,10 +319,19 @@ window {
 }
 
 .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 {
@@ -290,11 +341,9 @@ window {
 .dbg-expression-button {
   border: none;
   background: none;
-  cursor: pointer;
   text-decoration: underline;
-}
+  cursor: pointer;
 
-.dbg-expression-button {
   color: #9C9CFF; /* Blue highlight color */
 }
 
@@ -475,7 +524,7 @@ window {
 /* Toolbar controls */
 
 .devtools-sidebar-tabs > tabs > tab {
-/*  min-height: 25px !important;
+/*  min-height: 24px !important;
   padding: 0 !important; */
 }
 
@@ -493,6 +542,12 @@ window {
   -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);
@@ -513,6 +568,26 @@ window {
   -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; */
 }
@@ -545,6 +620,35 @@ window {
   -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;
@@ -557,11 +661,25 @@ window {
   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 {
diff --git a/LCARStrek/browser/devtools/editor-breakpoint@2x.png b/LCARStrek/browser/devtools/editor-breakpoint@2x.png
new file mode 100644 (file)
index 0000000..38a6f91
Binary files /dev/null and b/LCARStrek/browser/devtools/editor-breakpoint@2x.png differ
index b52494ba3fad15769bb245792594690e37a363ec..d4cd744d2c8342dcf11ff96e9983858a49f5e9d9 100644 (file)
@@ -21,8 +21,7 @@ window {
   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 {
@@ -500,8 +499,7 @@ box.requests-menu-status[code^="5"] {
 /* 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;
 }
index 858d28f5b94de0239570cc42ba11d34cb96059ce..e5e40f45d8897bb20677904e0c93bb7cad1fef43 100644 (file)
@@ -69,18 +69,11 @@ window {
 }
 
 #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");
 }
index 2d595e14b535bc1e12c033fcfa80edce9ff47863..c970fc26199b42ed9b8e5078c4787925c9152097 100644 (file)
@@ -45,7 +45,7 @@
 }
 
 .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 {
index 552c29aeb67403b64cf5260fe26c6e3b7377931b..f4d70cc7c5d48251f36486ac11edded06c7a528b 100644 (file)
@@ -87,6 +87,12 @@ g.selected text {
   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;
@@ -146,3 +152,19 @@ g.selected text {
     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);
+}
index dfd389714be60156471ee3356b81a9fd19950ac4..dd6e64169e0f65f4a615ab581fb155058fd47666 100644 (file)
@@ -49,16 +49,30 @@ a {
 }
 
 .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;
@@ -227,8 +241,8 @@ a {
   -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 {
@@ -273,12 +287,12 @@ a {
   -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 */
@@ -291,12 +305,12 @@ a {
   -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 */
@@ -309,17 +323,17 @@ a {
   -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 */
@@ -328,12 +342,12 @@ a {
   -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 */
@@ -346,7 +360,15 @@ a {
 }
 
 .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,
@@ -389,12 +411,12 @@ a {
   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 {
index b699b78e67dcc700d9a9aa30b3b7683aed801338..0b0a6e77271b17d8d870b9366a971749adfc5854 100644 (file)
 
 .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;
index b4ef519963da60ff2484c77a2f87a205ab922e3a..27718a4eb7e37f758a1d4c146319649438e8a1d8 100644 (file)
@@ -213,6 +213,12 @@ button[type="menu"] > menupopup > menu[_moz-menuactive="true"],
 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 {
 }
@@ -251,13 +257,6 @@ html|a.inline-link {
 .checkbox-check[checked] {
 }
 
-checkbox:hover::before,
-checkbox[checked]::before {
-}
-
-checkbox[checked]::before {
-}
-
 radio {
 }
 
@@ -267,13 +266,6 @@ radio {
 .radio-check[selected] {
 }
 
-radio:hover::before,
-radio[selected]::before {
-}
-
-radio[selected]::before {
-}
-
 /* Category List */
 
 #categories {