From 769052d9c715b576973491e97fd195bd9a8afe7b Mon Sep 17 00:00:00 2001
From: Xavier Cooney <xavier.cooney03@gmail.com>
Date: Thu, 11 Jan 2018 10:19:32 +0000
Subject: [PATCH] css: Allow the bot API key to be selected on all browsers.

The problem that prompted this PR is that I couldn't select the API
key of a bot in chrome to copy it, but I could on Firefox.

Using the `auto` proerty value to override the `user-select`
property  of a parent does not seem to be compatible
with all browsers.
---
 static/styles/zulip.css                    | 8 ++++++++
 static/templates/bot_avatar_row.handlebars | 4 ++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index e4fcbe6b05..60fae9d860 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -59,6 +59,14 @@ a {
     user-select: auto;
 }
 
+.text-select {
+    -webkit-touch-callout: text;
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+}
+
 p.n-margin {
     margin: 10px 0px 0px 0px;
 }
diff --git a/static/templates/bot_avatar_row.handlebars b/static/templates/bot_avatar_row.handlebars
index 0a9b11242c..5fd4af3866 100644
--- a/static/templates/bot_avatar_row.handlebars
+++ b/static/templates/bot_avatar_row.handlebars
@@ -31,8 +31,8 @@
         <div class="api_key">
             <span class="field">{{t "API key" }}</span>
             <span class="api-key-value-and-button no-select">
-                <!-- have the `.auto-select` in `.no-select` so that the value doesn't have trailing whitespace. -->
-                <span class="value auto-select">{{api_key}}</span>
+                <!-- have the `.text-select` in `.no-select` so that the value doesn't have trailing whitespace. -->
+                <span class="value text-select">{{api_key}}</span>
                 <button type="submit" class="button no-style btn-secondary regenerate_bot_api_key" title="{{t 'Generate new API key' }}" data-email="{{email}}">
                     <i class="icon-vector-refresh"></i>
                 </button>