Debug Log: Copy URL instead of open in browser

_locales/en/messages.json

@@ -413,6 +413,18 @@
   "debugLogError": {
     "message": "Something went wrong with the upload! Please consider manually adding your log to the bug you file."
   },
+  "debugLogCopy": {
+    "message": "Copy",
+    "description": "Shown as the text for the copy button on the debug log screen"
+  },
+  "debugLogCopyAlt": {
+    "message": "Copy link to your clipboard",
+    "description": "Shown as the alt text for the copy button on the debug log screen"
+  },
+  "debugLogLinkCopied": {
+    "message": "Link Copied to Your Clipboard",
+    "description": "Shown in a taost to let the user know that the link to the debug log has been copied to their clipboard"
+  },
   "reportIssue": {
     "message": "Report an issue",
     "description": "Link to open the issue tracker"

debug_log.html

@@ -38,7 +38,7 @@
 <script type='text/x-tmpl-mustache' id='debug-log-link'>
   <div class='input-group clearfix'>
     <input type='text' class='link' readonly value='{{ url }}' />
-    <a class='open' alt='open in a new browser tab' target='_blank' href='{{ url }}'></a>
+    <a class='copy' alt='{{ debugLogCopyAlt }}' target='_blank' href='{{ url }}'>{{ debugLogCopy }}</a>
   </div>
   <p>
     <a class='report-link' target='_blank'
@@ -47,8 +47,12 @@
     </a>
   </p>
 </script>
+<script type='text/x-tmpl-mustache' id='toast'>
+  {{ toastMessage }}
+</script>
 <script type='text/javascript' src='js/components.js'></script>
 <script type='text/javascript' src='js/views/whisper_view.js'></script>
+<script type='text/javascript' src='js/views/toast_view.js'></script>
 <script type='text/javascript' src='js/views/debug_log_view.js'></script>
 <script type='text/javascript' src='js/debug_log_start.js'></script>
 </html>

debug_log_preload.js

@@ -2,6 +2,7 @@
 
 const { ipcRenderer } = require('electron');
 const url = require('url');
+const copyText = require('copy-text-to-clipboard');
 const i18n = require('./js/modules/i18n');
 
 const config = url.parse(window.location.toString(), true).query;
@@ -11,6 +12,7 @@ const localeMessages = ipcRenderer.sendSync('locale-data');
 window.getVersion = () => config.version;
 window.theme = config.theme;
 window.i18n = i18n.setup(locale, localeMessages);
+window.copyText = copyText;
 
 // got.js appears to need this to successfully submit debug logs to the cloud
 window.nodeSetImmediate = setImmediate;

images/icons/v2/open-24.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>open-24</title><path d="M20,11.5V19a3,3,0,0,1-3,3H5a3,3,0,0,1-3-3V7A3,3,0,0,1,5,4h7.5V5.5H5A1.5,1.5,0,0,0,3.5,7V19A1.5,1.5,0,0,0,5,20.5H17A1.5,1.5,0,0,0,18.5,19V11.5ZM14,2V3.5h4.518l1.106-.184L8.97,13.97l1.06,1.06L20.684,4.376,20.5,5.482V10H22V2Z"/></svg>

js/views/debug_log_view.js

@@ -7,17 +7,33 @@
 
   window.Whisper = window.Whisper || {};
 
+  Whisper.LinkedCopiedToast = Whisper.ToastView.extend({
+    render_attributes() {
+      return { toastMessage: i18n('debugLogLinkCopied') };
+    },
+  });
+
   Whisper.DebugLogLinkView = Whisper.View.extend({
     templateName: 'debug-log-link',
     initialize(options) {
       this.url = options.url;
     },
+    events: {
+      'click .copy': 'copy',
+    },
     render_attributes() {
       return {
         url: this.url,
         reportIssue: i18n('reportIssue'),
+        debugLogCopy: i18n('debugLogCopy'),
+        debugLogCopyAlt: i18n('debugLogCopyAlt'),
       };
     },
+    copy(e) {
+      e.preventDefault();
+      window.copyText(e.currentTarget.href);
+      Whisper.ToastView.show(Whisper.LinkedCopiedToast, document.body);
+    },
   });
   Whisper.DebugLogView = Whisper.View.extend({
     templateName: 'debug-log',

stylesheets/_debugLog.scss

@@ -30,7 +30,7 @@
 
   .result {
     $link-max-width: 400px;
-    $open-width: 72px;
+    $open-width: 100px;
     $open-height: 36px;
     text-align: center;
 
@@ -41,14 +41,16 @@
       max-width: $group-max-width;
     }
 
-    $open-pad-x: ($open-width - 22px) / 2;
+    $open-pad-x: ($open-width - 40px) / 2;
     $open-pad-y: ($open-height - 22px) / 2;
-    .open {
+    .copy {
       float: left;
       display: inline-block;
       width: $open-width;
       height: $open-height;
       padding: $open-pad-y $open-pad-x;
+      color: unset;
+      text-decoration: none;
       cursor: pointer;
 
       border-radius: 0 5px 5px 0;
@@ -56,24 +58,16 @@
       @include light-theme {
         border: solid 1px $color-gray-25;
         background: $color-gray-02;
+        &:active {
+          background: $color-gray-25;
+        }
       }
       @include dark-theme {
         border: solid 1px $color-gray-45;
         background-color: $color-gray-90;
         color: $color-gray-02;
-      }
+        &:active {
-
+          background: $color-gray-25;
-      &:before {
-        content: '';
-        display: block;
-        width: 24px;
-        height: 24px;
-
-        @include light-theme {
-          @include header-icon-black('../images/icons/v2/open-24.svg');
-        }
-        @include dark-theme {
-          @include header-icon-white('../images/icons/v2/open-24.svg');
         }
       }
     }

ts/util/lint/exceptions.json

@@ -370,72 +370,72 @@
     "rule": "jQuery-$(",
     "path": "js/views/debug_log_view.js",
     "line": "      this.$('textarea').val(i18n('loading'));",
-    "lineNumber": 27,
+    "lineNumber": 43,
     "reasonCategory": "usageTrusted",
-    "updated": "2018-09-19T21:59:32.770Z",
+    "updated": "2020-05-01T17:11:39.527Z",
     "reasonDetail": "Protected from arbitrary input"
   },
   {
     "rule": "jQuery-$(",
     "path": "js/views/debug_log_view.js",
     "line": "        this.$('textarea').val(text);",
-    "lineNumber": 31,
+    "lineNumber": 47,
     "reasonCategory": "usageTrusted",
-    "updated": "2018-09-19T21:59:32.770Z",
+    "updated": "2020-05-01T17:11:39.527Z",
     "reasonDetail": "Protected from arbitrary input"
   },
   {
     "rule": "jQuery-$(",
     "path": "js/views/debug_log_view.js",
     "line": "      const text = this.$('textarea').val();",
-    "lineNumber": 50,
+    "lineNumber": 66,
     "reasonCategory": "usageTrusted",
-    "updated": "2018-09-19T21:59:32.770Z",
+    "updated": "2020-05-01T17:11:39.527Z",
     "reasonDetail": "Protected from arbitrary input"
   },
   {
     "rule": "jQuery-$(",
     "path": "js/views/debug_log_view.js",
     "line": "      this.$('.buttons, textarea').remove();",
-    "lineNumber": 55,
+    "lineNumber": 71,
     "reasonCategory": "usageTrusted",
-    "updated": "2018-09-19T21:59:32.770Z",
+    "updated": "2020-05-01T17:11:39.527Z",
     "reasonDetail": "Protected from arbitrary input"
   },
   {
     "rule": "jQuery-$(",
     "path": "js/views/debug_log_view.js",
     "line": "          el: this.$('.result'),",
-    "lineNumber": 62,
+    "lineNumber": 78,
     "reasonCategory": "usageTrusted",
-    "updated": "2018-09-19T21:59:32.770Z",
+    "updated": "2020-05-01T17:11:39.527Z",
     "reasonDetail": "Protected from arbitrary input"
   },
   {
     "rule": "jQuery-$(",
     "path": "js/views/debug_log_view.js",
     "line": "        this.$('.loading').removeClass('loading');",
-    "lineNumber": 64,
+    "lineNumber": 80,
     "reasonCategory": "usageTrusted",
-    "updated": "2018-09-19T21:59:32.770Z",
+    "updated": "2020-05-01T17:11:39.527Z",
     "reasonDetail": "Protected from arbitrary input"
   },
   {
     "rule": "jQuery-$(",
     "path": "js/views/debug_log_view.js",
     "line": "        this.$('.link')",
-    "lineNumber": 66,
+    "lineNumber": 82,
     "reasonCategory": "usageTrusted",
-    "updated": "2018-09-19T21:59:32.770Z",
+    "updated": "2020-05-01T17:11:39.527Z",
     "reasonDetail": "Protected from arbitrary input"
   },
   {
     "rule": "jQuery-$(",
     "path": "js/views/debug_log_view.js",
     "line": "        this.$('.loading').removeClass('loading');",
-    "lineNumber": 74,
+    "lineNumber": 90,
     "reasonCategory": "usageTrusted",
-    "updated": "2018-09-19T21:59:32.770Z",
+    "updated": "2020-05-01T17:11:39.527Z",
     "reasonDetail": "Protected from arbitrary input"
   },
   {