Update graph styles for legibility.
authorjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 12 Oct 2015 23:20:24 +0000 (23:20 +0000)
committerjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 12 Oct 2015 23:20:24 +0000 (23:20 +0000)
https://bugs.webkit.org/show_bug.cgi?id=150052
<rdar://problem/23078503>

Reviewed by Dean Jackson.

* Animometer/runner/resources/animometer.css: Update colors and
stroke thicknesses to make the graphs easier to read.
(.smaple-time): Correct to .sample-time
* Animometer/runner/resources/graph.js:
(graph): Ditto.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@190901 268f45cc-cd09-0410-ab3c-d52691b4dbfc

PerformanceTests/Animometer/runner/resources/animometer.css
PerformanceTests/Animometer/runner/resources/graph.js
PerformanceTests/ChangeLog

index 65b56af..1da3360 100644 (file)
@@ -186,36 +186,38 @@ button:focus {
 .axis path,
 .axis line {
   fill: none;
-  stroke: rgb(235, 235, 235);
+  stroke: #999;
   shape-rendering: crispEdges;
 }
 
 .left-samples {
   fill: none;
-  stroke: steelblue;
+  stroke: #7ADD49;
   stroke-width: 1.5px;
 }
 
 .right-samples {
     fill: none;
-    stroke: red;
+    stroke: #FA4925;
     stroke-width: 1.5px;
 }
 
-.smaple-time {
+.sample-time {
     fill: none;
-    stroke: green;
-    stroke-width: 1.5px;
+    stroke: #5493D6;
+    stroke-width: 1px;
 }
 
 .left-mean {
     fill: none;
-    stroke: yellow;
-    stroke-width: 1.5px;
+    stroke: #7ADD49;
+    stroke-width: 1px;
+    opacity: .8;
 }
 
 .right-mean {
     fill: none;
-    stroke: magenta;
-    stroke-width: 1.5px;
+    stroke: #FA4925;
+    stroke-width: 1px;
+    opacity: .8;
 }
index c2098fb..d0b1034 100644 (file)
@@ -76,13 +76,13 @@ function graph(selector, size, margins, axes, samples, samplingTimeOffset)
     // yLeft-axis
     svg.append("g")
         .attr("class", "y axis")
-        .attr("fill", "steelblue")
+        .attr("fill", "#7ADD49")
         .call(yAxisLeft)
         .append("text")
             .attr("class", "label")
             .attr("transform", "rotate(-90)")
             .attr("y", 6)
-            .attr("fill", "steelblue")
+            .attr("fill", "#7ADD49")
             .attr("dy", ".71em")
             .style("text-anchor", "end")
             .text(axes[0]);
@@ -90,14 +90,14 @@ function graph(selector, size, margins, axes, samples, samplingTimeOffset)
     // yRight-axis
     svg.append("g")
         .attr("class", "y axis")
-        .attr("fill", "red")
+        .attr("fill", "#FA4925")
         .attr("transform", "translate(" + size.width + ", 0)")
         .call(yAxisRight)
         .append("text")
             .attr("class", "label")
             .attr("transform", "rotate(-90)")
             .attr("y", 6)
-            .attr("fill", "red")
+            .attr("fill", "#FA4925")
             .attr("dy", ".71em")
             .style("text-anchor", "end")
             .text(axes[1]);
@@ -124,7 +124,7 @@ function graph(selector, size, margins, axes, samples, samplingTimeOffset)
         .attr("x2", x(samplingTimeOffset))
         .attr("y1", yLeft(0))
         .attr("y2", yLeft(yAxisLeft.scale().domain()[1]))
-        .attr("class", "smaple-time");
+        .attr("class", "sample-time");
 
     // left-samples
     svg.append("path")
index e05d6ac..c6d973b 100644 (file)
@@ -1,3 +1,17 @@
+2015-10-12  Jon Lee  <jonlee@apple.com>
+
+        Update graph styles for legibility.
+        https://bugs.webkit.org/show_bug.cgi?id=150052
+        <rdar://problem/23078503>
+
+        Reviewed by Dean Jackson.
+
+        * Animometer/runner/resources/animometer.css: Update colors and
+        stroke thicknesses to make the graphs easier to read.
+        (.smaple-time): Correct to .sample-time
+        * Animometer/runner/resources/graph.js:
+        (graph): Ditto.
+
 2015-10-12  Filip Pizlo  <fpizlo@apple.com>
 
         Unreviewed, revert an unintended commit.