Make search clear button ("x") persist w/o hover

This makes the "x" in the search bar always visible when there is
text in the search box, even if the mouse is not hovering, hopefully
making for a clearer UI around search and resolving issue #741

The implementation adds the "x.svg" as a background image to the search
box when it is classed with .active, in addition to the
-webkit-search-cancel-button, which is still there for the actual
functionality but only appears on mouse hover (one tiny snag is that
coloring appears slightly different on hover, at least on my screen -
don't know if this is a problem).

I accounted for both ltr and rtl text-direction by using
getComputedStyle(...).direction to detect from the input's dir="auto"
- if there's a more elegant way to do this, please suggest. An ideal
solution would use the :dir pseudo-class but it's not implemented
in Chrome yet - https://developer.mozilla.org/en-US/docs/Web/CSS/:dir

For now, I added the direction-checking to inbox_view.js. I see that
input.search is also used in new_group_update_view.js and
recipient_input_view.js but neither of these views seem to be in use (?)
and they don't set the .active class anyway, so I ignored them.

Update: Amended version a few hours later - fixed and manually tested
color and spacing for iOS and Android Dark themes. Also made some new
SASS variables to make things DRYer and fixed my tab size.

js/views/inbox_view.js

@@ -197,6 +197,12 @@
             var input = this.$('input.search');
             if (input.val().length > 0) {
                 input.addClass('active');
+                var textDir = window.getComputedStyle(input[0]).direction;
+                if (textDir === 'ltr') {
+                    input.removeClass('rtl').addClass('ltr');
+                } else if (textDir === 'rtl') {
+                    input.removeClass('ltr').addClass('rtl');
+                }
             } else {
                 input.removeClass('active');
             }

stylesheets/_index.scss

@@ -104,7 +104,7 @@
 
 input.search {
   border: none;
-  padding: 0 10px 0 65px;
+  padding: 0 $search-padding-right 0 $search-padding-left;
   margin: 0;
   outline: 0;
   height: $search-height;
@@ -117,13 +117,24 @@ input.search {
 
   &.active {
     outline: solid 1px $blue;
+    background-image: url('/images/x.svg');
+    background-repeat: no-repeat;
+    background-size: $search-x-size;
+
+    &.ltr {
+      background-position : right $search-padding-right center;
+    }
+
+    &.rtl {
+      background-position : left $search-padding-left center;
+    }
   }
 
   &::-webkit-search-cancel-button {
     -webkit-appearance: none;
     display: block;
-    width: 16px;
-    height: 16px;
+    width: $search-x-size;
+    height: $search-x-size;
     background: url('/images/x.svg') no-repeat center;
     background-size: cover;
   }

stylesheets/_ios.scss

@@ -49,9 +49,12 @@ $ios-border-color: rgba(0,0,0,0.1);
     border-radius: 5px;
     width: 220px;
     height: 34px;
-    padding-left: 30px;
+    padding-left: $search-padding-left-ios;
     line-height: 34px;
     background-color: #dddddd;
+    &.active.rtl {
+      background-position : left $search-padding-left-ios center;
+    }
   }
   .conversation-header {
     background-color: $grey_l;

stylesheets/_variables.scss

@@ -36,6 +36,10 @@ $button-height: 24px;
 $header-color: $blue;
 
 $search-height: 36px;
+$search-padding-right: 10px;
+$search-padding-left: 65px;
+$search-padding-left-ios: 30px;
+$search-x-size: 16px;
 
 $unread-badge-size: 21px;
 $loading-height: 16px;

stylesheets/android-dark.scss

@@ -110,6 +110,9 @@ $text-dark: #CCCCCC;
       background: url('/images/x_white.svg') no-repeat center;
       background-size: cover;
     }
+    &.active.ltr, &.active.rtl {
+      background-image: url('/images/x_white.svg');
+    }
   }
   .bubble {
     padding: 9px 12px;

stylesheets/manifest.css

@@ -818,7 +818,14 @@ input.search {
   font-size: inherit;
   position: relative; }
   input.search.active {
-    outline: solid 1px #2090ea; }
+    outline: solid 1px #2090ea;
+    background-image: url("/images/x.svg");
+    background-repeat: no-repeat;
+    background-size: 16px; }
+    input.search.active.ltr {
+      background-position: right 10px center; }
+    input.search.active.rtl {
+      background-position: left 65px center; }
   input.search::-webkit-search-cancel-button {
     -webkit-appearance: none;
     display: block;
@@ -1455,6 +1462,8 @@ li.entry .error-icon-container {
   padding-left: 30px;
   line-height: 34px;
   background-color: #dddddd; }
+  .ios input.search.active.rtl {
+    background-position: left 30px center; }
 .ios .conversation-header {
   background-color: #f3f3f3;
   color: #454545;
@@ -1834,6 +1843,8 @@ li.entry .error-icon-container {
     .android-dark .search::-webkit-search-cancel-button {
       background: url("/images/x_white.svg") no-repeat center;
       background-size: cover; }
+    .android-dark .search.active.ltr, .android-dark .search.active.rtl {
+      background-image: url("/images/x_white.svg"); }
   .android-dark .bubble {
     padding: 9px 12px;
     border-radius: 5px;