fifth and final part of synching LCARStrek with windows theme changes in Firefox...

diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css
index c9415663a366793e05661873a2937018a03529f6..61d7ba15be283adc56ccbfadf4de41fff6927e84 100644 (file)
--- a/LCARStrek/browser/browser.css
+++ b/LCARStrek/browser/browser.css
@@ -3647,7 +3647,7 @@ html|*.highlighter-nodeinfobar-pseudo-classes {
   min-height: 32px; */
 }
 
   min-height: 32px; */
 }
 

-.developer-toolbar-button {
+#developer-toolbar > toolbarbutton {

 /*  margin: 0;
   padding: 0 10px;
   width: 32px; */
 /*  margin: 0;
   padding: 0 10px;
   width: 32px; */


@@ -3676,6 +3676,25 @@ html|*.highlighter-nodeinfobar-pseudo-classes {
   -moz-image-region: rect(0px, 32px, 16px, 16px);
 }
 
   -moz-image-region: rect(0px, 32px, 16px, 16px);
 }
 

+#developer-toolbar-closebutton {
+  list-style-image: url("chrome://browser/skin/devtools/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);
+}
+

 /* GCLI */
 
 html|*#gcli-tooltip-frame,
 /* GCLI */
 
 html|*#gcli-tooltip-frame,


@@ -3706,10 +3725,13 @@ html|*#gcli-output-frame {
 /*  line-height: 32px;
   outline-style: none; */
   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 16, 16, 0);
 /*  line-height: 32px;
   outline-style: none; */
   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 16, 16, 0);

+  background-repeat: no-repeat;
+  background-color: rgba(0, 0, 0, .75);

 }
 
 .gclitoolbar-input-node[focused="true"] {
   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
 }
 
 .gclitoolbar-input-node[focused="true"] {
   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);

+  background-color: #000000;

 }
 
 .gclitoolbar-input-node:not([focused="true"]) {
 }
 
 .gclitoolbar-input-node:not([focused="true"]) {


@@ -3788,10 +3810,88 @@ html|*#gcli-output-frame {
   border-bottom-width: 0;
 }
 
   border-bottom-width: 0;
 }
 

-.devtools-responsiveui-toolbar > menulist,
-.devtools-responsiveui-toolbar > toolbarbutton {
-  min-width: 22px;
-/*  border-radius: 0; */
+.devtools-responsiveui-menulist,
+.devtools-responsiveui-toolbarbutton {
+  -moz-box-align: center;
+  min-width: 32px;
+/*  min-height: 22px;*/
+/*  margin: 0 3px; */
+}
+
+.devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
+  -moz-box-orient: horizontal;
+}
+
+.devtools-responsiveui-menulist:-moz-focusring,
+.devtools-responsiveui-toolbarbutton:-moz-focusring {
+/*  outline: 1px dotted hsla(210,30%,85%,0.7);
+  outline-offset: -4px;*/
+}
+
+.devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
+  display: none;
+}
+
+.devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
+/*  border-color: hsla(210,8%,5%,.6);
+  background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
+  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
+}
+
+.devtools-responsiveui-menulist[open=true],
+.devtools-responsiveui-toolbarbutton[open=true],
+.devtools-responsiveui-toolbarbutton[checked=true] {
+/*  border-color: hsla(210,8%,5%,.6) !important;
+  background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
+  box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
+}
+
+.devtools-responsiveui-toolbarbutton[checked=true] {
+/*  color: hsl(208,100%,60%); */
+}
+
+.devtools-responsiveui-toolbarbutton[checked=true]:hover {
+/*  background-color: transparent !important;*/
+}
+
+.devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
+/*  background-color: hsla(210,8%,5%,.2) !important;*/
+}
+
+.devtools-responsiveui-menulist > .menulist-label-box {
+  text-align: center;
+}
+
+.devtools-responsiveui-menulist > .menulist-dropmarker {
+/*  display: -moz-box;
+  background-color: transparent;
+  list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
+  -moz-box-align: center;
+  border-width: 0;
+  min-width: 16px;*/
+}
+
+.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
+/*  color: inherit;
+  border-width: 0;
+  -moz-border-end: 1px solid hsla(210,8%,5%,.45);
+  box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
+}
+
+.devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
+/*  box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
+}
+
+.devtools-responsiveui-toolbarbutton[type=menu-button] {
+/*  padding: 0 1px;*/
+  -moz-box-align: stretch;
+}
+
+.devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
+.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
+/*  list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
+  -moz-box-align: center;
+  padding: 0 3px;*/

 }
 
 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
 }
 
 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,

diff --git a/LCARStrek/browser/devtools/dark-theme.css b/LCARStrek/browser/devtools/dark-theme.css
index de85daceddfddbc91d8d019239409589bf41118e..d9bb9a32783e06a14b6f5fc9473c126da99dc7e5 100644 (file)
--- a/LCARStrek/browser/devtools/dark-theme.css
+++ b/LCARStrek/browser/devtools/dark-theme.css
@@ -51,8 +51,9 @@
   background-color: rgba(0,0,0,0.5);
 }
 
   background-color: rgba(0,0,0,0.5);
 }
 

-.theme-bg-contrast { /* contrast bg color to attract attention on a container */
-  background: #404000;
+.theme-bg-contrast,
+.variable-or-property[changed] { /* contrast bg color to attract attention on a container */
+  background: #402800;

 }
 
 .theme-link,
 }
 
 .theme-link,


@@ -72,7 +73,9 @@
 .theme-comment,
 .cm-s-mozilla .cm-meta,
 .cm-s-mozilla .cm-hr,
 .theme-comment,
 .cm-s-mozilla .cm-meta,
 .cm-s-mozilla .cm-hr,

-.cm-s-mozilla .cm-comment { /* original: grey */
+.cm-s-mozilla .cm-comment,
+.variable-or-property .token-undefined,
+.variable-or-property .token-null { /* original: grey */

   color: #A09090;
 }
 
   color: #A09090;
 }
 


@@ -87,7 +90,9 @@
 }
 
 .theme-fg-color1,
 }
 
 .theme-fg-color1,

-.cm-s-mozilla .cm-number { /* original: green */
+.cm-s-mozilla .cm-number,
+.variable-or-property .token-number,
+.variable-or-property[return] > .title > .name { /* original: green */

   color: #008484;
 }
 
   color: #008484;
 }
 


@@ -96,14 +101,18 @@
 .cm-s-mozilla .cm-variable,
 .cm-s-mozilla .cm-def,
 .cm-s-mozilla .cm-property,
 .cm-s-mozilla .cm-variable,
 .cm-s-mozilla .cm-def,
 .cm-s-mozilla .cm-property,

-.cm-s-mozilla .cm-qualifier { /* original: blue */
+.cm-s-mozilla .cm-qualifier,
+.variables-view-variable > .title > .name,
+.variable-or-property[scope] > .title > .name { /* original: blue */

   color: #9C9CFF;
 }
 
 .theme-fg-color3,
 .cm-s-mozilla .cm-builtin,
 .cm-s-mozilla .cm-tag,
   color: #9C9CFF;
 }
 
 .theme-fg-color3,
 .cm-s-mozilla .cm-builtin,
 .cm-s-mozilla .cm-tag,

-.cm-s-mozilla .cm-header { /* original: pink/lavender */
+.cm-s-mozilla .cm-header,
+.variables-view-property > .title > .name,
+.variable-or-property[safe-getter] > .title > .name { /* original: pink/lavender */

   color: #E7ADE7;
 }
 
   color: #E7ADE7;
 }
 


@@ -119,14 +128,17 @@
 
 .theme-fg-color6,
 .cm-s-mozilla .cm-string,
 
 .theme-fg-color6,
 .cm-s-mozilla .cm-string,

-.cm-s-mozilla .cm-string-2 { /* original: Orange */
+.cm-s-mozilla .cm-string-2,
+.variable-or-property .token-string { /* original: Orange */

   color: #E7ADE7;
 }
 
 .theme-fg-color7,
 .cm-s-mozilla .cm-atom,
 .cm-s-mozilla .cm-quote,
   color: #E7ADE7;
 }
 
 .theme-fg-color7,
 .cm-s-mozilla .cm-atom,
 .cm-s-mozilla .cm-quote,

-.cm-s-mozilla .cm-error { /* original: Red */
+.cm-s-mozilla .cm-error,
+.variable-or-property .token-boolean,
+.variable-or-property[exception] > .title > .name { /* original: Red */

   color: #FF0000;
 }
 
   color: #FF0000;
 }
 


@@ -145,6 +157,12 @@
 /*  box-shadow: 0 0 0 1px rgba(0,0,0,0.5); */
 }
 
 /*  box-shadow: 0 0 0 1px rgba(0,0,0,0.5); */
 }
 

+.variables-view-scope:focus > .title,
+.variable-or-property:focus > .title {
+  background-color: #008484; /* fg-color2 */
+  color: #000000;
+}
+

 /* CodeMirror specific styles.
  * Best effort to match the existing theme, some of the colors
  * are duplicated here to prevent weirdness in the main theme. */
 /* CodeMirror specific styles.
  * Best effort to match the existing theme, some of the colors
  * are duplicated here to prevent weirdness in the main theme. */


@@ -468,6 +486,9 @@ devtools-menulist:-moz-focusring,
 .devtools-sidebar-tabs > tabs > tab {
 }
 
 .devtools-sidebar-tabs > tabs > tab {
 }
 

+.devtools-sidebar-tabs > tabs > tab:not(:last-of-type) {
+}
+

 .devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab {
 }
 
 .devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab {
 }
 


@@ -651,6 +672,12 @@ devtools-menulist:-moz-focusring,
   border-radius: 8px 8px 0 0;
 }
 
   border-radius: 8px 8px 0 0;
 }
 

+.devtools-tab:first-child {
+}
+
+.devtools-tab:last-child {
+}
+

 .devtools-tab > image {
   -moz-margin-end: 0px;
 /*  -moz-margin-start: 4px; */
 .devtools-tab > image {
   -moz-margin-end: 0px;
 /*  -moz-margin-start: 4px; */

diff --git a/LCARStrek/browser/devtools/debugger.css b/LCARStrek/browser/devtools/debugger.css
index 5229761ffdf5472783642fd05830340c6051788d..c50999180c58139097b474e97349e6cc1682b024 100644 (file)
--- a/LCARStrek/browser/devtools/debugger.css
+++ b/LCARStrek/browser/devtools/debugger.css
@@ -12,11 +12,15 @@ window {
   min-width: 50px;
 }
 
   min-width: 50px;
 }
 

+#sources-pane > tabs {
+  -moz-border-end: 1px solid #9C9CFF; /* Match the sources list's dark margin. */
+}
+

 #sources-and-editor-splitter {
   -moz-border-start-color: transparent;
 }
 
 #sources-and-editor-splitter {
   -moz-border-start-color: transparent;
 }
 

-#sources-toolbar .devtools-toolbarbutton {
+#sources-toolbar > #sources-controls > .devtools-toolbarbutton {

   min-width: 32px;
 }
 
   min-width: 32px;
 }
 


@@ -84,10 +88,12 @@ window {
   padding: 2px;
 }
 
   padding: 2px;
 }
 

+/* .theme-light / .theme-dark */

 .list-widget-item:not(.selected):not(.empty):hover {
 /*  background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.85)), Highlight;*/
 }
 
 .list-widget-item:not(.selected):not(.empty):hover {
 /*  background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.85)), Highlight;*/
 }
 

+/* .theme-light / .theme-dark */

 .list-widget-item.selected.light {
 /*  background: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.8)), Highlight;
   color: #000;*/
 .list-widget-item.selected.light {
 /*  background: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.8)), Highlight;
   color: #000;*/


@@ -103,7 +109,11 @@ window {
   /* padding: 4px; */
 }
 
   /* padding: 4px; */
 }
 

-/* Stack frames view */
+/* Breadcrumbs stack frames view */
+
+.breadcrumbs-widget-item {
+  max-width: none;
+}

 
 #stackframes {
   min-height: 25px;
 
 #stackframes {
   min-height: 25px;


@@ -113,15 +123,42 @@ window {
   -moz-padding-start: 4px;
 }
 
   -moz-padding-start: 4px;
 }
 

-.dbg-stackframe-menuitem[checked] {
-  margin-top: 3px;
-  margin-bottom: 3px;
-  outline: 1px solid #008484;
+/* Classic stack frames view */
+
+.dbg-classic-stackframe {
+  display: block;
+  padding: 4px;
+}
+
+.dbg-classic-stackframe-title {

   font-weight: 600;
   font-weight: 600;

+  color: #9C9CFF;
+}
+
+.dbg-classic-stackframe-details:-moz-locale-dir(ltr) {
+  float: right;
+}
+
+.dbg-classic-stackframe-details:-moz-locale-dir(rtl) {
+  float: left;

 }
 
 }
 

-.dbg-stackframe-menuitem-details {
-  -moz-padding-start: 16px;
+.dbg-classic-stackframe-details-url {
+  max-width: 90%;
+  text-align: end;
+  color: #3333FF;
+}
+
+.dbg-classic-stackframe-details-sep {
+  color: #A09090;
+}
+
+.dbg-classic-stackframe-details-line {
+  color: #9C9CFF;
+}
+
+#callstack-list .side-menu-widget-item.selected label {
+  color: #FFCF00;

 }
 
 /* Sources and breakpoints view */
 }
 
 /* Sources and breakpoints view */


@@ -181,8 +218,9 @@ window {
   padding: 0 !important;
 }
 
   padding: 0 !important;
 }
 

-#instruments-pane > tabpanels > tabpanel {
-  background: #000000;
+#instruments-pane .side-menu-widget-container,
+#instruments-pane .side-menu-widget-empty-notice-container {
+/*  box-shadow: none !important; */

 }
 
 /* Watch expressions view */
 }
 
 /* Watch expressions view */


@@ -204,6 +242,7 @@ window {
 
 .dbg-expression-input {
   -moz-padding-start: 2px !important;
 
 .dbg-expression-input {
   -moz-padding-start: 2px !important;

+  color: inherit;

 }
 
 /* Event listeners view */
 }
 
 /* Event listeners view */


@@ -228,6 +267,10 @@ window {
   color: #E7ADE7;
 }
 
   color: #E7ADE7;
 }
 

+#event-listeners .side-menu-widget-item.selected {
+  background: none !important;
+}
+

 /* Searchbox and the search operations help panel */
 
 #searchbox {
 /* Searchbox and the search operations help panel */
 
 #searchbox {


@@ -378,6 +421,11 @@ window {
 
 /* Toolbar controls */
 
 
 /* Toolbar controls */
 

+.devtools-sidebar-tabs > tabs > tab {
+/*  min-height: 25px !important;
+  padding: 0 !important; */
+}
+

 #toggle-panes {
   list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 #toggle-panes {
   list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
   -moz-image-region: rect(0px, 16px, 16px, 0px);


@@ -493,7 +541,12 @@ window {
   /* To prevent all the margin hacks to hide the sidebar. */
 }
 
   /* To prevent all the margin hacks to hide the sidebar. */
 }
 

-#body[layout=vertical] .side-menu-widget-container {
+#body[layout=vertical] #sources-pane > tabs {
+  -moz-border-end: none;
+}
+
+#body[layout=vertical] .side-menu-widget-container,
+#body[layout=vertical] .side-menu-widget-empty-notice-container {

   box-shadow: none !important;
 }
 
   box-shadow: none !important;
 }
 

diff --git a/LCARStrek/browser/devtools/netmonitor.css b/LCARStrek/browser/devtools/netmonitor.css
index 844a384b918b5aee67f0752817185e6f05833af8..b1e7b189c049400896df2d673c4eebbc58098678 100644 (file)
--- a/LCARStrek/browser/devtools/netmonitor.css
+++ b/LCARStrek/browser/devtools/netmonitor.css
@@ -297,6 +297,10 @@ window {
 
 /* SideMenuWidget */
 
 
 /* SideMenuWidget */
 

+.side-menu-widget-container {
+  box-shadow: none !important;
+}
+

 .side-menu-widget-item:nth-child(even) {
   background: rgba(255,159,0,0.1);
 }
 .side-menu-widget-item:nth-child(even) {
   background: rgba(255,159,0,0.1);
 }

diff --git a/LCARStrek/browser/devtools/splitview.css b/LCARStrek/browser/devtools/splitview.css
index 69c40a74805824a7c6868750149105bc798f01e7..16eceed1f11aad34bdc6c8f236c16dd7d7a64bd0 100644 (file)
--- a/LCARStrek/browser/devtools/splitview.css
+++ b/LCARStrek/browser/devtools/splitview.css
@@ -61,8 +61,7 @@
 
 /* Toolbars */
 
 
 /* Toolbars */
 

-.devtools-toolbar {
-  height: 26px;
+.splitview-main > .devtools-toolbar {

   background-origin: border-box;
   background-clip: border-box;
 }
   background-origin: border-box;
   background-clip: border-box;
 }


@@ -83,7 +82,7 @@
   border-left: 1px solid #008484;
 }
 
   border-left: 1px solid #008484;
 }
 

-.devtools-toolbarbutton {
+.splitview-main > .devtools-toolbarbutton {

   width: auto;
   min-width: 48px;
   min-height: 0;
   width: auto;
   min-width: 48px;
   min-height: 0;

diff --git a/LCARStrek/browser/devtools/webconsole.css b/LCARStrek/browser/devtools/webconsole.css
index dbdcd31870d45ed42c629113e8b7d43a5da752ad..4bebb5e600933f5c2ca40f5ec0449507a288e6eb 100644 (file)
--- a/LCARStrek/browser/devtools/webconsole.css
+++ b/LCARStrek/browser/devtools/webconsole.css
@@ -321,6 +321,7 @@ a {
 .inlined-variables-view iframe {
  display: block;
   flex: 1;
 .inlined-variables-view iframe {
  display: block;
   flex: 1;

+  margin-top: 5px;

   margin-bottom: 15px;
   -moz-margin-end: 15px;
   border: 1px solid #9C9CFF;
   margin-bottom: 15px;
   -moz-margin-end: 15px;
   border: 1px solid #9C9CFF;


@@ -382,6 +383,10 @@ a {
   background: #000000; /* mainBackgroundColor */
 }
 
   background: #000000; /* mainBackgroundColor */
 }
 

+.theme-dark .inlined-variables-view iframe {
+  border-color: #A09090;
+}
+

 /* Replace these values with CSS variables as available */
 .theme-light .jsterm-input-container {
   background-color: #000000; /* tabToolbarBackgroundColor */
 /* Replace these values with CSS variables as available */
 .theme-light .jsterm-input-container {
   background-color: #000000; /* tabToolbarBackgroundColor */


@@ -399,3 +404,7 @@ a {
 .theme-light .navigation-marker .url {
   background: #000000; /* mainBackgroundColor */
 }
 .theme-light .navigation-marker .url {
   background: #000000; /* mainBackgroundColor */
 }

+
+.theme-light .inlined-variables-view iframe {
+  border-color: #A09090;
+}

diff --git a/LCARStrek/browser/devtools/widgets.css b/LCARStrek/browser/devtools/widgets.css
index 15436e88b7e43982ec1dacbaa9f27cdd8ad12f60..906dacdafd2beab2acb0067b601e39c27764a2b4 100644 (file)
--- a/LCARStrek/browser/devtools/widgets.css
+++ b/LCARStrek/browser/devtools/widgets.css
@@ -306,13 +306,15 @@
 
 /* SideMenuWidget container */
 
 
 /* SideMenuWidget container */
 

-.side-menu-widget-container[with-arrows=true]:-moz-locale-dir(ltr) {
+.side-menu-widget-container:-moz-locale-dir(ltr),
+.side-menu-widget-empty-notice-container:-moz-locale-dir(ltr) {

 }
 
 }
 

-.side-menu-widget-container[with-arrows=true]:-moz-locale-dir(rtl) {
+.side-menu-widget-container:-moz-locale-dir(rtl),
+.side-menu-widget-empty-notice-container:-moz-locale-dir(rtl)[with-arrows=true]:-moz-locale-dir(rtl) {

 }
 
 }
 

-.side-menu-widget-container[with-arrows=true] .side-menu-widget-group {
+.side-menu-widget-group {

   /* To allow visibility of the dark margin shadow. */
 /*  -moz-margin-end: 1px; */
 }
   /* To allow visibility of the dark margin shadow. */
 /*  -moz-margin-end: 1px; */
 }


@@ -418,10 +420,6 @@
 
 /* VariablesView */
 
 
 /* VariablesView */
 

-.variables-view-container {
-  background: #000000;
-}
-

 .variables-view-empty-notice {
   color: #A09090;
   padding: 2px;
 .variables-view-empty-notice {
   color: #A09090;
   padding: 2px;


@@ -432,11 +430,6 @@
   color: #000000;
 }
 
   color: #000000;
 }
 

-.variables-view-scope:focus > .title {
-  background-color: #008484;
-  color: #000000;
-}
-

 .variables-view-scope > .variables-view-element-details:not(:empty) {
   -moz-margin-start: 2px;
   -moz-margin-end: 1px;
 .variables-view-scope > .variables-view-element-details:not(:empty) {
   -moz-margin-start: 2px;
   -moz-margin-end: 1px;


@@ -445,13 +438,12 @@
 /* Generic traits applied to both variables and properties */
 
 .variable-or-property {
 /* Generic traits applied to both variables and properties */
 
 .variable-or-property {

-  transition: background 1s ease-in-out;
-  color: #FF9F00;
+  transition: background 1s ease-in-out, color 1s ease-in-out;

 }
 
 .variable-or-property[changed] {
 }
 
 .variable-or-property[changed] {

-  background: rgba(255, 207, 0, 0.3);
-  transition-duration: 0.4s;
+  color: #000000;
+  transition-duration: .4s;

 }
 
 .variable-or-property > .title > .value {
 }
 
 .variable-or-property > .title > .value {


@@ -460,12 +452,6 @@
   -moz-padding-end: 4px;
 }
 
   -moz-padding-end: 4px;
 }
 

-.variable-or-property:focus > .title {
-  background-color: #008484;
-  color: #000000;
-  border-radius: 5px;
-}
-

 .variable-or-property[editable] > .title > .value {
   cursor: text;
 }
 .variable-or-property[editable] > .title > .value {
   cursor: text;
 }


@@ -489,45 +475,16 @@
   font-weight: 600;
 }
 
   font-weight: 600;
 }
 

-.variables-view-variable:not(:focus) > .title > .name {
-  color: #FF9F00;
+.variable-or-property:focus > .title > label {
+  color: inherit !important;

 }
 
 }
 

-.variables-view-property:not(:focus) > .title > .name {
-  color: #E7ADE7;
-}
-
-/* Token value colors */
-
-.variable-or-property:not(:focus) > .title > .token-undefined {
-  color: #8050B0;
-}
-
-.variable-or-property:not(:focus) > .title > .token-null {
-  color: #008484;
-}
-
-.variable-or-property:not(:focus) > .title > .token-boolean {
-  color: #FFCF00;
-}
-
-.variable-or-property:not(:focus) > .title > .token-number {
-  color: #E7ADE7;
-}
-
-.variable-or-property:not(:focus) > .title > .token-string {
-  color: #9C9CFF;
-}
-
-.variable-or-property:not(:focus) > .title > .token-other {
-  color: #FF9F00;
-}

 
 /* Custom configurable/enumerable/writable or frozen/sealed/extensible
  * variables and properties */
 
 .variable-or-property[non-enumerable]:not([self]):not([exception]):not([return]):not([scope]) > .title > .name {
 
 /* Custom configurable/enumerable/writable or frozen/sealed/extensible
  * variables and properties */
 
 .variable-or-property[non-enumerable]:not([self]):not([exception]):not([return]):not([scope]) > .title > .name {

-  opacity: 0.5;
+  opacity: 0.6;

 }
 
 .variable-or-property[non-configurable] > .title > .name {
 }
 
 .variable-or-property[non-configurable] > .title > .name {


@@ -538,6 +495,10 @@
   border-bottom: 1px dashed #FF0000;
 }
 
   border-bottom: 1px dashed #FF0000;
 }
 

+.variable-or-property[safe-getter] > .title > .name {
+  border-bottom: 1px dashed #A09090;
+}
+

 .variable-or-property-non-writable-icon {
   background: url("chrome://browser/skin/identity-icons-https.png") no-repeat;
   width: 16px;
 .variable-or-property-non-writable-icon {
   background: url("chrome://browser/skin/identity-icons-https.png") no-repeat;
   width: 16px;


@@ -564,24 +525,6 @@
   color: #A09090;
 }
 
   color: #A09090;
 }
 

-/* Special variables and properties */
-
-.variable-or-property[safe-getter] > .title > .name {
-  border-bottom: 1px dashed #A09090;
-}
-
-.variable-or-property[exception]:not(:focus) > .title > .name {
-  color: #FF0000;
-}
-
-.variable-or-property[return]:not(:focus) > .title > .name {
-  color: #008484;
-}
-
-.variable-or-property[scope]:not(:focus) > .title > .name {
-  color: #9C9CFF;
-}
-

 /* Aligned values */
 
 .variables-view-container[aligned-values] .title > .separator {
 /* Aligned values */
 
 .variables-view-container[aligned-values] .title > .separator {


@@ -664,13 +607,13 @@
 .element-name-input {
   -moz-margin-start: -2px !important;
   -moz-margin-end: 2px !important;
 .element-name-input {
   -moz-margin-start: -2px !important;
   -moz-margin-end: 2px !important;

-  color: #E7ADE7;

   font-weight: 600;
 }
 
 .element-value-input,
 .element-name-input {
   border: 1px solid #008484 !important;
   font-weight: 600;
 }
 
 .element-value-input,
 .element-name-input {
   border: 1px solid #008484 !important;

+  color: inherit;

 }
 
 /* Variables and properties searching */
 }
 
 /* Variables and properties searching */