Bug 951794 - Make the tracers colors easier to read, r=vporof
authorNick Fitzgerald <nfitzgerald@mozilla.com>
Thu, 19 Dec 2013 20:12:12 +0200
changeset 161359 25681ba51fb8758ac19a7be636f476f6acd4a4cf
parent 161358 704e9626f012d18c04cf715eb803e72ad2ed2b7e
child 161360 eb1536105084bb9b0006536cfadcd62972439653
push id25878
push userkwierso@gmail.com
push dateFri, 20 Dec 2013 03:09:21 +0000
treeherdermozilla-central@599100c4ebfe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersvporof
bugs951794
milestone29.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 951794 - Make the tracers colors easier to read, r=vporof
browser/devtools/shared/widgets/FastListWidget.js
browser/themes/linux/devtools/debugger.css
browser/themes/osx/devtools/debugger.css
browser/themes/windows/devtools/debugger.css
--- a/browser/devtools/shared/widgets/FastListWidget.js
+++ b/browser/devtools/shared/widgets/FastListWidget.js
@@ -3,34 +3,30 @@ const { Cu, Ci } = require("chrome");
 const { ViewHelpers } = Cu.import("resource:///modules/devtools/ViewHelpers.jsm", {});
 
 /**
  * A list menu widget that attempts to be very fast.
  *
  * Note: this widget should be used in tandem with the WidgetMethods in
  * ViewHelpers.jsm.
  *
- * Note: this widget also reuses SideMenuWidget CSS class names.
- *
  * @param nsIDOMNode aNode
  *        The element associated with the widget.
  */
 const FastListWidget = module.exports = function FastListWidget(aNode) {
   this.document = aNode.ownerDocument;
   this.window = this.document.defaultView;
   this._parent = aNode;
   this._fragment = this.document.createDocumentFragment();
 
   // This is a prototype element that each item added to the list clones.
   this._templateElement = this.document.createElement("hbox");
-  this._templateElement.className = "side-menu-widget-item side-menu-widget-item-contents";
 
   // Create an internal scrollbox container.
   this._list = this.document.createElement("scrollbox");
-  this._list.className = "side-menu-widget-container";
   this._list.setAttribute("flex", "1");
   this._list.setAttribute("orient", "vertical");
   this._list.setAttribute("theme", "dark");
   this._list.setAttribute("tabindex", "0");
   this._list.addEventListener("keypress", e => this.emit("keyPress", e), false);
   this._list.addEventListener("mousedown", e => this.emit("mousePress", e), false);
   this._parent.appendChild(this._list);
 
--- a/browser/themes/linux/devtools/debugger.css
+++ b/browser/themes/linux/devtools/debugger.css
@@ -118,54 +118,64 @@
   /* Prevent the container deck from aquiring the height from this message. */
   min-height: 1px;
 }
 
 .trace-name {
   -moz-padding-start: 4px !important;
 }
 
+#tracer-traces > scrollbox {
+  overflow: scroll;
+  /* Hack to enable hardware acceleration */
+  transform: translateZ(0);
+}
+
 /* Tracer dark theme */
 
 .theme-dark #tracer-message {
   color: #f5f7fa; /* Light foreground text */
   background: url(background-noise-toolbar.png) #181d20; /* Content background sidebar */
 }
 
 .theme-dark #tracer-traces > scrollbox {
   background-color: #181d20 !important; /* Content background sidebar */
 }
 
 .theme-dark .trace-item {
   color: #f5f7fa; /* Light foreground text */
 }
 
-.trace-item.selected-matching {
-  background-color: #1d4f73; /* Select highlight blue */
+.theme-dark .trace-item.selected-matching {
+  background-color: rgba(29, 79, 115, .4); /* Select highlight blue at 40% alpha */
+}
+
+.theme-dark .selected > .trace-item {
+  background-color: rgba(29, 79, 115, .75); /* Select highlight blue at 75% alpha */
 }
 
 .theme-dark .trace-call {
   color: #46afe3; /* highlight blue */
 }
 
 .theme-dark .trace-return,
 .theme-dark .trace-yield {
   color: #70bf53; /* highlight green */
 }
 
 .theme-dark .trace-throw {
   color: #eb5368; /* highlight red */
 }
 
 .theme-dark .trace-param {
-  color: #8fa1b2; /* Content text grey  */
+  color: #b8c8d9; /* Content text light */
 }
 
 .theme-dark .trace-syntax {
-  color: #5e88b0; /* highlight blue-grey */
+  color: #8fa1b2; /* Content text grey */
 }
 
 /* Tracer light theme */
 
 .theme-light #tracer-message {
   color: #292e33; /* Dark foreground text */
   background: url(background-noise-toolbar.png) #f7f7f7; /* Content background sidebar */
 }
@@ -173,39 +183,43 @@
 .theme-light #tracer-traces > scrollbox {
   background-color: #f7f7f7 !important; /* Content background sidebar */
 }
 
 .theme-light .trace-item {
   color: #292e33; /* Dark foreground text */
 }
 
-.trace-item.selected-matching {
-  background-color: #4c9ed9; /* Select highlight blue */
+.theme-light .trace-item.selected-matching {
+  background-color: rgba(76, 158, 217, .4); /* Select highlight blue at 40% alpha */
+}
+
+.theme-light .selected > .trace-item {
+  background-color: rgba(76, 158, 217, .75); /* Select highlight blue at 75% alpha */
 }
 
 .theme-light .trace-call {
   color: #0088cc; /* highlight blue */
 }
 
 .theme-light .trace-return,
 .theme-light .trace-yield {
   color: #2cbb0f; /* highlight green */
 }
 
 .theme-light .trace-throw {
   color: #ed2655; /* highlight red */
 }
 
 .theme-light .trace-param {
-  color: #8fa1b2; /* Content text grey  */
+  color: #667380; /* Content text dark grey  */
 }
 
 .theme-light .trace-syntax {
-  color: #5f88b0; /* highlight blue-grey */
+  color: #8fa1b2; /* Content text grey */
 }
 
 /* ListWidget items */
 
 .list-widget-item {
   padding: 2px;
 }
 
--- a/browser/themes/osx/devtools/debugger.css
+++ b/browser/themes/osx/devtools/debugger.css
@@ -120,54 +120,64 @@
   /* Prevent the container deck from aquiring the height from this message. */
   min-height: 1px;
 }
 
 .trace-name {
   -moz-padding-start: 4px !important;
 }
 
+#tracer-traces > scrollbox {
+  overflow: scroll;
+  /* Hack to enable hardware acceleration */
+  transform: translateZ(0);
+}
+
 /* Tracer dark theme */
 
 .theme-dark #tracer-message {
   color: #f5f7fa; /* Light foreground text */
   background: url(background-noise-toolbar.png) #181d20; /* Content background sidebar */
 }
 
 .theme-dark #tracer-traces > scrollbox {
   background-color: #181d20 !important; /* Content background sidebar */
 }
 
 .theme-dark .trace-item {
   color: #f5f7fa; /* Light foreground text */
 }
 
-.trace-item.selected-matching {
-  background-color: #1d4f73; /* Select highlight blue */
+.theme-dark .trace-item.selected-matching {
+  background-color: rgba(29, 79, 115, .4); /* Select highlight blue at 40% alpha */
+}
+
+.theme-dark .selected > .trace-item {
+  background-color: rgba(29, 79, 115, .75); /* Select highlight blue at 75% alpha */
 }
 
 .theme-dark .trace-call {
   color: #46afe3; /* highlight blue */
 }
 
 .theme-dark .trace-return,
 .theme-dark .trace-yield {
   color: #70bf53; /* highlight green */
 }
 
 .theme-dark .trace-throw {
   color: #eb5368; /* highlight red */
 }
 
 .theme-dark .trace-param {
-  color: #8fa1b2; /* Content text grey  */
+  color: #b8c8d9; /* Content text light */
 }
 
 .theme-dark .trace-syntax {
-  color: #5e88b0; /* highlight blue-grey */
+  color: #8fa1b2; /* Content text grey */
 }
 
 /* Tracer light theme */
 
 .theme-light #tracer-message {
   color: #292e33; /* Dark foreground text */
   background: url(background-noise-toolbar.png) #f7f7f7; /* Content background sidebar */
 }
@@ -175,39 +185,43 @@
 .theme-light #tracer-traces > scrollbox {
   background-color: #f7f7f7 !important; /* Content background sidebar */
 }
 
 .theme-light .trace-item {
   color: #292e33; /* Dark foreground text */
 }
 
-.trace-item.selected-matching {
-  background-color: #4c9ed9; /* Select highlight blue */
+.theme-light .trace-item.selected-matching {
+  background-color: rgba(76, 158, 217, .4); /* Select highlight blue at 40% alpha */
+}
+
+.theme-light .selected > .trace-item {
+  background-color: rgba(76, 158, 217, .75); /* Select highlight blue at 75% alpha */
 }
 
 .theme-light .trace-call {
   color: #0088cc; /* highlight blue */
 }
 
 .theme-light .trace-return,
 .theme-light .trace-yield {
   color: #2cbb0f; /* highlight green */
 }
 
 .theme-light .trace-throw {
   color: #ed2655; /* highlight red */
 }
 
 .theme-light .trace-param {
-  color: #8fa1b2; /* Content text grey  */
+  color: #667380; /* Content text dark grey  */
 }
 
 .theme-light .trace-syntax {
-  color: #5f88b0; /* highlight blue-grey */
+  color: #8fa1b2; /* Content text grey */
 }
 
 /* ListWidget items */
 
 .list-widget-item {
   padding: 2px;
 }
 
--- a/browser/themes/windows/devtools/debugger.css
+++ b/browser/themes/windows/devtools/debugger.css
@@ -118,54 +118,64 @@
   /* Prevent the container deck from aquiring the height from this message. */
   min-height: 1px;
 }
 
 .trace-name {
   -moz-padding-start: 4px !important;
 }
 
+#tracer-traces > scrollbox {
+  overflow: scroll;
+  /* Hack to enable hardware acceleration */
+  transform: translateZ(0);
+}
+
 /* Tracer dark theme */
 
 .theme-dark #tracer-message {
   color: #f5f7fa; /* Light foreground text */
   background: url(background-noise-toolbar.png) #181d20; /* Content background sidebar */
 }
 
 .theme-dark #tracer-traces > scrollbox {
   background-color: #181d20 !important; /* Content background sidebar */
 }
 
 .theme-dark .trace-item {
   color: #f5f7fa; /* Light foreground text */
 }
 
-.trace-item.selected-matching {
-  background-color: #1d4f73; /* Select highlight blue */
+.theme-dark .trace-item.selected-matching {
+  background-color: rgba(29, 79, 115, .4); /* Select highlight blue at 40% alpha */
+}
+
+.theme-dark .selected > .trace-item {
+  background-color: rgba(29, 79, 115, .75); /* Select highlight blue at 75% alpha */
 }
 
 .theme-dark .trace-call {
   color: #46afe3; /* highlight blue */
 }
 
 .theme-dark .trace-return,
 .theme-dark .trace-yield {
   color: #70bf53; /* highlight green */
 }
 
 .theme-dark .trace-throw {
   color: #eb5368; /* highlight red */
 }
 
 .theme-dark .trace-param {
-  color: #8fa1b2; /* Content text grey  */
+  color: #b8c8d9; /* Content text light */
 }
 
 .theme-dark .trace-syntax {
-  color: #5e88b0; /* highlight blue-grey */
+  color: #8fa1b2; /* Content text grey */
 }
 
 /* Tracer light theme */
 
 .theme-light #tracer-message {
   color: #292e33; /* Dark foreground text */
   background: url(background-noise-toolbar.png) #f7f7f7; /* Content background sidebar */
 }
@@ -173,39 +183,43 @@
 .theme-light #tracer-traces > scrollbox {
   background-color: #f7f7f7 !important; /* Content background sidebar */
 }
 
 .theme-light .trace-item {
   color: #292e33; /* Dark foreground text */
 }
 
-.trace-item.selected-matching {
-  background-color: #4c9ed9; /* Select highlight blue */
+.theme-light .trace-item.selected-matching {
+  background-color: rgba(76, 158, 217, .4); /* Select highlight blue at 40% alpha */
+}
+
+.theme-light .selected > .trace-item {
+  background-color: rgba(76, 158, 217, .75); /* Select highlight blue at 75% alpha */
 }
 
 .theme-light .trace-call {
   color: #0088cc; /* highlight blue */
 }
 
 .theme-light .trace-return,
 .theme-light .trace-yield {
   color: #2cbb0f; /* highlight green */
 }
 
 .theme-light .trace-throw {
   color: #ed2655; /* highlight red */
 }
 
 .theme-light .trace-param {
-  color: #8fa1b2; /* Content text grey  */
+  color: #667380; /* Content text dark grey  */
 }
 
 .theme-light .trace-syntax {
-  color: #5f88b0; /* highlight blue-grey */
+  color: #8fa1b2; /* Content text grey */
 }
 
 /* ListWidget items */
 
 .list-widget-item {
   padding: 2px;
 }