Merge branch 'pr136' (WUI accessibility fix #1961)

This closes ticket:1961 .

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)
 

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
 

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)))

src/allmydata/web/static/css/new-tahoe.css

@@ -46,7 +46,7 @@ body {
     margin-bottom: 20px;
 }
 
-.grid-status .status-indicator {
+.grid-status {
     margin-top: 5px;
 }
 
@@ -75,23 +75,5 @@ body {
 
 .status-indicator {
     float: left;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    display: inline-block;
-    vertical-align: middle;
-    margin-right: 4px;
-    margin-top: 2px;
-}
-
-.connected-yes {
-    background: #468847;
-}
-
-.connected-no {
-    background: #B94A48;
-}
-
-.connected-not-configured {
-    background: #444444;
+    margin: 5px;
 }

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>

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>

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>

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>
+                    <div class="status-indicator"><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>
                     <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>
+                    <div class="status-indicator"><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>
                     <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>
+              <div class="status-indicator"><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>
                 <div class="nickname"><n:slot name="nickname"/></div>
                 <div class="nodeid"><n:slot name="peerid"/></div>
               </td>