Issue 501916 : Add data type counts to profile deletion flow

ui/login/account_picker/user_pod_row.css

 /* 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.
  *
  * This is the stylesheet used by user pods row of account picker UI.
  */
 
 podrow {
   /* Temporarily disabled because animation interferes with updating screen's
    size. */
@@ skipping 526 matching lines @@
   background-color: #f3f3f3;
 }
 
 .action-box-remove-user-warning {
   border-top: 1px solid lightgray;
   font-size: 12px;
   line-height: 18px;
   padding: 20px;
 }
 
-.action-box-remove-user-warning-text,
-.action-box-remove-legacy-supervised-user-warning-text {
+.action-box-remove-user-warning > div,
+.action-box-remove-user-warning > table {
   padding-bottom: 20px;
 }
 
+.total-count {
+  font-weight: bold;
+}
+
+.action-box-remove-user-warning-table-nonsync {
+  border-spacing: 0;
+  width: 100%;
+}
+
+.action-box-remove-user-warning-table td {
+  padding: 0;
+}
+
+.action-box-remove-user-warning-table-numbers {
+  color: #757575;
+  text-align: end;
+}
+
 .action-box-remove-user-warning .remove-warning-button {
   width: 100%;
 }
 
+/* Hide dialogs not in correct category */

[Dmitry Polukhin, 2015/08/13 15:34:17]

I would prefer to show it when it is need instead of hiding it when it is not
needed.

[lwchkg, 2015/08/17 17:36:32]

I'd also like to do it, but it mean we need to hide everything first and counter
that effect with another rule. Sadly there is no generic opposite to "display:
none" in CSS. All you have is "display: block", "display: table" and we need to
write a rule for each different tag.

[Dmitry Polukhin, 2015/08/18 10:25:50]

Not sure that I understand the problem. You can add some parent div and control
its visibility (visibility:hidden).

[lwchkg, 2015/08/21 17:36:44]

Just confirmed that (visibility: hidden; position: absolute) works, so
technically this is feasible.

@Mike: Should I change the CSS here to "show it when it is need instead of
hiding it when it is not needed"?

+.pod.legacy-supervised .sync,
+.pod.legacy-supervised .non-sync,
+.pod:not(.legacy-supervised)
+    .action-box-remove-legacy-supervised-user-warning-text,
+.pod.synced .non-sync,
+.pod:not(.synced) .sync,
+.pod.has-no-stats .has-stats,
+.pod:not(.has-no-stats) .has-no-stats {
+  display: none;
+}
+
 .user-type-bubble {
   background-color: white;
   border: 1px solid lightgray;
   border-radius: 2px;
   left: 5px;
   opacity: 0;
   padding: 17px;
   position: absolute;
   top: 20px;
   transition: all 100ms;
@@ skipping 216 matching lines @@
   -webkit-animation: ellipsis-component2 1.5s infinite;
 }
 
 @-webkit-keyframes ellipsis-component2 {
   0% { opacity: 0; }
   25% { opacity: 0; }
   50% { opacity: 0; }
   75% { opacity: 1; }
   100% { opacity: 0; }
 }