Elide origin URLs from the left

chrome/test/data/webui/settings/settings_passwords_section_browsertest.js

Index: chrome/test/data/webui/settings/settings_passwords_section_browsertest.js
diff --git a/chrome/test/data/webui/settings/settings_passwords_section_browsertest.js b/chrome/test/data/webui/settings/settings_passwords_section_browsertest.js
index 4443d97a155c6b4e2281d2d112e25af29553c331..2e076cc5492eb848b30309421dc4b133e135f47c 100644
--- a/chrome/test/data/webui/settings/settings_passwords_section_browsertest.js
+++ b/chrome/test/data/webui/settings/settings_passwords_section_browsertest.js
@@ -55,7 +55,7 @@ SettingsPasswordSectionBrowserTest.prototype = {
       assert(node);
       var passwordInfo = passwordList[0];
       assertEquals(passwordInfo.loginPair.originUrl,
-          node.querySelector('#originUrl').textContent);
+          node.querySelector('#originUrl').textContent.trim());
       assertEquals(passwordInfo.linkUrl,
           node.querySelector('#originUrl').href);
       assertEquals(passwordInfo.loginPair.username,
@@ -86,6 +86,56 @@ SettingsPasswordSectionBrowserTest.prototype = {
   },
 
   /**
+   * Helper method that validates that origin eliding from the left is done
+   * correctly.
+   * @param {!Element} listElement The iron-list element that will be checked.
+   * @param {!Array<!chrome.passwordsPrivate.PasswordUiEntry>} passwordList The
+   *     expected data.
+   * @private
+   */
+  validateElideOriginUrlFromLeft: function(listElement, passwordList) {
+    // The first child is a template, skip it and get the remaining children.
+    var children = Polymer.dom(listElement).children.slice(1);
+    for (var i = 0; i < children.length; ++i) {

[hcarmona, 2016/10/25 17:05:31]

iron-list will only create enough children to fill the viewable area.
We've run into issues where a test would sometimes fail if not all
children are created. We decided that testing the first child would be
OK, because the list should* render at least 1 item.

*iron-list won't render any children if it's height is 0.

+      var longOriginUrl = passwordList[i].loginPair.originUrl;
+      var websiteColumn = children[i].querySelector('.website-column');
+      assertEquals(this.elideOriginUrlFromLeft_(longOriginUrl, websiteColumn),
+                   websiteColumn.textContent.trim());
+    }
+  },
+
+  /**
+   * Helper method that replicates a logic done in the passwords section, but
+   * replaces the binary search with a linear search.

[Dan Beam, 2016/10/25 23:37:32]

waiiiiiit, what?  don't do this.  you're not testing anything useful...

+   * @param {string} originUrl The original origin URL.
+   * @param {!Element} websiteColumn The div that contains the URL.
+   * @return {string}
+   * @private
+   */
+  elideOriginUrlFromLeft_: function(originUrl, websiteColumn) {
+    var computedStyle = window.getComputedStyle(websiteColumn);
+    var columnWidth = websiteColumn.offsetWidth -
+        parseInt(computedStyle.webkitMarginStart, 10) -
+        parseInt(computedStyle.webkitPaddingStart, 10);
+
+    var canvas = document.createElement('canvas');
+    var ctx = canvas.getContext('2d');
+    ctx.font = computedStyle.font;
+
+    if (ctx.measureText(originUrl).width <= columnWidth)
+      return originUrl;
+
+    var dots = '\u2026'; // HORIZONTAL ELLIPSIS
+    assert(ctx.measureText(dots).width <= columnWidth);
+
+    var index = 0;
+    while (ctx.measureText(dots + originUrl.substr(index)).width > columnWidth)
+      ++index;
+
+    return dots + originUrl.substr(index);
+  },
+
+  /**
    * Returns all children of an element that has children added by a dom-repeat.
    * @param {!Element} element
    * @return {!Array<!Element>}
@@ -206,6 +256,21 @@ TEST_F('SettingsPasswordSectionBrowserTest', 'uiTests', function() {
       assertFalse(passwordsSection.$.savedPasswordsHeading.hidden);
     });
 
+    test('verifyElidedOrigins', function() {
+      var passwordList = [
+        FakeDataMaker.passwordEntry(
+            'this.is.an.extremely.long.origin.that.should.be.elided.com'),
+        FakeDataMaker.passwordEntry(
+            'another.very.long.and.completely.unrealistic.website.name.com'),
+        FakeDataMaker.passwordEntry('this.is.rather.short.com'),
+        FakeDataMaker.passwordEntry('also.short.com'),
+      ];
+
+      var passwordsSection = self.createPasswordsSection_(passwordList, []);

[hcarmona, 2016/10/25 17:05:31]

Can we simplify the test by calling |elideOriginUrlFromLeft_| directly?

like:
assertEquals('\u2026website.name.com',
    passwordsSection.elideOriginUrlFromLeft_(
        'another.very.long.and.completely.unrealistic.website.name.com'));
assertEquals('name.com', passwordsSection.elideOriginUrlFromLeft_('name.com'));

This way we can eliminate iterating over the iron-list. Also, we
wouldn't need to maintain 2 implementations of left elide if we use
known values.

+      self.validateElideOriginUrlFromLeft(passwordsSection.$.passwordList,
+                                          passwordList);
+    });
+
     // Test verifies that removing a password will update the elements.
     test('verifyPasswordListRemove', function() {
       var passwordList = [