css: Clean up left sidebar chevrons.

This is a fairly big commit, but at the end
it simplifies a lot of things.

It's difficult to fix highly coupled code in
incremental steps because, well, it's highly
coupled code.

The main thing this does is give each type of
chevron in the left sidebar its own class

    * all-messages-arrow (NEW)
    * stream-sidebar-arrow
    * topic-sidebar-arrow

Before this change, the "All messages" chevron
was using stream-sidebar-arrow, which was a
strange name for something that's not actually
in the stream sidebar. Obviously this was
cargo culted.

There was not much JS to change here--we just
fix the click handler for "All messsages".

And then there's a one-line change to the template,
and the rest is re-organizing the CSS.

static/js/stream_popover.js

@@ -222,7 +222,7 @@ exports.register_click_handlers = function () {
         });
     });
 
-    $('#global_filters').on('click', '.stream-sidebar-arrow', build_all_messages_popover);
+    $('#global_filters').on('click', '.all-messages-arrow', build_all_messages_popover);
 
     exports.register_stream_handlers();
     exports.register_topic_handlers();

static/styles/left-sidebar.scss

@@ -245,36 +245,6 @@ a.conversation-partners:hover {
     text-decoration: underline;
 }
 
-/*
-
-    The .arrow class is used in Zulip for chevrons,
-    but it's also used by popover for the little
-    triangle in the popovers.  We are moving to
-    eliminating the arrow class and using more concrete
-    classes for chevrons.  Here is an audit of the existing
-    state:
-
-        All messages:
-            has stream-sidebar-arrow (why?????)
-            ul.filters .arrow (right: 10px, etc.)
-
-        Private messages:
-            no chevrons
-
-        stream chevron
-            has stream-sidebar-arrow (ok)
-            ul.filters .arrow (right: 10px, etc.)
-
-        topic chevron:
-            ul.filters .topic-sidebar-arrow (ok, smaller font)
-
-            ul.filters .arrow:
-                keeps position, right
-                ignores top, font-size, display
-                display would be none either way
-
-*/
-
 ul.filters i {
     padding-right: 0.25em;
     /* Make filter icons the same width so labels line up. */
@@ -282,42 +252,59 @@ ul.filters i {
     width: 13px;
 }
 
-ul.filters .arrow {
+/*
+    All of our left sidebar handlers use absolute
+    positioning.  We should fix that.
+*/
+.all-messages-arrow,
+.stream-sidebar-arrow,
+.topic-sidebar-arrow {
     position: absolute;
-    top: 2px;
-    right: 10px;
-    font-size: 0.8em;
     display: none;
 }
 
-ul.filters li:hover .arrow {
+/*
-    display: inline;
+    The All Messages and Stream chevrons are
-    cursor: pointer;
+    pretty similar.
-    color: hsl(0, 0%, 53%);
+*/
+.all-messages-arrow,
+.stream-sidebar-arrow {
+    top: 2px;
+    right: 10px;
+    font-size: 0.8em;
 }
 
-ul.filters li .arrow:hover {
+/*
-    display: inline;
+    For topic chevrons we use a slightly smaller
-    cursor: pointer;
+    font to show they're "lower" in the hierarchy,
-    color: hsl(0, 0%, 0%);
+    which also affects it positioning.
-}
+*/
-
+.topic-sidebar-arrow {
-ul.filters .topic-sidebar-arrow {
-    font-size: 0.7em;
     top: 1px;
-    display: none !important;
+    right: 10px;
+    font-size: 0.7em;
 }
 
+/*
+    When you hover over list items, we hover
+    the relevant chevrons in light gray.
+*/
+li.top_left_all_messages:hover .all-messages-arrow,
+#stream_filters li:hover .stream-sidebar-arrow,
 li.topic-list-item:hover .topic-sidebar-arrow {
-    display: inline !important;
+    display: inline;
     cursor: pointer;
     color: hsl(0, 0%, 53%);
 }
 
-li.topic-list-item .topic-sidebar-arrow:hover {
+/*
-    display: inline;
+    If you hover directly over the chevron itself,
-    cursor: pointer;
+    show it in black.
-    color: hsl(0, 0%, 0%);
+*/
+.all-messages-arrow:hover,
+.stream-sidebar-arrow:hover,
+.topic-sidebar-arrow:hover {
+    color: hsl(0, 0%, 0%) !important;
 }
 
 ul.filters li.muted_topic,

static/styles/night_mode.scss

@@ -256,7 +256,9 @@ on a dark background, and don't change the dark labels dark either. */
     #searchbox .search_button,
     .close,
     #user_presences li:hover .user-list-arrow,
-    ul.filters li:hover .arrow {
+    li.top_left_all_messages:hover .all-messages-arrow,
+    #stream_filters li:hover .stream-sidebar-arrow,
+    li.topic-list-item:hover .topic-sidebar-arrow {
         color: hsl(236, 33%, 80%);
     }
 
@@ -266,12 +268,17 @@ on a dark background, and don't change the dark labels dark either. */
     #searchbox_legacy .search_button:hover,
     #searchbox a.search_icon:hover,
     #searchbox .search_button:hover,
-    .close:hover,
+    .close:hover {
-    #user_presences li .user-list-arrow:hover,
-    ul.filters li .arrow:hover {
         color: hsl(0, 0%, 100%);
     }
 
+    #user_presences li .user-list-arrow:hover,
+    .all-messages-arrow:hover,
+    .stream-sidebar-arrow:hover,
+    .topic-sidebar-arrow:hover {
+        color: hsl(0, 0%, 100%) !important;
+    }
+
     #streamlist-toggle,
     #userlist-toggle {
         border-color: hsla(199, 33%, 46%, 0.2);

templates/zerver/app/left_sidebar.html

@@ -12,7 +12,7 @@
                         <span class="value"></span>
                     </span>
                 </a>
-                <span class="arrow stream-sidebar-arrow"><i class="fa fa-chevron-down" aria-hidden="true"></i></span>
+                <span class="arrow all-messages-arrow"><i class="fa fa-chevron-down" aria-hidden="true"></i></span>
             </li>
             <li class="top_left_private_messages global-filter">
                 <a href="#narrow/is/private">