[Password Manager] Copiable username and origin. Linkable origin elided from the left.

ui/webui/resources/js/util.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.
 
 // <include src="assert.js">
 
 /**
  * Alias for document.getElementById.
  * @param {string} id The ID of the element to find.
  * @return {HTMLElement} The found element or null if not found.
@@ skipping 328 matching lines @@
  * @return {string} -webkit-image-set for the favicon.
  */
 function getFaviconImageSet(url, opt_size, opt_type) {
   var size = opt_size || 16;
   var type = opt_type || 'favicon';
   return imageset(
       'chrome://' + type + '/size/' + size + '@scalefactorx/' + url);
 }
 
 /**
+ * Creates a CSS -webkit-image-set based on whether the url is secure.
+ * @param {string} url The url for the icon.
+ * @param {boolean} isUrlSecure True if the url is secure.
+ * @return {string} -webkit-image-set for the icon.
+ */
+function getIconBasedOnUrlSecurity(url, isUrlSecure) {
+  return isUrlSecure ?
+      getLargeiconOrFallbackIconImageSet(url, 16) :
+      getFaviconImageSet('', 16);

[pkotwicz, 2015/10/15 15:44:26]

This code confuses me.

Here is my understanding of the behavior you are introducing
Favicon present for |url|:
- Favicon used for both HTTP and HTTPS
Favicon not present for url:
- "Blank page" used for HTTP
- "Solid gray tile with first letter" of path used for HTTPS

On Android, we are going to replacing the usage of the blank page favicon with
the solid color favicon soon. So I doubt that a user will attribute any meaning
as to which type of fallback icon ("Blank page" or "Solid gray tile") is used.
If the type of fallback icon is important, it would be preferable if you had a
custom image asset to use as the fallback in the HTTP case.

The favicon work seems to be unrelated to crbug.com/483915. Can you pull it out
into a separate CL?

[kolos1, 2015/10/15 20:22:46]

If the url is insecure, we show 'blank' icon. 

If the url is secure:
  if there is an icon, show the icon.
  otherwise show solid gray icon with first letter. 


UI team offered to distinguish secure and insecure origins with icons. It is not
so hard for a user: if an icon is blank, the origins isn't secure. If there is
some 'picture', it is secure. 
  

[pkotwicz, 2015/10/15 21:10:55]

Sorry for my misunderstanding. I think that we should not be hijacking  the
default favicon to have a special meaning.

I am in favor of having a dedicated asset for insecure URLs. You should be able
to access it via chrome://theme/IDR_FAVICON_INSECURE (Where IDR_FAVICON_INSECURE
is a new image asset)

We are not yet ready to start using gray tiles with a letter as the default icon
in desktop Chrome UI. Making the switch is easiest if everything is switched
over simultaneously. I have an OKR to switch over the Android UI this quarter.

[kolos1, 2015/10/16 14:19:26]

Thanks for your advices. 

Could you share your opinion with UI team, please? I will add you as cc to email
thread. 

Could you explain why we cannot use gray tiles with a letter? 

+}
+
+/**
+ * Creates a CSS -webkit-image-set for a large icon request. The service
+ * chrome://large-icon/ return a fallback icon, if there is no available icon.
+ * @param(string) path The url for the large icon.
+ * @param {number=} opt_size Optional preferred size of the large icon.
+ * @return {string} -webkit-image-set for the large icon.
+ */
+function getLargeiconOrFallbackIconImageSet(path, opt_size) {
+  // Description of fallback icon's parameters can be found in
+  // chrome/browser/ui/webui/fallback_icon_source.h.
+  // The first parameter is ignored, since the size of icon should be defined in
+  // the following way 'chrome://large-icon/size/...'.
+  var fallback_icon_parameters = 'fallback/,777,FFF,0.625,0.4/';
+  var size = opt_size || 16;
+  var supportedScaleFactors = getSupportedScaleFactors();
+  var result = '';
+  for (var i = 0; i < supportedScaleFactors.length; ++i) {
+    var scaleFactor = supportedScaleFactors[i];
+    var scaledSize = Math.round(size * scaleFactor);
+    var large_icon = 'chrome://large-icon/' + scaledSize + '/' +
+        fallback_icon_parameters + path;
+    result += url(large_icon) + ' ' + scaleFactor + 'x';
+    if (i != supportedScaleFactors.length - 1)
+      result += ', ';
+  }
+  return '-webkit-image-set(' + result + ')';
+}
+
+/**
  * Creates a new URL for a favicon request for the current device pixel ratio.
  * The URL must be updated when the user moves the browser to a screen with a
  * different device pixel ratio. Use getFaviconImageSet() for the updating to
  * occur automatically.
  * @param {string} url The url for the favicon.
  * @param {number=} opt_size Optional preferred size of the favicon.
  * @param {string=} opt_type Optional type of favicon to request. Valid values
  *     are 'favicon' and 'touch-icon'. Default is 'favicon'.
  * @return {string} Updated URL for the favicon.
  */
@@ skipping 96 matching lines @@
  * @param {number} maxLength The maximum length allowed for the string.
  * @return {string} The original string if its length does not exceed
  *     |maxLength|. Otherwise the first |maxLength| - 1 characters with '...'
  *     appended.
  */
 function elide(original, maxLength) {
   if (original.length <= maxLength)
     return original;
   return original.substring(0, maxLength - 1) + '\u2026';
 }