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

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

Issue 2160713002: MD Settings: refactor some main page properties, fix Advanced toggle (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: object Created 4 years, 5 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 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 * @fileoverview 6 * @fileoverview
7 * 'settings-main' displays the selected settings page. 7 * 'settings-main' displays the selected settings page.
8 */ 8 */
9 Polymer({ 9 Polymer({
10 is: 'settings-main', 10 is: 'settings-main',
11 11
12 properties: { 12 properties: {
13 /** @private */
14 isAdvancedMenuOpen_: {
15 type: Boolean,
16 value: false,
17 },
18
19 /** 13 /**
20 * Preferences state. 14 * Preferences state.
21 */ 15 */
22 prefs: { 16 prefs: {
23 type: Object, 17 type: Object,
24 notify: true, 18 notify: true,
25 }, 19 },
26 20
27 /** 21 /**
28 * The current active route. 22 * The current active route.
29 * @type {!SettingsRoute} 23 * @type {!SettingsRoute}
30 */ 24 */
31 currentRoute: { 25 currentRoute: {
32 type: Object, 26 type: Object,
33 notify: true, 27 notify: true,
34 observer: 'currentRouteChanged_', 28 observer: 'currentRouteChanged_',
35 }, 29 },
36 30
37 /** @private */ 31 /** @private */
38 showAdvancedPage_: { 32 advancedToggleExpanded_: {
39 type: Boolean, 33 type: Boolean,
40 value: false, 34 value: false,
41 }, 35 },
42 36
43 /** @private */ 37 /** @private */
44 showAdvancedToggle_: { 38 inSubpage_: Boolean,
45 type: Boolean,
46 value: true,
47 },
48 39
49 /** @private */ 40 /**
50 showBasicPage_: { 41 * Controls which main pages are displayed via dom-ifs.
51 type: Boolean, 42 * @type {!{ABOUT: boolean, ADVANCED: boolean, BASIC: boolean}}
52 value: true, 43 * @private
53 }, 44 */
54 45 showPages_: {
55 /** @private */ 46 type: Object,
56 showAboutPage_: { 47 value: function() {
57 type: Boolean, 48 return {ABOUT: false, ADVANCED: false, BASIC: false};
58 value: false, 49 },
59 }, 50 },
60 51
61 toolbarSpinnerActive: { 52 toolbarSpinnerActive: {
62 type: Boolean, 53 type: Boolean,
63 value: false, 54 value: false,
64 notify: true, 55 notify: true,
65 }, 56 },
66 }, 57 },
67 58
68 /** @override */ 59 /** @override */
69 created: function() { 60 created: function() {
70 /** @private {!PromiseResolver} */ 61 /** @private {!PromiseResolver} */
71 this.resolver_ = new PromiseResolver; 62 this.resolver_ = new PromiseResolver;
72 settings.main.rendered = this.resolver_.promise; 63 settings.main.rendered = this.resolver_.promise;
73 }, 64 },
74 65
75 /** @override */ 66 /** @override */
76 ready: function() { 67 ready: function() {
77 settings.getSearchManager().setCallback(function(isRunning) { 68 settings.getSearchManager().setCallback(function(isRunning) {
78 this.toolbarSpinnerActive = isRunning; 69 this.toolbarSpinnerActive = isRunning;
79 }.bind(this)); 70 }.bind(this));
80 }, 71 },
81 72
82 /** @override */ 73 /** @override */
83 attached: function() { 74 attached: function() {
84 document.addEventListener('toggle-advanced-page', function(e) { 75 document.addEventListener('toggle-advanced-page', function(e) {
85 this.showAdvancedPage_ = e.detail; 76 this.advancedToggleExpanded_ = e.detail;
86 this.isAdvancedMenuOpen_ = e.detail;
87 this.currentRoute = { 77 this.currentRoute = {
88 page: this.isAdvancedMenuOpen_ ? 'advanced' : 'basic', 78 page: this.advancedToggleExpanded_ ? 'advanced' : 'basic',
89 section: '', 79 section: '',
90 subpage: [], 80 subpage: [],
91 }; 81 };
92 if (this.showAdvancedPage_) { 82 if (this.advancedToggleExpanded_) {
93 doWhenReady( 83 doWhenReady(
94 function() { 84 function() {
95 var advancedPage = this.$$('settings-advanced-page'); 85 var advancedPage = this.$$('settings-advanced-page');
96 return !!advancedPage && advancedPage.scrollHeight > 0; 86 return !!advancedPage && advancedPage.scrollHeight > 0;
97 }.bind(this), 87 }.bind(this),
98 function() { 88 function() {
99 this.$$('#toggleContainer').scrollIntoView(); 89 this.$$('#toggleContainer').scrollIntoView();
100 }.bind(this)); 90 }.bind(this));
101 } 91 }
102 }.bind(this)); 92 }.bind(this));
103 93
104 doWhenReady( 94 doWhenReady(
105 function() { 95 function() {
106 var basicPage = this.$$('settings-basic-page'); 96 var basicPage = this.$$('settings-basic-page');
107 return !!basicPage && basicPage.scrollHeight > 0; 97 return !!basicPage && basicPage.scrollHeight > 0;
108 }.bind(this), 98 }.bind(this),
109 function() { 99 function() {
110 this.resolver_.resolve(); 100 this.resolver_.resolve();
111 }.bind(this)); 101 }.bind(this));
112 }, 102 },
113 103
114 /** 104 /**
115 * @param {boolean} opened Whether the menu is expanded. 105 * @param {boolean} opened Whether the menu is expanded.
116 * @return {string} Which icon to use. 106 * @return {string} Which icon to use.
117 * @private 107 * @private
118 * */ 108 */
119 arrowState_: function(opened) { 109 arrowState_: function(opened) {
120 return opened ? 'settings:arrow-drop-up' : 'cr:arrow-drop-down'; 110 return opened ? 'settings:arrow-drop-up' : 'cr:arrow-drop-down';
121 }, 111 },
122 112
123 /** 113 /**
124 * @param {!SettingsRoute} newRoute 114 * @param {!SettingsRoute} newRoute
125 * @private 115 * @private
126 */ 116 */
127 currentRouteChanged_: function(newRoute) { 117 currentRouteChanged_: function(newRoute) {
128 var isSubpage = !!newRoute.subpage.length; 118 this.inSubpage_ = newRoute.subpage.length > 0;
119 this.style.height = this.inSubpage_ ? '100%' : '';
129 120
130 this.showAboutPage_ = newRoute.page == 'about'; 121 if (newRoute.page == 'about') {
122 this.showPages_ = {ABOUT: true, ADVANCED: false, BASIC: false};
123 } else {
124 this.showPages_ = {
125 ABOUT: false,
126 BASIC: newRoute.page == 'basic' || !this.inSubpage_,
127 ADVANCED: newRoute.page == 'advanced' ||
128 (!this.inSubpage_ && this.advancedToggleExpanded_),
129 };
131 130
132 this.showAdvancedToggle_ = !this.showAboutPage_ && !isSubpage; 131 if (this.showPages_.ADVANCED)
133 132 this.advancedToggleExpanded_ = true;
134 this.showBasicPage_ = this.showAdvancedToggle_ || newRoute.page == 'basic'; 133 }
135
136 this.showAdvancedPage_ =
137 (this.isAdvancedMenuOpen_ && this.showAdvancedToggle_) ||
138 newRoute.page == 'advanced';
139
140 this.style.height = isSubpage ? '100%' : '';
141 }, 134 },
142 135
143 /** @private */ 136 /** @private */
144 toggleAdvancedPage_: function() { 137 toggleAdvancedPage_: function() {
145 this.fire('toggle-advanced-page', !this.isAdvancedMenuOpen_); 138 this.fire('toggle-advanced-page', !this.advancedToggleExpanded_);
146 }, 139 },
147 140
148 /** 141 /**
149 * Navigates to the default search page (if necessary). 142 * Navigates to the default search page (if necessary).
150 * @private 143 * @private
151 */ 144 */
152 ensureInDefaultSearchPage_: function() { 145 ensureInDefaultSearchPage_: function() {
153 if (this.currentRoute.page != 'basic' || 146 if (this.currentRoute.page != 'basic' ||
154 this.currentRoute.section != '' || 147 this.currentRoute.section != '' ||
155 this.currentRoute.subpage.length != 0) { 148 this.currentRoute.subpage.length != 0) {
156 this.currentRoute = {page: 'basic', section: '', subpage: [], url: ''}; 149 this.currentRoute = {page: 'basic', section: '', subpage: [], url: ''};
157 } 150 }
158 }, 151 },
159 152
160 /** 153 /**
161 * @param {string} query 154 * @param {string} query
162 */ 155 */
163 searchContents: function(query) { 156 searchContents: function(query) {
164 this.ensureInDefaultSearchPage_(); 157 this.ensureInDefaultSearchPage_();
165 158
166 // Trigger rendering of the basic and advanced pages and search once ready. 159 // Trigger rendering of the basic and advanced pages and search once ready.
167 // Even if those are already rendered, yield to the message loop before 160 // Even if those are already rendered, yield to the message loop before
168 // initiating searching. 161 // initiating searching.
169 this.showBasicPage_ = true; 162 this.set('showPages_.BASIC', true);
170 setTimeout(function() { 163 setTimeout(function() {
171 settings.getSearchManager().search( 164 settings.getSearchManager().search(
172 query, assert(this.$$('settings-basic-page'))); 165 query, assert(this.$$('settings-basic-page')));
173 }.bind(this), 0); 166 }.bind(this), 0);
174 167
175 this.showAdvancedPage_ = true; 168 this.set('showPages_.ADVANCED', true);
176 setTimeout(function() { 169 setTimeout(function() {
177 settings.getSearchManager().search( 170 settings.getSearchManager().search(
178 query, assert(this.$$('settings-advanced-page'))); 171 query, assert(this.$$('settings-advanced-page')));
179 }.bind(this), 0); 172 }.bind(this), 0);
180 }, 173 },
181 }); 174 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698