Skip to content

GitLab

T
tangled
Commit c5c56bfa authored by michaelpg's avatar michaelpg Committed by Commit bot
Browse files
Options

MD Settings: Move settings-advanced-page into settings-basic-page 

Merges settings-basic-page and settings-advanced-page by into one element.

This simplifies a lot of behavior (we no longer have two MainPageBehavior
instances trying to scroll #mainContainter at the same time) which fixes some
bugs for free.

Functionality in settings-main that was specific to the settings pages has
been moved into settings-basic page, simplifying settings-main. Unfortunately,
settings-main still shares an annoying amount with setting-basic-page, namely
inSearchMode and advancedToggleExpanded.

The main bug this fixes is issue 662004: tapping a Basic page section from an
Advanced page sub-page (or vice versa) would fail to scroll to the new section.

Minor bugs that this fixes:
* after opening a subpage, tapping a section in the nav menu closed the subpage
    but only jumped to the new section after an awkward delay
* after loading a subpage URL, tapping the back icon button caused the page to
    jump to the top, then back down
* navigating from a Basic subpage to an Advanced subpage, or vice versa, would
    have hidden one of the main pages while transitioning

Note: settings-basic-page should be renamed now that "basic" is meaningless, but
unfortunately every conceivable alternative name is already taken, except for
settings-settings-page which is horrible for reasons too numerous to mention.

BUG=662004
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2518233004
Cr-Commit-Position: refs/heads/master@{#438738}
parent 4b39f024
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 489 additions and 469 deletions
chrome/browser/resources/settings/advanced_page/advanced_page.html deleted 100644 → 0
View file @ 4b39f024
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="/a11y_page/a11y_page.html">
<link rel="import" href="/downloads_page/downloads_page.html">
<link rel="import" href="/languages_page/languages_page.html">
<link rel="import" href="/passwords_and_forms_page/passwords_and_forms_page.html">
<link rel="import" href="/printing_page/printing_page.html">
<link rel="import" href="/privacy_page/privacy_page.html">
<link rel="import" href="/reset_page/reset_page.html">
<link rel="import" href="/settings_page/main_page_behavior.html">
<link rel="import" href="/settings_page/settings_page_visibility.html">
<link rel="import" href="/settings_page/settings_section.html">
<link rel="import" href="/settings_page_css.html">
<if expr="chromeos">
<link rel="import" href="/bluetooth_page/bluetooth_page.html">
<link rel="import" href="/date_time_page/date_time_page.html">
</if>
<if expr="not chromeos">
<link rel="import" href="/system_page/system_page.html">
</if>
<dom-module id="settings-advanced-page">
<template>
<style include="settings-page-styles"></style>
<div>
<if expr="chromeos">
<template is="dom-if" if="[[showPage(pageVisibility.dateTime)]]" restamp>
<settings-section page-title="$i18n{dateTimePageTitle}"
section="dateTime">
<settings-date-time-page prefs="{{prefs}}"
page-visibility="[[pageVisibility.dateTime]]">
</settings-date-time-page>
</settings-section>
</template>
</if>
<template is="dom-if" if="[[showPage(pageVisibility.privacy)]]" restamp>
<settings-section page-title="$i18n{privacyPageTitle}"
section="privacy">
<settings-privacy-page prefs="{{prefs}}"
page-visibility="[[pageVisibility.privacy]]">
</settings-privacy-page>
</settings-section>
</template>
<if expr="chromeos">
<template is="dom-if" if="[[showPage(pageVisibility.bluetooth)]]" restamp>
<settings-section page-title="$i18n{bluetoothPageTitle}"
section="bluetooth">
<settings-bluetooth-page prefs="{{prefs}}"></settings-bluetooth-page>
</settings-section>
</template>
</if>
<template is="dom-if" if="[[showPage(pageVisibility.passwordsAndForms)]]"
restamp>
<settings-section
page-title="$i18n{passwordsAndAutofillPageTitle}"
section="passwordsAndForms">
<settings-passwords-and-forms-page prefs="{{prefs}}">
</settings-passwords-and-forms-page>
</settings-section>
</template>
<template is="dom-if" if="[[showPage(pageVisibility.languages)]]" restamp>
<settings-section page-title="$i18n{languagesPageTitle}"
section="languages">
<settings-languages-page prefs="{{prefs}}"></settings-languages-page>
</settings-section>
</template>
<template is="dom-if" if="[[showPage(pageVisibility.downloads)]]" restamp>
<settings-section page-title="$i18n{downloadsPageTitle}"
section="downloads">
<settings-downloads-page prefs="{{prefs}}"
page-visibility="[[pageVisibility.downloads]]">
</settings-downloads-page>
</settings-section>
</template>
<template is="dom-if" if="[[showPage(pageVisibility.printing)]]" restamp>
<settings-section page-title="$i18n{printingPageTitle}"
section="printing">
<settings-printing-page prefs="{{prefs}}"></settings-printing-page>
</settings-section>
</template>
<template is="dom-if" if="[[showPage(pageVisibility.a11y)]]" restamp>
<settings-section page-title="$i18n{a11yPageTitle}" section="a11y">
<settings-a11y-page prefs="{{prefs}}"
current-route="{{currentRoute}}">
</settings-a11y-page>
</settings-section>
</template>
<if expr="not chromeos">
<template is="dom-if" if="[[showPage(pageVisibility.system)]]" restamp>
<settings-section page-title="$i18n{systemPageTitle}" section="system">
<settings-system-page prefs="{{prefs}}"></settings-system-page>
</settings-section>
</template>
</if>
<template is="dom-if" if="[[showPage(pageVisibility.reset)]]" restamp>
<settings-section page-title="$i18n{resetPageTitle}" section="reset">
<settings-reset-page></settings-reset-page>
</settings-section>
</template>
</div>
</template>
<script src="/advanced_page/advanced_page.js"></script>
</dom-module>
chrome/browser/resources/settings/advanced_page/advanced_page.js deleted 100644 → 0
View file @ 4b39f024
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* @fileoverview
* 'settings-advanced-page' is the settings page containing the advanced
* settings.
*/
Polymer({
is: 'settings-advanced-page',
behaviors: [SettingsPageVisibility, MainPageBehavior],
properties: {
/** Preferences state. */
prefs: {
type: Object,
notify: true,
},
},
});
chrome/browser/resources/settings/advanced_page/compiled_resources2.gyp deleted 100644 → 0
View file @ 4b39f024
# Copyright 2016 The Chromium Authors. All rights reserved.
# Use of this source code is governed by a BSD-style license that can be
# found in the LICENSE file.
{
'targets': [
{
'target_name': 'advanced_page',
'dependencies': [
'../compiled_resources2.gyp:route',
'../settings_page/compiled_resources2.gyp:main_page_behavior',
'../settings_page/compiled_resources2.gyp:settings_page_visibility',
'../system_page/compiled_resources2.gyp:system_page',
],
'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
},
],
}
chrome/browser/resources/settings/basic_page/basic_page.js
View file @ c5c56bfa
......@@ -4,7 +4,7 @@
/**
* @fileoverview
* 'settings-basic-page' is the settings page containing the basic settings.
* 'settings-basic-page' is the settings page containing the actual settings.
*/
Polymer({
is: 'settings-basic-page',
......@@ -20,6 +20,27 @@ Polymer({
showAndroidApps: Boolean,
/**
* Dictionary defining page visibility.
* @type {!GuestModePageVisibility}
*/
pageVisibility: Object,
advancedToggleExpanded: {
type: Boolean,
notify: true,
},
/**
* True if a section is fully expanded to hide other sections beneath it.
* False otherwise (even while animating a section open/closed).
* @private {boolean}
*/
hasExpandedSection_: {
type: Boolean,
value: false,
},
/**
* True if the basic page should currently display the reset profile banner.
* @private {boolean}
......@@ -30,6 +51,60 @@ Polymer({
return loadTimeData.getBoolean('showResetProfileBanner');
},
},
/** @private {!settings.Route|undefined} */
currentRoute_: Object,
},
listeners: {
'subpage-expand': 'onSubpageExpanded_',
},
/** @override */
attached: function() {
this.currentRoute_ = settings.getCurrentRoute();
},
/**
* Overrides MainPageBehaviorImpl from MainPageBehavior.
* @param {!settings.Route} newRoute
* @param {settings.Route} oldRoute
*/
currentRouteChanged: function(newRoute, oldRoute) {
this.currentRoute_ = newRoute;
if (settings.Route.ADVANCED.contains(newRoute))
this.advancedToggleExpanded = true;
if (oldRoute && oldRoute.isSubpage()) {
// If the new route isn't the same expanded section, reset
// hasExpandedSection_ for the next transition.
if (!newRoute.isSubpage() || newRoute.section != oldRoute.section)
this.hasExpandedSection_ = false;
} else {
assert(!this.hasExpandedSection_);
}
MainPageBehaviorImpl.currentRouteChanged.call(this, newRoute, oldRoute);
},
/**
* Queues a task to search the basic sections, then another for the advanced
* sections.
* @param {string} query The text to search for.
* @return {!Promise<!settings.SearchRequest>} A signal indicating that
* searching finished.
*/
searchContents: function(query) {
var whenSearchDone = settings.getSearchManager().search(
query, assert(this.$$('#basicPage')));
if (this.pageVisibility.advancedSettings !== false) {
assert(whenSearchDone === settings.getSearchManager().search(
query, assert(this.$$('#advancedPage'))));
}
return whenSearchDone;
},
/** @private */
......@@ -46,4 +121,68 @@ Polymer({
this.get('pageVisibility.androidApps'));
return this.showAndroidApps && this.showPage(visibility);
},
/**
* Hides everything but the newly expanded subpage.
* @private
*/
onSubpageExpanded_: function() {
this.hasExpandedSection_ = true;
},
/**
* @param {boolean} inSearchMode
* @param {boolean} hasExpandedSection
* @return {boolean}
* @private
*/
showAdvancedToggle_: function(inSearchMode, hasExpandedSection) {
return !inSearchMode && !hasExpandedSection;
},
/**
* @param {!settings.Route} currentRoute
* @param {boolean} inSearchMode
* @param {boolean} hasExpandedSection
* @return {boolean} Whether to show the basic page, taking into account
* both routing and search state.
* @private
*/
showBasicPage_: function(currentRoute, inSearchMode, hasExpandedSection) {
return !hasExpandedSection || settings.Route.BASIC.contains(currentRoute);
},
/**
* @param {!settings.Route} currentRoute
* @param {boolean} inSearchMode
* @param {boolean} hasExpandedSection
* @param {boolean} advancedToggleExpanded
* @return {boolean} Whether to show the advanced page, taking into account
* both routing and search state.
* @private
*/
showAdvancedPage_: function(currentRoute, inSearchMode, hasExpandedSection,
advancedToggleExpanded) {
return hasExpandedSection ?
settings.Route.ADVANCED.contains(currentRoute) :
advancedToggleExpanded || inSearchMode;
},
/**
* @param {(boolean|undefined)} visibility
* @return {boolean} True unless visibility is false.
* @private
*/
showAdvancedSettings_: function(visibility) {
return visibility !== false;
},
/**
* @param {boolean} opened Whether the menu is expanded.
* @return {string} Icon name.
* @private
*/
getArrowIcon_: function(opened) {
return opened ? 'settings:arrow-drop-up' : 'cr:arrow-drop-down';
},
});
chrome/browser/resources/settings/basic_page/compiled_resources2.gyp
View file @ c5c56bfa
......@@ -8,8 +8,10 @@
'dependencies': [
'<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
'../compiled_resources2.gyp:route',
'../compiled_resources2.gyp:search_settings',
'../settings_page/compiled_resources2.gyp:main_page_behavior',
'../settings_page/compiled_resources2.gyp:settings_page_visibility',
'../settings_ui/compiled_resources2.gyp:settings_ui_types',
],
'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
},
......
chrome/browser/resources/settings/compiled_resources2.gyp
View file @ c5c56bfa
......@@ -57,7 +57,6 @@
'dependencies': [
'a11y_page/compiled_resources2.gyp:*',
'about_page/compiled_resources2.gyp:*',
'advanced_page/compiled_resources2.gyp:*',
'android_apps_page/compiled_resources2.gyp:*',
'animation/compiled_resources2.gyp:*',
'appearance_page/compiled_resources2.gyp:*',
......
chrome/browser/resources/settings/search_settings.js
View file @ c5c56bfa
......@@ -362,8 +362,8 @@ cr.define('settings', function() {
* @private
*/
setSectionsVisibility_: function(visible) {
var sections = Polymer.dom(
this.node.root).querySelectorAll('settings-section');
var sections = this.node.querySelectorAll('settings-section');
for (var i = 0; i < sections.length; i++)
sections[i].hiddenBySearch = !visible;
},
......
chrome/browser/resources/settings/settings_main/compiled_resources2.gyp
View file @ c5c56bfa
......@@ -9,7 +9,6 @@
'../compiled_resources2.gyp:route',
'../compiled_resources2.gyp:search_settings',
'../about_page/compiled_resources2.gyp:about_page',
'../advanced_page/compiled_resources2.gyp:advanced_page',
'../basic_page/compiled_resources2.gyp:basic_page',
'../settings_page/compiled_resources2.gyp:main_page_behavior',
'<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
......
chrome/browser/resources/settings/settings_main/settings_main.html
View file @ c5c56bfa
......@@ -4,49 +4,17 @@
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="/about_page/about_page.html">
<link rel="import" href="/advanced_page/advanced_page.html">
<link rel="import" href="/basic_page/basic_page.html">
<link rel="import" href="/route.html">
<link rel="import" href="/settings_page/main_page_behavior.html">
<link rel="import" href="/settings_vars_css.html">
<dom-module id="settings-main">
<template>
<style>
#advancedToggle {
--paper-button: {
text-transform: none;
}
@apply(--settings-actionable);
align-items: center;
display: flex;
margin-bottom: 3px;
margin-top: 12px; /* Part of a 48px spacer (33px + 12px + 3px). */
min-height: 32px;
padding: 0 12px;
}
#overscroll {
margin-top: 64px;
}
#toggleContainer {
align-items: center;
display: flex;
font: inherit;
justify-content: center;
margin-bottom: 0;
margin-top: 0;
}
#toggleSpacer {
padding-top: 33px; /* Part of a 48px spacer (33px + 12px + 3px). */
}
iron-icon {
-webkit-margin-start: 16px;
}
#noSearchResults {
align-items: center;
display: flex;
......@@ -64,38 +32,15 @@
<div>$i18n{searchNoResults}</div>
<div>$i18nRaw{searchNoResultsHelp}</div>
</div>
<template is="dom-if" if="[[showBasicPage_(
showPages_.basic, inSearchMode_, hasExpandedSection_)]]">
<template is="dom-if" if="[[showPages_.settings]]">
<settings-basic-page prefs="{{prefs}}"
page-visibility="[[pageVisibility]]"
show-android-apps="[[showAndroidApps]]"
on-subpage-expand="onSubpageExpand_"
in-search-mode="[[inSearchMode_]]">
in-search-mode="[[inSearchMode_]]"
advanced-toggle-expanded="{{advancedToggleExpanded}}">
</settings-basic-page>
</template>
<template is="dom-if"
if="[[showAdvancedSettings_(pageVisibility.advancedSettings)]]">
<template is="dom-if" if="[[showAdvancedToggle_(
showPages_.basic, hasExpandedSection_, inSearchMode_)]]">
<div id="toggleSpacer"></div>
<h2 id="toggleContainer">
<paper-button id="advancedToggle" active="{{advancedToggleExpanded}}"
aria-active-attribute="aria-expanded" toggles>
<span>$i18n{advancedPageTitle}</span>
<iron-icon icon="[[arrowState_(advancedToggleExpanded)]]">
</iron-icon>
</paper-button>
</h2>
</template>
<template is="dom-if" if="[[showAdvancedPage_(
showPages_.advanced, inSearchMode_, hasExpandedSection_)]]">
<settings-advanced-page prefs="{{prefs}}"
page-visibility="[[pageVisibility]]"
on-subpage-expand="onSubpageExpand_"
in-search-mode="[[inSearchMode_]]">
</settings-advanced-page>
</template>
</template>
<template is="dom-if" if="[[showPages_.about]]">
<settings-about-page in-search-mode="[[inSearchMode_]]">
</settings-about-page>
......
chrome/browser/resources/settings/settings_main/settings_main.js
View file @ c5c56bfa
......@@ -3,7 +3,7 @@
// found in the LICENSE file.
/**
* @typedef {{about: boolean, basic: boolean, advanced: boolean}}
* @typedef {{about: boolean, settings: boolean}}
*/
var MainPageVisibility;
......@@ -28,16 +28,8 @@ Polymer({
advancedToggleExpanded: {
type: Boolean,
notify: true,
observer: 'updatePagesShown_',
},
/**
* True if a section is fully expanded to hide other sections beneath it.
* Not true otherwise (even while animating a section open/closed).
* @private
*/
hasExpandedSection_: Boolean,
/** @private */
overscroll_: {
type: Number,
......@@ -46,13 +38,13 @@ Polymer({
/**
* Controls which main pages are displayed via dom-ifs, based on the current
* route and the Advanced toggle state.
* route.
* @private {!MainPageVisibility}
*/
showPages_: {
type: Object,
value: function() {
return {about: false, basic: false, advanced: false};
return {about: false, settings: false};
},
},
......@@ -93,8 +85,6 @@ Polymer({
/** @override */
attached: function() {
this.listen(this, 'freeze-scroll', 'onFreezeScroll_');
var currentRoute = settings.getCurrentRoute();
this.hasExpandedSection_ = currentRoute && currentRoute.isSubpage();
},
/** @override */
......@@ -162,84 +152,24 @@ Polymer({
}
},
/**
* @param {boolean} opened Whether the menu is expanded.
* @return {string} Which icon to use.
* @private
*/
arrowState_: function(opened) {
return opened ? 'settings:arrow-drop-up' : 'cr:arrow-drop-down';
},
/**
* @return {boolean}
* @private
*/
showAdvancedToggle_: function() {
return !this.inSearchMode_ && this.showPages_.basic &&
!this.hasExpandedSection_;
},
/**
* @return {boolean} Whether to show the basic page, taking into account both
* routing and search state.
* @private
*/
showBasicPage_: function() {
return this.showPages_.basic || (
this.inSearchMode_ && !this.hasExpandedSection_);
},
/**
* @return {boolean} Whether to show the advanced page, taking into account
* both routing and search state.
* @private
*/
showAdvancedPage_: function() {
return this.showPages_.advanced || (
this.inSearchMode_ && !this.hasExpandedSection_);
},
/** @param {!settings.Route} newRoute */
currentRouteChanged: function(newRoute) {
// When the route changes from a sub-page to the main page, immediately
// update hasExpandedSection_ to unhide the other sections.
if (!newRoute.isSubpage())
this.hasExpandedSection_ = false;
if (settings.Route.ADVANCED.contains(newRoute))
this.advancedToggleExpanded = true;
this.updatePagesShown_();
},
/** @private */
onSubpageExpand_: function() {
// The subpage finished expanding fully. Hide pages other than the current
// section's parent page.
this.hasExpandedSection_ = true;
this.updatePagesShown_();
},
/**
* Updates the hidden state of the about, basic and advanced pages, based on
* the current route and the Advanced toggle state.
* Updates the hidden state of the about and settings pages based on the
* current route.
* @private
*/
updatePagesShown_: function() {
var currentRoute = settings.getCurrentRoute();
if (settings.Route.ABOUT.contains(currentRoute)) {
this.showPages_ = {about: true, basic: false, advanced: false};
} else {
this.showPages_ = {
about: false,
basic: settings.Route.BASIC.contains(currentRoute) ||
!this.hasExpandedSection_,
advanced: this.hasExpandedSection_ ?
settings.Route.ADVANCED.contains(currentRoute) :
this.advancedToggleExpanded,
};
}
var inAbout = settings.Route.ABOUT.contains(settings.getCurrentRoute());
this.showPages_ = {about: inAbout, settings: !inAbout};
// Calculate and set the overflow padding.
this.updateOverscrollForPage_();
......@@ -292,27 +222,18 @@ Polymer({
return Math.max(0, this.offsetParent.clientHeight - distance);
},
/** @private */
toggleAdvancedPage_: function() {
this.advancedToggleExpanded = !this.advancedToggleExpanded;
},
/**
* Returns the root page (if it exists) for a route.
* @param {!settings.Route} route
* @return {(?SettingsAboutPageElement|?SettingsAdvancedPageElement|
* ?SettingsBasicPageElement)}
* @return {(?SettingsAboutPageElement|?SettingsBasicPageElement)}
*/
getPage_: function(route) {
if (settings.Route.ABOUT.contains(route)) {
return /** @type {?SettingsAboutPageElement} */(
this.$$('settings-about-page'));
}
if (settings.Route.ADVANCED.contains(route)) {
return /** @type {?SettingsAdvancedPageElement} */(
this.$$('settings-advanced-page'));
}
if (settings.Route.BASIC.contains(route)) {
if (settings.Route.BASIC.contains(route) ||
settings.Route.ADVANCED.contains(route)) {
return /** @type {?SettingsBasicPageElement} */(
this.$$('settings-basic-page'));
}
......@@ -330,14 +251,8 @@ Polymer({
return new Promise(function(resolve, reject) {
setTimeout(function() {
var whenSearchDone = settings.getSearchManager().search(
query, assert(this.getPage_(settings.Route.BASIC)));
if (this.pageVisibility.advancedSettings !== false) {
assert(whenSearchDone === settings.getSearchManager().search(
query, assert(this.getPage_(settings.Route.ADVANCED))));
}
var whenSearchDone =
assert(this.getPage_(settings.Route.BASIC)).searchContents(query);
whenSearchDone.then(function(request) {
resolve();
if (!request.finished) {
......@@ -355,13 +270,4 @@ Polymer({
}.bind(this), 0);
}.bind(this));
},
/**
* @param {(boolean|undefined)} visibility
* @return {boolean} True unless visibility is false.
* @private
*/
showAdvancedSettings_: function(visibility) {
return visibility !== false;
},
});
chrome/browser/resources/settings/settings_page/main_page_behavior.js
View file @ c5c56bfa
......@@ -101,9 +101,6 @@ var MainPageBehaviorImpl = {
// If the section shouldn't be expanded, collapse it.
if (!currentRoute.isSubpage() || expandedSection != currentSection) {
promise = this.collapseSection_(expandedSection);
// Scroll to the collapsed section.
if (currentSection && scrollToSection)
currentSection.scrollIntoView();
} else {
// Scroll to top while sliding to another subpage.
this.scroller.scrollTop = 0;
......@@ -253,7 +250,11 @@ var MainPageBehaviorImpl = {
var newSection = settings.getCurrentRoute().section &&
this.getSection(settings.getCurrentRoute().section);
this.scroller.scrollTop = this.origScrollTop_;
// Scroll to the new section or the original position.
if (newSection && !settings.lastRouteChangeWasPopstate())
newSection.scrollIntoView();
else
this.scroller.scrollTop = this.origScrollTop_;
this.currentAnimation_ = section.animateCollapse(
/** @type {!HTMLElement} */(this.scroller));
......
chrome/browser/resources/settings/settings_resources.grd
View file @ c5c56bfa
......@@ -65,15 +65,6 @@
<structure name="IDR_SETTINGS_ADD_SITE_DIALOG_JS"
file="site_settings/add_site_dialog.js"
type="chrome_html" />
<structure name="IDR_SETTINGS_ADVANCED_PAGE_JS"
file="advanced_page/advanced_page.js"
flattenhtml="true"
type="chrome_html" />
<structure name="IDR_SETTINGS_ADVANCED_PAGE_HTML"
file="advanced_page/advanced_page.html"
type="chrome_html"
flattenhtml="true"
allowexternalscript="true" />
<structure name="IDR_SETTINGS_ALL_SITES_HTML"
file="site_settings/all_sites.html"
type="chrome_html" />
......@@ -123,6 +114,7 @@
flattenhtml="true" />
<structure name="IDR_SETTINGS_BASIC_PAGE_JS"
file="basic_page/basic_page.js"
flattenhtml="true"
type="chrome_html" />
<structure name="IDR_SETTINGS_BASIC_PAGE_HTML"
file="basic_page/basic_page.html"
......
chrome/test/data/webui/settings/advanced_page_browsertest.js
View file @ c5c56bfa
......@@ -41,14 +41,14 @@ TEST_F('SettingsAdvancedPageBrowserTest', 'MAYBE_Load', function() {
});
test('advanced pages', function() {
var page = self.getPage('advanced');
var page = self.getPage('basic');
var sections = ['privacy', 'passwordsAndForms', 'languages', 'downloads',
'reset'];
if (cr.isChromeOS)
sections = sections.concat(['dateTime', 'bluetooth', 'a11y']);
for (var i = 0; i < sections.length; i++) {
var section = self.getSection(page, sections[i]);
var section = self.getSection(page, sections[i], true /* advanced */);
expectTrue(!!section);
self.verifySubpagesHidden(section);
}
......
chrome/test/data/webui/settings/bluetooth_page_browsertest_chromeos.js
View file @ c5c56bfa
......@@ -60,9 +60,9 @@ TEST_F('SettingsBluetoothPageBrowserTest', 'MAYBE_Bluetooth', function() {
var self = this;
self.toggleAdvanced();
var advanced = self.getPage('advanced');
assertTrue(!!advanced);
advanced.set('pageVisibility.bluetooth', true);
var page = self.getPage('basic');
assertTrue(!!page);
page.set('pageVisibility.bluetooth', true);
Polymer.dom.flush();
/** @type {!Array<!chrome.bluetooth.Device>} */ var fakeDevices_ = [
......@@ -94,7 +94,7 @@ TEST_F('SettingsBluetoothPageBrowserTest', 'MAYBE_Bluetooth', function() {
suite('SettingsBluetoothPage', function() {
test('enable', function() {
assertFalse(self.bluetoothApi_.adapterState.powered);
var bluetoothSection = self.getSection(advanced, 'bluetooth');
var bluetoothSection = self.getSection(page, 'bluetooth');
assertTrue(!!bluetoothSection);
var bluetooth =
bluetoothSection.querySelector('settings-bluetooth-page');
......@@ -119,7 +119,7 @@ TEST_F('SettingsBluetoothPageBrowserTest', 'MAYBE_Bluetooth', function() {
});
test('device list', function() {
var bluetoothSection = self.getSection(advanced, 'bluetooth');
var bluetoothSection = self.getSection(page, 'bluetooth');
var bluetooth =
bluetoothSection.querySelector('settings-bluetooth-page');
assertTrue(!!bluetooth);
......@@ -153,7 +153,7 @@ TEST_F('SettingsBluetoothPageBrowserTest', 'MAYBE_Bluetooth', function() {
});
test('device dialog', function() {
var bluetoothSection = self.getSection(advanced, 'bluetooth');
var bluetoothSection = self.getSection(page, 'bluetooth');
var bluetooth =
bluetoothSection.querySelector('settings-bluetooth-page');
assertTrue(!!bluetooth);
......
chrome/test/data/webui/settings/languages_page_browsertest.js
View file @ c5c56bfa
......@@ -47,7 +47,7 @@ TEST_F('SettingsLanguagesPageBrowserTest', 'MAYBE_LanguagesPage', function() {
testing.Test.disableAnimationsAndTransitions();
this.toggleAdvanced();
var advanced = this.getPage('advanced');
var page = this.getPage('basic');
var languagesSection;
var languagesPage;
......@@ -81,10 +81,10 @@ TEST_F('SettingsLanguagesPageBrowserTest', 'MAYBE_LanguagesPage', function() {
}
suiteSetup(function() {
advanced.set('pageVisibility.languages', true);
page.set('pageVisibility.languages', true);
Polymer.dom.flush();
languagesSection = assert(this.getSection(advanced, 'languages'));
languagesSection = assert(this.getSection(page, 'languages'));
languagesPage = assert(
languagesSection.querySelector('settings-languages-page'));
languagesCollapse = languagesPage.$.languagesCollapse;
......
chrome/test/data/webui/settings/settings_main_test.js
View file @ c5c56bfa
......@@ -104,20 +104,40 @@ cr.define('settings_main_page', function() {
});
});
/** @return {!HTMLElement} */
function getToggleContainer() {
var page = settingsMain.$$('settings-basic-page');
assertTrue(!!page);
var toggleContainer = page.$$('#toggleContainer');
assertTrue(!!toggleContainer);
return toggleContainer;
}
/**
* Asserts that the Advanced toggle container exists in the combined
* settings page and asserts whether it should be visible.
* @param {boolean} expectedVisible
*/
function assertToggleContainerVisible(expectedVisible) {
var toggleContainer = getToggleContainer();
if (expectedVisible)
assertNotEquals('none', toggleContainer.style.display);
else
assertEquals('none', toggleContainer.style.display);
}
test('no results page shows and hides', function() {
Polymer.dom.flush();
var noSearchResults = settingsMain.$.noSearchResults;
assertTrue(!!noSearchResults);
assertTrue(noSearchResults.hidden);
var toggleContainer = settingsMain.$$('#toggleContainer');
assertTrue(!!toggleContainer);
assertNotEquals('none', toggleContainer.style.display);
assertToggleContainerVisible(true);
searchManager.setMatchesFound(false);
return settingsMain.searchContents('Query1').then(function() {
assertFalse(noSearchResults.hidden);
assertEquals('none', toggleContainer.style.display);
assertToggleContainerVisible(false);
searchManager.setMatchesFound(true);
return settingsMain.searchContents('Query2');
......@@ -134,19 +154,36 @@ cr.define('settings_main_page', function() {
assertTrue(!!noSearchResults);
assertTrue(noSearchResults.hidden);
var toggleContainer = settingsMain.$$('#toggleContainer');
assertTrue(!!toggleContainer);
assertNotEquals('none', toggleContainer.style.display);
assertToggleContainerVisible(true);
searchManager.setMatchesFound(false);
// Clearing the search box is effectively a search for the empty string.
return settingsMain.searchContents('').then(function() {
Polymer.dom.flush();
assertTrue(noSearchResults.hidden);
assertNotEquals('none', toggleContainer.style.display);
assertToggleContainerVisible(true);
});
});
/**
* Asserts the visibility of the basic and advanced pages.
* @param {string} Expected 'display' value for the basic page.
* @param {string} Expected 'display' value for the advanced page.
*/
function assertPageVisibility(expectedBasic, expectedAdvanced) {
Polymer.dom.flush();
var page = settingsMain.$$('settings-basic-page');
assertEquals(
expectedBasic, page.$$('#basicPage').style.display);
assertEquals(
expectedAdvanced, page.$$('#advancedPage').style.display);
}
// TODO(michaelpg): It would be better not to drill into
// settings-basic-page. If search should indeed only work in Settings
// (as opposed to Advanced), perhaps some of this logic should be
// delegated to settings-basic-page now instead of settings-main.
/**
* Asserts the visibility of the basic and advanced pages after exiting
* search mode.
......@@ -161,13 +198,7 @@ cr.define('settings_main_page', function() {
searchManager.setMatchesFound(false);
return settingsMain.searchContents('');
}).then(function() {
Polymer.dom.flush();
assertEquals(
expectedBasic,
settingsMain.$$('settings-basic-page').style.display);
assertEquals(
expectedAdvanced,
settingsMain.$$('settings-advanced-page').style.display);
assertPageVisibility(expectedBasic, expectedAdvanced);
});
}
......@@ -202,39 +233,36 @@ cr.define('settings_main_page', function() {
Polymer.dom.flush();
// Simulate clicking the left arrow to go back to the search results.
settingsMain.currentRouteChanged(settings.Route.BASIC);
Polymer.dom.flush();
assertEquals(
'', settingsMain.$$('settings-basic-page').style.display);
assertEquals(
'', settingsMain.$$('settings-advanced-page').style.display);
settings.navigateTo(settings.Route.BASIC);
assertPageVisibility('', '');
});
});
// TODO(michaelpg): Move these to a new test for settings-basic-page.
test('can collapse advanced on advanced section route', function() {
settings.navigateTo(settings.Route.PRIVACY);
Polymer.dom.flush();
var advancedToggle = settingsMain.$$('#advancedToggle');
var advancedToggle =
getToggleContainer().querySelector('#advancedToggle');
assertTrue(!!advancedToggle);
MockInteractions.tap(advancedToggle);
Polymer.dom.flush();
assertFalse(settingsMain.showPages_.advanced);
assertPageVisibility('', 'none');
});
test('navigating to a basic page does not collapse advanced', function() {
settings.navigateTo(settings.Route.PRIVACY);
Polymer.dom.flush();
var advancedToggle = settingsMain.$$('#advancedToggle');
assertTrue(!!advancedToggle);
assertToggleContainerVisible(true);
settings.navigateTo(settings.Route.PEOPLE);
Polymer.dom.flush();
assertTrue(settingsMain.showPages_.advanced);
assertPageVisibility('', '');
});
});
}
......
chrome/test/data/webui/settings/settings_page_browsertest.js
View file @ c5c56bfa
......@@ -46,12 +46,12 @@ SettingsPageBrowserTest.prototype = {
toggleAdvanced: function() {
var settingsMain = document.querySelector('* /deep/ settings-main');
assert(!!settingsMain);
settingsMain.toggleAdvancedPage_();
settingsMain.advancedToggleExpanded = !settingsMain.advancedToggleExpanded;
Polymer.dom.flush();
},
/**
* @param {string} type The settings page type, e.g. 'advanced' or 'basic'.
* @param {string} type The settings page type, e.g. 'about' or 'basic'.
* @return {!PolymerElement} The PolymerElement for the page.
*/
getPage: function(type) {
......
chrome/test/data/webui/settings/settings_subpage_browsertest.js
View file @ c5c56bfa
......@@ -13,15 +13,15 @@ GEN_INCLUDE(['settings_page_browsertest.js']);
* @constructor
* @extends {SettingsPageBrowserTest}
*
* @param {string} pageId 'basic' or 'advanced'.
* @param {!Array<string>} subPages
* @param {string} pageId Just 'basic'. TODO(michaelpg): Add 'about' if we want
* to, but that requires wrapping its sole <settings-section> in a dom-if.
*/
function SettingsSubPageBrowserTest(pageId, subPages) {
function SettingsSubPageBrowserTest(pageId) {
/** @type {string} */
this.pageId = pageId;
/** @type {!Array<string>} */
this.subPages = subPages;
this.subPages = [];
}
SettingsSubPageBrowserTest.prototype = {
......@@ -39,25 +39,19 @@ SettingsSubPageBrowserTest.prototype = {
/** @override */
setUp: function() {
SettingsPageBrowserTest.prototype.setUp.call(this);
// Explicitly hide all of the pages (not strictly required but is more
// clear than relying on undefined -> hidden).
this.toggleAdvanced();
this.hideSubPages_();
this.verifySubPagesHidden_();
},
/*
* This will hide all subpages in |this.subPages|. Note: any existing subpages
* not listed in |this.subPages| will be shown.
* Checks all subpages are hidden first.
* @private
*/
hideSubPages_: function() {
verifySubPagesHidden_: function() {
var page = this.getPage(this.pageId);
var visibility = {};
this.subPages.forEach(function(subPage) {
visibility[subPage] = false;
});
assertEquals(0, Object.keys(page.pageVisibility).length);
page.pageVisibility = visibility;
// Ensure all pages are hidden.
// Ensure all pages are still hidden after the dom-ifs compute their |if|.
Polymer.dom.flush();
var sections = page.shadowRoot.querySelectorAll('settings-section');
assertTrue(!!sections);
assertEquals(0, sections.length);
......@@ -70,7 +64,7 @@ SettingsSubPageBrowserTest.prototype = {
* @param {Node} page
* @param {string} subpage
*/
testPage: function(page, subPage) {
testSubPage: function(page, subPage) {
Polymer.dom.flush();
expectFalse(!!this.getSection(page, subPage));
var startTime = window.performance.now();
......@@ -85,39 +79,28 @@ SettingsSubPageBrowserTest.prototype = {
},
testSubPages: function() {
Polymer.dom.flush();
var page = this.getPage(this.pageId);
this.subPages.forEach(function(subPage) {
if (this.includePage(subPage))
test(subPage, this.testPage.bind(this, page, subPage));
test(subPage, this.testSubPage.bind(this, page, subPage));
}.bind(this));
},
/**
* @param {string} id
* @return {boolean}
*/
includePage: function(id) {
if (cr.isChromeOS)
return id != 'people' && id != 'defaultBrowser';
return id != 'internet' && id != 'users' && id != 'device' &&
id != 'dateTime' && id != 'bluetooth' && id != 'a11y';
},
};
/** @constructor @extends {SettingsSubPageBrowserTest} */
function SettingsBasicSubPageBrowserTest() {
var subPages = [
SettingsSubPageBrowserTest.call(this, 'basic');
/** @override */
this.subPages = [
'people',
'internet',
'appearance',
'onStartup',
'search',
'defaultBrowser',
'device'
];
SettingsSubPageBrowserTest.call(this, 'basic', subPages);
if (cr.isChromeOS)
this.subPages.push('device', 'internet');
else
this.subPages.push('defaultBrowser');
}
SettingsBasicSubPageBrowserTest.prototype = {
......@@ -131,22 +114,33 @@ TEST_F('SettingsBasicSubPageBrowserTest', 'SubPages', function() {
/** @constructor @extends {SettingsSubPageBrowserTest} */
function SettingsAdvancedSubPageBrowserTest() {
var subPages = [
'dateTime',
// "Advanced" sections live in the settings-basic-page.
SettingsSubPageBrowserTest.call(this, 'basic');
/** @override */
this.subPages = [
'privacy',
'bluetooth',
'passwordsAndForms',
'languages',
'downloads',
'printing',
'a11y',
'reset',
'a11y'
];
SettingsSubPageBrowserTest.call(this, 'advanced', subPages);
if (cr.isChromeOS)
this.subPages.push('dateTime', 'bluetooth');
else
this.subPages.push('system');
};
SettingsAdvancedSubPageBrowserTest.prototype = {
__proto__: SettingsSubPageBrowserTest.prototype,
/** @override */
setUp: function() {
this.toggleAdvanced();
SettingsSubPageBrowserTest.prototype.setUp.call(this);
},
};
TEST_F('SettingsAdvancedSubPageBrowserTest', 'SubPages', function() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment