Add breadcrumbs for website mode

onionshare/web/send_base_mode.py

@@ -90,9 +90,15 @@ class SendBaseModeWeb:
             'status_code': 200
         })
 
+        breadcrumbs = [('☗', '/')]
+        parts = path.split('/')[:-1]
+        for i in range(len(parts)):
+            breadcrumbs.append(('{}'.format(parts[i]), '/{}/'.format('/'.join(parts[0:i+1]))))
+        breadcrumbs_leaf = breadcrumbs.pop()[0]
+
         # If filesystem_path is None, this is the root directory listing
         files, dirs = self.build_directory_listing(filenames, filesystem_path)
-        r = self.directory_listing_template(path, files, dirs)
+        r = self.directory_listing_template(path, files, dirs, breadcrumbs, breadcrumbs_leaf)
         return self.web.add_security_headers(r)
 
     def build_directory_listing(self, filenames, filesystem_path):

onionshare/web/share_mode.py

@@ -168,7 +168,7 @@ class ShareModeWeb(SendBaseModeWeb):
                 r.headers.set('Content-Type', content_type)
             return r
 
-    def directory_listing_template(self, path, files, dirs):
+    def directory_listing_template(self, path, files, dirs, breadcrumbs, breadcrumbs_leaf):
         return make_response(render_template(
             'send.html',
             file_info=self.file_info,

share/static/css/style.css

@@ -74,6 +74,30 @@ a.button:visited {
   bottom: 10px;
 }
 
+ul.breadcrumbs {
+  display: block;
+  list-style: none;
+  margin: 10px 0;
+  padding: 0;
+}
+
+ul.breadcrumbs li {
+  display: inline-block;
+  list-style: none;
+  margin: 0;
+  padding: 5px;
+  color: #999999;
+}
+
+ul.breadcrumbs li span.sep {
+  padding-left: 5px;
+}
+
+ul.breadcrumbs li a:link, ul.breadcrumbs li a:visited {
+  color: #666666;
+  border-bottom: 1px solid #666666;
+}
+
 table.file-list {
   width: 100%;
   margin: 0 auto;

share/templates/listing.html

@@ -12,6 +12,12 @@
       <h1>OnionShare</h1>
     </header>
 
+    {% if breadcrumbs %}
+      <ul class="breadcrumbs">
+        {% for breadcrumb in breadcrumbs %}<li><a href="{{ breadcrumb[1] }}">{{ breadcrumb[0] }}</a> <span class="sep">&#8227;</span></li>{% endfor %}<li>{{ breadcrumbs_leaf }}</li>
+      </ul>
+    {% endif %}
+
     <table class="file-list" id="file-list">
       <tr>
         <th id="filename-header">Filename</th>