Bug 998081 - Show login metadata in password manager UI. r=mattn

toolkit/components/passwordmgr/content/passwordManager.js

@@ -8,6 +8,11 @@
 
 var kSignonBundle;
 var showingPasswords = false;
+var dateFormatter = new Intl.DateTimeFormat(undefined,
+                      { day: "numeric", month: "short", year: "numeric" });
+var dateAndTimeFormatter = new Intl.DateTimeFormat(undefined,
+                             { day: "numeric", month: "short", year: "numeric",
+                               hour: "numeric", minute: "numeric" });
 
 function SignonsStartup() {
   kSignonBundle = document.getElementById("signonBundle");
@@ -41,6 +46,7 @@ var signonsTreeView = {
   getProgressMode : function(row,column) {},
   getCellValue : function(row,column) {},
   getCellText : function(row,column) {
+    var time;
     var signon = this._filterSet.length ? this._filterSet[row] : signons[row];
     switch (column.id) {
       case "siteCol":
@@ -51,6 +57,17 @@ var signonsTreeView = {
         return signon.username || "";
       case "passwordCol":
         return signon.password || "";
+      case "timeCreatedCol":
+        time = new Date(signon.timeCreated);
+        return dateFormatter.format(time);
+      case "timeLastUsedCol":
+        time = new Date(signon.timeLastUsed);
+        return dateAndTimeFormatter.format(time);
+      case "timePasswordChangedCol":
+        time = new Date(signon.timePasswordChanged);
+        return dateFormatter.format(time);
+      case "timesUsedCol":
+        return signon.timesUsed;
       default:
         return "";
     }
@@ -77,6 +94,7 @@ function LoadSignons() {
   } catch (e) {
     signons = [];
   }
+  signons.forEach(login => login.QueryInterface(Components.interfaces.nsILoginMetaInfo));
   signonsTreeView.rowCount = signons.length;
 
   // sort and display the table
@@ -197,6 +215,14 @@ function getColumnByName(column) {
       return document.getElementById("userCol");
     case "password":
       return document.getElementById("passwordCol");
+    case "timeCreated":
+      return document.getElementById("timeCreatedCol");
+    case "timeLastUsed":
+      return document.getElementById("timeLastUsedCol");
+    case "timePasswordChanged":
+      return document.getElementById("timePasswordChangedCol");
+    case "timesUsed":
+      return document.getElementById("timesUsedCol");
   }
 }
 

toolkit/components/passwordmgr/content/passwordManager.xul

@@ -54,21 +54,41 @@
 
     <label control="signonsTree" id="signonsIntro"/>
     <separator class="thin"/>
-    <tree id="signonsTree" flex="1" style="height: 20em;" hidecolumnpicker="true"
+    <tree id="signonsTree" flex="1"
+          width="750"
+          style="height: 20em;"
           onkeypress="HandleSignonKeyPress(event)"
           onselect="SignonSelected();"
           context="signonsTreeContextMenu">
       <treecols>
-        <treecol id="siteCol" label="&treehead.site.label;" flex="5"
+        <treecol id="siteCol" label="&treehead.site.label;" flex="40"
                  onclick="SignonColumnSort('hostname');" persist="width"
+                 ignoreincolumnpicker="true"
                  sortDirection="ascending"/>
         <splitter class="tree-splitter"/>
-        <treecol id="userCol" label="&treehead.username.label;" flex="2"
+        <treecol id="userCol" label="&treehead.username.label;" flex="25"
+                 ignoreincolumnpicker="true"
                  onclick="SignonColumnSort('username');" persist="width"/>
         <splitter class="tree-splitter"/>
-        <treecol id="passwordCol" label="&treehead.password.label;" flex="2"
+        <treecol id="passwordCol" label="&treehead.password.label;" flex="15"
+                 ignoreincolumnpicker="true"
                  onclick="SignonColumnSort('password');" persist="width"
                  hidden="true"/>
+        <splitter class="tree-splitter"/>
+        <treecol id="timeCreatedCol" label="&treehead.timeCreated.label;" flex="10"
+                 onclick="SignonColumnSort('timeCreated');" persist="width hidden"
+                 hidden="true"/>
+        <splitter class="tree-splitter"/>
+        <treecol id="timeLastUsedCol" label="&treehead.timeLastUsed.label;" flex="20"
+                 onclick="SignonColumnSort('timeLastUsed');" persist="width hidden"/>
+        <splitter class="tree-splitter"/>
+        <treecol id="timePasswordChangedCol" label="&treehead.timePasswordChanged.label;" flex="10"
+                 onclick="SignonColumnSort('timePasswordChanged');" persist="width hidden"/>
+        <splitter class="tree-splitter"/>
+        <treecol id="timesUsedCol" label="&treehead.timesUsed.label;" flex="1"
+                 onclick="SignonColumnSort('timesUsed');" persist="width hidden"
+                 hidden="true"/>
+        <splitter class="tree-splitter"/>
       </treecols>
       <treechildren/>
     </tree>

toolkit/components/passwordmgr/content/passwordManagerCommon.js

@@ -169,18 +169,40 @@ function SortTree(tree, view, table, column, lastSortColumn, lastSortAscending,
   // determine if sort is to be ascending or descending
   var ascending = (column == lastSortColumn) ? !lastSortAscending : true;
 
-  // do the sort
-  var compareFunc;
-  if (ascending) {
-    compareFunc = function compare(first, second) {
-      return CompareLowerCase(first[column], second[column]);
-    }
-  } else {
-    compareFunc = function compare(first, second) {
-      return CompareLowerCase(second[column], first[column]);
+  function compareFunc(a, b) {
+    var valA, valB;
+    switch (column) {
+      case "hostname":
+        var realmA = a.httpRealm;
+        var realmB = b.httpRealm;
+        realmA = realmA == null ? "" : realmA.toLowerCase();
+        realmB = realmB == null ? "" : realmB.toLowerCase();
+
+        valA = a[column].toLowerCase() + realmA;
+        valB = b[column].toLowerCase() + realmB;
+        break;
+      case "username":
+      case "password":
+        valA = a[column].toLowerCase();
+        valB = b[column].toLowerCase();
+        break;
+
+      default:
+        valA = a[column];
+        valB = b[column];
     }
+
+    if (valA < valB)
+      return -1;
+    if (valA > valB)
+      return 1;
+    return 0;
   }
+
+  // do the sort
   table.sort(compareFunc);
+  if (!ascending)
+    table.reverse();
 
   // restore the selection
   var selectedRow = -1;
@@ -206,28 +228,3 @@ function SortTree(tree, view, table, column, lastSortColumn, lastSortAscending,
   return ascending;
 }
 
-/**
- * Case insensitive string comparator.
- */
-function CompareLowerCase(first, second) {
-  var firstLower, secondLower;
-
-  // Are we sorting nsILoginInfo entries or just strings?
-  if (first.hostname) {
-    firstLower  = first.hostname.toLowerCase();
-    secondLower = second.hostname.toLowerCase();
-  } else {
-    firstLower  = first.toLowerCase();
-    secondLower = second.toLowerCase();
-  }
-
-  if (firstLower < secondLower) {
-    return -1;
-  }
-
-  if (firstLower > secondLower) {
-    return 1;
-  }
-
-  return 0;
-}

toolkit/locales/en-US/chrome/passwordmgr/passwordManager.dtd

@@ -12,6 +12,11 @@
 <!ENTITY      treehead.site.label             "Site">
 <!ENTITY      treehead.username.label         "Username">
 <!ENTITY      treehead.password.label         "Password">
+<!ENTITY      treehead.timeCreated.label         "First Used">
+<!ENTITY      treehead.timeLastUsed.label        "Last Used">
+<!ENTITY      treehead.timePasswordChanged.label "Last Changed">
+<!ENTITY      treehead.timesUsed.label           "Times Used">
+
 <!ENTITY      remove.label                    "Remove">
 <!ENTITY      remove.accesskey                "R">
 <!ENTITY      removeall.label                 "Remove All">