MD User Manager: Overhaul Urls

chrome/browser/resources/md_user_manager/user_manager.html

Index: chrome/browser/resources/md_user_manager/user_manager.html
diff --git a/chrome/browser/resources/md_user_manager/user_manager.html b/chrome/browser/resources/md_user_manager/user_manager.html
index 28f37709d56ddc905423063cd6cf0b6bb93b6424..ce3234071719c795145da001ab2e71364d4288fa 100644
--- a/chrome/browser/resources/md_user_manager/user_manager.html
+++ b/chrome/browser/resources/md_user_manager/user_manager.html
@@ -16,19 +16,286 @@
   <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
 
   <link rel="import" href="chrome://resources/html/polymer.html">
+  <link rel="import" href="/control_bar.html">
+  <link rel="import" href="/error_dialog.html">
+  <link rel="import" href="/shared_styles.html">
+  <link rel="import" href="/strings.html">
+  <link rel="import" href="/user_manager_pages.html">
+  <link rel="import" href="/user_manager_tutorial.html">
+  <link rel="import" href="chrome://resources/html/cr/ui.html">
+  <link rel="import" href="chrome://resources/html/util.html">
+  <!-- Make sure iron-icon and cr iconset are imported to use in
+       user_pod_template.html -->
   <link rel="import" href="chrome://resources/cr_elements/icons.html">
-  <!-- Make sure iron-icon is imported to use in user_pod_template.html -->
   <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
   <!-- Make sure paper-button is imported to use in user_pod_template.html -->
   <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
-  <link rel="import" href="chrome://md-user-manager/control_bar.html">
-  <link rel="import" href="chrome://md-user-manager/error_dialog.html">
-  <link rel="import" href="chrome://md-user-manager/user_manager_pages.html">
-  <link rel="import" href="chrome://md-user-manager/user_manager_styles.html">
-  <link rel="import" href="chrome://md-user-manager/user_manager_tutorial.html">
-  <link rel="import" href="chrome://resources/html/cr/ui.html">
-  <link rel="import" href="chrome://resources/html/util.html">
-  <style is="custom-style" include="user-manager-styles"></style>
+  <style is="custom-style" include="shared-styles">
+    body {
+      background-color: var(--paper-grey-100);
+    }
+
+    user-manager-pages,
+    #login-header-bar {
+      bottom: 0;
+      left: 0;
+      position: absolute;
+      right: 0;
+    }
+
+    user-manager-pages {
+      top: 0;
+    }
+
+    #login-header-bar.shadow {
+      box-shadow: 0 -1px 3px rgba(0, 0, 0, .2);
+    }
+
+    /* Overrides src/ui/login/screen_container.css for the desktop user
+     * manager. */
+
+    #outer-container {
+      min-height: 0;
+      overflow-x: hidden;
+      overflow-y: auto;
+      padding: 40px 0 30px;
+      z-index: initial;
+    }
+
+    .bubble.faded {
+      opacity: 0;
+    }
+
+    .pod {
+      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .24),
+                  0 0 2px 0 rgba(0, 0, 0, .12);
+      color: var(--primary-text-color);
+      cursor: default;
+      height: auto;
+      transform: none;
+      width: auto;
+    }
+
+    .pod.faded {
+      opacity: .6;
+    }
+
+    .pod.focused {
+      box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .26),
+                  0 14px 28px 0 rgba(0, 0, 0, .25);
+    }
+
+    .pod .user-image-gradient-area,
+    .pod .user-image-pane {
+      border-top-left-radius: 2px;
+      border-top-right-radius: 2px;
+    }
+
+    .pod .user-image-pane {
+      overflow: hidden;
+      position: static;
+    }
+
+    .pod .user-image {
+      height: 160px;
+      width: 160px;
+    }
+
+    .pod .main-pane {
+      line-height: 20px;
+      padding: 10px;
+      position: static;
+    }
+
+    .pod .main-pane .name-container {
+      display: block;
+      position: static;
+      width: auto;
+    }
+
+    .pod .main-pane .name-container .name,
+    .reauth-hint-container .reauth-name-hint {
+      color: inherit;
+      font-size: inherit;
+      margin: 0;
+      padding: 0;
+      text-align: initial;
+      width: 120px;
+    }
+
+    .pod .indicator-container {
+      bottom: 10px;
+      height: 20px;
+      left: auto;
+      position: absolute;
+      right: 10px;
+      top: auto;
+      width: 20px;
+    }
+
+    html[dir='rtl'] .pod .indicator-container {
+      left: 10px;
+      right: auto;
+    }
+
+    /* Using -webkit-mask on the indicators allows us to tweak the color. */
+    .pod .indicator-container > .indicator {
+      -webkit-mask-position: center;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-size: 16px;
+      background: var(--paper-grey-600);
+      display: none;
+      height: 100%;
+    }
+
+    .pod.locked .locked-indicator {
+      -webkit-mask-image: url(../../../../ui/webui/resources/images/lock.svg);
+      display: block;
+    }
+
+    .pod.legacy-supervised .legacy-supervised-indicator {
+      -webkit-mask-image:
+          url(../../../../ui/webui/resources/images/supervisor_account.svg);
+      display: block;
+    }
+
+    .pod.child .child-indicator {
+      -webkit-mask-image:
+          url(../../../../ui/webui/resources/images/account_child_invert.svg);
+      display: block;
+    }
+
+    .action-box-area:focus ~ .user-image-gradient-area,
+    .action-box-area.hovered ~ .user-image-gradient-area {
+      background-image: linear-gradient(rgba(0, 0, 0, .2), transparent 100%);
+      display: initial;
+      height: 40px;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+
+    .action-box-area {
+      background-color: transparent;
+    }
+
+    .action-box-area.menu-moved-up {
+      transform: none;
+    }
+
+    .action-box-area .action-box-button {
+      display: none;
+    }
+
+    .action-box-area .action-box-icon {
+      color: white;
+      display: inline-flex;
+      margin-top: 4px;
+    }
+
+    .pod.focused:not(.locked) .auth-container {
+      display: none;
+    }
+
+    .pod.focused:not(.multiprofiles-policy-applied) .auth-container {
+      left: 0;
+    }
+
+    .pod .auth-container input[type='password'] {
+      font: inherit;
+      line-height: inherit;
+      padding: 10px;
+      top: 0;
+      width: 140px;
+    }
+
+    .pod .auth-container input[type='password']:focus {
+      outline: 0;
+    }
+
+    .pod[auth-type='onlineSignIn'] .reauth-hint-container {
+      flex-direction: row-reverse;
+      margin: 0;
+      padding: 10px;
+    }
+
+    .reauth-hint-container .reauth-warning {
+      -webkit-mask-size: 16px;
+      height: 20px;
+      width: 20px;
+    }
+
+    .action-box-area.active .action-box-button {
+      display: none;
+    }
+
+    .action-box-area.active ~ .action-box-menu:not(.menu-moved-up) {
+      top: 8px;
+    }
+
+    .action-box-area.active ~ .action-box-menu {
+      border: none;
+      box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .19);
+      right: 8px;
+      width: 224px;
+    }
+
+    html[dir=rtl] .action-box-area.active ~ .action-box-menu {
+      left: 8px;
+      right: auto;
+    }
+
+    .action-box-menu-title {
+      color: inherit;
+      padding: 16px 12px;
+    }
+
+    .action-box-menu-title-name,
+    .action-box-menu-title-email {
+      height: auto;
+    }
+
+    .action-box-menu-title-email {
+      color: var(--paper-grey-600);
+    }
+
+    .action-box-menu-remove {
+      border-top: var(--user-manager-separator-line);
+      line-height: 32px;
+      padding: 8px 12px;
+    }
+
+    .action-box-remove-user-warning {
+      align-items: center;
+      border-top: var(--user-manager-separator-line);
+      display: flex;
+      flex-direction: column;
+      font-size: inherit;
+      line-height: 20px;
+      padding: 12px;
+    }
+
+    .action-box-remove-user-warning > * {
+      word-wrap: break-word;
+    }
+
+    .total-count,
+    .pod:not(.synced) .action-box-remove-user-warning-text {
+      font-weight: 500;
+    }
+
+    .action-box-remove-user-warning .remove-warning-button {
+      --paper-button: {
+        background: var(--google-red-700);
+        color: white;
+        font-weight: 500;
+      };
+      --paper-button-flat-keyboard-focus: {
+        background: rgb(173, 50, 36);
+      };
+      @apply(--action-button);
+    }
+  </style>
 </head>
 <body>
   <user-manager-pages>
@@ -48,7 +315,6 @@
     <error-dialog></error-dialog>
     <include src="../../../../ui/login/account_picker/user_pod_template.html">
   </user-manager-pages>
-  <link rel="import" href="chrome://md-user-manager/strings.html">
   <link rel="import" href="chrome://resources/html/i18n_template.html">
   <script src="user_manager.js"></script>
 </body>