Show different icons depending on connection state

extension.js

@@ -19,6 +19,7 @@ along with gnome-shell-extension-tor.  If not, see <http://www.gnu.org/licenses/
 */
 'use strict';
 
+const Gtk = imports.gi.Gtk;
 const Main = imports.ui.main;
 
 const Me = imports.misc.extensionUtils.getCurrentExtension();
@@ -29,20 +30,15 @@ let torButton = null;
 let torControlClient = null;
 
 function init(extensionMeta) {
-    let theme = imports.gi.Gtk.IconTheme.get_default();
+    let theme = Gtk.IconTheme.get_default();
     theme.append_search_path(extensionMeta.path + "/icons");
 }
 
 function enable() {
-    try {
     torControlClient = new TorControlClient();
     torButton = new TorButton(torControlClient);
     Main.panel.addToStatusArea(torButton.Name, torButton);
-    } catch (e) {
+    torControlClient.openConnection();
-        log(e);
-        Main.notifyError('Error starting extension: ' + e);
-        disable();
-    }
 }
 
 function disable() {

icons/tor-disconnected.svg

@@ -0,0 +1,181 @@
+<?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:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="tor-disabled.svg"
+   height="16"
+   id="svg7384"
+   inkscape:version="0.48.5 r10040"
+   version="1.1"
+   width="16">
+  <metadata
+     id="metadata90">
+    <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>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:bbox-paths="false"
+     bordercolor="#666666"
+     borderopacity="1"
+     inkscape:current-layer="layer11"
+     inkscape:cx="-6.2848511"
+     inkscape:cy="8.0949455"
+     gridtolerance="10"
+     inkscape:guide-bbox="true"
+     guidetolerance="10"
+     id="namedview88"
+     inkscape:object-nodes="false"
+     inkscape:object-paths="false"
+     objecttolerance="10"
+     pagecolor="#555753"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     showborder="false"
+     showgrid="true"
+     showguides="true"
+     inkscape:snap-bbox="true"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:snap-global="true"
+     inkscape:snap-grids="true"
+     inkscape:snap-nodes="false"
+     inkscape:snap-others="false"
+     inkscape:snap-to-guides="true"
+     inkscape:window-height="873"
+     inkscape:window-maximized="1"
+     inkscape:window-width="1600"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:zoom="8">
+    <inkscape:grid
+       empspacing="2"
+       enabled="true"
+       id="grid4866"
+       originx="-42.000009px"
+       originy="412px"
+       snapvisiblegridlinesonly="true"
+       spacingx="1px"
+       spacingy="1px"
+       type="xygrid"
+       visible="true" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="3.4692426,9.4354561"
+       id="guide4029" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer9"
+     inkscape:label="status"
+     style="display:inline"
+     transform="translate(-283.00021,-629)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer10"
+     inkscape:label="devices"
+     transform="translate(-283.00021,-629)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer11"
+     inkscape:label="apps"
+     style="display:inline"
+     transform="translate(-283.00021,-629)">
+    <path
+       style="fill:#808080;fill-opacity:1"
+       id="path4380"
+       d="m 294.64629,626.00001 c -1.30605,0.94094 -2.44362,2.00854 -3.15977,3.42675 l 0.50573,-2.00855 c -0.75673,1.34839 -1.27592,2.74292 -1.4418,4.10633 l -1.01543,-0.67957 -0.18237,0.14037 c 0.91286,1.64289 0.43566,2.51364 -0.0137,2.82261 -0.91287,0.63194 -2.24732,1.41821 -2.90722,2.1063 -1.278,1.30594 -1.64341,2.55583 -1.53104,4.19882 0.12638,2.10652 1.65734,3.86167 3.70751,4.54977 0.89866,0.29499 1.72719,0.33716 2.65403,0.33716 1.48856,0 3.01928,-0.39297 4.12864,-1.31981 1.17956,-0.98296 1.88195,-2.45763 1.88195,-3.98824 0,-1.54471 -0.64603,-3.00555 -1.78355,-4.04468 -0.60388,-0.54762 -1.36256,-0.99661 -2.14894,-1.43196 -0.35104,-0.19669 -1.43239,-1.03903 -1.06726,-2.24668 l -0.78191,-0.10694 c 1.08506,-1.6987 2.49674,-3.38715 4.26442,-4.96302 -1.36208,0.46343 -2.5693,1.16579 -3.46808,2.42969 0.53364,-1.10935 1.40394,-2.21901 2.35884,-3.32836 z"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccccccscscccccccc" />
+    <g
+       id="g3022"
+       transform="translate(-0.30935919,0.85355502)">
+      <path
+         inkscape:connector-curvature="0"
+         id="path3018"
+         d="m 285.03314,632.1395 12.77212,12.77211"
+         style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m 297.80525,632.13949 -12.77211,12.77212"
+         id="path3020"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer1"
+     inkscape:label="on"
+     style="display:none">
+    <path
+       id="path4114"
+       style="fill:none;stroke:#ffffff;stroke-width:1.29999995;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline"
+       d="m 4.2625534,6.1750293 c 0,0 1.1491587,-0.6278903 1.1863897,-1.6606918 C 5.4861331,3.4826637 4.4603025,2.976995 4.4672485,2.0317235 4.4736485,1.1539862 5.6337624,0.28329388 5.6337624,0.28329388"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cscc" />
+    <use
+       x="0"
+       y="0"
+       xlink:href="#path4114"
+       id="use4118"
+       transform="translate(3.3258259,0)"
+       width="16"
+       height="16" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="off"
+     style="display:inline" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer13"
+     inkscape:label="places"
+     transform="translate(-283.00021,-629)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer14"
+     inkscape:label="mimetypes"
+     transform="translate(-283.00021,-629)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer15"
+     inkscape:label="emblems"
+     style="display:inline"
+     transform="translate(-283.00021,-629)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g71291"
+     inkscape:label="emotes"
+     style="display:inline"
+     transform="translate(-283.00021,-629)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g4953"
+     inkscape:label="categories"
+     style="display:inline"
+     transform="translate(-283.00021,-629)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer12"
+     inkscape:label="actions"
+     style="display:inline"
+     transform="translate(-283.00021,-629)" />
+</svg>

tor_control_client.js

@@ -21,25 +21,28 @@ along with gnome-shell-extension-tor.  If not, see <http://www.gnu.org/licenses/
 
 const Gio = imports.gi.Gio;
 const Lang = imports.lang;
+const Signals = imports.signals;
 
 const TorControlClient = new Lang.Class({
     Name: 'TorControlClient',
 
-    _init: function() {
+    openConnection: function() {
         this._connect();
         this._updateProtocolInfo();
         this._ensureProtocolCompatibility();
-        this.authenticate();
+        this._authenticate();
+        this.emit('changed-connection-state', 'connected');
     },
 
-    close: function() {
+    closeConnection: function() {
         if (this._connection.is_connected()) {
             this._outputStream.close(null);
             this._inputStream.close(null);
+            this.emit('changed-connection-state', 'disconnected');
         }
     },
 
-    authenticate: function() {
+    _authenticate: function() {
         var cookie = this._readAuthCookie();
         var reply = this._runCommand('AUTHENTICATE ' + cookie);
 
@@ -52,6 +55,7 @@ const TorControlClient = new Lang.Class({
         var reply = this._runCommand('SIGNAL NEWNYM');
 
         if (reply.statusCode != 250) {
+            this.emit('changed-connection-state', 'failed');
             throw 'Could not change Tor identity, reason: ' + reply.replyLines.join('\n');
         }
     },
@@ -158,3 +162,4 @@ const TorControlClient = new Lang.Class({
     }
 });
 
+Signals.addSignalMethods(TorControlClient.prototype);

ui/tor_button.js

@@ -27,7 +27,8 @@ const St = imports.gi.St;
 const Me = imports.misc.extensionUtils.getCurrentExtension();
 const TorPopupMenu = Me.imports.ui.tor_popup_menu.TorPopupMenu;
 
-const TorIcon = 'tor';
+const TorConnectedIcon = 'tor-connected';
+const TorDisconnectedIcon = 'tor-disconnected';
 
 const TorButton = new Lang.Class({
     Name: 'TorButton',
@@ -38,8 +39,13 @@ const TorButton = new Lang.Class({
 
         this._torControlClient = torControlClient;
 
+        this._buildUi();
+        this._bindEvents();
+    },
+
+    _buildUi: function() {
         this._icon = new St.Icon({
-            icon_name: TorIcon,
+            icon_name: TorDisconnectedIcon,
             style_class: 'system-status-icon'
         });
 
@@ -47,5 +53,21 @@ const TorButton = new Lang.Class({
 
         this._menu = new TorPopupMenu(this.actor, this._torControlClient);
         this.setMenu(this._menu);
+    },
+
+    _bindEvents: function() {
+        this._torControlClient.connect('changed-connection-state', Lang.bind(this, this._changedConnectionState));
+    },
+
+    _changedConnectionState: function(source, state) {
+        log('NEW STATE: ' + state);
+        switch (state) {
+            case 'connected':
+                this._icon.icon_name = TorConnectedIcon;
+                break;
+            case 'disconnected':
+                this._icon.icon_name = TorDisconnectedIcon;
+                break;
+        }
     }
 });