telemetrygodev: remove accented background of chart content

While the background color offset of the previous CL helps the charts stand out as individual elements, it is better for the charts to have a white background. Also, address a TODO do use the same breadcrumbs glyph as go.dev. For golang/go#68204 Change-Id: Ife15684efed86e9683a83b3f912c5c56a51b48d4 Reviewed-on: https://go-review.googlesource.com/c/telemetry/+/599595 Reviewed-by: Hongxiang Jiang <[email protected]> Reviewed-by: Hyang-Ah Hana Kim <[email protected]> LUCI-TryBot-Result: Go LUCI <[email protected]>
golang · Jul 23, 2024 · ccdfb41 · ccdfb41
1 parent a33788e
commit ccdfb41
Show file tree

Hide file tree

Showing 16 changed files with 36 additions and 30 deletions.
diff --git a/godev/devtools/cmd/esbuild/main.go b/godev/devtools/cmd/esbuild/main.go
@@ -59,6 +59,7 @@ func main() {
 			MinifyIdentifiers: true,
 			MinifySyntax:      true,
 			OutExtension:      map[string]string{".css": ".min.css", ".js": ".min.js"},
+			External:          []string{"*.svg"},
 			Outdir:            *outdir,
 			Sourcemap:         api.SourceMapLinked,
 			Write:             true,

diff --git a/internal/content/gotelemetryview/static/index.min.css b/internal/content/gotelemetryview/static/index.min.css
diff --git a/internal/content/gotelemetryview/static/index.min.css.map b/internal/content/gotelemetryview/static/index.min.css.map
diff --git a/internal/content/shared/base.css b/internal/content/shared/base.css
@@ -29,9 +29,8 @@
   font-size: 0.875rem;
 }
 .Breadcrumb li:not(:last-child):after {
-  /* TODO(rfindley): use this arrow instead, from go.dev */
-  /* background: url("arrow-forward.svg") no-repeat; */
-  content: '>';
+  background: url("./arrow-forward.svg") no-repeat;
+  content: "";
   display: block;
   height: 1rem;
   margin: 0 0.8125rem;

diff --git a/internal/content/shared/chartbrowser.css b/internal/content/shared/chartbrowser.css
@@ -17,7 +17,7 @@ svg g[aria-label="tip"] g {
 }
 .Chartbrowser-index {
   flex: 1 1;
-  padding-right: 2rem;
+  padding: 0 1.5rem 0 0;
 }
 .Chartbrowser-heading {
   font-weight: bold;
@@ -42,13 +42,12 @@ svg g[aria-label="tip"] g {
 .Chartbrowser-program {
   font-weight: normal;
   margin: 0 0 1rem 0;
-  color: var(--color-text-subtle);
 }
 .Chartbrowser-program:not(:first-of-type) {
   margin-top: 2rem;
 }
 .Chartbrowser-chart {
-  background-color: var(--color-background-accented);
+  background-color: var(--color-background);
   border: 1px solid transparent;
   margin-bottom: 1rem;
   padding: 0.875rem;

diff --git a/internal/content/shared/static/arrow-forward.svg b/internal/content/shared/static/arrow-forward.svg
diff --git a/internal/content/shared/static/base.min.css b/internal/content/shared/static/base.min.css