Add two icons to copy to clipboard. (#1542)

* Add two icons to copy to clipboard.

* Incorporated review comments

static/elements/chromedash-toast.js

@@ -1,8 +1,7 @@
 import {LitElement, css, html} from 'lit-element';
 import SHARED_STYLES from '../css/shared.css';
 
-// Keeps track of the toast currently opened.
-let _currentToast = null;
+const DEFAULT_DURATION = 7000;
 
 class ChromedashToast extends LitElement {
   static get properties() {
@@ -10,7 +9,6 @@ class ChromedashToast extends LitElement {
       msg: {type: String},
       open: {type: Boolean, reflect: true},
       actionLabel: {attribute: false},
-      duration: {attribute: false}, // The duration in milliseconds to show the toast. -1 or `Infinity`, to disable the toast auto-closing.
     };
   }
 
@@ -18,7 +16,6 @@ class ChromedashToast extends LitElement {
     super();
     this.msg = '';
     this.actionLabel = '';
-    this.duration = 7000;
     this.open = false;
   }
 
@@ -75,6 +72,7 @@ class ChromedashToast extends LitElement {
    * @param {function} optTapHandler Optional handler to execute when the
    *     toast action is tapped.
    * @param {Number} optDuration Optional duration to show the toast for.
+   *     Use -1 to keep the toast open indefinitely.
    */
   showMessage(msg, optAction, optTapHandler, optDuration) {
     this.msg = msg;
@@ -86,39 +84,20 @@ class ChromedashToast extends LitElement {
       }
     }, {once: true});
 
-    // Override duration just for this toast.
-    const originalDuration = this.duration;
-    if (typeof optDuration !== 'undefined') {
-      this.duration = optDuration;
+    const duration = optDuration || DEFAULT_DURATION;
+    if (duration > 0) {
+      window.setTimeout(() => {
+        this.open = false;
+      }, duration);
     }
 
     this.open = true;
-
-    this.duration = originalDuration; // reset site-wide duration.
   }
 
   close() {
     this.open = false;
   }
 
-  _openChanged() {
-    clearTimeout(this._timerId);
-
-    if (this.open) {
-      // Close existing toast if one is showing.
-      if (_currentToast && _currentToast !== this) {
-        _currentToast.close();
-      }
-      _currentToast = this;
-
-      if (this.duration >= 0) {
-        this._timerId = setTimeout(() => this.close(), this.duration);
-      }
-    } else if (_currentToast === this) {
-      _currentToast = null;
-    }
-  }
-
   render() {
     return html`
       <span id="msg">${this.msg}</span>

static/elements/icons.js

@@ -29,6 +29,8 @@ const template = html`
 
 <g id="close"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></g>
 
+<g id="content_copy"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></g>
+
 <g id="create"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></g>
 
 <g id="css"><path d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3zm13.71-9.37l-1.34-1.34c-.39-.39-1.02-.39-1.41 0L9 12.25 11.75 15l8.96-8.96c.39-.39.39-1.02 0-1.41z"/></g>
@@ -49,6 +51,8 @@ const template = html`
 
 <g id="javascript"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></g>
 
+<g id="link"><path d="M17 7h-4v2h4c1.65 0 3 1.35 3 3s-1.35 3-3 3h-4v2h4c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-6 8H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-2zm-3-4h8v2H8z"></path></g>
+
 <g id="notifications"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"></path></g>
 
 <g id="notifications-off"><path d="M20 18.69L7.84 6.14 5.27 3.49 4 4.76l2.8 2.8v.01c-.52.99-.8 2.16-.8 3.42v5l-2 2v1h13.73l2 2L21 19.72l-1-1.03zM12 22c1.11 0 2-.89 2-2h-4c0 1.11.89 2 2 2zm6-7.32V11c0-3.08-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68c-.15.03-.29.08-.42.12-.1.03-.2.07-.3.11h-.01c-.01 0-.01 0-.02.01-.23.09-.46.2-.68.31 0 0-.01 0-.01.01L18 14.68z"></path></g>
@@ -90,7 +94,8 @@ const template = html`
 <g id="webcomponents"><path d="M4.789 93.991l-4.729 1.434 5.791 21.344 7.857-1.939-1.901-7.173-3.288.545zM18.596 90.216l-5.08 1.498 5.47 21.024 46.586-12.477s12.905 20.666 32.426 21.882c19.502 1.203 34.941-8.369 42.164-18.933l-.787-3.858s-23.334 22.535-48.907 10.154c-16.098-8.611-21.716-18.395-21.716-18.395l-46.483 13.014-3.673-13.909zM121.677 38.66l-27.448 7.14-2.476 8.337 31.383-7.793z"/></g>
 
 <g id="expand-less"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"></path></g>
- <g id="expand-more"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></g>
+<g id="expand-more"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></g>
+
 
 </defs></svg>
 </iron-iconset-svg>

static/js-src/feature-page.js

@@ -1,4 +1,7 @@
 (function(exports) {
+const toastEl = document.querySelector('chromedash-toast');
+const copyLinkEl = document.querySelector('#copy-link');
+
 // Event handler. Used in feature.html template.
 const subscribeToFeature = (featureId) => {
   const iconEl = document.querySelector('.pushicon');
@@ -32,6 +35,14 @@ const shareFeature = () => {
   }
 };
 
+function copyURLToClipboard() {
+  event.preventDefault();
+  const url = copyLinkEl.href;
+  navigator.clipboard.writeText(url).then(() => {
+    toastEl.showMessage('Link copied');
+  });
+}
+
 // Remove loading spinner at page load.
 document.body.classList.remove('loading');
 
@@ -49,6 +60,11 @@ if (shareFeatureEl) {
   });
 }
 
+if (copyLinkEl) {
+  copyLinkEl.addEventListener('click', function() {
+    copyURLToClipboard();
+  });
+}
 
 // Show the star icon if the user has starred this feature.
 window.csClient.getStars().then((subscribedFeatures) => {
@@ -76,7 +92,6 @@ if (starWhenSignedInEl) {
 
 if (SHOW_TOAST) {
   setTimeout(() => {
-    const toastEl = document.querySelector('chromedash-toast');
     toastEl.showMessage('Your feature was saved! It may take a few minutes to ' +
                       'show up in the main list.', null, null, -1);
   }, 500);

templates/admin/features/launch.html

@@ -69,6 +69,20 @@ after that, you're free to ship your feature.
 {% block js %}
 <script nonce="{{nonce}}">
 // Remove loading spinner at page load.
-document.body.classList.remove('loading');
+  document.body.classList.remove('loading');
+
+  const copyEmailBodyEl = document.querySelector('#copy-email-body');
+  const emailBodyEl = document.querySelector('.email');
+  const toastEl = document.querySelector('chromedash-toast');
+  if (copyEmailBodyEl && emailBodyEl) {
+      copyEmailBodyEl.addEventListener('click', () => {
+          window.getSelection().removeAllRanges();
+          const range = document.createRange();
+          range.selectNode(emailBodyEl);
+          window.getSelection().addRange(range);
+          document.execCommand('copy');
+          toastEl.showMessage('Email body copied');
+      });
+  }
 </script>
 {% endblock %}

templates/blink/intent_to_implement.html

@@ -14,7 +14,16 @@
   that can be copied and pasted into a text editor.
 {% endcomment %}
 
-<p>Body</p>
+<p>Body
+  <span class="tooltip copy-text" style="float:right"
+        title="Copy text to clipboard">
+      <a href="#" data-tooltip>
+        <iron-icon icon="chromestatus:content_copy"
+                   id="copy-email-body"></iron-icon>
+      </a>
+  </span>
+</p>
+
 <div class="email">
 
   <h4>Contact emails</h4>

templates/feature.html

@@ -47,6 +47,11 @@
       <iron-icon icon="chromestatus:share"></iron-icon>
     </a>
   </span>
+  <span class="tooltip copy-to-clipboard" title="Copy link to clipboard">
+    <a href="/feature/{{ feature.id }}" data-tooltip id="copy-link">
+      <iron-icon icon="chromestatus:link"></iron-icon>
+    </a>
+  </span>
   {% if user.can_edit %}
     <span class="tooltip" title="Edit this feature">
       <a href="/guide/edit/{{ feature.id }}" class="editfeature" data-tooltip>