Fix overlapped tooltip

Diable tooltip on status text, and show status within
the same tooltip as name and email, also change the
limit on status to be dynamically computed with
a max of 35 together wth name

Bug: Issue 11141
Bug: Issue 11140
Change-Id: I61a81a5a90135256b98d5b8c6bc4f85561647dc2

polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label.html

@@ -64,7 +64,11 @@ limitations under the License.
           [[_computeEmailStr(account)]]
         </span>
         <template is="dom-if" if="[[account.status]]">
-          (<gr-limited-text limit="10" text="[[account.status]]"></gr-limited-text>)
+          (<gr-limited-text
+            disable-tooltip="true"
+            limit="[[_computeStatusTextLength(account, _serverConfig)]]"
+            text="[[account.status]]">
+          </gr-limited-text>)
         </template>
       </span>
     </span>

polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label.js

@@ -66,6 +66,11 @@
       return this.getUserName(config, account, false);
     },
 
+    _computeStatusTextLength(account, config) {
+      // 35 as the max length of the name + status
+      return Math.max(10, 35 - this._computeName(account, config).length);
+    },
+
     _computeAccountTitle(account, tooltip) {
       // Polymer 2: check for undefined
       if ([
@@ -81,11 +86,18 @@
         result += this._computeName(account, this._serverConfig);
       }
       if (account.email) {
-        result += ' <' + account.email + '>';
+        result += ` <${account.email}>`;
       }
       if (this.additionalText) {
-        return result + ' ' + this.additionalText;
+        result += ` ${this.additionalText}`;
       }
+
+      // Show status in the label tooltip instead of
+      // in a separate tooltip on status
+      if (account.status) {
+        result += ` (${account.status})`;
+      }
+
       return result;
     },
 

polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label_test.html

@@ -139,5 +139,44 @@ limitations under the License.
             'TestAnon');
       });
     });
+
+    suite('status in tooltip', () => {
+      setup(() => {
+        element = fixture('basic');
+        element.account = {
+          name: 'test',
+          email: 'test@google.com',
+          status: 'OOO until Aug 10th',
+        };
+        element._config = {
+          user: {
+            anonymous_coward_name: 'Anonymous Coward',
+          },
+        };
+      });
+
+      test('tooltip should contain status text', () => {
+        assert.deepEqual(element.title,
+            'test <test@google.com> (OOO until Aug 10th)');
+      });
+
+      test('status text should not have tooltip', () => {
+        flushAsynchronousOperations();
+        assert.deepEqual(element.$$('gr-limited-text').title, '');
+      });
+
+      test('status text should honor the name length and total length', () => {
+        assert.deepEqual(
+            element._computeStatusTextLength(element.account, element._config),
+            31
+        );
+        assert.deepEqual(
+            element._computeStatusTextLength({
+              name: 'a very long long long long name',
+            }, element._config),
+            10
+        );
+      });
+    });
   });
 </script>

polygerrit-ui/app/elements/shared/gr-limited-text/gr-limited-text.js

@@ -44,6 +44,15 @@
         value: false,
       },
 
+      /**
+       * Disable the tooltip.
+       * When set to true, will not show tooltip even text is over limit
+       */
+      disableTooltip: {
+        type: Boolean,
+        value: false,
+      },
+
       /**
        * The maximum number of characters to display in the tooltop.
        */
@@ -72,7 +81,7 @@
       }
 
       this.hasTooltip = !!limit && !!text && text.length > limit;
-      if (this.hasTooltip) {
+      if (this.hasTooltip && !this.disableTooltip) {
         this.setAttribute('title', text.substr(0, tooltipLimit));
       } else {
         this.removeAttribute('title');

polygerrit-ui/app/elements/shared/gr-limited-text/gr-limited-text_test.html

@@ -92,5 +92,14 @@ limitations under the License.
       assert.equal(element._computeDisplayText('foo bar', 4), 'foo…');
       assert.equal(element._computeDisplayText('foo bar', null), 'foo bar');
     });
+
+    test('when disable tooltip', () => {
+      sandbox.spy(element, '_updateTitle');
+      element.text = 'abcdefghijklmn';
+      element.disableTooltip = true;
+      element.limit = 10;
+      flushAsynchronousOperations();
+      assert.equal(element.getAttribute('title'), null);
+    });
   });
 </script>