1 files changed, 195 insertions, 0 deletions
diff --git a/devtools/client/themes/webaudioeditor.css b/devtools/client/themes/webaudioeditor.css
new file mode 100644
index 000000000..3ba9dad88
--- /dev/null
+++ b/devtools/client/themes/webaudioeditor.css
@@ -0,0 +1,195 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Reload and waiting notices */
+.notice-container {
+  margin-top: -50vh;
+  color: var(--theme-body-color-alt);
+}
+
+#reload-notice {
+  font-size: 120%;
+}
+
+#waiting-notice {
+  font-size: 110%;
+}
+
+/* Context Graph */
+svg {
+  overflow: hidden;
+  -moz-box-flex: 1;
+  --arrow-color: var(--theme-splitter-color);
+  --text-color: var(--theme-body-color-alt);
+}
+
+.theme-dark svg {
+  --arrow-color: var(--theme-body-color-alt);
+}
+
+/* Edges in graph */
+.edgePath path {
+  stroke-width: 1px;
+  stroke: var(--arrow-color);
+}
+svg #arrowhead {
+  /* !important is needed to override inline style */
+  fill: var(--arrow-color) !important;
+}
+
+/* AudioParam connection edges */
+g.edgePath.param-connection path {
+  stroke-dasharray: 5,5;
+  stroke: var(--arrow-colo);
+}
+
+/* Labels in AudioParam connection should have background that match
+ * the main background so there's whitespace around the label, on top of the
+ * dotted lines. */
+g.edgeLabel rect {
+  fill: var(--theme-body-background);
+}
+g.edgeLabel tspan {
+  fill: var(--text-color);
+}
+
+/* Audio Nodes */
+.nodes rect {
+  stroke-width: 1px;
+  cursor: pointer;
+  stroke: var(--theme-splitter-color);
+  fill: var(--theme-toolbar-background);
+}
+
+/**
+ * Bypassed Nodes
+ */
+
+.theme-light .nodes g.bypassed rect {
+  fill: url(chrome://devtools/skin/images/filters.svg#bypass-light);
+}
+
+.theme-dark .nodes g.bypassed rect {
+  fill: url(chrome://devtools/skin/images/filters.svg#bypass-dark);
+}
+
+.nodes g.bypassed.selected rect {
+  stroke: var(--theme-selection-background);
+}
+
+.nodes g.bypassed text {
+  opacity: 0.6;
+}
+
+/**
+ * Selected Nodes
+ */
+.nodes g.selected rect {
+  fill: var(--theme-selection-background);
+}
+
+/* Don't style bypassed nodes text differently because it'd be illegible in light-theme */
+g.selected:not(.bypassed) text {
+  fill: var(--theme-selection-color);
+}
+
+
+/* Text in nodes and edges */
+text {
+  cursor: default; /* override the "text" cursor */
+  fill: var(--text-color);
+  font-size: 1.25em;
+  /* Make sure text stays inside its container in RTL locales */
+  direction: ltr;
+}
+
+.nodes text {
+  cursor: pointer;
+}
+
+/**
+ * Inspector Styles
+ */
+
+/* hide the variables view scope title as its redundant,
+ * because there's only one scope displayed. */
+.variables-view-scope > .title {
+  display: none;
+}
+
+#web-audio-inspector-title {
+  margin: 6px;
+}
+
+.web-audio-inspector .error {
+  background-image: url(images/alerticon-warning.png);
+  background-size: 13px 12px;
+  -moz-appearance: none;
+  opacity: 0;
+  transition: opacity .5s ease-out 0s;
+}
+
+#inspector-pane-toggle {
+  background: none;
+  box-shadow: none;
+  border: none;
+  list-style-image: var(--theme-pane-collapse-image);
+}
+
+#inspector-pane-toggle > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+#inspector-pane-toggle.pane-collapsed {
+  list-style-image: var(--theme-pane-expand-image);
+}
+
+/**
+ * Automation Styles
+ */
+
+#automation-param-toolbar .automation-param-button[selected] {
+  color: var(--theme-selection-color);
+  background-color: var(--theme-selection-background);
+}
+
+#automation-graph {
+  overflow: hidden;
+  -moz-box-flex: 1;
+}
+
+@media (min-resolution: 1.1dppx) {
+  .web-audio-inspector .error {
+    background-image: url(images/alerticon-warning@2x.png);
+  }
+}
+
+/**
+ * Inspector toolbar
+ */
+
+#audio-node-toolbar .bypass {
+  list-style-image: url(images/power.svg);
+}
+
+/**
+ * Responsive Styles
+ * `.devtools-responsive-container` takes care of most of
+ * the changing of host types.
+ */
+@media (max-width: 700px) {
+  /**
+   * Override the inspector toggle so it's always open
+   * in the portrait view, with the toggle button hidden.
+   */
+  #inspector-pane-toggle {
+    display: none;
+  }
+
+  #web-audio-inspector {
+    margin-left: 0px !important;
+    margin-right: 0px !important;
+  }
+}