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

Side by Side Diff: Source/devtools/front_end/OverridesView.js

Issue 27119002: Add text autosizing override in the inspector. Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 7 years, 2 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 | Annotate | Revision Log
« no previous file with comments | « Source/devtools/front_end/OverridesSupport.js ('k') | Source/devtools/front_end/Settings.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* 1 /*
2 * Copyright (C) 2012 Google Inc. All rights reserved. 2 * Copyright (C) 2012 Google Inc. All rights reserved.
3 * 3 *
4 * Redistribution and use in source and binary forms, with or without 4 * Redistribution and use in source and binary forms, with or without
5 * modification, are permitted provided that the following conditions are 5 * modification, are permitted provided that the following conditions are
6 * met: 6 * met:
7 * 7 *
8 * * Redistributions of source code must retain the above copyright 8 * * Redistributions of source code must retain the above copyright
9 * notice, this list of conditions and the following disclaimer. 9 * notice, this list of conditions and the following disclaimer.
10 * * Redistributions in binary form must reproduce the above 10 * * Redistributions in binary form must reproduce the above
(...skipping 118 matching lines...) Expand 10 before | Expand all | Expand 10 after
129 return checkbox; 129 return checkbox;
130 }, 130 },
131 131
132 /** 132 /**
133 * @return {Element} 133 * @return {Element}
134 */ 134 */
135 _createUserAgentSelectRowElement: function() 135 _createUserAgentSelectRowElement: function()
136 { 136 {
137 var userAgent = WebInspector.settings.userAgent.get(); 137 var userAgent = WebInspector.settings.userAgent.get();
138 138
139 // When present, the third element lists device metrics separated by 'x' : 139 // userAgents format: [name, user agent string, text autosizing override , (optional) device metrics]
140 // When present, the fourth element lists device metrics.
141 // The device metrics can be specified as 3 values separated by 'x':
140 // - screen width, 142 // - screen width,
141 // - screen height, 143 // - screen height,
142 // - device scale factor. 144 // - device scale factor.
143 const userAgents = [ 145 const userAgents = [
144 ["Internet Explorer 10", "Mozilla/5.0 (compatible; MSIE 10.0; Window s NT 6.2; Trident/6.0)"], 146 ["Internet Explorer 10", "Mozilla/5.0 (compatible; MSIE 10.0; Window s NT 6.2; Trident/6.0)", "Disabled"],
145 ["Internet Explorer 9", "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)"], 147 ["Internet Explorer 9", "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)", "Disabled"],
146 ["Internet Explorer 8", "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0)"], 148 ["Internet Explorer 8", "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0)", "Disabled"],
147 ["Internet Explorer 7", "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)"], 149 ["Internet Explorer 7", "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)", "Disabled"],
148 150
149 ["Firefox 7 \u2014 Windows", "Mozilla/5.0 (Windows NT 6.1; Intel Mac OS X 10.6; rv:7.0.1) Gecko/20100101 Firefox/7.0.1"], 151 ["Firefox 7 \u2014 Windows", "Mozilla/5.0 (Windows NT 6.1; Intel Mac OS X 10.6; rv:7.0.1) Gecko/20100101 Firefox/7.0.1", "Disabled"],
150 ["Firefox 7 \u2014 Mac", "Mozilla/5.0 (Macintosh; Intel Mac OS X 10. 6; rv:7.0.1) Gecko/20100101 Firefox/7.0.1"], 152 ["Firefox 7 \u2014 Mac", "Mozilla/5.0 (Macintosh; Intel Mac OS X 10. 6; rv:7.0.1) Gecko/20100101 Firefox/7.0.1", "Disabled"],
151 ["Firefox 4 \u2014 Windows", "Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1"], 153 ["Firefox 4 \u2014 Windows", "Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1", "Disabled"],
152 ["Firefox 4 \u2014 Mac", "Mozilla/5.0 (Macintosh; Intel Mac OS X 10. 6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1"], 154 ["Firefox 4 \u2014 Mac", "Mozilla/5.0 (Macintosh; Intel Mac OS X 10. 6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1", "Disabled"],
153 ["Firefox 14 \u2014 Android Mobile", "Mozilla/5.0 (Android; Mobile; rv:14.0) Gecko/14.0 Firefox/14.0"], 155 ["Firefox 14 \u2014 Android Mobile", "Mozilla/5.0 (Android; Mobile; rv:14.0) Gecko/14.0 Firefox/14.0", "Disabled"],
154 ["Firefox 14 \u2014 Android Tablet", "Mozilla/5.0 (Android; Tablet; rv:14.0) Gecko/14.0 Firefox/14.0"], 156 ["Firefox 14 \u2014 Android Tablet", "Mozilla/5.0 (Android; Tablet; rv:14.0) Gecko/14.0 Firefox/14.0", "Disabled"],
155 157
156 ["Chrome \u2014 Android Mobile", "Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76B) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1 025.133 Mobile Safari/535.19", "720x1280x2"], 158 ["Chrome \u2014 Android Mobile", "Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76B) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1 025.133 Mobile Safari/535.19", "Enabled", "720x1280x2"],
157 ["Chrome \u2014 Android Tablet", "Mozilla/5.0 (Linux; Android 4.1.2; Nexus 7 Build/JZ054K) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.1 66 Safari/535.19", "1920x1200x2"], 159 ["Chrome \u2014 Android Tablet", "Mozilla/5.0 (Linux; Android 4.1.2; Nexus 7 Build/JZ054K) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.1 66 Safari/535.19", "Enabled", "1920x1200x2"],
158 160
159 ["iPhone \u2014 iOS 7", "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_2 li ke Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A4449 d Safari/9537.53", "640x1136x2"], 161 ["iPhone \u2014 iOS 7", "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_2 li ke Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A4449 d Safari/9537.53", "Enabled", "640x1136x2"],
160 ["iPhone \u2014 iOS 6", "Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Sa fari/8536.25", "640x1136x2"], 162 ["iPhone \u2014 iOS 6", "Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Sa fari/8536.25", "Enabled", "640x1136x2"],
161 ["iPad \u2014 iOS 7", "Mozilla/5.0 (iPad; CPU OS 7_0_2 like Mac OS X ) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A501 Safari/9537 .53", "2048x1536x2"], 163 ["iPad \u2014 iOS 7", "Mozilla/5.0 (iPad; CPU OS 7_0_2 like Mac OS X ) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A501 Safari/9537 .53", "Enabled", "2048x1536x2"],
162 ["iPad \u2014 iOS 6", "Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.2 5", "1024x768x1"], 164 ["iPad \u2014 iOS 6", "Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.2 5", "Enabled", "1024x768x1"],
163 165
164 ["Android 2.3 \u2014 Nexus S", "Mozilla/5.0 (Linux; U; Android 2.3.6 ; en-us; Nexus S Build/GRK39F) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1", "480x800x1.5"], 166 ["Android 2.3 \u2014 Nexus S", "Mozilla/5.0 (Linux; U; Android 2.3.6 ; en-us; Nexus S Build/GRK39F) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1", "Enabled", "480x800x1.5"],
165 ["Android 4.0.2 \u2014 Galaxy Nexus", "Mozilla/5.0 (Linux; U; Androi d 4.0.2; en-us; Galaxy Nexus Build/ICL53F) AppleWebKit/534.30 (KHTML, like Gecko ) Version/4.0 Mobile Safari/534.30", "720x1280x2"], 167 ["Android 4.0.2 \u2014 Galaxy Nexus", "Mozilla/5.0 (Linux; U; Androi d 4.0.2; en-us; Galaxy Nexus Build/ICL53F) AppleWebKit/534.30 (KHTML, like Gecko ) Version/4.0 Mobile Safari/534.30", "Enabled", "720x1280x2"],
166 168
167 ["BlackBerry \u2014 PlayBook 2.1", "Mozilla/5.0 (PlayBook; U; RIM Ta blet OS 2.1.0; en-US) AppleWebKit/536.2+ (KHTML, like Gecko) Version/7.2.1.0 Saf ari/536.2+", "1024x600x1"], 169 ["BlackBerry \u2014 PlayBook 2.1", "Mozilla/5.0 (PlayBook; U; RIM Ta blet OS 2.1.0; en-US) AppleWebKit/536.2+ (KHTML, like Gecko) Version/7.2.1.0 Saf ari/536.2+", "Enabled", "1024x600x1"],
168 ["BlackBerry \u2014 9900", "Mozilla/5.0 (BlackBerry; U; BlackBerry 9 900; en-US) AppleWebKit/534.11+ (KHTML, like Gecko) Version/7.0.0.187 Mobile Saf ari/534.11+", "640x480x1"], 170 ["BlackBerry \u2014 9900", "Mozilla/5.0 (BlackBerry; U; BlackBerry 9 900; en-US) AppleWebKit/534.11+ (KHTML, like Gecko) Version/7.0.0.187 Mobile Saf ari/534.11+", "Enabled", "640x480x1"],
169 ["BlackBerry \u2014 BB10", "Mozilla/5.0 (BB10; Touch) AppleWebKit/53 7.1+ (KHTML, like Gecko) Version/10.0.0.1337 Mobile Safari/537.1+", "768x1280x1" ], 171 ["BlackBerry \u2014 BB10", "Mozilla/5.0 (BB10; Touch) AppleWebKit/53 7.1+ (KHTML, like Gecko) Version/10.0.0.1337 Mobile Safari/537.1+", "Enabled", " 768x1280x1"],
170 172
171 ["MeeGo \u2014 Nokia N9", "Mozilla/5.0 (MeeGo; NokiaN9) AppleWebKit/ 534.13 (KHTML, like Gecko) NokiaBrowser/8.5.0 Mobile Safari/534.13", "480x854x1" ], 173 ["MeeGo \u2014 Nokia N9", "Mozilla/5.0 (MeeGo; NokiaN9) AppleWebKit/ 534.13 (KHTML, like Gecko) NokiaBrowser/8.5.0 Mobile Safari/534.13", "Enabled", "480x854x1"],
172 174
173 [WebInspector.UIString("Other..."), "Other"] 175 [WebInspector.UIString("Other..."), "Other", "Default"]
174 ]; 176 ];
175 177
176 var fieldsetElement = WebInspector.SettingsTab.createSettingFieldset(Web Inspector.settings.overrideUserAgent); 178 var fieldsetElement = WebInspector.SettingsTab.createSettingFieldset(Web Inspector.settings.overrideUserAgent);
177 var p = fieldsetElement.createChild("p"); 179 var p = fieldsetElement.createChild("p");
178 this._selectElement = p.createChild("select"); 180 this._selectElement = p.createChild("select");
179 this._otherUserAgentElement = p.createChild("input"); 181 this._otherUserAgentElement = p.createChild("input");
180 this._otherUserAgentElement.type = "text"; 182 this._otherUserAgentElement.type = "text";
181 this._otherUserAgentElement.value = userAgent; 183 this._otherUserAgentElement.value = userAgent;
182 this._otherUserAgentElement.title = userAgent; 184 this._otherUserAgentElement.title = userAgent;
183 185
184 var selectionRestored = false; 186 var selectionRestored = false;
185 for (var i = 0; i < userAgents.length; ++i) { 187 for (var i = 0; i < userAgents.length; ++i) {
186 var agent = userAgents[i]; 188 var agent = userAgents[i];
187 var option = new Option(agent[0], agent[1]); 189 var option = new Option(agent[0], agent[1]);
188 option._metrics = agent[2] ? agent[2] : ""; 190 var textAutosizingOverrideIndex = WebInspector.OverridesSupport.Devi ceMetrics.TextAutosizingTypes.indexOf(agent[2]);
191 option._metrics = agent[3] ? agent[3] + 'x' + textAutosizingOverride Index : '0x0x1x' + textAutosizingOverrideIndex;
189 this._selectElement.add(option); 192 this._selectElement.add(option);
190 if (userAgent === agent[1]) { 193 if (userAgent === agent[1]) {
191 this._selectElement.selectedIndex = i; 194 this._selectElement.selectedIndex = i;
192 selectionRestored = true; 195 selectionRestored = true;
193 } 196 }
194 } 197 }
195 198
196 if (!selectionRestored) { 199 if (!selectionRestored) {
197 if (!userAgent) 200 if (!userAgent)
198 this._selectElement.selectedIndex = 0; 201 this._selectElement.selectedIndex = 0;
(...skipping 106 matching lines...) Expand 10 before | Expand all | Expand 10 after
305 * @param {boolean} enabled 308 * @param {boolean} enabled
306 */ 309 */
307 _onMetricsCheckboxClicked: function(enabled) 310 _onMetricsCheckboxClicked: function(enabled)
308 { 311 {
309 if (enabled && !this._widthOverrideElement.value) 312 if (enabled && !this._widthOverrideElement.value)
310 this._widthOverrideElement.focus(); 313 this._widthOverrideElement.focus();
311 }, 314 },
312 315
313 _applyDeviceMetricsUserInput: function() 316 _applyDeviceMetricsUserInput: function()
314 { 317 {
315 this._setDeviceMetricsOverride(WebInspector.OverridesSupport.DeviceMetri cs.parseUserInput(this._widthOverrideElement.value.trim(), this._heightOverrideE lement.value.trim(), this._deviceScaleFactorOverrideElement.value.trim()), true) ; 318 this._setDeviceMetricsOverride(WebInspector.OverridesSupport.DeviceMetri cs.parseUserInput(this._widthOverrideElement.value.trim(), this._heightOverrideE lement.value.trim(), this._deviceScaleFactorOverrideElement.value.trim(), this._ textAutosizingOverrideElement.selectedIndex), true);
316 }, 319 },
317 320
318 /** 321 /**
319 * @param {?WebInspector.OverridesSupport.DeviceMetrics} metrics 322 * @param {?WebInspector.OverridesSupport.DeviceMetrics} metrics
320 * @param {boolean} userInputModified 323 * @param {boolean} userInputModified
321 */ 324 */
322 _setDeviceMetricsOverride: function(metrics, userInputModified) 325 _setDeviceMetricsOverride: function(metrics, userInputModified)
323 { 326 {
324 function setValid(condition, element) 327 function setValid(condition, element)
325 { 328 {
326 if (condition) 329 if (condition)
327 element.removeStyleClass("error-input"); 330 element.removeStyleClass("error-input");
328 else 331 else
329 element.addStyleClass("error-input"); 332 element.addStyleClass("error-input");
330 } 333 }
331 334
332 setValid(metrics && metrics.isWidthValid(), this._widthOverrideElement); 335 setValid(metrics && metrics.isWidthValid(), this._widthOverrideElement);
333 setValid(metrics && metrics.isHeightValid(), this._heightOverrideElement ); 336 setValid(metrics && metrics.isHeightValid(), this._heightOverrideElement );
334 setValid(metrics && metrics.isDeviceScaleFactorValid(), this._deviceScal eFactorOverrideElement); 337 setValid(metrics && metrics.isDeviceScaleFactorValid(), this._deviceScal eFactorOverrideElement);
335 338
336 if (!metrics) 339 if (!metrics)
337 return; 340 return;
338 341
339 if (!userInputModified) { 342 if (!userInputModified) {
340 this._widthOverrideElement.value = metrics.widthToInput(); 343 this._widthOverrideElement.value = metrics.widthToInput();
341 this._heightOverrideElement.value = metrics.heightToInput(); 344 this._heightOverrideElement.value = metrics.heightToInput();
342 this._deviceScaleFactorOverrideElement.value = metrics.deviceScaleFa ctorToInput(); 345 this._deviceScaleFactorOverrideElement.value = metrics.deviceScaleFa ctorToInput();
346 this._textAutosizingOverrideElement.selectedIndex = metrics.textAuto sizingOverrideToIndex();
343 } 347 }
344 348
345 if (metrics.isValid()) { 349 if (metrics.isValid()) {
346 var value = metrics.toSetting(); 350 var value = metrics.toSetting();
347 if (value !== WebInspector.settings.deviceMetrics.get()) 351 if (value !== WebInspector.settings.deviceMetrics.get())
348 WebInspector.settings.deviceMetrics.set(value); 352 WebInspector.settings.deviceMetrics.set(value);
349 } 353 }
350 }, 354 },
351 355
352 /** 356 /**
(...skipping 30 matching lines...) Expand all
383 this._swapDimensionsElement.addEventListener("click", swapDimensionsClic ked.bind(this), false); 387 this._swapDimensionsElement.addEventListener("click", swapDimensionsClic ked.bind(this), false);
384 388
385 rowElement = tableElement.createChild("tr"); 389 rowElement = tableElement.createChild("tr");
386 cellElement = rowElement.createChild("td"); 390 cellElement = rowElement.createChild("td");
387 cellElement.appendChild(document.createTextNode(WebInspector.UIString("D evice scale factor:"))); 391 cellElement.appendChild(document.createTextNode(WebInspector.UIString("D evice scale factor:")));
388 cellElement = rowElement.createChild("td"); 392 cellElement = rowElement.createChild("td");
389 this._deviceScaleFactorOverrideElement = this._createInput(cellElement, "metrics-override-device-scale", String(metrics.deviceScaleFactor || 1), this._a pplyDeviceMetricsUserInput.bind(this), true); 393 this._deviceScaleFactorOverrideElement = this._createInput(cellElement, "metrics-override-device-scale", String(metrics.deviceScaleFactor || 1), this._a pplyDeviceMetricsUserInput.bind(this), true);
390 394
391 rowElement = tableElement.createChild("tr"); 395 rowElement = tableElement.createChild("tr");
392 cellElement = rowElement.createChild("td"); 396 cellElement = rowElement.createChild("td");
397 cellElement.appendChild(document.createTextNode(WebInspector.UIString("T ext autosizing:")));
398 cellElement = rowElement.createChild("td");
399 this._textAutosizingOverrideElement = cellElement.createChild("select");
400 var defaultTextAutosizingType = WebInspector.settings.textAutosizingOver ride.get();
401 var textAutosizingOverrides = WebInspector.OverridesSupport.DeviceMetric s.TextAutosizingTypes;
402 for (var i = 0; i < textAutosizingOverrides.length; ++i) {
403 var overrideType = textAutosizingOverrides[i];
404 var option = document.createElement("option");
405 option.text = overrideType;
406 option.value = i;
407 this._textAutosizingOverrideElement.add(option);
408 if (overrideType === defaultTextAutosizingType)
409 this._textAutosizingOverrideElement.selectedIndex = this._textAu tosizingOverrideElement.options.length - 1;
410 }
411 this._textAutosizingOverrideElement.addEventListener("change", this._app lyDeviceMetricsUserInput.bind(this), true);
412
413 rowElement = tableElement.createChild("tr");
414 cellElement = rowElement.createChild("td");
393 cellElement.colSpan = 2; 415 cellElement.colSpan = 2;
394 var checkbox = WebInspector.SettingsTab.createSettingCheckbox(WebInspect or.UIString("Fit in window"), WebInspector.settings.deviceFitWindow, true); 416 var checkbox = WebInspector.SettingsTab.createSettingCheckbox(WebInspect or.UIString("Fit in window"), WebInspector.settings.deviceFitWindow, true);
395 cellElement.appendChild(checkbox); 417 cellElement.appendChild(checkbox);
396 418
397 return fieldsetElement; 419 return fieldsetElement;
398 }, 420 },
399 421
400 /** 422 /**
401 * @return {Element} 423 * @return {Element}
402 */ 424 */
(...skipping 177 matching lines...) Expand 10 before | Expand all | Expand 10 after
580 }, 602 },
581 603
582 _emulateMediaChanged: function(select) 604 _emulateMediaChanged: function(select)
583 { 605 {
584 var media = select.options[select.selectedIndex].value; 606 var media = select.options[select.selectedIndex].value;
585 WebInspector.settings.emulatedCSSMedia.set(media); 607 WebInspector.settings.emulatedCSSMedia.set(media);
586 }, 608 },
587 609
588 __proto__: WebInspector.View.prototype 610 __proto__: WebInspector.View.prototype
589 } 611 }
OLDNEW
« no previous file with comments | « Source/devtools/front_end/OverridesSupport.js ('k') | Source/devtools/front_end/Settings.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698