commit 9131f08a23bd5923d135df15da30b322748ffa12
author Bradford Lamson-Scribner <brad.lamson@gmail.com> Tue Mar 10 21:26:42 2020 -0600
committer Josh Bleecher Snyder <josharian@gmail.com> Fri Mar 27 23:30:02 2020 +0000
tree c5796dbf1dd1ae3f158de2a0a0c5e1603af3bb56
parent 9ceb1e5f5caca5666f9db50864c45ca1f88da1df

cmd/compile: add dark mode functionality to CFGs in the ssa.html output

add dark mode to CFGs in the ssa.html output by targeting individual
parts of each svg and applying dark mode styles to the stroke & fill.

Fixes #37767

Change-Id: Ic867e161c6837c26d9d735ea02bc94fdb56102f6
Reviewed-on: https://go-review.googlesource.com/c/go/+/222877
Reviewed-by: Josh Bleecher Snyder <josharian@gmail.com>
Run-TryBot: Josh Bleecher Snyder <josharian@gmail.com>
TryBot-Result: Gobot Gobot <gobot@golang.org>

src/cmd/compile/internal/ssa/html.go

diff --git a/src/cmd/compile/internal/ssa/html.go b/src/cmd/compile/internal/ssa/html.go
index 54fa54a..1eed224 100644
--- a/src/cmd/compile/internal/ssa/html.go
+++ b/src/cmd/compile/internal/ssa/html.go
@@ -263,6 +263,14 @@
     border: 1px solid gray;
 }
 
+body.darkmode text {
+    fill: white;
+}
+
+body.darkmode svg polygon:first-child {
+    fill: rgb(21, 21, 21);
+}
+
 .highlight-aquamarine     { background-color: aquamarine; color: black; }
 .highlight-coral          { background-color: coral; color: black; }
 .highlight-lightpink      { background-color: lightpink; color: black; }
@@ -304,7 +312,7 @@
     color: gray;
 }
 
-.outline-blue           { outline: blue solid 2px; }
+.outline-blue           { outline: #2893ff solid 2px; }
 .outline-red            { outline: red solid 2px; }
 .outline-blueviolet     { outline: blueviolet solid 2px; }
 .outline-darkolivegreen { outline: darkolivegreen solid 2px; }
@@ -316,7 +324,7 @@
 .outline-maroon         { outline: maroon solid 2px; }
 .outline-black          { outline: black solid 2px; }
 
-ellipse.outline-blue           { stroke-width: 2px; stroke: blue; }
+ellipse.outline-blue           { stroke-width: 2px; stroke: #2893ff; }
 ellipse.outline-red            { stroke-width: 2px; stroke: red; }
 ellipse.outline-blueviolet     { stroke-width: 2px; stroke: blueviolet; }
 ellipse.outline-darkolivegreen { stroke-width: 2px; stroke: darkolivegreen; }
@@ -642,12 +650,35 @@
 function toggleDarkMode() {
     document.body.classList.toggle('darkmode');
 
+    // Collect all of the "collapsed" elements and apply dark mode on each collapsed column
     const collapsedEls = document.getElementsByClassName('collapsed');
     const len = collapsedEls.length;
 
     for (let i = 0; i < len; i++) {
         collapsedEls[i].classList.toggle('darkmode');
     }
+
+    // Collect and spread the appropriate elements from all of the svgs on the page into one array
+    const svgParts = [
+        ...document.querySelectorAll('path'),
+        ...document.querySelectorAll('ellipse'),
+        ...document.querySelectorAll('polygon'),
+    ];
+
+    // Iterate over the svgParts specifically looking for white and black fill/stroke to be toggled.
+    // The verbose conditional is intentional here so that we do not mutate any svg path, ellipse, or polygon that is of any color other than white or black.
+    svgParts.forEach(el => {
+        if (el.attributes.stroke.value === 'white') {
+            el.attributes.stroke.value = 'black';
+        } else if (el.attributes.stroke.value === 'black') {
+            el.attributes.stroke.value = 'white';
+        }
+        if (el.attributes.fill.value === 'white') {
+            el.attributes.fill.value = 'black';
+        } else if (el.attributes.fill.value === 'black') {
+            el.attributes.fill.value = 'white';
+        }
+    });
 }
 
 </script>
@@ -1016,7 +1047,7 @@
 				arrow = "dotvee"
 				layoutDrawn[s.b.ID] = true
 			} else if isBackEdge(b.ID, s.b.ID) {
-				color = "blue"
+				color = "#2893ff"
 			}
 			fmt.Fprintf(pipe, `%v -> %v [label=" %d ",style="%s",color="%s",arrowhead="%s"];`, b, s.b, i, style, color, arrow)
 		}