Multi-Profiles: New Profile Setup UI

chrome/browser/resources/new_profile.js

+// Copyright (c) 2011 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.
+
+var gSelectedAvatarIconIndex = 0;

[James Hawkins, 2011/06/30 23:02:58]

Document this variable.

[sail, 2011/07/01 01:16:18]

Done.

+
+///////////////////////////////////////////////////////////////////////////////
+// Helper functions

[James Hawkins, 2011/06/30 23:02:58]

Use a more descriptive name or remove the comment.

[sail, 2011/07/01 01:16:18]

Done.

+function $(o) {return document.getElementById(o);}

[James Hawkins, 2011/06/30 23:02:58]

Haven't you already included cr.js? This is already provided.

[sail, 2011/07/01 01:16:18]

Done.

+
+function load() {
+  // Allow platform specific CSS rules.
+  cr.enablePlatformSpecificCSSRules();
+
+  // Install handler for key presses.
+  document.addEventListener('keydown', keyDownEventHandler);
+
+  chrome.send('requestProfileInfo', []);

[James Hawkins, 2011/06/30 23:02:58]

No need for the empty last param, here and elsewhere.

[sail, 2011/07/01 01:16:18]

Done.

+  updateLogo();
+  $('profile-name').focus();
+}
+
+function onCreate() {
+  chrome.send('create', [$('profile-name').value,
+                         String(gSelectedAvatarIconIndex)]);
+}
+
+function onCancel() {
+  chrome.send('cancel', []);
+}
+
+function onAvatarClicked(index) {
+  var menu = document.getElementById("avatar-menu");

[James Hawkins, 2011/06/30 23:02:58]

$('')

[sail, 2011/07/01 01:16:18]

Done.

+  for (var i = 0; i < menu.childNodes.length; i++) {
+    var button = menu.childNodes[i];
+    if (i == index) {
+      button.setAttribute("style", "background-color: #bbcee9");

[James Hawkins, 2011/06/30 23:02:58]

You should use a class that specifies this instead.

[sail, 2011/07/01 01:16:18]

Done.

+    } else {
+      button.setAttribute("style", "background-color: transparent");
+    }
+  }
+  gSelectedAvatarIconIndex = index;
+}
+
+function updateLogo() {
+  var imageId = 'IDR_PRODUCT_LOGO';
+  if (document.documentElement.getAttribute('customlogo') == 'true')

[James Hawkins, 2011/06/30 23:02:58]

$('')

[sail, 2011/07/01 01:16:18]

Done.

+    imageId = 'IDR_CUSTOM_PRODUCT_LOGO';
+
+  $('logo-img').src = 'chrome://theme/' + imageId + '?' + Date.now();
+}
+
+function keyDownEventHandler() {
+  // Close the top overlay or sub-page on esc.

[James Hawkins, 2011/06/30 23:02:58]

You copied this comment from options_page.js and forgot to remove it. Also, have
you verified with UI leads that pressing escape should close this page? That
seems unintuitive.

[sail, 2011/07/01 01:16:18]

Asking.
Now that I think about it, I agree that escape probably doesn't make sense here.

+  if (event.keyCode == 27) {  // Esc
+    onCancel();
+  }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// Chrome callbacks:
+
+function setProfileInfo(profileName, profileIconIndex) {
+  $('profile-name').value = profileName;
+  onAvatarClicked(profileIconIndex);
+}
+
+function setDefaultAvatarImages(imageUrlList) {
+  var menu = document.getElementById("avatar-menu");

[James Hawkins, 2011/06/30 23:02:58]

$('')

+  for (var i = 0; i < imageUrlList.length; i++) {
+    var button = document.createElement("input");
+    button.setAttribute("type", "image");
+    button.setAttribute("class", "avatar-button");
+    button.setAttribute("src", imageUrlList[i]);
+    button.setAttribute("onclick", "onAvatarClicked(" + i + ")");
+    menu.appendChild(button);
+  }
+}
+
+// Add handlers to HTML elements.
+document.body.onload = load;
+$('create-button').onclick = function () { onCreate(''); };

[James Hawkins, 2011/06/30 23:02:58]

Do all of this work in load().

[sail, 2011/07/01 01:16:18]

Done.

+$('cancel-button').onclick = function () { onCancel(''); };
+$('profile-name-form').onsubmit = function () {
+  onCreate('');
+  // Return false to prevent the submit handler from doing a post.
+  return false;
+};