| <style include="cr-shared-style settings-shared md-select"> |
| /* Lines up with cr-input. */ |
| #custom-input { |
| /* (cr-input line-height + cr-input top/bottom padding) / 2 - |
| cr-radio disc-wrapper height / 2 */ |
| --cr-radio-button-disc-margin-block-start: calc( |
| (1.54em + 12px) / 2 - 8px); |
| align-items: start; |
| } |
| |
| /* The theme mixes a link and a cr-button divided by a separator with |
| * grit expressions and dom-if templates. That leads to a tricky thing |
| * to style correctly, these are a workaround. */ |
| #themeRow cr-button, |
| #toolbarRow cr-button { |
| margin-inline-end: 20px; |
| } |
| |
| #themeRow .separator, |
| #toolbarRow .separator { |
| margin-inline-start: 0; |
| } |
| |
| #toolbarRow { |
| border-top: var(--cr-separator-line); |
| } |
| |
| .hover-card-toggles { |
| padding-inline-end: 0; |
| } |
| |
| .hover-card-toggles settings-toggle-button { |
| padding-inline-start: 0; |
| } |
| |
| #tabSearchPositionRestart { |
| margin-inline-end: 20px; |
| } |
| |
| </style> |
| <settings-animated-pages id="pages" section="appearance" |
| focus-config="[[focusConfig_]]"> |
| <div route-path="default"> |
| <div class="settings-row first" id="themeRow" |
| hidden="[[!pageVisibility.setTheme]]"> |
| <cr-link-row id="openTheme" class="first" |
| hidden="[[!pageVisibility.setTheme]]" |
| label="$i18n{themes}" sub-label="[[themeSublabel_]]" |
| on-click="onThemeClick_" external></cr-link-row> |
| <if expr="not is_linux"> |
| <template is="dom-if" if="[[prefs.extensions.theme.id.value]]"> |
| <div class="separator"></div> |
| <cr-button id="useDefault" on-click="onUseDefaultClick_"> |
| $i18n{resetToDefault} |
| </cr-button> |
| </template> |
| </if> |
| <if expr="is_linux"> |
| <div class="settings-row continuation" |
| hidden="[[!showThemesSecondary_( |
| prefs.extensions.theme.id.value, systemTheme_)]]" |
| id="themesSecondaryActions"> |
| <div class="separator"></div> |
| <template is="dom-if" if="[[showUseClassic_( |
| prefs.extensions.theme.id.value, systemTheme_)]]" restamp> |
| <cr-button id="useDefault" on-click="onUseDefaultClick_"> |
| $i18n{useClassicTheme} |
| </cr-button> |
| </template> |
| <template is="dom-if" if="[[showUseGtk_( |
| prefs.extensions.theme.id.value, systemTheme_)]]" restamp> |
| <cr-button id="useGtk" on-click="onUseGtkClick_"> |
| $i18n{useGtkTheme} |
| </cr-button> |
| </template> |
| <template is="dom-if" if="[[showUseQt_( |
| prefs.extensions.theme.id.value, systemTheme_)]]" restamp> |
| <cr-button id="useQt" on-click="onUseQtClick_"> |
| $i18n{useQtTheme} |
| </cr-button> |
| </template> |
| </div> |
| </if> |
| </div> |
| <div id="toolbarRow" class="settings-row"> |
| <cr-link-row id="customizeToolbar" |
| label="$i18n{customizeToolbar}" |
| on-click="onCustomizeToolbarClick_" external> |
| </cr-link-row> |
| <template is="dom-if" if="[[showResetPinnedActionsButton_]]"> |
| <div class="separator"></div> |
| <cr-button id="resetPinnedToolbarActions" |
| on-click="onResetPinnedToolbarActionsClick_"> |
| $i18n{resetToDefault} |
| </cr-button> |
| </template> |
| </div> |
| <div id="colorSchemeModeRow" class="cr-row" |
| <if expr="is_linux"> |
| hidden="[[!showColorSchemeMode_(prefs.extensions.theme.id.value, |
| systemTheme_)]]" |
| </if> |
| > |
| <div id="colorSchemeModeLabel" class="flex cr-padded-text" |
| aria-hidden="true"> |
| $i18n{colorSchemeMode} |
| </div> |
| <select id="colorSchemeModeSelect" class="md-select" |
| on-change="onColorSchemeModeChange_" |
| aria-labelledby="colorSchemeModeLabel"> |
| <template is="dom-repeat" items="[[colorSchemeModeOptions_]]"> |
| <option value="[[item.value]]" |
| selected="[[isSelectedColorSchemeMode_( |
| item.value, selectedColorSchemeMode_)]]"> |
| [[item.name]] |
| </option> |
| </template> |
| </select> |
| </div> |
| <div |
| class="hr" |
| hidden="[[!showHr_( |
| pageVisibility.setTheme, pageVisibility.homeButton)]]"> |
| </div> |
| <settings-toggle-button elide-label |
| hidden="[[!pageVisibility.homeButton]]" |
| pref="{{prefs.browser.show_home_button}}" |
| label="$i18n{showHomeButton}" |
| sub-label="[[getShowHomeSubLabel_( |
| prefs.browser.show_home_button.value, |
| prefs.homepage_is_newtabpage.value, |
| prefs.homepage.value)]]"> |
| </settings-toggle-button> |
| <template is="dom-if" if="[[prefs.browser.show_home_button.value]]"> |
| <div id="home-button-options" 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]]" |
| label="$i18n{homePageNtp}" no-extension-indicator> |
| </controlled-radio-button> |
| <controlled-radio-button id="custom-input" class="list-item" |
| name="false" pref="[[prefs.homepage_is_newtabpage]]" |
| no-extension-indicator> |
| <!-- TODO(dbeam): this can show double indicators when both |
| homepage and whether to use the NTP as the homepage are |
| managed. --> |
| <home-url-input id="customHomePage" pref="{{prefs.homepage}}" |
| can-tab="[[!prefs.homepage_is_newtabpage.value]]"> |
| </home-url-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="hr" |
| hidden="[[!showHr_( |
| pageVisibility.homeButton, pageVisibility.bookmarksBar)]]"> |
| </div> |
| <settings-toggle-button |
| hidden="[[!pageVisibility.bookmarksBar]]" |
| pref="{{prefs.bookmark_bar.show_on_all_tabs}}" |
| label="$i18n{showBookmarksBar}"> |
| </settings-toggle-button> |
| |
| <settings-toggle-button class="hr" id="showSavedTabGroups" |
| pref="{{prefs.bookmark_bar.show_tab_groups}}" |
| label="$i18n{showTabGroupsInBookmarksBar}"> |
| </settings-toggle-button> |
| |
| <settings-toggle-button class="hr" id="autoPinNewTabGroups" |
| pref="{{prefs.auto_pin_new_tab_groups}}" |
| label="$i18n{autoPinNewTabGroups}"> |
| </settings-toggle-button> |
| |
| <template is="dom-if" if="[[showTabSearchPositionSettings_]]" restamp> |
| <div class="cr-row" id="tabSearchPositionRow"> |
| <div class="flex cr-padded-text" aria-hidden="true"> |
| $i18n{tabSearchPosition} |
| </div> |
| <template is="dom-if" if="[[showTabSearchPositionRestartButton_]]" |
| restamp> |
| <cr-button id="tabSearchPositionRestart" role="alert" |
| on-click="onTabSearchPositionRestartClick_"> |
| $i18n{restart} |
| </cr-button> |
| </template> |
| <settings-dropdown-menu id="tabSearchPositionDropdown" |
| label="$i18n{tabSearchPosition}" |
| pref="{{prefs.tab_search.is_right_aligned}}" |
| menu-options="[[tabSearchOptions_]]"> |
| </settings-dropdown-menu> |
| </div> |
| </template> |
| <div class="cr-row"> |
| <div class="flex cr-padded-text" aria-hidden="true"> |
| $i18n{sidePanelPosition} |
| </div> |
| <settings-dropdown-menu id="sidePanelPosition" |
| label="$i18n{sidePanelPosition}" |
| pref="{{prefs.side_panel.is_right_aligned}}" |
| menu-options="[[sidePanelOptions_]]"> |
| </settings-dropdown-menu> |
| </div> |
| <template is="dom-if" if="[[!showHoverCardImagesOption_]]"> |
| <div class="hr" hidden="[[!pageVisibility.hoverCard]]"></div> |
| <settings-toggle-button id="hoverCardMemoryUsageToggle" |
| hidden="[[!pageVisibility.hoverCard]]" |
| pref="{{prefs.browser.hovercard.memory_usage_enabled}}" |
| label="$i18n{showHoverCardMemoryUsageStandalone}"> |
| </settings-toggle-button> |
| </template> |
| <template is="dom-if" if="[[showHoverCardImagesOption_]]"> |
| <div class="cr-row" hidden="[[!pageVisibility.hoverCard]]"> |
| $i18n{hoverCardTitle} |
| </div> |
| <div class="list-frame hover-card-toggles"> |
| <settings-toggle-button id="hoverCardImagesToggle" |
| hidden="[[!pageVisibility.hoverCard]]" |
| on-settings-boolean-control-change="onHoverCardImagesToggleChange_" |
| pref="{{prefs.browser.hovercard.image_previews_enabled}}" |
| label="$i18n{showHoverCardImages}"> |
| </settings-toggle-button> |
| <settings-toggle-button id="hoverCardMemoryUsageToggle" class="hr" |
| hidden="[[!pageVisibility.hoverCard]]" |
| pref="{{prefs.browser.hovercard.memory_usage_enabled}}" |
| label="$i18n{showHoverCardMemoryUsage}"> |
| </settings-toggle-button> |
| </div> |
| </template> |
| |
| <if expr="is_linux"> |
| <div class="hr" hidden="[[!pageVisibility.bookmarksBar]]"></div> |
| <settings-toggle-button |
| hidden="[[!showCustomChromeFrame_]]" |
| pref="{{prefs.browser.custom_chrome_frame}}" |
| label="$i18n{showWindowDecorations}" |
| inverted> |
| </settings-toggle-button> |
| </if> |
| <div class="cr-row"> |
| <div class="flex cr-padded-text" aria-hidden="true"> |
| $i18n{fontSize} |
| </div> |
| <settings-dropdown-menu id="defaultFontSize" label="$i18n{fontSize}" |
| pref="{{prefs.webkit.webprefs.default_font_size}}" |
| menu-options="[[fontSizeOptions_]]"> |
| </settings-dropdown-menu> |
| </div> |
| <cr-link-row class="hr" id="customize-fonts-subpage-trigger" |
| label="$i18n{customizeFonts}" on-click="onCustomizeFontsClick_" |
| role-description="$i18n{subpageArrowRoleDescription}"> |
| </cr-link-row> |
| <div class="cr-row" hidden="[[!pageVisibility.pageZoom]]"> |
| <div id="pageZoom" class="flex cr-padded-text" aria-hidden="true"> |
| $i18n{pageZoom} |
| </div> |
| <select id="zoomLevel" class="md-select" aria-labelledby="pageZoom" |
| on-change="onZoomLevelChange_"> |
| <template is="dom-repeat" items="[[pageZoomLevels_]]"> |
| <option value="[[item]]" |
| selected="[[zoomValuesEqual_(item, defaultZoom_)]]"> |
| [[formatZoom_(item)]]% |
| </option> |
| </template> |
| </select> |
| </div> |
| <if expr="is_macosx"> |
| <settings-toggle-button class="hr" |
| pref="{{prefs.webkit.webprefs.tabs_to_links}}" |
| label="$i18n{tabsToLinks}"> |
| </settings-toggle-button> |
| <settings-toggle-button class="hr" |
| pref="{{prefs.browser.confirm_to_quit}}" |
| label="$i18n{warnBeforeQuitting}"> |
| </settings-toggle-button> |
| </if> |
| </div> |
| <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 is="dom-if" if="[[showManagedThemeDialog_]]" restamp> |
| <managed-dialog on-close="onManagedDialogClosed_" |
| title="$i18n{themeManagedDialogTitle}" |
| body="$i18n{themeManagedDialogBody}"> |
| </managed-dialog> |
| </template> |
