Introduce icons with distinct shape for connection status display on the front wui...

This replaces the status display which was only distinct by color which is a usability issue for color-blind users.  This commit includes test coverage by way of pattern matching on rendered templates.  The PNG icons are conversions of original SVG source which I've included and placed in the public domain.

diff --git a/src/allmydata/test/test_system.py b/src/allmydata/test/test_system.py
index 957c14c3f4cf0126f88ca09975665f91495359bd..3b23b2f64ee02fa20c0e35f5b0b791daac6f9a3f 100644 (file)
--- a/src/allmydata/test/test_system.py
+++ b/src/allmydata/test/test_system.py
@@ -1114,7 +1114,7 @@ class SystemTest(SystemTestMixin, RunBinTahoeMixin, unittest.TestCase):
         d.addCallback(lambda res: getPage(self.helper_webish_url))
         def _got_welcome_helper(page):
             html = page.replace('\n', ' ')
-            self.failUnless(re.search(r'<div class="status-indicator connected-yes"></div>\s*<div>Helper</div>', html), page)
+            self.failUnless(re.search('<img src="img/connected-yes.png" alt="Connected" />', html), page)
             self.failUnlessIn("Not running helper", page)
         d.addCallback(_got_welcome_helper)
 

diff --git a/src/allmydata/test/test_web.py b/src/allmydata/test/test_web.py
index 8c5ead4ba62ff89b24be7ac24511e73ea0bfbfce..1f46cbf9cb2ed17bdac3da839cc82fd87c584223 100644 (file)
--- a/src/allmydata/test/test_web.py
+++ b/src/allmydata/test/test_web.py
@@ -649,7 +649,7 @@ class Web(WebMixin, WebErrorMixin, testutil.StallMixin, testutil.ReallyEqualMixi
             html = res.replace('\n', ' ')
             self.failUnlessIn('<div class="furl">pb://someIntroducer/[censored]</div>', html)
             self.failIfIn('pb://someIntroducer/secret', html)
-            self.failUnless(re.search('<div class="status-indicator connected-no"></div>[ ]*<div>Introducer not connected</div>', html), res)
+            self.failUnless(re.search('<img src="img/connected-no.png" alt="Disconnected" />', html), res)
         d.addCallback(_check_introducer_not_connected_unguessable)
 
         # introducer connected, unguessable furl
@@ -662,7 +662,7 @@ class Web(WebMixin, WebErrorMixin, testutil.StallMixin, testutil.ReallyEqualMixi
             html = res.replace('\n', ' ')
             self.failUnlessIn('<div class="furl">pb://someIntroducer/[censored]</div>', html)
             self.failIfIn('pb://someIntroducer/secret', html)
-            self.failUnless(re.search('<div class="status-indicator connected-yes"></div>[ ]*<div>Introducer</div>', html), res)
+            self.failUnless(re.search('<img src="img/connected-yes.png" alt="Connected" />', html), res)
         d.addCallback(_check_introducer_connected_unguessable)
 
         # introducer connected, guessable furl
@@ -674,7 +674,7 @@ class Web(WebMixin, WebErrorMixin, testutil.StallMixin, testutil.ReallyEqualMixi
         def _check_introducer_connected_guessable(res):
             html = res.replace('\n', ' ')
             self.failUnlessIn('<div class="furl">pb://someIntroducer/introducer</div>', html)
-            self.failUnless(re.search('<div class="status-indicator connected-yes"></div>[ ]*<div>Introducer</div>', html), res)
+            self.failUnless(re.search('<img src="img/connected-yes.png" alt="Connected" />', html), res)
         d.addCallback(_check_introducer_connected_guessable)
         return d
 
@@ -688,7 +688,7 @@ class Web(WebMixin, WebErrorMixin, testutil.StallMixin, testutil.ReallyEqualMixi
         d.addCallback(_set_no_helper)
         def _check_no_helper(res):
             html = res.replace('\n', ' ')
-            self.failUnless(re.search('<div class="status-indicator connected-not-configured"></div>[ ]*<div>Helper</div>', html), res)
+            self.failUnless(re.search('<img src="img/connected-not-configured.png" alt="Not Configured" />', html), res)
         d.addCallback(_check_no_helper)
 
         # enable helper, not connected
@@ -701,7 +701,7 @@ class Web(WebMixin, WebErrorMixin, testutil.StallMixin, testutil.ReallyEqualMixi
             html = res.replace('\n', ' ')
             self.failUnlessIn('<div class="furl">pb://someHelper/[censored]</div>', html)
             self.failIfIn('pb://someHelper/secret', html)
-            self.failUnless(re.search('<div class="status-indicator connected-no"></div>[ ]*<div>Helper not connected</div>', html), res)
+            self.failUnless(re.search('<img src="img/connected-no.png" alt="Disconnected" />', html), res)
         d.addCallback(_check_helper_not_connected)
 
         # enable helper, connected
@@ -714,7 +714,7 @@ class Web(WebMixin, WebErrorMixin, testutil.StallMixin, testutil.ReallyEqualMixi
             html = res.replace('\n', ' ')
             self.failUnlessIn('<div class="furl">pb://someHelper/[censored]</div>', html)
             self.failIfIn('pb://someHelper/secret', html)
-            self.failUnless(re.search('<div class="status-indicator connected-yes"></div>[ ]*<div>Helper</div>', html), res)
+            self.failUnless(re.search('<img src="img/connected-yes.png" alt="Connected" />', html), res)
         d.addCallback(_check_helper_connected)
         return d
 

diff --git a/src/allmydata/web/root.py b/src/allmydata/web/root.py
index 5f1d236719c473ec17192c85c5b8af236322cb38..8a9969c610f43a18097a8e904a3a19e35afa99d2 100644 (file)
--- a/src/allmydata/web/root.py
+++ b/src/allmydata/web/root.py
@@ -132,6 +132,12 @@ class Root(rend.Page):
     addSlash = True
     docFactory = getxmlfile("welcome.xhtml")
 
+    _connectedalts = {
+        "not-configured": "Not Configured",
+        "yes": "Connected",
+        "no": "Disconnected",
+        }
+
     def __init__(self, client, clock=None):
         rend.Page.__init__(self, client)
         self.client = client
@@ -222,6 +228,9 @@ class Root(rend.Page):
             return "yes"
         return "no"
 
+    def data_connected_to_introducer_alt(self, ctx, data):
+        return self._connectedalts[self.data_connected_to_introducer(ctx, data)]
+
     def data_helper_furl_prefix(self, ctx, data):
         try:
             uploader = self.client.getServiceNamed("uploader")
@@ -252,6 +261,9 @@ class Root(rend.Page):
             return "yes"
         return "no"
 
+    def data_connected_to_helper_alt(self, ctx, data):
+        return self._connectedalts[self.data_connected_to_helper(ctx, data)]
+
     def data_known_storage_servers(self, ctx, data):
         sb = self.client.get_storage_broker()
         return len(sb.get_all_serverids())
@@ -295,6 +307,7 @@ class Root(rend.Page):
             available_space = abbreviate_size(available_space)
         ctx.fillSlots("address", addr)
         ctx.fillSlots("connected", connected)
+        ctx.fillSlots("connected_alt", self._connectedalts[connected])
         ctx.fillSlots("connected-bool", bool(rhost))
         ctx.fillSlots("since", time.strftime(TIME_FORMAT,
                                              time.localtime(since)))

diff --git a/src/allmydata/web/static/img/connected-no.png b/src/allmydata/web/static/img/connected-no.png
new file mode 100644 (file)
index 0000000..ca32a8e
Binary files /dev/null and b/src/allmydata/web/static/img/connected-no.png differ

diff --git a/src/allmydata/web/static/img/connected-no.svg b/src/allmydata/web/static/img/connected-no.svg
new file mode 100644 (file)
index 0000000..f310eed
--- /dev/null
+++ b/src/allmydata/web/static/img/connected-no.svg
@@ -0,0 +1,22 @@
+<svg version="1.1"
+     baseProfile="full"
+     width="20" height="20"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <!-- Made by Nathan Wilcox on 2015-01-20.
+       This file is hereby placed into the public domain.
+  -->
+
+  <style>
+    /* <![CDATA[ */
+    line {
+    stroke: #aa0000;
+    stroke-width: 3.2;
+    stroke-linecap: round;
+    }
+    /* ]]> */
+  </style>
+
+  <line x1="2" y1="2" x2="18" y2="18" />
+  <line x1="18" y1="2" x2="2" y2="18" />
+</svg>

diff --git a/src/allmydata/web/static/img/connected-not-configured.png b/src/allmydata/web/static/img/connected-not-configured.png
new file mode 100644 (file)
index 0000000..3c66e6f
Binary files /dev/null and b/src/allmydata/web/static/img/connected-not-configured.png differ

diff --git a/src/allmydata/web/static/img/connected-not-configured.svg b/src/allmydata/web/static/img/connected-not-configured.svg
new file mode 100644 (file)
index 0000000..77ccb02
--- /dev/null
+++ b/src/allmydata/web/static/img/connected-not-configured.svg
@@ -0,0 +1,23 @@
+<svg version="1.1"
+     baseProfile="full"
+     width="20" height="20"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <!-- Made by Nathan Wilcox on 2015-01-20.
+       This file is hereby placed into the public domain.
+  -->
+
+  <style>
+    /* <![CDATA[ */
+    line, circle {
+    stroke: #444444;
+    stroke-width: 2.4;
+    stroke-linecap: round;
+    }
+    /* ]]> */
+  </style>
+
+  <circle cx="10" cy="10" r="8" fill="transparent" />
+
+  <line x1="15" y1="5" x2="5" y2="15" />
+</svg>

diff --git a/src/allmydata/web/static/img/connected-yes.png b/src/allmydata/web/static/img/connected-yes.png
new file mode 100644 (file)
index 0000000..e3fe597
Binary files /dev/null and b/src/allmydata/web/static/img/connected-yes.png differ

diff --git a/src/allmydata/web/static/img/connected-yes.svg b/src/allmydata/web/static/img/connected-yes.svg
new file mode 100644 (file)
index 0000000..fa1fd66
--- /dev/null
+++ b/src/allmydata/web/static/img/connected-yes.svg
@@ -0,0 +1,22 @@
+<svg version="1.1"
+     baseProfile="full"
+     width="20" height="20"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <!-- Made by Nathan Wilcox on 2015-01-20.
+       This file is hereby placed into the public domain.
+  -->
+
+  <style>
+    /* <![CDATA[ */
+    line {
+    stroke: #00aa00;
+    stroke-width: 3.2;
+    stroke-linecap: round;
+    }
+    /* ]]> */
+  </style>
+
+  <line x1="2" y1="10" x2="8" y2="18" />
+  <line x1="18" y1="2" x2="8" y2="18" />
+</svg>

diff --git a/src/allmydata/web/welcome.xhtml b/src/allmydata/web/welcome.xhtml
index 72a2be169e3b81023011b16a9c771eb0d51d95f5..c4774c8138f3fadab2b481596c316d9f18ec74ce 100644 (file)
--- a/src/allmydata/web/welcome.xhtml
+++ b/src/allmydata/web/welcome.xhtml
@@ -137,14 +137,14 @@
               <div class="span6">
                 <div>
                   <h3>
-                    <div><n:attr name="class">status-indicator connected-<n:invisible n:render="string" n:data="connected_to_introducer" /></n:attr></div>
+                    <img><n:attr name="src">img/connected-<n:invisible n:render="string" n:data="connected_to_introducer" />.png</n:attr><n:attr name="alt"><n:invisible n:render="string" n:data="connected_to_introducer_alt" /></n:attr></img>
                     <div n:render="string" n:data="introducer_description" />
                   </h3>
                   <div class="furl" n:render="string" n:data="introducer_furl_prefix" />
                 </div>
                 <div>
                   <h3>
-                    <div><n:attr name="class">status-indicator connected-<n:invisible n:render="string" n:data="connected_to_helper" /></n:attr></div>
+                    <img><n:attr name="src">img/connected-<n:invisible n:render="string" n:data="connected_to_helper" />.png</n:attr><n:attr name="alt"><n:invisible n:render="string" n:data="connected_to_helper_alt" /></n:attr></img>
                     <div n:render="string" n:data="helper_description" />
                   </h3>
                   <div class="furl" n:render="string" n:data="helper_furl_prefix" />
@@ -178,7 +178,7 @@
             </thead>
             <tr n:pattern="item" n:render="service_row">
               <td class="nickname-and-peerid">
-              <div><n:attr name="class">status-indicator connected-<n:slot name="connected"/></n:attr></div>
+              <img><n:attr name="src">img/connected-<n:slot name="connected" />.png</n:attr><n:attr name="alt"><n:slot name="connected_alt" /></n:attr></img>
                 <div class="nickname"><n:slot name="nickname"/></div>
                 <div class="nodeid"><n:slot name="peerid"/></div>
               </td>