| <link rel="import" href="chrome://resources/html/i18n_behavior.html"> |
| <link rel="import" href="chrome://resources/html/md_select_css.html"> |
| <link rel="import" href="chrome://resources/html/polymer.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html"> |
| <link rel="import" href="appearance_browser_proxy.html"> |
| <link rel="import" href="../controls/controlled_radio_button.html"> |
| <link rel="import" href="../controls/extension_controlled_indicator.html"> |
| <link rel="import" href="../controls/settings_dropdown_menu.html"> |
| <link rel="import" href="../controls/settings_input.html"> |
| <link rel="import" href="../controls/settings_radio_group.html"> |
| <link rel="import" href="../controls/settings_toggle_button.html"> |
| <link rel="import" href="../route.html"> |
| <link rel="import" href="../settings_page/settings_animated_pages.html"> |
| <link rel="import" href="../settings_page/settings_subpage.html"> |
| <link rel="import" href="../settings_shared_css.html"> |
| <link rel="import" href="../settings_vars_css.html"> |
| <link rel="import" href="appearance_fonts_page.html"> |
| |
| <dom-module id="settings-appearance-page"> |
| <template> |
| <style include="settings-shared md-select"> |
| :host { |
| --paper-input-container-label: { |
| font-size: inherit; |
| font-weight: inherit; |
| }; |
| } |
| |
| .secondary-button ~ .secondary-button { |
| -webkit-margin-start: 12px; |
| } |
| </style> |
| <settings-animated-pages id="pages" section="appearance"> |
| <neon-animatable route-path="default"> |
| <if expr="chromeos"> |
| <div class="settings-box first two-line" id="wallpaperButton" |
| on-tap="openWallpaperManager_" actionable |
| hidden="[[!pageVisibility.setWallpaper]]"> |
| <div class="start"> |
| $i18n{setWallpaper} |
| <div class="secondary" id="wallpaperSecondary"> |
| $i18n{openWallpaperApp} |
| </div> |
| </div> |
| <button class="icon-external" is="paper-icon-button-light" |
| aria-label="$i18n{setWallpaper}" |
| aria-describedby="wallpaperSecondary"></button> |
| </div> |
| <div class="settings-box two-line" |
| hidden="[[!pageVisibility.setTheme]]"> |
| </if> |
| <if expr="not chromeos"> |
| <div class="settings-box two-line first" |
| hidden="[[!pageVisibility.setTheme]]"> |
| </if> |
| <div class="start two-line" on-tap="onThemesTap_" actionable> |
| <div class="flex"> |
| $i18n{themes} |
| <div class="secondary" id="themesSecondary"> |
| [[themeSublabel_]] |
| </div> |
| </div> |
| <button class="icon-external" is="paper-icon-button-light" |
| aria-label="$i18n{themes}" |
| aria-describedby="themesSecondary"></button> |
| </div> |
| <if expr="not is_linux or chromeos"> |
| <template is="dom-if" if="[[prefs.extensions.theme.id.value]]"> |
| <div class="secondary-action"> |
| <paper-button id="useDefault" on-tap="onUseDefaultTap_" |
| class="secondary-button"> |
| $i18n{resetToDefaultTheme} |
| </paper-button> |
| </div> |
| </template> |
| </if> |
| <if expr="is_linux and not chromeos"> |
| <div class="secondary-action" hidden="[[!showThemesSecondary_( |
| prefs.extensions.theme.id.value, useSystemTheme_)]]"> |
| <template is="dom-if" if="[[showUseClassic_( |
| prefs.extensions.theme.id.value, useSystemTheme_)]]" restamp> |
| <paper-button id="useDefault" on-tap="onUseDefaultTap_" |
| class="secondary-button"> |
| $i18n{useClassicTheme} |
| </paper-button> |
| </template> |
| <template is="dom-if" if="[[showUseSystem_( |
| prefs.extensions.theme.id.value, useSystemTheme_)]]" restamp> |
| <paper-button id="useSystem" on-tap="onUseSystemTap_" |
| class="secondary-button"> |
| $i18n{useSystemTheme} |
| </paper-button> |
| </template> |
| </div> |
| </if> |
| </div> |
| <div class="settings-box" |
| hidden="[[!pageVisibility.homeButton]]"> |
| <settings-toggle-button class="start" elide-label |
| pref="{{prefs.browser.show_home_button}}" |
| label="$i18n{showHomeButton}" |
| sub-label="[[getShowHomeSubLabel_( |
| prefs.homepage_is_newtabpage.value, prefs.homepage.value)]]"> |
| </settings-toggle-button> |
| </div> |
| <template is="dom-if" if="[[prefs.browser.show_home_button.value]]"> |
| <div class="list-frame" |
| hidden="[[!pageVisibility.homeButton]]"> |
| <settings-radio-group pref="{{prefs.homepage_is_newtabpage}}"> |
| <controlled-radio-button class="list-item" name="true" |
| pref="[[prefs.homepage_is_newtabpage]]" ignore-extensions> |
| $i18n{homePageNtp} |
| </controlled-radio-button> |
| <controlled-radio-button class="list-item" name="false" |
| pref="[[prefs.homepage_is_newtabpage]]" ignore-extensions> |
| $i18n{other} |
| <!-- TODO(dbeam): this can show double indicators when both |
| homepage and whether to use the NTP as the homepage are |
| managed. --> |
| <settings-input no-label-float pref="{{prefs.homepage}}" |
| label="$i18n{exampleDotCom}" |
| can-tab="[[!prefs.homepage_is_newtabpage.value]]" |
| stop-keyboard-event-propagation ignore-extensions> |
| </settings-input> |
| </controlled-radio-button> |
| <template is="dom-if" if="[[prefs.homepage.extensionId]]"> |
| <extension-controlled-indicator |
| extension-id="[[prefs.homepage.extensionId]]" |
| extension-can-be-disabled="[[ |
| prefs.homepage.extensionCanBeDisabled]]" |
| extension-name="[[prefs.homepage.controlledByName]]" |
| on-disable-extension="onDisableExtension_"> |
| </extension-controlled-indicator> |
| </template> |
| </settings-radio-group> |
| </div> |
| </template> |
| <div class="settings-box" |
| hidden="[[!pageVisibility.bookmarksBar]]"> |
| <settings-toggle-button class="start" |
| pref="{{prefs.bookmark_bar.show_on_all_tabs}}" |
| label="$i18n{showBookmarksBar}"> |
| </settings-toggle-button> |
| </div> |
| <div class$="settings-box [[getFirst_(pageVisibility.bookmarksBar)]]"> |
| <if expr="is_linux and not chromeos"> |
| <settings-toggle-button class="start" |
| pref="{{prefs.browser.custom_chrome_frame}}" |
| label="$i18n{showWindowDecorations}" |
| inverted> |
| </settings-toggle-button> |
| </div> |
| <div class="settings-box"> |
| </if> |
| <div class="start">$i18n{fontSize}</div> |
| <settings-dropdown-menu id="defaultFontSize" |
| pref="{{prefs.webkit.webprefs.default_font_size}}" |
| menu-options="[[fontSizeOptions_]]"> |
| </settings-dropdown-menu> |
| </div> |
| <div id="customize-fonts-subpage-trigger" class="settings-box two-line" |
| on-tap="onCustomizeFontsTap_" actionable> |
| <div class="start"> |
| $i18n{customizeFonts} |
| <div class="secondary" id="fontsSecondary">$i18n{chooseFonts}</div> |
| </div> |
| <button class="subpage-arrow" is="paper-icon-button-light" |
| aria-label="$i18n{customizeFonts}" |
| aria-describedby="fontsSecondary"></button> |
| </div> |
| <div class="settings-box" |
| hidden="[[!pageVisibility.pageZoom]]"> |
| <div class="start">$i18n{pageZoom}</div> |
| <div class="md-select-wrapper"> |
| <select id="zoomLevel" class="md-select" |
| on-change="onZoomLevelChange_"> |
| <template is="dom-repeat" items="[[pageZoomLevels_]]"> |
| <option value="[[item]]" |
| selected$="[[zoomValuesEqual_(item, defaultZoom_)]]"> |
| [[formatZoom_(item)]]% |
| </option> |
| </template> |
| </select> |
| <span class="md-select-underline"></span> |
| </div> |
| </div> |
| </neon-animatable> |
| <template is="dom-if" route-path="/fonts"> |
| <settings-subpage |
| associated-control="[[$$('#customize-fonts-subpage-trigger')]]" |
| page-title="$i18n{customizeFonts}"> |
| <settings-appearance-fonts-page prefs="{{prefs}}"> |
| </settings-appearance-fonts-page> |
| </settings-subpage> |
| </template> |
| </settings-animated-pages> |
| </template> |
| <script src="appearance_page.js"></script> |
| </dom-module> |
