Make debug log link focusable/selectable

Add button to open in a new tab. Stye as input group.

// FREEBIE

background.html

@@ -346,14 +346,17 @@
       <textarea rows='5'></textarea>
       <div class='buttons'>
         <button class='submit'>{{ submit }}</button>
-        <button class='close'>{{ cancel }}</button>
       </div>
       <div class='result'>
-        <a class='hide' target='_blank'></a>
-        <div class='hide'><button class='close'>{{ close }}</button></div>
       </div>
     </div>
   </script>
+  <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>
+    </div>
+  </script>
   <script type='text/x-tmpl-mustache' id='settings'>
     <div class='content'>
       <a class='x close' alt='close settings' href='#'></a>

images/open_link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M38 38H10V10h14V6H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V24h-4v14zM28 6v4h7.17L15.51 29.66l2.83 2.83L38 12.83V20h4V6H28z"/></svg>

js/views/debug_log_view.js

@@ -5,6 +5,15 @@
     'use strict';
     window.Whisper = window.Whisper || {};
 
+    Whisper.DebugLogLinkView = Whisper.View.extend({
+        templateName: 'debug-log-link',
+        initialize: function(options) {
+            this.url = options.url;
+        },
+        render_attributes: function() {
+            return { url: this.url };
+        }
+    });
     Whisper.DebugLogView = Whisper.View.extend({
         templateName: 'debug-log',
         className: 'debug-log modal',
@@ -34,10 +43,13 @@
                 return;
             }
             console.post(log).then(function(url) {
+                var view = new Whisper.DebugLogLinkView({
+                    url: url,
+                    el: this.$('.result')
+                });
                 this.$('.loading').removeClass('loading');
-                var link = this.$('.result').find('a');
+                view.render();
-                link.attr('href', url).text(url);
+                this.$('.link').focus().select();
-                this.$('.result .hide').removeClass('hide');
             }.bind(this));
             this.$('.buttons, textarea').remove();
             this.$('.result').addClass('loading');

stylesheets/_global.scss

@@ -427,7 +427,7 @@ $avatar-size: 44px;
     }
   }
 
-  button, input[type=submit] {
+  .submit {
     border-radius: $border-radius;
     border: solid 1px #ccc;
     cursor: pointer;
@@ -445,10 +445,49 @@ $avatar-size: 44px;
   }
 
   .result {
+    $link-max-width: 400px;
+    $open-width: 46px;
+    $open-height: 36px;
+    $group-max-width: $link-max-width + $open-width;
     text-align: center;
-    a {
+
-      -webkit-user-select: text;
+    .input-group {
+      display: inline-block;
+      width: 100%;
+      max-width: $group-max-width;
     }
+
+    .open {
+      float: left;
+      display: inline-block;
+      width: $open-width;
+      height: $open-height;
+      padding: 5px 10px;
+      cursor: pointer;
+      border: solid 1px #ccc;
+      border-radius: 0 $border-radius $border-radius 0;
+      background: $grey_l;
+      &:before {
+        content: '';
+        display: block;
+        width: $button-height;
+        height: $button-height;
+        @include header-icon-black('/images/open_link.svg');
+      }
+    }
+
+    .link {
+      border-radius: $border-radius 0 0 $border-radius;
+      float: left;
+      width: calc(100% - #{$open-width});
+      max-width: $link-max-width;
+      height: $open-height;
+      padding: 0 10px;
+      outline-offset: -4px;
+      border: solid 1px #ccc;
+      border-right: none;
+    }
+
   }
 }
 .modal {

stylesheets/manifest.css

@@ -362,7 +362,7 @@ img.emoji {
       flex-grow: 1;
       width: 100%;
       resize: none; }
-.debug-log button, .debug-log input[type=submit] {
+.debug-log .submit {
   border-radius: 5px;
   border: solid 1px #ccc;
   cursor: pointer;
@@ -372,13 +372,47 @@ img.emoji {
   color: #616161;
   background: #f3f3f3;
   box-shadow: 0 0 10px -5px rgba(97, 97, 97, 0.5); }
-  .debug-log button:hover, .debug-log input[type=submit]:hover {
+  .debug-log .submit:hover {
     color: black;
     box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7); }
 .debug-log .result {
   text-align: center; }
-  .debug-log .result a {
+  .debug-log .result .input-group {
-    -webkit-user-select: text; }
+    display: inline-block;
+    width: 100%;
+    max-width: 446px; }
+  .debug-log .result .open {
+    float: left;
+    display: inline-block;
+    width: 46px;
+    height: 36px;
+    padding: 5px 10px;
+    cursor: pointer;
+    border: solid 1px #ccc;
+    border-radius: 0 5px 5px 0;
+    background: #f3f3f3; }
+    .debug-log .result .open:before {
+      content: '';
+      display: block;
+      width: 24px;
+      height: 24px;
+      -webkit-mask: url("/images/open_link.svg") no-repeat center;
+      -webkit-mask-size: 100%;
+      background-color: rgba(0, 0, 0, 0.5); }
+      .debug-log .result .open:before:focus, .debug-log .result .open:before:hover {
+        -webkit-mask: url("/images/open_link.svg") no-repeat center;
+        -webkit-mask-size: 100%;
+        background-color: black; }
+  .debug-log .result .link {
+    border-radius: 5px 0 0 5px;
+    float: left;
+    width: calc(100% - 46px);
+    max-width: 400px;
+    height: 36px;
+    padding: 0 10px;
+    outline-offset: -4px;
+    border: solid 1px #ccc;
+    border-right: none; }
 
 .modal {
   position: absolute;