Issue 501916 : Add data type counts to profile deletion flow

ui/login/account_picker/user_pod_row.js

 // Copyright 2014 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 User pod row implementation.
  */
 
 cr.define('login', function() {
   /**
@@ skipping 936 matching lines @@
 
     /**
      * Gets action box menu, remove user command item div.
      * @type {!HTMLInputElement}
      */
     get actionBoxMenuRemoveElement() {
       return this.querySelector('.action-box-menu-remove');
     },
 
     /**
-     * Gets action box menu, remove user warning text div.
-     * @type {!HTMLInputElement}
-     */
-    get actionBoxRemoveUserWarningTextElement() {
-      return this.querySelector('.action-box-remove-user-warning-text');
-    },
-
-    /**
-     * Gets action box menu, remove legacy supervised user warning text div.
-     * @type {!HTMLInputElement}
-     */
-    get actionBoxRemoveLegacySupervisedUserWarningTextElement() {
-      return this.querySelector(
-          '.action-box-remove-legacy-supervised-user-warning-text');
-    },
-
-    /**
      * Gets action box menu, remove user command item div.
      * @type {!HTMLInputElement}
      */
     get actionBoxRemoveUserWarningElement() {
       return this.querySelector('.action-box-remove-user-warning');
     },
 
     /**
      * Gets action box menu, remove user command item div.
      * @type {!HTMLInputElement}
@@ skipping 434 matching lines @@
       // Move up the menu if it overlaps shelf.
       var maxHeight = cr.ui.LoginUITools.getMaxHeightBeforeShelfOverlapping(
           this.actionBoxMenu);
       var actualHeight = parseInt(
           window.getComputedStyle(this.actionBoxMenu).height);
       if (maxHeight < actualHeight) {
         this.actionBoxMenu.classList.add('menu-moved-up');
         this.actionBoxAreaElement.classList.add('menu-moved-up');
       }
       chrome.send('logRemoveUserWarningShown');
+
+      // Show extra statistics information for desktop users
+      if (this.user.isDesktopUser) {
+        // set a global handler for the callback
+        window.updateRemoveWarningDialog =
+            this.updateRemoveWarningDialog_.bind(this);
+        chrome.send('removeUserWarningLoadStats', [this.user.profilePath]);
+      }
     },
 
     /**
+     * Refresh the statistics in the remove user warning dialog.
+     * @param {string} profilePath The filepath of the URL (must be verified)
+     * @param {Object} profileStats Statistics associated with profileURL.
+     */
+    updateRemoveWarningDialog_: function(profilePath, profileStats) {
+      if (profilePath === this.user.profilePath) {
+        // Remove class has-no-stats. The class may be set before, but that is
+        // no longer true when this function is called.
+        this.classList.remove('has-no-stats');
+
+        // Converting profileStats into id attribute by an object.
+        var stats_id_map = {
+          'BrowsingHistory': 'action-box-remove-user-warning-history',
+          'Passwords': 'action-box-remove-user-warning-passwords',
+          'Bookmarks': 'action-box-remove-user-warning-bookmarks',
+          'Settings': 'action-box-remove-user-warning-settings',
+        }
+        // Load individual statistics
+        var num_stats_loaded = 0;
+        var total_count = 0;
+        for (var key in profileStats) {
+          if (stats_id_map.hasOwnProperty(key)) {
+            var count = profileStats[key].success ? profileStats[key].count : 0;

[Mike Lerman, 2015/08/24 14:45:40]

I'm not sure if an error in counting means we want to list "0". I posted a
question in the bug for the UI folks, to see their answer.

[lwchkg, 2015/08/26 14:43:12]

By rolfe: (actually referring to #39 in the bug)
 > No. 38: Try "This will permanently delete at least 64 items..."
 > or "This will permanently delete the following items...

How often will these failure cases happen? If it's rare I think it is not worth
to add 2 more translatable strings, with extra css and html to handle the
strings. While these cases can be easy to code, it adds complexity to future
maintenance, and is also very difficult to test.

I prefer to revert to the "no-stats" version of the dialog because it only
requires a few lines of JS code.

@Mike, what is your opinion? (You may post on the bug directly.)

[Mike Lerman, 2015/08/27 18:13:48]

Having asked the question, I prefer to implement the answer given :) I don't
think code need become significantly more complex. Track an additional variable,
declared near line 1440, called "any_stat_failed" or similar. Around line 1443,
if profileState[key].success == false, skip setting the textContent and other
items, and instead set any_stat_failed to true, and then have some javascript to
write the additional string. This seems reasonable in terms of effort. I don't
know how often these cases will arise, but as I've learned with Chrome, even
very small percentages are still large numbers of users.

+            this.querySelector("." + stats_id_map[key]).textContent = count;
+            num_stats_loaded++;
+            total_count += count;
+          }
+        }
+        // Write total number if all statistics are loaded.
+        if (num_stats_loaded === Object.keys(stats_id_map).length) {
+          elements = this.getElementsByClassName('total-count');
+          for (var i = 0; i < elements.length; i++) {
+            elements[i].textContent = total_count;
+          }
+        }
+      }
+    },
+
+    /**
      * Handles a click event on remove user confirmation button.
      * @param {Event} e Click event.
      */
     handleRemoveUserConfirmationClick_: function(e) {
       if (this.isActionBoxMenuActive) {
         this.isActionBoxMenuActive = false;
         this.removeUser(this.user);
         e.stopPropagation();
       }
     },
@@ skipping 502 matching lines @@
 
     /** @override */
     update: function() {
       this.imageElement.src = this.user.userImage;
       this.nameElement.textContent = this.user.displayName;
       this.reauthNameHintElement.textContent = this.user.displayName;
 
       var isLockedUser = this.user.needsSignin;
       var isLegacySupervisedUser = this.user.legacySupervisedUser;
       var isChildUser = this.user.childUser;
+      var isSyncedUser = this.user.emailAddress !== "";
+      var isProfileLoaded = this.user.isProfileLoaded;
       this.classList.toggle('locked', isLockedUser);
       this.classList.toggle('legacy-supervised', isLegacySupervisedUser);
       this.classList.toggle('child', isChildUser);
+      this.classList.toggle('synced', isSyncedUser);
+      this.classList.toggle('has-no-stats', !isProfileLoaded);
 
       if (this.isAuthTypeUserClick)
         this.passwordLabelElement.textContent = this.authValue;
 
-      this.actionBoxRemoveUserWarningTextElement.hidden =
-          isLegacySupervisedUser;
-      this.actionBoxRemoveLegacySupervisedUserWarningTextElement.hidden =
-          !isLegacySupervisedUser;
+      // Add localized messages where $1 will be replaced with
+      // <span class="total-count"></span>. Done only once.
+      messagesToAdd = [
+        {
+          selector: '.action-box-remove-user-warning-text-nonsync',
+          messageID: 'removeUserWarningTextNonSync'
+        },
+        {
+          selector: '.action-box-remove-user-warning-text-sync',
+          messageID: 'removeUserWarningTextSync'
+        }
+      ];
+      var waitingMessage =
+          loadTimeData.getString('removeUserWarningTextCalculating');
+      for (var i = 0; i < messagesToAdd.length; i++) {
+        var element = this.querySelector(messagesToAdd[i].selector);
+        if (element.childElementCount)
+          continue;
+
+        var message = loadTimeData.getString(messagesToAdd[i].messageID);
+        messageParts = message.split('$1');
+        numParts = messageParts.length;
+        for (var j = 0; j < numParts; j++) {
+          element.appendChild(document.createTextNode(messageParts[j]));
+          if (j < numParts - 1) {
+            var elementToAdd = document.createElement('span');
+            elementToAdd.classList.add('total-count');
+            elementToAdd.textContent = waitingMessage;
+            element.appendChild(elementToAdd);
+          }
+        }
+      }
 
       this.passwordElement.setAttribute('aria-label', loadTimeData.getStringF(
         'passwordFieldAccessibleName', this.user_.emailAddress));
 
       UserPod.prototype.updateActionBoxArea.call(this);
     },
 
     /** @override */
     activate: function(e) {
       if (!this.user.needsSignin) {
@@ skipping 1199 matching lines @@
        if (pod && pod.multiProfilesPolicyApplied) {
          pod.userTypeBubbleElement.classList.remove('bubble-shown');
        }
      }
   };
 
   return {
     PodRow: PodRow
   };
 });