popupMenu/switch: Use icons for state indicators

The indicators are currently part of the background image in the
high contrast theme. Using symbolic icons instead allows separating
the switch shapes from the high-contrast setting in the future.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3107>

data/gnome-shell-icons.gresource.xml

@@ -45,5 +45,7 @@
     <file preprocess="xml-stripblanks">scalable/status/no-notifications-symbolic.svg</file>
     <file preprocess="xml-stripblanks">scalable/status/screen-privacy-disabled-symbolic.svg</file>
     <file preprocess="xml-stripblanks">scalable/status/screen-privacy-symbolic.svg</file>
+    <file preprocess="xml-stripblanks">scalable/status/switch-on-symbolic.svg</file>
+    <file preprocess="xml-stripblanks">scalable/status/switch-off-symbolic.svg</file>
   </gresource>
 </gresources>

data/gnome-shell-theme.gresource.xml

@@ -17,10 +17,8 @@
     <file>process-working-light.svg</file>
     <file>process-working-dark.svg</file>
     <file>toggle-off.svg</file>
-    <file>toggle-off-hc.svg</file>
     <file>toggle-off-light.svg</file>
     <file>toggle-on.svg</file>
-    <file>toggle-on-hc.svg</file>
     <file>toggle-on-light.svg</file>
     <file>workspace-placeholder.svg</file>
   </gresource>

data/icons/scalable/status/switch-off-symbolic.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path style="color:#000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000;solid-opacity:1;vector-effect:none;fill:#000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000;stop-opacity:1;opacity:1" d="M7.979 295.738c-2.76 0-5.016 2.259-5.016 5.018s2.257 5.017 5.016 5.017c2.758 0 5.017-2.258 5.017-5.017 0-2.76-2.259-5.018-5.017-5.018zm0 2a3.003 3.003 0 0 1 3.017 3.018 3.003 3.003 0 0 1-3.017 3.017 3.001 3.001 0 0 1-3.016-3.017 3.001 3.001 0 0 1 3.016-3.018z" transform="translate(0 -292.767)"/></svg>

data/icons/scalable/status/switch-on-symbolic.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16"
+   height="16"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="on-symbolic.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="31.678384"
+     inkscape:cx="10.416792"
+     inkscape:cy="9.9204611"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px">
+    <inkscape:grid
+       type="xygrid"
+       id="grid815" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-292.76666)">
+    <rect
+       style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.58198857;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal"
+       id="rect817"
+       width="2"
+       height="9.9999971"
+       x="7"
+       y="295.76666" />
+  </g>
+</svg>

data/theme/gnome-shell-sass/widgets/_switches.scss

@@ -14,9 +14,5 @@ $switch_width: 48px;
     background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on-light.svg"),url("resource:///org/gnome/shell/theme/toggle-on.svg"));
   }
 
-  @if $contrast == 'high' {
+  & StIcon {icon-size: $base_icon_size;}
-    background-image: url("resource:///org/gnome/shell/theme/toggle-off-hc.svg");
-    &:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-hc.svg"); }
-  }
-
 }

data/theme/toggle-off-hc.svg

@@ -1 +0,0 @@
-<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)"><rect ry="11" rx="11" y="299.18" x="30" height="10" width="10" style="fill:none;fill-opacity:1;stroke:#f8f7f7;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none" fill="#f8f7f7" stroke-linecap="round" stroke-linejoin="round"/><rect style="fill:#fff;stroke:none;stroke-width:1;marker:none;fill-opacity:.4" width="48" height="26" x="-48" y="291.18" ry="13" fill="#3081e3" rx="13" transform="scale(-1 1)"/><rect ry="11" rx="11" y="293.18" x="-24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7" transform="scale(-1 1)"/></g></svg>

data/theme/toggle-on-hc.svg

@@ -1 +0,0 @@
-<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)" stroke="none"><rect style="fill:#3584e4;stroke:none;stroke-width:1;marker:none" width="48" height="26" y="291.18" ry="13" fill="#3081e3" rx="13"/><rect ry="11" rx="11" y="293.18" x="24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/></g><path style="fill:#f8f7f7;fill-opacity:1;stroke:none;stroke-width:2;stroke-linejoin:round;stroke-dashoffset:2" d="M14 7v12h-2V7Z"/></svg>

js/ui/popupMenu.js

@@ -340,11 +340,50 @@ export const Switch = GObject.registerClass({
     _init(state) {
         this._state = false;
 
+        const box = new St.BoxLayout({
+            x_expand: true,
+            y_expand: true,
+        });
+
         super._init({
             style_class: 'toggle-switch',
+            child: box,
             accessible_role: Atk.Role.CHECK_BOX,
             state,
         });
+
+        this._onIcon = new St.Icon({
+            icon_name: 'switch-on-symbolic',
+            x_expand: true,
+            x_align: Clutter.ActorAlign.CENTER,
+            y_align: Clutter.ActorAlign.CENTER,
+        });
+        box.add_child(this._onIcon);
+
+        this._offIcon = new St.Icon({
+            icon_name: 'switch-off-symbolic',
+            x_expand: true,
+            x_align: Clutter.ActorAlign.CENTER,
+            y_align: Clutter.ActorAlign.CENTER,
+        });
+        box.add_child(this._offIcon);
+
+        St.Settings.get().connectObject('notify::high-contrast',
+            () => this._updateIconOpacity(),
+            this);
+        this.connect('notify::state',
+            () => this._updateIconOpacity());
+        this._updateIconOpacity();
+    }
+
+    _updateIconOpacity() {
+        const activeOpacity = St.Settings.get().high_contrast
+            ? 255. : 0.;
+
+        this._onIcon.opacity = this.state
+            ? activeOpacity : 0.;
+        this._offIcon.opacity = this.state
+            ? 0. : activeOpacity;
     }
 
     get state() {