1006875 - Styling graph for web audio editor

Status: RESOLVED FIXED

(DevTools Graveyard :: Web Audio Editor, defect)

Description

[Victor Porof [:vporof][:vp]]

Attachment: Screen Shot 2014-05-06 at 7.16.29 PM.png

See screenshot.

Comment 1

[Jordan Santell [:jsantell] [@jsantell]]

Let's be honest here -- looks really bad.

Also, the SVG arrows are missing on light theme, as those can't be styled (afaik in my limited svg knowledge) by css, but must be done dynamically

Comment 2

[Jordan Santell [:jsantell] [@jsantell]]

Changing this to be a bug for styling graphs in both light and dark theme as they both need it badly. Pinging Darrin!

Comment 3

[Jordan Santell [:jsantell] [@jsantell]]

Attachment: 1006875-graph-styling-web-audio-editor.patch

Added some new styles to the graph, as well as added a handler for changing the marker styling (the arrows in the graph) when the theme changes, as that cannot be currently done with styles (although spec'd for svg2).

Comment 4

[Jordan Santell [:jsantell] [@jsantell]]

Attachment: Light Theme

Comment 5

[Jordan Santell [:jsantell] [@jsantell]]

Attachment: dark theme

Comment 6

[Jordan Santell [:jsantell] [@jsantell]]

Try for pref toggling: https://tbpl.mozilla.org/?tree=Try&rev=1edfd9caee01

Comment 7

[Victor Porof [:vporof][:vp]]

Comment on attachment 8425111 [details] [diff] [review]
1006875-graph-styling-web-audio-editor.patch

Review of attachment 8425111 [details] [diff] [review]:
-----------------------------------------------------------------

Pretty code, pretty nodes.

::: browser/themes/shared/devtools/webaudioeditor.inc.css
@@ +50,5 @@
>    fill: none;
>  }
>  
> +.theme-dark .edgePath path { stroke: #CED3D9; }
> +.theme-light .edgePath path { stroke: #AAA; }

Assuming you're using the standard palette, can you please document the color names? It'll be helpful when we switch to CSS vars.

@@ +60,5 @@
>  }
>  
>  .theme-dark .nodes rect {
> +  stroke: #252C33;
> +  fill: #343C45;

Ditto here and everywhere else.

@@ +65,4 @@
>  }
>  
>  .theme-light .nodes rect {
> +  fill: #F0F1F2;

Also, nit: the prevailing hex color format in the devtools codebase is #lowercase #chars. Not feeling strongly about it though.

Comment 8

[Jordan Santell [:jsantell] [@jsantell]]

Attachment: 1006875-graph-styling-web-audio-editor.patch

Updated to using dev tools colors, and using comments on their variable names, with lowercase hex values

Comment 9

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/integration/fx-team/rev/8103a9571444

Comment 10

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/8103a9571444