Elide origin URLs from the left

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

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /** @fileoverview Runs the Polymer Password Settings tests. */
 
 /** @const {string} Path to root from chrome/test/data/webui/settings/. */
 var ROOT_PATH = '../../../../../';
 
 // Polymer BrowserTest fixture.
@@ skipping 37 matching lines @@
    * @private
    */
   validatePasswordList: function(listElement, passwordList) {
     assertEquals(passwordList.length, listElement.items.length);
     if (passwordList.length > 0) {
       // The first child is a template, skip and get the real 'first child'.
       var node = Polymer.dom(listElement).children[1];
       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,
           node.querySelector('#username').textContent);
       assertEquals(passwordInfo.numCharactersInPassword,
           node.querySelector('#password').value.length);
     }
   },
 
   /**
@@ skipping 10 matching lines @@
       var node = nodes[index];
       var exception = exceptionList[index];
       assertEquals(exception.exceptionUrl,
                    node.querySelector('#exception').textContent);
       assertEquals(exception.linkUrl,
                    node.querySelector('#exception').href);
     }
   },
 
   /**
+   * 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>}
    * @private
    */
   getDomRepeatChildren_: function(element) {
     var template = element.children[element.children.length - 1];
     assertEquals('TEMPLATE', template.tagName);
     // The template is at the end of the list of children and should be skipped.
     return Array.prototype.slice.call(element.children, 0, -1);
@@ skipping 100 matching lines @@
       // Assert that the data is passed into the iron list. If this fails,
       // then other expectations will also fail.
       assertEquals(passwordList, passwordsSection.$.passwordList.items);
 
       self.validatePasswordList(passwordsSection.$.passwordList, passwordList);
 
       assertTrue(passwordsSection.$.noPasswordsLabel.hidden);
       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 = [
         FakeDataMaker.passwordEntry('anotherwebsite.com', 'luigi', 1),
         FakeDataMaker.passwordEntry('longwebsite.com', 'peach', 7),
         FakeDataMaker.passwordEntry('website.com', 'mario', 70)
       ];
 
       var passwordsSection = self.createPasswordsSection_(passwordList, []);
 
@@ skipping 223 matching lines @@
         assertEquals(item.loginPair.username, event.detail.username);
         done();
       });
 
       MockInteractions.tap(passwordDialog.$.showPasswordButton);
     });
   });
 
   mocha.run();
 });