Bug 1164552 - create new colors in light/dark themes for devtools specifically for rendering graphs in the performance tool. The highlight-* colors in light theme work well for text, less so for rendered blocks and appear very 'bold'. Most of the dark theme graph colors are the same as their highlight-* equivilents. r=vp, a=sledru
authorJordan Santell <jsantell@mozilla.com>
Wed, 20 May 2015 13:15:28 -0700
changeset 274854 f8f7e83e4a1d54dd94c0ce4b364f25d0829412cf
parent 274853 53629d541666ac0874b1b47c2b1cf15e11d7da5b
child 274855 500cd2821bceacab9dc7dd58e386b2585411d721
push id863
push userraliiev@mozilla.com
push dateMon, 03 Aug 2015 13:22:43 +0000
treeherdermozilla-release@f6321b14228d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersvp, sledru
bugs1164552
milestone40.0a2
Bug 1164552 - create new colors in light/dark themes for devtools specifically for rendering graphs in the performance tool. The highlight-* colors in light theme work well for text, less so for rendered blocks and appear very 'bold'. Most of the dark theme graph colors are the same as their highlight-* equivilents. r=vp, a=sledru
browser/devtools/performance/views/toolbar.js
browser/devtools/shared/timeline/global.js
browser/devtools/shared/timeline/marker-utils.js
browser/devtools/shared/timeline/waterfall.js
browser/themes/shared/devtools/dark-theme.css
browser/themes/shared/devtools/light-theme.css
browser/themes/shared/devtools/performance.inc.css
--- a/browser/devtools/performance/views/toolbar.js
+++ b/browser/devtools/performance/views/toolbar.js
@@ -55,17 +55,17 @@ let ToolbarView = {
     for (let [markerName, markerDetails] of Iterator(TIMELINE_BLUEPRINT)) {
       let menuitem = document.createElement("menuitem");
       menuitem.setAttribute("closemenu", "none");
       menuitem.setAttribute("type", "checkbox");
       menuitem.setAttribute("align", "center");
       menuitem.setAttribute("flex", "1");
       menuitem.setAttribute("label", MarkerUtils.getMarkerClassName(markerName));
       menuitem.setAttribute("marker-type", markerName);
-      menuitem.className = markerDetails.colorName;
+      menuitem.className = `marker-color-${markerDetails.colorName}`;
 
       menuitem.addEventListener("command", this._onHiddenMarkersChanged);
 
       $("#performance-filter-menupopup").appendChild(menuitem);
     }
   },
 
   /**
--- a/browser/devtools/shared/timeline/global.js
+++ b/browser/devtools/shared/timeline/global.js
@@ -44,82 +44,82 @@ const L10N = new ViewHelpers.L10N(STRING
  *
  * Whenever this is changed, browser_timeline_waterfall-styles.js *must* be
  * updated as well.
  */
 const TIMELINE_BLUEPRINT = {
   /* Group 0 - Reflow and Rendering pipeline */
   "Styles": {
     group: 0,
-    colorName: "highlight-pink",
+    colorName: "graphs-purple",
     label: L10N.getStr("timeline.label.styles2")
   },
   "Reflow": {
     group: 0,
-    colorName: "highlight-pink",
+    colorName: "graphs-purple",
     label: L10N.getStr("timeline.label.reflow2")
   },
   "Paint": {
     group: 0,
-    colorName: "highlight-green",
+    colorName: "graphs-green",
     label: L10N.getStr("timeline.label.paint")
   },
 
   /* Group 1 - JS */
   "DOMEvent": {
     group: 1,
-    colorName: "highlight-lightorange",
+    colorName: "graphs-yellow",
     label: L10N.getStr("timeline.label.domevent"),
     fields: [{
       property: "type",
       label: L10N.getStr("timeline.markerDetail.DOMEventType")
     }, {
       property: "eventPhase",
       label: L10N.getStr("timeline.markerDetail.DOMEventPhase"),
       formatter: getEventPhaseName
     }]
   },
   "Javascript": {
     group: 1,
-    colorName: "highlight-lightorange",
+    colorName: "graphs-yellow",
     label: getJSLabel,
   },
   "Parse HTML": {
     group: 1,
-    colorName: "highlight-lightorange",
+    colorName: "graphs-yellow",
     label: L10N.getStr("timeline.label.parseHTML")
   },
   "Parse XML": {
     group: 1,
-    colorName: "highlight-lightorange",
+    colorName: "graphs-yellow",
     label: L10N.getStr("timeline.label.parseXML")
   },
   "GarbageCollection": {
     group: 1,
-    colorName: "highlight-red",
+    colorName: "graphs-red",
     label: getGCLabel,
     fields: [
       { property: "causeName", label: "Reason:" },
       { property: "nonincrementalReason", label: "Non-incremental Reason:" }
     ]
   },
 
   /* Group 2 - User Controlled */
   "ConsoleTime": {
     group: 2,
-    colorName: "highlight-bluegrey",
+    colorName: "graphs-grey",
     label: L10N.getStr("timeline.label.consoleTime"),
     fields: [{
       property: "causeName",
       label: L10N.getStr("timeline.markerDetail.consoleTimerName")
     }]
   },
   "TimeStamp": {
     group: 2,
-    colorName: "highlight-purple",
+    colorName: "graphs-blue",
     label: "Timestamp"
   },
 };
 
 /**
  * A series of formatters used by the blueprint.
  */
 
--- a/browser/devtools/shared/timeline/marker-utils.js
+++ b/browser/devtools/shared/timeline/marker-utils.js
@@ -111,17 +111,17 @@ const DOM = exports.DOM = {
    */
   buildTitle: function (doc, marker) {
     let blueprint = TIMELINE_BLUEPRINT[marker.name];
 
     let hbox = doc.createElement("hbox");
     hbox.setAttribute("align", "center");
 
     let bullet = doc.createElement("hbox");
-    bullet.className = `marker-details-bullet ${blueprint.colorName}`;
+    bullet.className = `marker-details-bullet marker-color-${blueprint.colorName}`;
 
     let title = getMarkerLabel(marker);
     let label = doc.createElement("label");
     label.className = "marker-details-type";
     label.setAttribute("value", title);
 
     hbox.appendChild(bullet);
     hbox.appendChild(label);
--- a/browser/devtools/shared/timeline/waterfall.js
+++ b/browser/devtools/shared/timeline/waterfall.js
@@ -429,17 +429,17 @@ Waterfall.prototype = {
     let blueprint = this._blueprint[marker.name];
 
     let sidebar = this._document.createElement("hbox");
     sidebar.className = "waterfall-sidebar theme-sidebar";
     sidebar.setAttribute("width", WATERFALL_SIDEBAR_WIDTH);
     sidebar.setAttribute("align", "center");
 
     let bullet = this._document.createElement("hbox");
-    bullet.className = `waterfall-marker-bullet ${blueprint.colorName}`;
+    bullet.className = `waterfall-marker-bullet marker-color-${blueprint.colorName}`;
     bullet.setAttribute("type", marker.name);
     sidebar.appendChild(bullet);
 
     let name = this._document.createElement("label");
     name.setAttribute("crop", "end");
     name.setAttribute("flex", "1");
     name.className = "plain waterfall-marker-name";
 
@@ -471,17 +471,17 @@ Waterfall.prototype = {
     waterfall.setAttribute("align", "center");
     waterfall.setAttribute("flex", "1");
 
     let start = (marker.start - startTime) * dataScale;
     let width = (marker.end - marker.start) * dataScale;
     let offset = this._isRTL ? this._waterfallWidth : 0;
 
     let bar = this._document.createElement("hbox");
-    bar.className = `waterfall-marker-bar ${blueprint.colorName}`;
+    bar.className = `waterfall-marker-bar marker-color-${blueprint.colorName}`;
     bar.style.transform = "translateX(" + (start - offset) + "px)";
     bar.setAttribute("type", marker.name);
     bar.setAttribute("width", Math.max(width, WATERFALL_MARKER_BAR_WIDTH_MIN));
     waterfall.appendChild(bar);
 
     container.appendChild(waterfall);
   },
 
--- a/browser/themes/shared/devtools/dark-theme.css
+++ b/browser/themes/shared/devtools/dark-theme.css
@@ -29,16 +29,24 @@
   --theme-highlight-green: #70bf53;
   --theme-highlight-blue: #46afe3;
   --theme-highlight-bluegrey: #5e88b0;
   --theme-highlight-purple: #6b7abb;
   --theme-highlight-lightorange: #d99b28;
   --theme-highlight-orange: #d96629;
   --theme-highlight-red: #eb5368;
   --theme-highlight-pink: #df80ff;
+
+  /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */
+  --theme-graphs-green: #70bf53;
+  --theme-graphs-blue: #46afe3;
+  --theme-graphs-purple: #df80ff;
+  --theme-graphs-yellow: #d99b28;
+  --theme-graphs-red: #eb5368;
+  --theme-graphs-grey: #757873;
 }
 
 .theme-body {
   background: var(--theme-body-background);
   color: var(--theme-body-color);
 }
 
 .theme-sidebar {
--- a/browser/themes/shared/devtools/light-theme.css
+++ b/browser/themes/shared/devtools/light-theme.css
@@ -29,16 +29,24 @@
   --theme-highlight-green: #2cbb0f;
   --theme-highlight-blue: #0088cc;
   --theme-highlight-bluegrey: #5f88b0;
   --theme-highlight-purple: #5b5fff;
   --theme-highlight-lightorange: #d97e00;
   --theme-highlight-orange: #f13c00;
   --theme-highlight-red: #ed2655;
   --theme-highlight-pink: #b82ee5;
+
+  /* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */
+  --theme-graphs-green: #85d175;
+  --theme-graphs-blue: #83b7f6;
+  --theme-graphs-purple: #b693eb;
+  --theme-graphs-yellow: #efc052;
+  --theme-graphs-red: #e57180;
+  --theme-graphs-grey: #cccccc;
 }
 
 .theme-body {
   background: var(--theme-body-background);
   color: var(--theme-body-color);
 }
 
 .theme-sidebar {
--- a/browser/themes/shared/devtools/performance.inc.css
+++ b/browser/themes/shared/devtools/performance.inc.css
@@ -488,51 +488,39 @@
 }
 
 .marker-details-bullet {
   width: 8px;
   height: 8px;
   border-radius: 1px;
 }
 
-#performance-filter-menupopup > menuitem.highlight-pink:before,
-.marker-details-bullet.highlight-pink,
-.waterfall-marker-bar.highlight-pink,
-.waterfall-marker-bullet.highlight-pink {
-  background-color: var(--theme-highlight-pink);
+menuitem.marker-color-graphs-purple:before,
+.marker-color-graphs-purple {
+  background-color: var(--theme-graphs-purple);
 }
-#performance-filter-menupopup > menuitem.highlight-bluegrey:before,
-.marker-details-bullet.highlight-bluegrey,
-.waterfall-marker-bar.highlight-bluegrey,
-.waterfall-marker-bullet.highlight-bluegrey {
-  background-color: var(--theme-highlight-bluegrey);
+menuitem.marker-color-graphs-grey:before,
+.marker-color-graphs-grey{
+  background-color: var(--theme-graphs-grey);
 }
-#performance-filter-menupopup > menuitem.highlight-green:before,
-.marker-details-bullet.highlight-green,
-.waterfall-marker-bar.highlight-green,
-.waterfall-marker-bullet.highlight-green {
-  background-color: var(--theme-highlight-green);
+menuitem.marker-color-graphs-green:before,
+.marker-color-graphs-green {
+  background-color: var(--theme-graphs-green);
 }
-#performance-filter-menupopup > menuitem.highlight-lightorange:before,
-.marker-details-bullet.highlight-lightorange,
-.waterfall-marker-bar.highlight-lightorange,
-.waterfall-marker-bullet.highlight-lightorange {
-  background-color: var(--theme-highlight-lightorange);
+menuitem.marker-color-graphs-yellow:before,
+.marker-color-graphs-yellow {
+  background-color: var(--theme-graphs-yellow);
 }
-#performance-filter-menupopup > menuitem.highlight-red:before,
-.marker-details-bullet.highlight-red,
-.waterfall-marker-bar.highlight-red,
-.waterfall-marker-bullet.highlight-red {
-  background-color: var(--theme-highlight-red);
+menuitem.marker-color-graphs-red:before,
+.marker-color-graphs-red {
+  background-color: var(--theme-graphs-red);
 }
-#performance-filter-menupopup > menuitem.highlight-purple:before,
-.marker-details-bullet.highlight-purple,
-.waterfall-marker-bar.highlight-purple,
-.waterfall-marker-bullet.highlight-purple {
-  background-color: var(--theme-highlight-purple);
+menuitem.marker-color-graphs-blue:before,
+.marker-color-graphs-blue {
+  background-color: var(--theme-graphs-blue);
 }
 
 #waterfall-details > * {
   padding-top: 3px;
 }
 
 .marker-details-labelname {
   -moz-padding-end: 4px;