summaryrefslogtreecommitdiffstats
path: root/chrome/browser
diff options
context:
space:
mode:
authorskrul@chromium.org <skrul@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>2010-04-19 21:39:31 +0000
committerskrul@chromium.org <skrul@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>2010-04-19 21:39:31 +0000
commit0e37afd77290230edace245ecfd51a5dc22c56c7 (patch)
tree105f3bb17d4aa63f54bef6b755f78b8c8e62ca55 /chrome/browser
parent87f64d0a3a65d18ad5360e9326e303079bab2fb0 (diff)
downloadchromium_src-0e37afd77290230edace245ecfd51a5dc22c56c7.zip
chromium_src-0e37afd77290230edace245ecfd51a5dc22c56c7.tar.gz
chromium_src-0e37afd77290230edace245ecfd51a5dc22c56c7.tar.bz2
Tweak sync setup dialog. The goal here is to make it look more like the old version (see bug for screenshots).
BUG=41708 Changes include: - Justify the introduction text - Align customize/cancel buttons to the bottom of the window. I uploaded a screen shot of the changed window to the bug. I also created a test page that iframes the html of the login dialog so it makes it easier to work on the layer without having to compile and run chrome to see it. Review URL: http://codereview.chromium.org/1654020 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@44962 0039d316-1c4b-4281-b951-d872f2087c98
Diffstat (limited to 'chrome/browser')
-rwxr-xr-xchrome/browser/sync/resources/gaia_login.html20
-rw-r--r--chrome/browser/sync/resources/gaia_login_test.html126
2 files changed, 138 insertions, 8 deletions
diff --git a/chrome/browser/sync/resources/gaia_login.html b/chrome/browser/sync/resources/gaia_login.html
index c9f410f..0e15e11 100755
--- a/chrome/browser/sync/resources/gaia_login.html
+++ b/chrome/browser/sync/resources/gaia_login.html
@@ -1,4 +1,5 @@
<html i18n-values="dir:textdirection;">
+ <head>
<style type="text/css"><!--
body,td,div,p,a,font,span {font-family: arial,sans-serif;}
body { background-color:#ffffff }
@@ -7,7 +8,6 @@
A:active { color:#ff0000; }
.form-noindent {background-color: #ffffff; border: #C3D9FF 1px solid}
--></style>
- <head>
<style type="text/css"><!--
.body { margin-left: 3em;
margin-right: 5em;
@@ -70,13 +70,16 @@
.cancelspaceforcaptcha {
height: 5px;
}
+ #top_blurb {
+ text-align: justify;
+ }
-->
</style>
</head>
<body bgcolor="#ffffff" vlink="#666666"
i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"
- style="margin-bottom: 0; margin-top: 6px;" onload="initForm();">
- <table width="100%" align="center" cellpadding="1" cellspacing="1">
+ style="margin-bottom: 6px; margin-top: 6px;" onload="initForm();">
+ <table width="100%" height="100%" align="center" cellpadding="1" cellspacing="1">
<tr>
<td valign="top"> <!-- LOGIN BOX -->
<script>
@@ -283,7 +286,7 @@
.gaia.le.fpwd { font-family: Arial, Helvetica, sans-serif; font-size: 70%; }
.gaia.le.chusr { font-family: Arial, Helvetica, sans-serif; font-size: 70%; }
.gaia.le.val { font-family: Arial, Helvetica, sans-serif; font-size: smaller; }
-.gaia.le.button { font-family: Arial, Helvetica, sans-serif; font-size: smaller; }
+.gaia.le.button { font-family: Arial, Helvetica, sans-serif; }
.gaia.le.rem { font-family: Arial, Helvetica, sans-serif; font-size: smaller; }
.gaia.captchahtml.desc { font-family: arial, sans-serif; font-size: smaller; }
.gaia.captchahtml.cmt { font-family: arial, sans-serif; font-size: smaller;
@@ -317,7 +320,6 @@
<tr>
<td valign="top" id="gaia_logo">
<img src="google_transparent.png" alt="Google">
- </img>
</td>
<td valign="middle">
<font size="+0">
@@ -487,13 +489,15 @@
<td class="cancelspacenocaptcha" id="cancelspacer" colspan="2">
</td>
</tr>
-</table>
-<div class="endaligned">
+<tr>
+ <td class="endaligned noverticalpadding" colspan="2" style="vertical-align: bottom">
<input id="customize" type="button" name="customize"
i18n-values="value:customize" onclick="showCustomize();"
style="width:150;visibility:hidden" disabled="disabled">
<input type="button" name="cancel" i18n-values="value:cancel"
onclick="CloseDialog();" style="width:85">
-</div>
+ </td>
+</tr>
+</table>
</body>
</html>
diff --git a/chrome/browser/sync/resources/gaia_login_test.html b/chrome/browser/sync/resources/gaia_login_test.html
new file mode 100644
index 0000000..6de84a9
--- /dev/null
+++ b/chrome/browser/sync/resources/gaia_login_test.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html>
+<!--
+This page is a simple testing environment for gaia_login.html to help
+iterate on the design without having to compile and launch the
+browser. Note that you must supply the "--allow-file-access-from-files"
+for the chrome you are using to load this page for this to work.
+-->
+<style>
+body {
+ background-color: #d0d0d0;
+}
+
+#iframe {
+ height: 375px;
+ width: 421px;
+ border: 0px;
+ float: left;
+}
+#options {
+ float: left;
+}
+
+</style>
+<script>
+function gel(id) {
+ return document.getElementById(id);
+}
+
+function get_selected_value(el) {
+ for (var i = 0; i < el.length; ++i) {
+ if (el[i].checked)
+ return el[i].value;
+ }
+ return null;
+}
+
+function set_up_testing() {
+ var win = window.frames[0];
+ var doc = win.document;
+ var form = gel("form");
+ form.addEventListener("change", function() { update(); }, true);
+
+ win.JSON = {};
+ win.JSON.parse = function() {
+ return {
+ showCustomize: form.show_customize.checked,
+ error: get_selected_value(form.error),
+ user: "homer@gmail.com",
+ captchaUrl: "https://www.google.com/accounts/Captcha"
+ };
+ };
+
+ console.log(win.JSON.parse());
+
+ set_text("introduction",
+ "Chromium sync makes it easy to share your data (such as " +
+ "bookmarks and preferences) between your computers. Chromium " +
+ "synchronizes your data by storing it online with Google when " +
+ "you login with your Google Account.");
+ set_text("settingupsync", "Setting up sync");
+ set_text("errorsigningin", "Error signing in.");
+ set_text("signinsuffix", "Account");
+ set_text("emaillabel", "Email:");
+ set_text("cannotbeblank", "cannotbeblank");
+ set_text("passwordlabel", "Password:");
+ set_text("invalidcredentials", "Invalid user name or password.");
+ set_text("captchainstructions",
+ "Enter the correct password above and then type the characters " +
+ "you see in the picture below.");
+ set_text("couldnotconnect", "Could not connect to the server");
+ set_text("value:signin", "Sign in");
+ set_text("href:cannotaccessaccounturl", "href:cannotaccessaccounturl");
+ set_text("cannotaccessaccount", "I cannot access my account");
+ set_text("href:createnewaccounturl", "href:createnewaccounturl");
+ set_text("createaccount", "Create a Google account");
+ set_text("value:customize", "Customize sync...");
+ set_text("value:cancel", "Cancel");
+
+ function set_text(id, text) {
+ if (id.indexOf(":") >= 0) {
+ var node = doc.evaluate("//*[@i18n-values='" + id + "']",
+ doc,
+ null,
+ XPathResult.FIRST_ORDERED_NODE_TYPE,
+ null).singleNodeValue;
+ node.setAttribute(id.split(":")[0], text);
+ } else {
+ var node = doc.evaluate("//*[@i18n-content='" + id + "']",
+ doc,
+ null,
+ XPathResult.FIRST_ORDERED_NODE_TYPE,
+ null).singleNodeValue;
+ node.innerHTML = text;
+ }
+ }
+
+ win.initForm();
+}
+
+function update() {
+ window.frames[0].document.location.reload();
+}
+
+</script>
+<body>
+<div>
+<iframe
+ id="iframe"
+ src="gaia_login.html"
+ onload="set_up_testing()">
+</iframe>
+<div id="options">
+<form id="form" name="form">
+<p><input name="show_customize" type="checkbox" checked> Show customize</p>
+<p>
+ <input type="radio" name="error" value="" checked> No Error
+ <input type="radio" name="error" value="1"> Bad Password
+ <input type="radio" name="error" value="3"> Lost Connection
+ <input type="radio" name="error" value="4"> Captcha
+</p>
+</form>
+</div>
+</div>
+</body>
+</html>