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

Side by Side Diff: chrome/browser/resources/settings/settings_main/settings_main.js

Issue 2518233004: MD Settings: Move settings-advanced-page into settings-basic-page (Closed)
Patch Set: rebase Created 4 years 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 unified diff | Download patch
OLDNEW
1 // Copyright 2015 The Chromium Authors. All rights reserved. 1 // Copyright 2015 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 /** 5 /**
6 * @typedef {{about: boolean, basic: boolean, advanced: boolean}} 6 * @typedef {{about: boolean, settings: boolean}}
7 */ 7 */
8 var MainPageVisibility; 8 var MainPageVisibility;
9 9
10 /** 10 /**
11 * @fileoverview 11 * @fileoverview
12 * 'settings-main' displays the selected settings page. 12 * 'settings-main' displays the selected settings page.
13 */ 13 */
14 Polymer({ 14 Polymer({
15 is: 'settings-main', 15 is: 'settings-main',
16 16
17 behaviors: [settings.RouteObserverBehavior], 17 behaviors: [settings.RouteObserverBehavior],
18 18
19 properties: { 19 properties: {
20 /** 20 /**
21 * Preferences state. 21 * Preferences state.
22 */ 22 */
23 prefs: { 23 prefs: {
24 type: Object, 24 type: Object,
25 notify: true, 25 notify: true,
26 }, 26 },
27 27
28 advancedToggleExpanded: { 28 advancedToggleExpanded: {
29 type: Boolean, 29 type: Boolean,
30 notify: true, 30 notify: true,
31 observer: 'updatePagesShown_',
32 }, 31 },
33 32
34 /**
35 * True if a section is fully expanded to hide other sections beneath it.
36 * Not true otherwise (even while animating a section open/closed).
37 * @private
38 */
39 hasExpandedSection_: Boolean,
40
41 /** @private */ 33 /** @private */
42 overscroll_: { 34 overscroll_: {
43 type: Number, 35 type: Number,
44 observer: 'overscrollChanged_', 36 observer: 'overscrollChanged_',
45 }, 37 },
46 38
47 /** 39 /**
48 * Controls which main pages are displayed via dom-ifs, based on the current 40 * Controls which main pages are displayed via dom-ifs, based on the current
49 * route and the Advanced toggle state. 41 * route.
50 * @private {!MainPageVisibility} 42 * @private {!MainPageVisibility}
51 */ 43 */
52 showPages_: { 44 showPages_: {
53 type: Object, 45 type: Object,
54 value: function() { 46 value: function() {
55 return {about: false, basic: false, advanced: false}; 47 return {about: false, settings: false};
56 }, 48 },
57 }, 49 },
58 50
59 /** 51 /**
60 * Whether a search operation is in progress or previous search results are 52 * Whether a search operation is in progress or previous search results are
61 * being displayed. 53 * being displayed.
62 * @private {boolean} 54 * @private {boolean}
63 */ 55 */
64 inSearchMode_: { 56 inSearchMode_: {
65 type: Boolean, 57 type: Boolean,
(...skipping 20 matching lines...) Expand all
86 type: Object, 78 type: Object,
87 value: function() { return {}; }, 79 value: function() { return {}; },
88 }, 80 },
89 81
90 showAndroidApps: Boolean, 82 showAndroidApps: Boolean,
91 }, 83 },
92 84
93 /** @override */ 85 /** @override */
94 attached: function() { 86 attached: function() {
95 this.listen(this, 'freeze-scroll', 'onFreezeScroll_'); 87 this.listen(this, 'freeze-scroll', 'onFreezeScroll_');
96 var currentRoute = settings.getCurrentRoute();
97 this.hasExpandedSection_ = currentRoute && currentRoute.isSubpage();
98 }, 88 },
99 89
100 /** @override */ 90 /** @override */
101 detached: function() { 91 detached: function() {
102 this.unlisten(this, 'freeze-scroll', 'onFreezeScroll_'); 92 this.unlisten(this, 'freeze-scroll', 'onFreezeScroll_');
103 }, 93 },
104 94
105 /** @private */ 95 /** @private */
106 overscrollChanged_: function() { 96 overscrollChanged_: function() {
107 if (!this.overscroll_ && this.boundScroll_) { 97 if (!this.overscroll_ && this.boundScroll_) {
(...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after
155 this.offsetParent.style.overflow = 'hidden'; 145 this.offsetParent.style.overflow = 'hidden';
156 var scrollbarWidth = this.offsetParent.clientWidth - scrollerWidth; 146 var scrollbarWidth = this.offsetParent.clientWidth - scrollerWidth;
157 this.offsetParent.style.width = 'calc(100% - ' + scrollbarWidth + 'px)'; 147 this.offsetParent.style.width = 'calc(100% - ' + scrollbarWidth + 'px)';
158 } else { 148 } else {
159 this.ignoreScroll_ = false; 149 this.ignoreScroll_ = false;
160 this.offsetParent.style.overflow = ''; 150 this.offsetParent.style.overflow = '';
161 this.offsetParent.style.width = ''; 151 this.offsetParent.style.width = '';
162 } 152 }
163 }, 153 },
164 154
165 /**
166 * @param {boolean} opened Whether the menu is expanded.
167 * @return {string} Which icon to use.
168 * @private
169 */
170 arrowState_: function(opened) {
171 return opened ? 'settings:arrow-drop-up' : 'cr:arrow-drop-down';
172 },
173
174 /**
175 * @return {boolean}
176 * @private
177 */
178 showAdvancedToggle_: function() {
179 return !this.inSearchMode_ && this.showPages_.basic &&
180 !this.hasExpandedSection_;
181 },
182
183 /**
184 * @return {boolean} Whether to show the basic page, taking into account both
185 * routing and search state.
186 * @private
187 */
188 showBasicPage_: function() {
189 return this.showPages_.basic || (
190 this.inSearchMode_ && !this.hasExpandedSection_);
191 },
192
193 /**
194 * @return {boolean} Whether to show the advanced page, taking into account
195 * both routing and search state.
196 * @private
197 */
198 showAdvancedPage_: function() {
199 return this.showPages_.advanced || (
200 this.inSearchMode_ && !this.hasExpandedSection_);
201 },
202
203 /** @param {!settings.Route} newRoute */ 155 /** @param {!settings.Route} newRoute */
204 currentRouteChanged: function(newRoute) { 156 currentRouteChanged: function(newRoute) {
205 // When the route changes from a sub-page to the main page, immediately
206 // update hasExpandedSection_ to unhide the other sections.
207 if (!newRoute.isSubpage())
208 this.hasExpandedSection_ = false;
209
210 if (settings.Route.ADVANCED.contains(newRoute))
211 this.advancedToggleExpanded = true;
212
213 this.updatePagesShown_(); 157 this.updatePagesShown_();
214 }, 158 },
215 159
216 /** @private */ 160 /** @private */
217 onSubpageExpand_: function() { 161 onSubpageExpand_: function() {
218 // The subpage finished expanding fully. Hide pages other than the current
219 // section's parent page.
220 this.hasExpandedSection_ = true;
221 this.updatePagesShown_(); 162 this.updatePagesShown_();
222 }, 163 },
223 164
224 /** 165 /**
225 * Updates the hidden state of the about, basic and advanced pages, based on 166 * Updates the hidden state of the about and settings pages based on the
226 * the current route and the Advanced toggle state. 167 * current route.
227 * @private 168 * @private
228 */ 169 */
229 updatePagesShown_: function() { 170 updatePagesShown_: function() {
230 var currentRoute = settings.getCurrentRoute(); 171 var inAbout = settings.Route.ABOUT.contains(settings.getCurrentRoute());
231 if (settings.Route.ABOUT.contains(currentRoute)) { 172 this.showPages_ = {about: inAbout, settings: !inAbout};
232 this.showPages_ = {about: true, basic: false, advanced: false};
233 } else {
234 this.showPages_ = {
235 about: false,
236 basic: settings.Route.BASIC.contains(currentRoute) ||
237 !this.hasExpandedSection_,
238 advanced: this.hasExpandedSection_ ?
239 settings.Route.ADVANCED.contains(currentRoute) :
240 this.advancedToggleExpanded,
241 };
242 }
243 173
244 // Calculate and set the overflow padding. 174 // Calculate and set the overflow padding.
245 this.updateOverscrollForPage_(); 175 this.updateOverscrollForPage_();
246 176
247 // Wait for any other changes, then calculate the overflow padding again. 177 // Wait for any other changes, then calculate the overflow padding again.
248 setTimeout(function() { 178 setTimeout(function() {
249 // Ensure any dom-if reflects the current properties. 179 // Ensure any dom-if reflects the current properties.
250 Polymer.dom.flush(); 180 Polymer.dom.flush();
251 this.updateOverscrollForPage_(); 181 this.updateOverscrollForPage_();
252 }.bind(this)); 182 }.bind(this));
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
285 if (!section || !section.offsetParent) 215 if (!section || !section.offsetParent)
286 return 0; 216 return 0;
287 217
288 // Find the distance from the section's top to the overscroll. 218 // Find the distance from the section's top to the overscroll.
289 var sectionTop = section.offsetParent.offsetTop + section.offsetTop; 219 var sectionTop = section.offsetParent.offsetTop + section.offsetTop;
290 var distance = this.$.overscroll.offsetTop - sectionTop; 220 var distance = this.$.overscroll.offsetTop - sectionTop;
291 221
292 return Math.max(0, this.offsetParent.clientHeight - distance); 222 return Math.max(0, this.offsetParent.clientHeight - distance);
293 }, 223 },
294 224
295 /** @private */
296 toggleAdvancedPage_: function() {
297 this.advancedToggleExpanded = !this.advancedToggleExpanded;
298 },
299
300 /** 225 /**
301 * Returns the root page (if it exists) for a route. 226 * Returns the root page (if it exists) for a route.
302 * @param {!settings.Route} route 227 * @param {!settings.Route} route
303 * @return {(?SettingsAboutPageElement|?SettingsAdvancedPageElement| 228 * @return {(?SettingsAboutPageElement|?SettingsBasicPageElement)}
304 * ?SettingsBasicPageElement)}
305 */ 229 */
306 getPage_: function(route) { 230 getPage_: function(route) {
307 if (settings.Route.ABOUT.contains(route)) { 231 if (settings.Route.ABOUT.contains(route)) {
308 return /** @type {?SettingsAboutPageElement} */( 232 return /** @type {?SettingsAboutPageElement} */(
309 this.$$('settings-about-page')); 233 this.$$('settings-about-page'));
310 } 234 }
311 if (settings.Route.ADVANCED.contains(route)) { 235 if (settings.Route.BASIC.contains(route) ||
312 return /** @type {?SettingsAdvancedPageElement} */( 236 settings.Route.ADVANCED.contains(route)) {
313 this.$$('settings-advanced-page'));
314 }
315 if (settings.Route.BASIC.contains(route)) {
316 return /** @type {?SettingsBasicPageElement} */( 237 return /** @type {?SettingsBasicPageElement} */(
317 this.$$('settings-basic-page')); 238 this.$$('settings-basic-page'));
318 } 239 }
319 assertNotReached(); 240 assertNotReached();
320 }, 241 },
321 242
322 /** 243 /**
323 * @param {string} query 244 * @param {string} query
324 * @return {!Promise} A promise indicating that searching finished. 245 * @return {!Promise} A promise indicating that searching finished.
325 */ 246 */
326 searchContents: function(query) { 247 searchContents: function(query) {
327 // Trigger rendering of the basic and advanced pages and search once ready. 248 // Trigger rendering of the basic and advanced pages and search once ready.
328 this.inSearchMode_ = true; 249 this.inSearchMode_ = true;
329 this.toolbarSpinnerActive = true; 250 this.toolbarSpinnerActive = true;
330 251
331 return new Promise(function(resolve, reject) { 252 return new Promise(function(resolve, reject) {
332 setTimeout(function() { 253 setTimeout(function() {
333 var whenSearchDone = settings.getSearchManager().search( 254 var whenSearchDone =
334 query, assert(this.getPage_(settings.Route.BASIC))); 255 assert(this.getPage_(settings.Route.BASIC)).searchContents(query);
335
336 if (this.pageVisibility.advancedSettings !== false) {
337 assert(whenSearchDone === settings.getSearchManager().search(
338 query, assert(this.getPage_(settings.Route.ADVANCED))));
339 }
340
341 whenSearchDone.then(function(request) { 256 whenSearchDone.then(function(request) {
342 resolve(); 257 resolve();
343 if (!request.finished) { 258 if (!request.finished) {
344 // Nothing to do here. A previous search request was canceled 259 // Nothing to do here. A previous search request was canceled
345 // because a new search request was issued before the first one 260 // because a new search request was issued before the first one
346 // completed. 261 // completed.
347 return; 262 return;
348 } 263 }
349 264
350 this.toolbarSpinnerActive = false; 265 this.toolbarSpinnerActive = false;
351 this.inSearchMode_ = !request.isSame(''); 266 this.inSearchMode_ = !request.isSame('');
352 this.showNoResultsFound_ = 267 this.showNoResultsFound_ =
353 this.inSearchMode_ && !request.didFindMatches(); 268 this.inSearchMode_ && !request.didFindMatches();
354 }.bind(this)); 269 }.bind(this));
355 }.bind(this), 0); 270 }.bind(this), 0);
356 }.bind(this)); 271 }.bind(this));
357 }, 272 },
358
359 /**
360 * @param {(boolean|undefined)} visibility
361 * @return {boolean} True unless visibility is false.
362 * @private
363 */
364 showAdvancedSettings_: function(visibility) {
365 return visibility !== false;
366 },
367 }); 273 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698