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

Unified Diff: chrome/browser/resources/settings/appearance_page/appearance_page.html

Issue 2861443003: MD Settings: Fix subpage visibility and add appearance page tests (Closed)
Patch Set: Created 3 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
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

Powered by Google App Engine
This is Rietveld 408576698