Copy to clipboard button UI improvements

- Make the button size of the text
- Add tooltip

Bug: Issue 7997
Change-Id: Ifccb62dcfe984ad9c54e7b15fb2f2119b02c861f

polygerrit-ui/app/elements/change/gr-commit-info/gr-commit-info.html

@@ -25,6 +25,9 @@ limitations under the License.
         align-items: center;
         display: flex;
       }
+      gr-copy-clipboard {
+        padding-left: .5em;
+      }
     </style>
     <div class="container">
       <template is="dom-if" if="[[_showWebLink]]">
@@ -35,7 +38,10 @@ limitations under the License.
         [[_computeShortHash(commitInfo)]]
       </template>
       <gr-copy-clipboard
+          has-tooltip
+          button-title="Copy full SHA to clipboard"
           hide-input
+          hide-label
           text="[[commitInfo.commit]]">
       </gr-copy-clipboard>
     </div>

polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard.html

@@ -36,18 +36,20 @@ limitations under the License.
         flex-grow: 1;
         margin-right: .3em;
       }
-      .hideInput {
+      .hideInput,
+      .hideLabel label {
         display: none;
       }
       input {
         font-family: var(--monospace-font-family);
         font-size: inherit;
       }
-      #button {
+      #icon {
-        padding-left: .5em;
+        height: 1.2em;
+        width: 1.2em;
       }
     </style>
-    <div class="text">
+    <div class$="text [[_computeLabelClass(hideLabel)]]">
         <label>[[title]]</label>
         <input id="input" is="iron-input"
             class$="copyText [[_computeInputClass(hideInput)]]"
@@ -57,7 +59,9 @@ limitations under the License.
             readonly>
         <gr-button id="button"
             link
+            has-tooltip="[[hasTooltip]]"
             class="copyToClipboard"
+            title="[[buttonTitle]]"
             on-tap="_copyToClipboard">
           <iron-icon id="icon" icon="gr-icons:content-copy"></iron-icon>
         </gr-button>

polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard.js

@@ -22,10 +22,19 @@
     properties: {
       text: String,
       title: String,
+      buttonTitle: String,
+      hasTooltip: {
+        type: Boolean,
+        value: false,
+      },
       hideInput: {
         type: Boolean,
         value: false,
       },
+      hideLabel: {
+        type: Boolean,
+        value: false,
+      },
     },
 
     focusOnCopy() {
@@ -36,6 +45,10 @@
       return hideInput ? 'hideInput' : '';
     },
 
+    _computeLabelClass(hideLabel) {
+      return hideLabel ? 'hideLabel' : '';
+    },
+
     _handleInputTap(e) {
       e.preventDefault();
       Polymer.dom(e).rootTarget.select();

polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard_test.html

@@ -78,5 +78,12 @@ limitations under the License.
       flushAsynchronousOperations();
       assert.equal(getComputedStyle(element.$.input).display, 'none');
     });
+
+    test('hideLabel', () => {
+      assert.notEqual(getComputedStyle(element.$$('label')).display, 'none');
+      element.hideLabel = true;
+      flushAsynchronousOperations();
+      assert.equal(getComputedStyle(element.$$('label')).display, 'none');
+    });
   });
 </script>