[Password Manager] Changes implementation of left elided origin on chrome://settings/passwords

chrome/browser/resources/options/password_manager.js

 // Copyright (c) 2012 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.
 
 cr.define('options', function() {
   /** @const */ var Page = cr.ui.pageManager.Page;
   /** @const */ var PageManager = cr.ui.pageManager.PageManager;
   /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel;
 
   /////////////////////////////////////////////////////////////////////////////
@@ skipping 147 matching lines @@
      * @param {!cr.ui.List} list The list to toggle visilibility for.
      */
     updateListVisibility_: function(list) {
       var empty = list.dataModel.length == 0;
       var listPlaceHolderID = list.id + '-empty-placeholder';
       list.hidden = empty;
       $(listPlaceHolderID).hidden = !empty;
     },
 
     /**
+     * Updates eliding of origins. If there is no enough space to show the full
+     * origin, the origin is elided from the left with ellipsis.
+     * @param {!cr.ui.List} list The list to update eliding.
+     */
+    updateOriginsEliding_: function(list) {
+      var entries = list.getElementsByClassName('deletable-item');
+      if (entries.length == 0)
+        return;
+      var entry = entries[0];
+      var columnWidth = entry.urlDiv.offsetWidth -
+          parseInt(window.getComputedStyle(entry.urlDiv).webkitMarginStart) -
+          parseInt(window.getComputedStyle(entry.urlDiv).webkitPaddingStart);

[Evan Stade, 2016/03/21 21:59:02]

nit: store getComputedStyle in a var?

[kolos1, 2016/03/22 19:10:24]

Done.

+      for (var i = 0; i < entries.length; ++i) {
+        var urlLink = entries[i].urlLink;
+        if (urlLink.offsetWidth <= columnWidth)
+          continue;
+        urlLink.textContent = '…' + urlLink.textContent.substring(1);
+        while (urlLink.offsetWidth > columnWidth)
+          urlLink.textContent = '…' + urlLink.textContent.substring(2);

[Evan Stade, 2016/03/21 21:59:02]

I kinda liked the idea of skipping ahead to the next . in the origin

[kolos1, 2016/03/22 19:10:24]

I asked UI team about this. They recommend to show as much as possible.

+      }
+    },
+
+    /**
      * Updates the data model for the saved passwords list with the values from
      * |entries|.
      * @param {!Array} entries The list of saved password data.
      */
     setSavedPasswordsList_: function(entries) {
       if (this.lastQuery_) {
         // Implement password searching here in javascript, rather than in C++.
         // The number of saved passwords shouldn't be too big for us to handle.
         var query = this.lastQuery_;
         var filter = function(entry, index, list) {
           // Search both shown URL and username.
           var shownUrl = entry[options.passwordManager.SHOWN_URL_FIELD];
           var username = entry[options.passwordManager.USERNAME_FIELD];
           if (shownUrl.toLowerCase().indexOf(query.toLowerCase()) >= 0 ||
               username.toLowerCase().indexOf(query.toLowerCase()) >= 0) {
             // Keep the original index so we can delete correctly. See also
             // deleteItemAtIndex() in password_manager_list.js that uses this.
             entry[options.passwordManager.ORIGINAL_INDEX_FIELD] = index;
             return true;
           }
           return false;
         };
         entries = entries.filter(filter);
       }
       this.savedPasswordsList_.dataModel = new ArrayDataModel(entries);
+      this.updateOriginsEliding_(this.savedPasswordsList_);
       this.updateListVisibility_(this.savedPasswordsList_);
     },
 
     /**
      * Updates the data model for the password exceptions list with the values
      * from |entries|.
      * @param {!Array} entries The list of password exception data.
      */
     setPasswordExceptionsList_: function(entries) {
       this.passwordExceptionsList_.dataModel = new ArrayDataModel(entries);
+      this.updateOriginsEliding_(this.passwordExceptionsList_);
       this.updateListVisibility_(this.passwordExceptionsList_);
     },
 
     /**
      * Reveals the password for a saved password entry. This is called by the
      * backend after it has authenticated the user.
      * @param {number} index The original index of the entry in the model.
      * @param {string} password The saved password.
      */
     showPassword_: function(index, password) {
@@ skipping 45 matching lines @@
     'setPasswordExceptionsList',
     'showPassword'
   ]);
 
   // Export
   return {
     PasswordManager: PasswordManager
   };
 
 });