Index: chrome/browser/resources/settings/appearance_page/appearance_page.html |
diff --git a/chrome/browser/resources/settings/appearance_page/appearance_page.html b/chrome/browser/resources/settings/appearance_page/appearance_page.html |
index fcc30552e0f7c06a18b6a4641c156b9c1bab9162..6d422537effb68b9e768a41b939456b0cc9e7de1 100644 |
--- a/chrome/browser/resources/settings/appearance_page/appearance_page.html |
+++ b/chrome/browser/resources/settings/appearance_page/appearance_page.html |
@@ -22,6 +22,12 @@ |
<dom-module id="settings-appearance-page"> |
<template> |
<style include="settings-shared md-select iron-flex"> |
+ /* Conditional logic makes identifying the first settings-box complicated |
+ so use first-of-type here. */ |
+ settings-box:first-of-type { |
+ border-top: none; |
+ } |
+ |
.secondary-button ~ .secondary-button { |
-webkit-margin-start: 12px; |
} |
@@ -41,126 +47,129 @@ |
focus-config="[[focusConfig_]]"> |
<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} |
+ <template is="dom-if" if="[[showPage_(pageVisibility.setWallpaper)]]"> |
+ <div id="setWallpaper" class="settings-box two-line" |
+ on-tap="openWallpaperManager_" actionable> |
+ <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> |
- <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]]"> |
+ </template> |
</if> |
- <a class="start two-line inherit-color no-outline" tabindex="-1" |
- target="_blank" href$="[[getThemeHref_(themeUrl_)]]"> |
- <div class="flex"> |
- $i18n{themes} |
- <div class="secondary" id="themesSecondary"> |
- [[themeSublabel_]] |
+ <template is="dom-if" if="[[showPage_(pageVisibility.setTheme)]]"> |
+ <div id="setTheme" class="settings-box two-line"> |
+ <a class="start two-line inherit-color no-outline" tabindex="-1" |
+ target="_blank" href$="[[getThemeHref_(themeUrl_)]]"> |
+ <div class="flex"> |
+ $i18n{themes} |
+ <div class="secondary" id="themesSecondary"> |
+ [[themeSublabel_]] |
+ </div> |
</div> |
- </div> |
- <button class="icon-external" is="paper-icon-button-light" |
- actionable aria-label="$i18n{themes}" |
- aria-describedby="themesSecondary"></button> |
- </a> |
+ <button class="icon-external" is="paper-icon-button-light" |
+ actionable aria-label="$i18n{themes}" |
+ aria-describedby="themesSecondary"> |
+ </button> |
+ </a> |
<if expr="not is_linux or chromeos"> |
- <template is="dom-if" if="[[prefs.extensions.theme.id.value]]"> |
- <div class="separator"></div> |
- <paper-button id="useDefault" on-tap="onUseDefaultTap_" |
- class="secondary-button"> |
- $i18n{resetToDefaultTheme} |
- </paper-button> |
- </template> |
-</if> |
-<if expr="is_linux and not chromeos"> |
- <div class="layout horizontal center" hidden="[[!showThemesSecondary_( |
- prefs.extensions.theme.id.value, useSystemTheme_)]]" |
- id="themesSecondaryActions"> |
- <div class="separator"></div> |
- <template is="dom-if" if="[[showUseClassic_( |
- prefs.extensions.theme.id.value, useSystemTheme_)]]" restamp> |
+ <template is="dom-if" if="[[prefs.extensions.theme.id.value]]"> |
+ <div class="separator"></div> |
<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} |
+ $i18n{resetToDefaultTheme} |
</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.browser.show_home_button.value, |
- 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]]" |
- 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> |
+<if expr="is_linux and not chromeos"> |
+ <div class="layout horizontal center" |
+ hidden="[[!showThemesSecondary_( |
+ prefs.extensions.theme.id.value, useSystemTheme_)]]" |
+ id="themesSecondaryActions"> |
+ <div class="separator"></div> |
+ <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> |
- </settings-radio-group> |
+ </div> |
+</if> |
+ </div> |
+ </template> |
+ <template is="dom-if" if="[[showPage_(pageVisibility.homeButton)]]"> |
+ <div id="homeButton" class="settings-box"> |
+ <settings-toggle-button class="start" elide-label |
+ 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> |
+ </div> |
+ <template is="dom-if" if="[[prefs.browser.show_home_button.value]]"> |
+ <div class="list-frame"> |
+ <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> |
+ </template> |
+ <template is="dom-if" if="[[showPage_(pageVisibility.bookmarksBar)]]"> |
+ <div id="bookmarksBar" class="settings-box"> |
+ <settings-toggle-button class="start" |
+ pref="{{prefs.bookmark_bar.show_on_all_tabs}}" |
+ label="$i18n{showBookmarksBar}"> |
+ </settings-toggle-button> |
</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"> |
+ <div class$="settings-box"> |
<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="settings-box"> |
<div class="start">$i18n{fontSize}</div> |
<settings-dropdown-menu id="defaultFontSize" label="$i18n{fontSize}" |
pref="{{prefs.webkit.webprefs.default_font_size}}" |
@@ -175,21 +184,24 @@ |
<button class="subpage-arrow" is="paper-icon-button-light" |
aria-label="$i18n{customizeFonts}"></button> |
</div> |
- <div class="settings-box" hidden="[[!pageVisibility.pageZoom]]"> |
- <div id="pageZoom" class="start">$i18n{pageZoom}</div> |
- <div class="md-select-wrapper"> |
- <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> |
- <span class="md-select-underline"></span> |
+ <template is="dom-if" if="[[showPage_(pageVisibility.pageZoom)]]"> |
+ <div class="settings-box"> |
+ <div id="pageZoom" class="start">$i18n{pageZoom}</div> |
+ <div class="md-select-wrapper"> |
+ <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> |
+ <span class="md-select-underline"></span> |
+ </div> |
</div> |
- </div> |
+ </template> |
</neon-animatable> |
<template is="dom-if" route-path="/fonts"> |
<settings-subpage |