Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(704)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: chrome/browser/sync/resources/configure.html

Issue 6865030: Sync: Refresh the UI to match Alex's mocks. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Created 9 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« chrome/app/generated_resources.grd ('K') | « chrome/app/resources/locale_settings.grd ('k') | chrome/browser/sync/resources/gaia_login.css » ('j') | chrome/browser/sync/sync_setup_wizard.cc » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: chrome/browser/sync/resources/configure.html
diff --git a/chrome/browser/sync/resources/configure.html b/chrome/browser/sync/resources/configure.html
index ebadb60e1df61958b6b7a256cdde62fcc9914357..d24770ba6fe2f28a1fc7941e971d3a62d9def4d4 100644
--- a/chrome/browser/sync/resources/configure.html
+++ b/chrome/browser/sync/resources/configure.html
@@ -11,9 +11,37 @@ html[os='mac'] body {
line-height: 1.5em;
background: #FFFFFF;
}
+
+h4 {
+ margin: 10px 0;
+}
+
+hr {
+ background-color: #ddd;
+ border: 0;
+ height: 1px;
+ margin: 5px 0;
+ text-align: left;
+ width: 100%;
+}
+
form {
-webkit-user-select: none;
}
+
+.content-area {
+ padding: 10px 15px;
+}
+
+.action-area {
+ -webkit-box-align: center;
+ -webkit-box-orient: horizontal;
+ -webkit-box-pack: end;
+ border-top: 1px solid rgba(188, 193, 208, .5);
+ display: -webkit-box;
+ padding: 12px;
+}
+
.sync-header {
font-size: 1.2em;
font-weight: bold;
@@ -22,6 +50,35 @@ form {
.sync-select-customization {
margin-top: 10px;
}
+
+#customize-link-container {
+ -webkit-box-flex: 1;
+}
+
+#sync-passphrase-container {
+ margin: 10px 0;
+}
+
+#sync-custom-passphrase {
+ margin: 0 25px;
+}
+
+#sync-passphrase-message {
+ color: gray;
+}
+
+.sync-custom-passphrase-input {
+ margin: 10px 0;
+}
+
+#sync-select-container {
+ margin-bottom: 10px;
+}
+
+#sync-instructions-container {
+ margin-bottom: 30px;
+}
+
#chooseDataTypesRadio {
vertical-align: top;
}
@@ -29,15 +86,10 @@ form {
display: inline-block;
}
#chooseDataTypesBody {
- width: 90%;
- -webkit-margin-start: 3ex;
+ margin: 10px 0;
}
#chooseDataTypesBody > div {
- margin-top: 0px;
- -webkit-column-count: 2;
- -webkit-column-gap: 10px;
- column-count: 2;
- column-gap: 10px;
+ -webkit-column-count: 3;
}
.sync-config-tab-contents-inactive {
@@ -153,14 +205,6 @@ form {
margin-bottom: 5px;
}
-#learn-more-link {
- float: right;
-}
-
-html[dir='rtl'] #learn-more-link {
- float: left;
-}
-
#change-passphrase {
margin: 10px 0;
background: #EEE;
@@ -202,13 +246,31 @@ html[os='mac'] input[type='submit'] {
document.documentElement.setAttribute('os', 'linux');
}
+ var datatypeSelect = document.getElementById('sync-select-datatypes');
+ datatypeSelect.onchange = function() {
+ var syncAll = this.selectedIndex == 0;
+ setCheckboxesToKeepEverythingSynced(syncAll);
+
+ document.getElementById('chooseDataTypesBody').hidden = syncAll;
+ };
+
if (args) {
- currentTab = args['initialTab'];
- switchToTab(currentTab);
setCheckboxesAndErrors(args);
+
+ var keepEverythingSynced = args['keepEverythingSynced'];
+ var usePassphrase = args['usePassphrase'];
+ if ((keepEverythingSynced != undefined && !keepEverythingSynced) ||
csilv 2011/04/16 01:03:55 optional: this could be simplified to: if (keepEve
James Hawkins 2011/04/17 19:05:05 Done.
+ (usePassphrase != undefined && usePassphrase)) {
+ showCustomizePage();
+ }
}
}
+ function showCustomizePage() {
+ document.getElementById('confirm-sync-preferences').hidden = true;
+ document.getElementById('customize-sync-preferences').hidden = false;
+ }
+
function setCheckboxesAndErrors(args) {
setChooseDataTypesCheckboxes(args);
setEncryptionCheckboxes(args);
@@ -240,10 +302,9 @@ html[os='mac'] input[type='submit'] {
document.getElementById("okButton").focus();
}
- document.getElementById("keepEverythingSyncedRadio").checked =
- args.keepEverythingSynced;
- document.getElementById("chooseDataTypesRadio").checked =
- !args.keepEverythingSynced;
+ var datatypeSelect = document.getElementById('sync-select-datatypes');
+ datatypeSelect.selectedIndex = args.keepEverythingSynced ? 0 : 1;
+ chooseDataTypesBody.hidden = args.keepEverythingSynced;
document.getElementById("bookmarksCheckbox").checked = args.syncBookmarks;
document.getElementById("preferencesCheckbox").checked =
@@ -299,10 +360,9 @@ html[os='mac'] input[type='submit'] {
// The passphrase, once set, cannot be unset, but we show a reset link.
document.getElementById("explicit-option").disabled = true;
document.getElementById("google-option").disabled = true;
- document.getElementById("change-passphrase").style.display = "block";
+ document.getElementById("sync-custom-passphrase").style.display = "none";
csilv 2011/04/16 01:03:55 use '.hidden = true' instead?
James Hawkins 2011/04/17 19:05:05 Done.
} else {
document.getElementById("google-option").checked = true;
- document.getElementById("change-passphrase").style.display = "none";
}
switchToMode("");
}
@@ -329,8 +389,6 @@ html[os='mac'] input[type='submit'] {
}
}
-
-
// Returns true if at least one data type is enabled and no data types are
// checked. (If all data type checkboxes are disabled, it's because "keep
// everything synced" is checked.)
@@ -352,11 +410,11 @@ html[os='mac'] input[type='submit'] {
function sendConfiguration() {
// Trying to submit, so hide previous errors.
- document.getElementById("aborted_text").className = "sync-error-hide";
- document.getElementById("error_text").className = "sync-error-hide";
+ //document.getElementById("aborted_text").className = "sync-error-hide";
csilv 2011/04/16 01:03:55 Consider removing unused code.
James Hawkins 2011/04/17 19:05:05 Fixed it up so we're using it again.
+ //document.getElementById("error_text").className = "sync-error-hide";
if (noDataTypesChecked()) {
- document.getElementById("error_text").className = "sync-error-show";
+ //document.getElementById("error_text").className = "sync-error-show";
return;
}
@@ -365,7 +423,9 @@ html[os='mac'] input[type='submit'] {
return false;
}
- var syncAll = f.keepEverythingSyncedRadio.checked;
+ var syncAll =
+ document.getElementById('sync-select-datatypes').selectedIndex == 0;
+
// These values need to be kept in sync with where they are read in
// SyncSetupFlow::GetDataTypeChoiceData().
var result = JSON.stringify({
@@ -380,40 +440,16 @@ html[os='mac'] input[type='submit'] {
"syncApps": syncAll || f.appsCheckbox.checked,
"syncSessions": syncAll || f.sessionsCheckbox.checked,
"usePassphrase": (getRadioCheckedValue() == 'explicit'),
- "passphrase": f.passphrase.value
+ "passphrase": ""
});
chrome.send("Configure", [result]);
}
- function switchToTab(newTab) {
- if (currentTab) {
- document.getElementById(currentTab + "-tab").className =
- "sync-config-tab-inactive";
- document.getElementById(currentTab + "-tab-contents").className =
- "sync-config-tab-contents-inactive";
- }
-
- // Default to the 'Data Types' tab.
- if (!newTab)
- newTab = "data-type";
-
- document.getElementById(newTab + "-tab").className =
- "sync-config-tab-active";
- document.getElementById(newTab + "-tab-contents").className =
- "sync-config-tab-contents-active";
-
- currentTab = newTab;
- }
-
function switchToMode(mode) {
- document.getElementById("section-explicit").style.display = "none";
- document.getElementById("section-google").style.display = "none";
-
- if (mode == "google") {
- document.getElementById("section-google").style.display = "block";
- } else if (mode =="explicit") {
- document.getElementById("section-explicit").style.display = "block";
- }
+ if (mode == "google")
+ document.getElementById("sync-custom-passphrase").hidden = true;
+ else if (mode =="explicit")
csilv 2011/04/16 01:03:55 If these are the only two modes, then consider sim
James Hawkins 2011/04/17 19:05:05 Blah I hate this code. I'm going to leave it as is
+ document.getElementById("sync-custom-passphrase").hidden = false;
}
function getRadioCheckedValue() {
@@ -444,7 +480,10 @@ html[os='mac'] input[type='submit'] {
emptyError.style.display = "block";
return false;
}
- if (f.confirmpassphrase.value != f.passphrase.value) {
+
+ var confirmPassphrase = document.getElementById("confirm-passphrase");
+ var passphrase = document.getElementById("passphrase");
+ if (confirmPassphrase.value != passphrase.value) {
mismatchError.style.display = "block";
return false;
}
@@ -460,38 +499,37 @@ html[os='mac'] input[type='submit'] {
</head>
<body i18n-values=".style.fontFamily:fontfamily"
onload="initializeConfigureDialog(JSON.parse(chrome.dialogArguments));">
-<form id="chooseDataTypesForm" onSubmit="sendConfiguration(); return false;">
-
- <div class="sync-config-tabstrip">
- <div id="data-type-tab" class="sync-config-tab-inactive">
- <a href="#" onclick="switchToTab('data-type'); return false;"
- i18n-content="dataTypes"></a>
- </div>
- <div id="encryption-tab" class="sync-config-tab-inactive">
- <a href="#" onclick="switchToTab('encryption'); return false;"
- i18n-content="encryption"></a>
+<div id="confirm-sync-preferences">
+ <div class="sync-header" i18n-content="confirmSyncPreferences"></div>
+ <div id="sync-instructions-container" class="content-area">
+ <span i18n-content="choosedatatypesinstructions"></span>
+ <a i18n-values="href:encryptionhelpurl" target="_blank"
+ i18n-content="learnmore"></a>
+ </div>
+ <div>
+ <div class="action-area">
+ <div id="customize-link-container">
+ <a id="customize-link" href="#" i18n-content="customizelinklabel"
+ onclick="showCustomizePage();"></a>
+ </div>
+ <input id="okButton" type="button" i18n-values="value:syncEverything"
+ onclick="sendConfiguration();">
+ <input id="cancelButton" type="button" i18n-values="value:cancel"
+ onclick="chrome.send('DialogClose', [''])">
</div>
</div>
- <div id="data-type-tab-contents" class="sync-config-tab-contents-inactive">
-
- <div class="sync-header"
- i18n-content="choosedatatypesheader"></div>
- <div class="sync-choose_data_types_instructions"
- i18n-content="choosedatatypesinstructions"></div>
- <div class="sync-select-customization">
- <div class="sync-choice_radio">
- <input id="keepEverythingSyncedRadio" type="radio"
- name="syncChooseDataTypes"
- onclick="setCheckboxesToKeepEverythingSynced(true);">
- <label for="keepEverythingSyncedRadio"
- i18n-content="keepeverythingsynced">
- </label>
- </div>
- <div id="chooseDataTypes" class="sync-choice_radio">
- <input id="chooseDataTypesRadio" type="radio" name="syncChooseDataTypes"
- onclick="setCheckboxesToKeepEverythingSynced(false)">
- <label for="chooseDataTypesRadio" i18n-content="choosedatatypes" ></label>
- <div id="chooseDataTypesBody">
+</div>
+<div id="customize-sync-preferences" hidden>
+ <form id="chooseDataTypesForm" onSubmit="sendConfiguration(); return false;">
+ <div class="sync-header">Customize Sync Preferences</div>
+ <hr>
+ <div id="sync-configure-content" class="content-area">
+ <div id="sync-select-container">
+ <select id="sync-select-datatypes">
+ <option i18n-content="keepeverythingsynced" selected></option>
+ <option i18n-content="choosedatatypes"></option>
+ </select>
+ <div id="chooseDataTypesBody" hidden>
<div>
<!-- Apps -->
<div class="sync-item-show" id="appsItem">
@@ -558,71 +596,46 @@ html[os='mac'] input[type='submit'] {
</div>
</div>
</div>
- <div class="sync-errors">
- <span id="error_text" i18n-content="synczerodatatypeserror"
- class="sync-error-hide"></span>
- <span id="aborted_text" i18n-content="abortederror"
- class="sync-error-hide"></span>
- </div>
- </div>
-
- </div>
- <div id="encryption-tab-contents" class="sync-config-tab-contents-inactive">
- <div id="sync-encryption-instructions"
- i18n-content="encryptionInstructions"></div>
-
- <div>
- <input id="google-option" name="option" type="radio"
- value="google" onchange="onRadioChange();">
- <label for="google-option" i18n-content="googleOption"></label>
- </input>
- </div>
- <div>
- <input id="explicit-option" name="option" type="radio" value="explicit"
- onchange="onRadioChange();">
- <div id="learn-more-link">
- <a i18n-values="href:encryptionhelpurl" target="_blank"
- i18n-content="learnmore"></a>
- </div>
- <label for="explicit-option" i18n-content="explicitOption"></label>
- </input>
- </div>
-
- <div class="sync-section" id="section-google">
- <div i18n-content="sectionGoogleMessage"></div>
- </div>
- <div class="sync-section" id="section-explicit">
- <div i18n-content="sectionExplicitMessage" id="explicit-message"></div>
- <div>
- <div i18n-content="passphraseLabel" id="passphraseLabel"></div>
- <input id="passphrase" name="passphrase" label="passphraseLabel"
- type="password" />
- </div>
- <div>
- <div i18n-content="confirmLabel" id="confirmPassphraseLabel">
+ <hr>
+ <h4 i18n-content="passphraseSectionTitle"></h4>
+ <div id="sync-passphrase-container">
+ <div>
+ <input id="google-option" name="option" type="radio" value="google"
+ onchange="onRadioChange();">
+ <label for="google-option" i18n-content="googleOption"></label>
+ </div>
+ <div>
+ <input id="explicit-option" name="option" type="radio" value="explicit"
+ onchange="onRadioChange();">
+ <label for="explicit-option" i18n-content="explicitOption"></label>
+ <a i18n-values="href:encryptionhelpurl" target="_blank"
+ i18n-content="learnmore"></a>
+ </div>
+ <div id="sync-custom-passphrase" hidden>
+ <div id="sync-passphrase-message">
+ <span i18n-content="sectionExplicitMessagePrefix"></span>
+ <a href="cnn.com" i18n-content="sectionExplicitMessagePostfix"></a>
+ <span>.</span>
+ </div>
+ <div class="sync-custom-passphrase-input">
+ <input id="passphrase" type="password" i18n-values="placeholder:passphraseLabel">
csilv 2011/04/16 01:03:55 wrap to 80 cols
James Hawkins 2011/04/17 19:05:05 Done.
+ </div>
+ <div class="sync-custom-passphrase-input">
+ <input id="confirm-passphrase" type="password" i18n-values="placeholder:confirmLabel">
csilv 2011/04/16 01:03:55 wrap to 80 cols
James Hawkins 2011/04/17 19:05:05 Done.
+ </div>
+ <div class="error" style="display:none"
+ id="emptyerror" i18n-content="emptyErrorMessage"></div>
+ <div class="error" style="display:none"
+ id="mismatcherror" i18n-content="mismatchErrorMessage"></div>
</div>
- <input id="confirmpassphrase" name="confirmpassphrase" type="password"
- label="confirmPassphraseLabel" />
</div>
- <div class="error" style="display:none"
- id="emptyerror" i18n-content="emptyErrorMessage"></div>
- <div class="error" style="display:none"
- id="mismatcherror" i18n-content="mismatchErrorMessage"></div>
- </div>
-
- <div id="change-passphrase">
- <div id="sync-passphrase-warning" i18n-content="passphraseWarning">
+ <div class="action-area">
+ <input id="okButton" type="submit" i18n-values="value:ok" />
+ <input id="cancelButton" type="button" i18n-values="value:cancel"
+ onclick='chrome.send("DialogClose", [""])' />
</div>
- <a id="clear-data-link" i18n-content="cleardatalink" href="#"
- onclick='goToDashboard(); return false;'></a>
</div>
- </div>
-
- <div class="sync-footer">
- <input id="okButton" type="submit" i18n-values="value:ok" />
- <input id="cancelButton" type="button" i18n-values="value:cancel"
- onclick='chrome.send("DialogClose", [""])' />
- </div>
-</form>
+ </form>
+</div
</body>
</html>
« chrome/app/generated_resources.grd ('K') | « chrome/app/resources/locale_settings.grd ('k') | chrome/browser/sync/resources/gaia_login.css » ('j') | chrome/browser/sync/sync_setup_wizard.cc » ('J')

Powered by Google App Engine
This is Rietveld 408576698