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

Side by Side Diff: chrome/browser/resources/settings/appearance_page/appearance_fonts_page.js

Issue 1967913002: Material WebUI: cr-slider element for intelligent range mapping (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@KeyboardFinish
Patch Set: rebase fix Created 4 years, 6 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 (function() { 5 (function() {
6 'use strict'; 6 'use strict';
7 7
8 /** 8 /**
9 * This is the absolute difference maintained between standard and 9 * This is the absolute difference maintained between standard and
10 * fixed-width font sizes. http://crbug.com/91922. 10 * fixed-width font sizes. http://crbug.com/91922.
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after
44 /** @private */ 44 /** @private */
45 advancedExtensionSublabel_: String, 45 advancedExtensionSublabel_: String,
46 46
47 /** @private */ 47 /** @private */
48 advancedExtensionUrl_: String, 48 advancedExtensionUrl_: String,
49 49
50 /** @private {!settings.FontsBrowserProxy} */ 50 /** @private {!settings.FontsBrowserProxy} */
51 browserProxy_: Object, 51 browserProxy_: Object,
52 52
53 /** 53 /**
54 * The font size used by default.
55 * @private
56 */
57 defaultFontSize_: {
58 type: Number,
59 },
60
61 /**
62 * The value of the font size slider.
63 * @private
64 */
65 fontSizeIndex_: {
66 type: Number,
67 },
68
69 /**
70 * Common font sizes. 54 * Common font sizes.
71 * @private {!Array<number>} 55 * @private {!Array<number>}
72 */ 56 */
73 fontSizeRange_: { 57 fontSizeRange_: {
74 readOnly: true, 58 readOnly: true,
75 type: Array, 59 type: Array,
76 value: FONT_SIZE_RANGE_, 60 value: FONT_SIZE_RANGE_,
77 }, 61 },
78 62
79 /** 63 /**
80 * Upper bound of the font size slider.
81 * @private
82 */
83 fontSizeRangeLimit_: {
84 readOnly: true,
85 type: Number,
86 value: FONT_SIZE_RANGE_.length - 1,
87 },
88
89 /**
90 * The interactive value of the minimum font size slider.
91 * @private
92 */
93 immediateMinimumSizeIndex_: {
94 observer: 'immediateMinimumSizeIndexChanged_',
95 type: Number,
96 },
97
98 /**
99 * The interactive value of the font size slider.
100 * @private
101 */
102 immediateSizeIndex_: {
103 observer: 'immediateSizeIndexChanged_',
104 type: Number,
105 },
106
107 /**
108 * Reasonable, minimum font sizes. 64 * Reasonable, minimum font sizes.
109 * @private {!Array<number>} 65 * @private {!Array<number>}
110 */ 66 */
111 minimumFontSizeRange_: { 67 minimumFontSizeRange_: {
112 readOnly: true, 68 readOnly: true,
113 type: Array, 69 type: Array,
114 value: MINIMUM_FONT_SIZE_RANGE_, 70 value: MINIMUM_FONT_SIZE_RANGE_,
115 }, 71 },
116 72
117 /** 73 /**
118 * Upper bound of the minimum font size slider.
119 * @private
120 */
121 minimumFontSizeRangeLimit_: {
122 readOnly: true,
123 type: Number,
124 value: MINIMUM_FONT_SIZE_RANGE_.length - 1,
125 },
126
127 /**
128 * The font size used at minimum.
129 * @private
130 */
131 minimumFontSize_: {
132 type: Number,
133 },
134
135 /**
136 * The value of the minimum font size slider.
137 * @private
138 */
139 minimumSizeIndex_: {
140 type: Number,
141 },
142
143 /**
144 * Preferences state. 74 * Preferences state.
145 */ 75 */
146 prefs: { 76 prefs: {
147 type: Object, 77 type: Object,
148 notify: true, 78 notify: true,
149 }, 79 },
150 }, 80 },
151 81
152 observers: [ 82 observers: [
153 'fontSizeChanged_(prefs.webkit.webprefs.default_font_size.value)', 83 'fontSizeChanged_(prefs.webkit.webprefs.default_font_size.value)',
154 'minimumFontSizeChanged_(prefs.webkit.webprefs.minimum_font_size.value)',
155 ], 84 ],
156 85
157 /** @override */ 86 /** @override */
158 created: function() { 87 created: function() {
159 this.browserProxy_ = settings.FontsBrowserProxyImpl.getInstance(); 88 this.browserProxy_ = settings.FontsBrowserProxyImpl.getInstance();
160 }, 89 },
161 90
162 /** @override */ 91 /** @override */
163 ready: function() { 92 ready: function() {
164 this.addWebUIListener('advanced-font-settings-installed', 93 this.addWebUIListener('advanced-font-settings-installed',
165 this.setAdvancedExtensionInstalled_.bind(this)); 94 this.setAdvancedExtensionInstalled_.bind(this));
166 this.browserProxy_.observeAdvancedFontExtensionAvailable(); 95 this.browserProxy_.observeAdvancedFontExtensionAvailable();
167 96
168 this.browserProxy_.fetchFontsData().then( 97 this.browserProxy_.fetchFontsData().then(
169 this.setFontsData_.bind(this)); 98 this.setFontsData_.bind(this));
170 }, 99 },
171 100
172 /**
173 * @param {number} value The intermediate slider value.
174 * @private
175 */
176 immediateSizeIndexChanged_: function(value) {
177 this.set('prefs.webkit.webprefs.default_font_size.value',
178 this.fontSizeRange_[this.immediateSizeIndex_]);
179 },
180
181 /**
182 * @param {number} value The intermediate slider value.
183 * @private
184 */
185 immediateMinimumSizeIndexChanged_: function(value) {
186 this.set('prefs.webkit.webprefs.minimum_font_size.value',
187 this.minimumFontSizeRange_[this.immediateMinimumSizeIndex_]);
188 },
189
190 /** @private */ 101 /** @private */
191 openAdvancedExtension_: function() { 102 openAdvancedExtension_: function() {
192 if (this.advancedExtensionInstalled_) 103 if (this.advancedExtensionInstalled_)
193 this.browserProxy_.openAdvancedFontSettings(); 104 this.browserProxy_.openAdvancedFontSettings();
194 else 105 else
195 window.open(this.advancedExtensionUrl_); 106 window.open(this.advancedExtensionUrl_);
196 }, 107 },
197 108
198 /** 109 /**
199 * @param {boolean} isInstalled Whether the advanced font settings 110 * @param {boolean} isInstalled Whether the advanced font settings
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after
233 } 144 }
234 this.$.encoding.menuOptions = encodingMenuOptions; 145 this.$.encoding.menuOptions = encodingMenuOptions;
235 this.advancedExtensionUrl_ = response.extensionUrl; 146 this.advancedExtensionUrl_ = response.extensionUrl;
236 }, 147 },
237 148
238 /** 149 /**
239 * @param {number} value The changed font size slider value. 150 * @param {number} value The changed font size slider value.
240 * @private 151 * @private
241 */ 152 */
242 fontSizeChanged_: function(value) { 153 fontSizeChanged_: function(value) {
243 this.defaultFontSize_ = value; 154 // TODO(michaelpg): Whitelist this pref in prefs_utils.cc so it is
244 if (!this.$.sizeSlider.dragging) { 155 // included in the <settings-prefs> getAllPrefs call, otherwise this path
245 this.fontSizeIndex_ = this.fontSizeRange_.indexOf(value); 156 // is invalid and nothing happens. See crbug.com/612535.
246 this.set('prefs.webkit.webprefs.default_fixed_font_size.value', 157 this.set('prefs.webkit.webprefs.default_fixed_font_size.value',
247 value - SIZE_DIFFERENCE_FIXED_STANDARD_); 158 value - SIZE_DIFFERENCE_FIXED_STANDARD_);
248 }
249 }, 159 },
250 160
251 /** 161 /**
252 * @param {number} value The changed font size slider value.
253 * @private
254 */
255 minimumFontSizeChanged_: function(value) {
256 this.minimumFontSize_ = value;
257 if (!this.$.minimumSizeSlider.dragging)
258 this.minimumSizeIndex_ = this.minimumFontSizeRange_.indexOf(value);
259 },
260
261 /**
262 * Creates an html style value. 162 * Creates an html style value.
263 * @param {number} fontSize The font size to use. 163 * @param {number} fontSize The font size to use.
264 * @param {string} fontFamily The name of the font family use. 164 * @param {string} fontFamily The name of the font family use.
265 * @return {string} 165 * @return {string}
266 * @private 166 * @private
267 */ 167 */
268 computeStyle_: function(fontSize, fontFamily) { 168 computeStyle_: function(fontSize, fontFamily) {
269 return 'font-size: ' + fontSize + "px; font-family: '" + fontFamily + 169 return 'font-size: ' + fontSize + "px; font-family: '" + fontFamily +
270 "';"; 170 "';";
271 }, 171 },
272 }); 172 });
273 })(); 173 })();
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698