Sync Promo: Add a way to collapse the sync promo

chrome/browser/resources/options/sync_setup_overlay.html

Index: chrome/browser/resources/options/sync_setup_overlay.html
diff --git a/chrome/browser/resources/options/sync_setup_overlay.html b/chrome/browser/resources/options/sync_setup_overlay.html
deleted file mode 100644
index e236fa56ee1a1466d4bbee6ab08907a13e175441..0000000000000000000000000000000000000000
--- a/chrome/browser/resources/options/sync_setup_overlay.html
+++ /dev/null
@@ -1,425 +0,0 @@
-<div id="sync-setup-overlay" class="page" hidden>
-  <div id="sync-setup-login" hidden>
-    <h1 i18n-content="syncSetupOverlayTitle"></h1>
-    <div class="content-area">
-      <div>
-        <!-- top-blurb-error's reset state is handled differently from most
-             elements. Instead of being [hidden] it is visibility:hidden so it
-             still takes up space. But it is also [hidden] when we display the
-             captcha, so when it is reset, it needs to be shown. -->
-        <div id="top-blurb-error"
-            class="reset-shown reset-visibility-hidden">
-          <span id="error-signing-in" i18n-content="errorSigningIn"></span>
-          <span id="error-custom" hidden></span>
-        </div>
-        <form id="gaia-login-form">
-          <div id="gaia-login-box">
-            <table id="content-table" cellspacing="0"
-                cellpadding="5" width="75%" border="0" align="center">
-              <tr>
-                <td valign="top" style="text-align:center" nowrap="nowrap"
-                    bgcolor="#e8eefa">
-                  <div>
-                    <table id="gaia-table" align="center" border="0"
-                        cellpadding="1" cellspacing="0">
-                      <tr>
-                        <td colspan="2" align="center">
-                          <table>
-                            <tr>
-                              <td>
-                                <span id="gaia-account-text-prefix"
-                                    i18n-content="signinPrefix"></span>
-                              </td>
-                              <td id="gaia-logo" valign="top">
-                                <img src="google-transparent.png" alt="Google">
-                              </td>
-                              <td valign="middle">
-                                <span id="gaia-account-text"
-                                    i18n-content="signinSuffix"></span>
-                              </td>
-                            </tr>
-                          </table>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td colspan="2" align="center"> </td>
-                      </tr>
-                      <tr id="email-row" class="reset-shown">
-                        <td nowrap="nowrap">
-                          <div class="end-aligned">
-                            <span i18n-content="emailLabel">
-                            </span>
-                          </div>
-                        </td>
-                        <td>
-                          <input id="gaia-email" type="text" name="email"
-                              size="18" value=""
-                              class="reset-enabled reset-shown reset-value"
-                              autocomplete="off">
-                          <span id="email-readonly" class="reset-hidden"
-                              hidden></span>
-                        </td>
-                      </tr>
-                      <tr id="access-code-label-row"
-                          class="access-code-row reset-hidden" hidden>
-                        <td colspan="2">
-                          <span i18n-content="enterAccessCode"></span>
-                        </td>
-                      </tr>
-                      <tr id="access-code-help-row"
-                          class="access-code-row reset-hidden" hidden>
-                        <td colspan="2">
-                          <a i18n-values="href:getAccessCodeURL"
-                              i18n-content="getAccessCodeHelp" target="_blank">
-                          </a>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td></td>
-                        <td>
-                          <div id="errormsg-0-email"
-                              class="errormsg reset-hidden"
-                              i18n-content="cannotBeBlank"
-                              hidden>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr id="password-row" class="reset-shown">
-                        <td class="end-aligned">
-                          <span i18n-content="passwordLabel"></span>
-                        </td>
-                        <td>
-                          <input id="gaia-passwd" type="password" name="passwd"
-                              size="18" class="reset-enabled reset-value"
-                              autocomplete="off">
-                        </td>
-                      </tr>
-                      <tr id="access-code-input-row"
-                          class="access-code-row reset-hidden" hidden>
-                        <td colspan="2">
-                          <input id="access-code" type="password"
-                              name="accessCode" size="18"
-                              class="reset-enabled reset-value">
-                        </td>
-                      </tr>
-                      <tr>
-                        <td></td>
-                        <td>
-                          <div class="error-msg-spacer">
-                            <div id="errormsg-0-password"
-                                class="errormsg reset-hidden"
-                                i18n-content="cannotBeBlank"
-                                hidden>
-                            </div>
-                            <div id="errormsg-1-password"
-                                class="errormsg reset-hidden"
-                                hidden>
-                              <span i18n-content="invalidCredentials"></span>
-                              <!-- Brackets are intentional -->
-                              [<a i18n-values="href:invalidPasswordHelpURL"
-                                   target="_blank">?</a>]
-                            </div>
-                            <div id="errormsg-0-access-code"
-                                class="errormsg reset-hidden"
-                                i18n-content="invalidAccessCode"
-                                hidden>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td colspan="2">
-                          <div id="captcha-div" class="reset-hidden" hidden>
-                            <div id="captcha-instructions"
-                                i18n-content="captchaInstructions"
-                                class="bottom-padded-cell">
-                            </div>
-                            <div class="bottom-padded-cell">
-                              <div id="captcha-wrapper">
-                                <div id="captcha-image"></div>
-                              </div>
-                            </div>
-                            <div>
-                              <input id="captcha-value" type="text"
-                                  name="captchaValue" size="18" value=""
-                                  class="reset-disabled">
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td colspan="2" align="center">
-                          <div id="errormsg-0-connection"
-                              class="errormsg reset-hidden"
-                              i18n-content="couldNotConnect"
-                              hidden>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr id="action-area">
-                        <td colspan="2">
-                          <table align="center" cellpadding="0"
-                              cellspacing="0">
-                            <tr>
-                              <td>
-                                <div id="logging-in-throbber" class="throbber">
-                                </div>
-                              </td>
-                              <td class="no-vertical-padding">
-                                <input id="sign-in" type="submit"
-                                    i18n-content="signin">
-                                </button>
-                              </td>
-                            </tr>
-                          </table>
-                        </td>
-                      </tr>
-                      <tr id="ga-fprow">
-                        <td colspan="2" height="16.0"
-                            align="center" valign="bottom">
-                          <a i18n-values="href:cannotAccessAccountURL"
-                              target="_blank"
-                              i18n-content="cannotAccessAccount">
-                          </a>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td id="create-account-cell" colspan="2" height="16.0"
-                            align="center" valign="bottom">
-                          <div id="create-account-div">
-                            <a i18n-values="href:createNewAccountURL"
-                                i18n-content="createAccount" target="_blank">
-                            </a>
-                          </div>
-                       </td>
-                      </tr>
-                    </table>
-                  </div>
-                </td>
-              </tr>
-            </table>
-          </div>
-        </form>
-      </div>
-      <div>
-        <div id="cancel-space-no-captcha" colspan="2">
-        </div>
-      </div>
-    </div>
-    <div class="action-area">
-      <div class="button-strip">
-        <button id="sync-setup-cancel" type="reset" i18n-content="cancel">
-        </button>
-      </div>
-    </div>
-  </div>
-  <div id="sync-setup-configure" hidden>
-    <div id="confirm-sync-preferences">
-      <h1 i18n-content="confirmSyncPreferences"></h1>
-      <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 class="action-area-link-container">
-            <a id="customize-link" href="#" i18n-content="customizeLinkLabel"
-                class="reset-opaque reset-shown">
-            </a>
-          </div>
-          <div id="confirm-everything-throbber" class="throbber"></div>
-          <input id="confirm-everything-ok" type="button"
-              i18n-values="value:syncEverything">
-          <input id="confirm-everything-cancel" type="button"
-              i18n-values="value:cancel">
-        </div>
-      </div>
-    </div>
-    <div id="customize-sync-preferences" hidden>
-      <h1 i18n-content="syncSetupConfigureTitle"></h1>
-      <form id="choose-data-types-form">
-        <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="choose-data-types-body">
-              <div>
-                <div id="apps-item" class="sync-item-show">
-                  <input id="apps-checkbox" type="checkbox"
-                      name="dataTypeCheckbox">
-                  <label for="apps-checkbox" i18n-content="apps"
-                      i18n-values="title:apps" name="dataTypeLabel"></label>
-                </div>
-                <div id="autofill-item" class="sync-item-show">
-                  <input id="autofill-checkbox" type="checkbox"
-                      name="dataTypeCheckbox">
-                  <label for="autofill-checkbox" i18n-content="autofill"
-                      i18n-values="title:autofill" name="dataTypeLabel"></label>
-                </div>
-                <div class="sync-item-show">
-                  <input id="bookmarks-checkbox" type="checkbox"
-                      name="dataTypeCheckbox">
-                  <label for="bookmarks-checkbox" i18n-content="bookmarks"
-                      i18n-values="title:bookmarks" name="dataTypeLabel">
-                  </label>
-                </div>
-                <div id="extensions-item" class="sync-item-show">
-                  <input id="extensions-checkbox" type="checkbox"
-                      name="dataTypeCheckbox">
-                  <label for="extensions-checkbox" i18n-content="extensions"
-                      i18n-values="title:extensions" name="dataTypeLabel">
-                  </label>
-                </div>
-                <div id="omnibox-item" class="sync-item-show">
-                  <input id="typed-urls-checkbox" type="checkbox"
-                      name="dataTypeCheckbox">
-                  <label for="typed-urls-checkbox" i18n-content="typedURLs"
-                      i18n-values="title:typedURLs" name="dataTypeLabel">
-                  </label>
-                </div>
-                <div id="passwords-item" class="sync-item-show">
-                  <input id="passwords-checkbox" type="checkbox"
-                      name="dataTypeCheckbox">
-                  <label for="passwords-checkbox" i18n-content="passwords"
-                      i18n-values="title:passwords" name="dataTypeLabel">
-                  </label>
-                </div>
-                <div class="sync-item-show">
-                  <input id="preferences-checkbox" type="checkbox"
-                      name="dataTypeCheckbox">
-                  <label for="preferences-checkbox" i18n-content="preferences"
-                      i18n-values="title:preferences" name="dataTypeLabel">
-                  </label>
-                </div>
-                <div class="sync-item-show">
-                  <input id="themes-checkbox" type="checkbox"
-                      name="dataTypeCheckbox">
-                  <label for="themes-checkbox" i18n-content="themes"
-                      i18n-values="title:themes" name="dataTypeLabel"></label>
-                </div>
-                <div id="sessions-item" class="sync-item-show">
-                  <input id="sessions-checkbox" type="checkbox"
-                      name="dataTypeCheckbox">
-                  <label for="sessions-checkbox" i18n-content="foreignSessions"
-                      il8n-values="title:sessions" name="dataTypeLabel"></label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="sync-configuration-errors">
-            <div id="error-text" i18n-content="syncZeroDataTypesError"
-                class="sync-configuration-error reset-hidden" hidden></div>
-            <div id="aborted-text" i18n-content="abortedError"
-                class="sync-configuration-error reset-hidden" hidden></div>
-          </div>
-          <div id="customize-sync-encryption">
-            <hr>
-            <h4 i18n-content="encryptedDataTypesTitle"></h4>
-            <div class="sync-customize-section-container">
-              <div>
-                <input id="encrypt-sensitive-option" name="encrypt" type="radio"
-                    value="sensitive">
-                <label for="encrypt-sensitive-option"
-                    i18n-content="encryptSensitiveOption"></label>
-              </div>
-              <div>
-                <input id="encrypt-all-option" name="encrypt" type="radio"
-                    value="all">
-                <label for="encrypt-all-option" i18n-content="encryptAllOption">
-                </label>
-              </div>
-            </div>
-          </div>
-          <hr>
-          <h4 i18n-content="passphraseSectionTitle"></h4>
-          <div id="sync-custom-passphrase-container"
-              class="sync-customize-section-container">
-            <div id="passphrase-encryption-message"
-                i18n-content="passphraseEncryptionMessage"></div>
-            <div>
-              <input id="google-option" name="option" type="radio"
-                  value="google">
-              <label for="google-option" i18n-content="googleOption"></label>
-            </div>
-            <div>
-              <input id="explicit-option" name="option" type="radio"
-                  value="explicit">
-              <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="http://google.com/dashboard" target="_blank"
-                    i18n-content="sectionExplicitMessagePostfix"></a>
-                <span>.</span>
-              </div>
-              <div class="sync-custom-passphrase-input">
-                <input id="custom-passphrase" type="password"
-                    class="reset-value"
-                    i18n-values="placeholder:passphraseLabel">
-              </div>
-              <div class="sync-custom-passphrase-input">
-                <input id="confirm-passphrase" type="password"
-                    class="reset-value"
-                    i18n-values="placeholder:confirmLabel">
-              </div>
-              <div id="empty-error" class="error"
-                  i18n-content="emptyErrorMessage" hidden></div>
-              <div id="mismatch-error" class="error"
-                  i18n-content="mismatchErrorMessage" hidden></div>
-            </div>
-          </div>
-          <div id="sync-existing-passphrase-container" hidden>
-            <div id="enter-passphrase">
-              <div id="normal-body" i18n-content="enterPassphraseBody" hidden>
-              </div>
-              <div id="passphrase-rejected-body"
-                  i18n-content="enterOtherPassphraseBody" hidden>
-              </div>
-            </div>
-            <div id="passphrase-input">
-              <input id="passphrase" name="passphrase" type="password"
-                  class="reset-value"
-                  i18n-values="placeholder:passphraseLabel">
-              <div id="incorrect-passphrase" class="error"
-                   i18n-content="incorrectPassphrase" hidden>
-              </div>
-            </div>
-            <div id="sync-passphrase-warning"
-                 i18n-values=".innerHTML:passphraseRecover" hidden>
-            </div>
-          </div>
-        </div>
-        <div class="action-area">
-          <div class="action-area-link-container">
-            <a id="use-default-link" href="#" i18n-content="useDefaultSettings"
-                class="reset-opaque reset-shown">
-            </a>
-          </div>
-          <div id="choose-datatypes-throbber" class="throbber"></div>
-          <input id="choose-datatypes-ok" type="submit" i18n-values="value:ok">
-          <input id="choose-datatypes-cancel" type="button"
-              i18n-values="value:cancel">
-        </div>
-      </form>
-    </div>
-  </div>
-  <div id="sync-setup-stop-syncing" hidden>
-    <h1 i18n-content="stopSyncingTitle"></h1>
-    <div class="content-area">
-      <span i18n-content="stopSyncingExplanation"></span>
-    </div>
-    <div class="action-area">
-      <input id="stop-syncing-ok" type="button"
-        i18n-values="value:stopSyncingConfirm">
-      <input id="stop-syncing-cancel" type="button"
-        i18n-values="value:cancel">
-    </div>
-  </div>
-</div>