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

Side by Side Diff: Source/devtools/front_end/sdk/OverridesSupport.js

Issue 345723003: [DevTools] Separate text autosizing from device metrics override. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: compile fix Created 6 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 | Annotate | Revision Log
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 73 matching lines...) Expand 10 before | Expand all | Expand 10 after
84 /** 84 /**
85 * @param {string} description 85 * @param {string} description
86 * @param {string} userAgent 86 * @param {string} userAgent
87 * @constructor 87 * @constructor
88 */ 88 */
89 WebInspector.OverridesSupport.Device = function(description, userAgent) 89 WebInspector.OverridesSupport.Device = function(description, userAgent)
90 { 90 {
91 this.width = 800; 91 this.width = 800;
92 this.height = 600; 92 this.height = 600;
93 this.deviceScaleFactor = 1; 93 this.deviceScaleFactor = 1;
94 this.textAutosizing = true;
95 this.userAgent = userAgent; 94 this.userAgent = userAgent;
96 this.touch = true; 95 this.touch = true;
97 this.viewport = true; 96 this.viewport = true;
98 97
99 var splitMetrics = description.split("x"); 98 var splitMetrics = description.split("x");
100 if (splitMetrics.length >= 3) { 99 if (splitMetrics.length >= 3) {
101 this.width = parseInt(splitMetrics[0], 10); 100 this.width = parseInt(splitMetrics[0], 10);
102 this.height = parseInt(splitMetrics[1], 10); 101 this.height = parseInt(splitMetrics[1], 10);
103 this.deviceScaleFactor = parseFloat(splitMetrics[2]); 102 this.deviceScaleFactor = parseFloat(splitMetrics[2]);
104 } 103 }
(...skipping 395 matching lines...) Expand 10 before | Expand all | Expand 10 after
500 */ 499 */
501 emulateDevice: function(device) 500 emulateDevice: function(device)
502 { 501 {
503 this._deviceMetricsChangedListenerMuted = true; 502 this._deviceMetricsChangedListenerMuted = true;
504 this._userAgentChangedListenerMuted = true; 503 this._userAgentChangedListenerMuted = true;
505 this.settings.userAgent.set(device.userAgent); 504 this.settings.userAgent.set(device.userAgent);
506 this.settings.emulateResolution.set(true); 505 this.settings.emulateResolution.set(true);
507 this.settings.deviceWidth.set(device.width); 506 this.settings.deviceWidth.set(device.width);
508 this.settings.deviceHeight.set(device.height); 507 this.settings.deviceHeight.set(device.height);
509 this.settings.deviceScaleFactor.set(device.deviceScaleFactor); 508 this.settings.deviceScaleFactor.set(device.deviceScaleFactor);
510 this.settings.deviceTextAutosizing.set(device.textAutosizing);
511 this.settings.emulateTouch.set(device.touch); 509 this.settings.emulateTouch.set(device.touch);
512 this.settings.emulateViewport.set(device.viewport); 510 this.settings.emulateViewport.set(device.viewport);
513 delete this._deviceMetricsChangedListenerMuted; 511 delete this._deviceMetricsChangedListenerMuted;
514 delete this._userAgentChangedListenerMuted; 512 delete this._userAgentChangedListenerMuted;
515 513
516 if (this._initialized) { 514 if (this._initialized) {
517 this._deviceMetricsChanged(); 515 this._deviceMetricsChanged();
518 this._userAgentChanged(); 516 this._userAgentChanged();
519 } 517 }
520 }, 518 },
521 519
522 reset: function() 520 reset: function()
523 { 521 {
524 this._deviceMetricsChangedListenerMuted = true; 522 this._deviceMetricsChangedListenerMuted = true;
525 this._userAgentChangedListenerMuted = true; 523 this._userAgentChangedListenerMuted = true;
526 this.settings.userAgent.set(""); 524 this.settings.userAgent.set("");
527 this.settings.emulateResolution.set(false); 525 this.settings.emulateResolution.set(false);
528 this.settings.deviceScaleFactor.set(0); 526 this.settings.deviceScaleFactor.set(0);
529 this.settings.deviceTextAutosizing.set(false);
530 this.settings.emulateTouch.set(false); 527 this.settings.emulateTouch.set(false);
531 this.settings.emulateViewport.set(false); 528 this.settings.emulateViewport.set(false);
532 this.settings.overrideDeviceOrientation.set(false); 529 this.settings.overrideDeviceOrientation.set(false);
533 this.settings.overrideGeolocation.set(false); 530 this.settings.overrideGeolocation.set(false);
534 this.settings.overrideCSSMedia.set(false); 531 this.settings.overrideCSSMedia.set(false);
535 this.settings.networkConditions.set({throughput: WebInspector.OverridesS upport._networkThroughputUnlimitedValue, latency: 0}); 532 this.settings.networkConditions.set({throughput: WebInspector.OverridesS upport._networkThroughputUnlimitedValue, latency: 0});
536 delete this._deviceMetricsChangedListenerMuted; 533 delete this._deviceMetricsChangedListenerMuted;
537 delete this._userAgentChangedListenerMuted; 534 delete this._userAgentChangedListenerMuted;
538 535
539 if (this._initialized) { 536 if (this._initialized) {
540 this._deviceMetricsChanged(); 537 this._deviceMetricsChanged();
541 this._userAgentChanged(); 538 this._userAgentChanged();
542 } 539 }
543 }, 540 },
544 541
545 /** 542 /**
546 * @param {!WebInspector.OverridesSupport.Device} device 543 * @param {!WebInspector.OverridesSupport.Device} device
547 * @return {boolean} 544 * @return {boolean}
548 */ 545 */
549 isEmulatingDevice: function(device) 546 isEmulatingDevice: function(device)
550 { 547 {
551 return this.settings.userAgent.get() === device.userAgent 548 return this.settings.userAgent.get() === device.userAgent
552 && this.settings.deviceWidth.get() === device.width 549 && this.settings.deviceWidth.get() === device.width
553 && this.settings.deviceHeight.get() === device.height 550 && this.settings.deviceHeight.get() === device.height
554 && this.settings.deviceScaleFactor.get() === device.deviceScaleFacto r 551 && this.settings.deviceScaleFactor.get() === device.deviceScaleFacto r
555 && this.settings.deviceTextAutosizing.get() === device.textAutosizin g
556 && this.settings.emulateTouch.get() === device.touch 552 && this.settings.emulateTouch.get() === device.touch
557 && this.settings.emulateViewport.get() === device.viewport 553 && this.settings.emulateViewport.get() === device.viewport
558 && this.settings.emulateResolution.get(); 554 && this.settings.emulateResolution.get();
559 }, 555 },
560 556
561 /** 557 /**
562 * @param {boolean} suspended 558 * @param {boolean} suspended
563 */ 559 */
564 setTouchEmulationSuspended: function(suspended) 560 setTouchEmulationSuspended: function(suspended)
565 { 561 {
(...skipping 12 matching lines...) Expand all
578 this._initialized = true; 574 this._initialized = true;
579 575
580 this.settings._emulationEnabled.addChangeListener(this._userAgentChanged , this); 576 this.settings._emulationEnabled.addChangeListener(this._userAgentChanged , this);
581 this.settings.userAgent.addChangeListener(this._userAgentChanged, this); 577 this.settings.userAgent.addChangeListener(this._userAgentChanged, this);
582 578
583 this.settings._emulationEnabled.addChangeListener(this._deviceMetricsCha nged, this); 579 this.settings._emulationEnabled.addChangeListener(this._deviceMetricsCha nged, this);
584 this.settings.emulateResolution.addChangeListener(this._deviceMetricsCha nged, this); 580 this.settings.emulateResolution.addChangeListener(this._deviceMetricsCha nged, this);
585 this.settings.deviceWidth.addChangeListener(this._deviceMetricsChanged, this); 581 this.settings.deviceWidth.addChangeListener(this._deviceMetricsChanged, this);
586 this.settings.deviceHeight.addChangeListener(this._deviceMetricsChanged, this); 582 this.settings.deviceHeight.addChangeListener(this._deviceMetricsChanged, this);
587 this.settings.deviceScaleFactor.addChangeListener(this._deviceMetricsCha nged, this); 583 this.settings.deviceScaleFactor.addChangeListener(this._deviceMetricsCha nged, this);
588 this.settings.deviceTextAutosizing.addChangeListener(this._deviceMetrics Changed, this);
589 this.settings.emulateViewport.addChangeListener(this._deviceMetricsChang ed, this); 584 this.settings.emulateViewport.addChangeListener(this._deviceMetricsChang ed, this);
590 this.settings.deviceFitWindow.addChangeListener(this._deviceMetricsChang ed, this); 585 this.settings.deviceFitWindow.addChangeListener(this._deviceMetricsChang ed, this);
591 586
592 this.settings._emulationEnabled.addChangeListener(this._geolocationPosit ionChanged, this); 587 this.settings._emulationEnabled.addChangeListener(this._geolocationPosit ionChanged, this);
593 this.settings.overrideGeolocation.addChangeListener(this._geolocationPos itionChanged, this); 588 this.settings.overrideGeolocation.addChangeListener(this._geolocationPos itionChanged, this);
594 this.settings.geolocationOverride.addChangeListener(this._geolocationPos itionChanged, this); 589 this.settings.geolocationOverride.addChangeListener(this._geolocationPos itionChanged, this);
595 590
596 this.settings._emulationEnabled.addChangeListener(this._deviceOrientatio nChanged, this); 591 this.settings._emulationEnabled.addChangeListener(this._deviceOrientatio nChanged, this);
597 this.settings.overrideDeviceOrientation.addChangeListener(this._deviceOr ientationChanged, this); 592 this.settings.overrideDeviceOrientation.addChangeListener(this._deviceOr ientationChanged, this);
598 this.settings.deviceOrientationOverride.addChangeListener(this._deviceOr ientationChanged, this); 593 this.settings.deviceOrientationOverride.addChangeListener(this._deviceOr ientationChanged, this);
(...skipping 132 matching lines...) Expand 10 before | Expand all | Expand 10 after
731 726
732 /** 727 /**
733 * @param {!WebInspector.Throttler.FinishCallback} finishCallback 728 * @param {!WebInspector.Throttler.FinishCallback} finishCallback
734 * @this {WebInspector.OverridesSupport} 729 * @this {WebInspector.OverridesSupport}
735 */ 730 */
736 function setDeviceMetricsOverride(finishCallback) 731 function setDeviceMetricsOverride(finishCallback)
737 { 732 {
738 PageAgent.setDeviceMetricsOverride( 733 PageAgent.setDeviceMetricsOverride(
739 overrideWidth, overrideHeight, this.settings.deviceScaleFactor.g et(), 734 overrideWidth, overrideHeight, this.settings.deviceScaleFactor.g et(),
740 this.settings.emulateViewport.get(), this._pageResizer ? false : this.settings.deviceFitWindow.get(), scale, 0, 0, 735 this.settings.emulateViewport.get(), this._pageResizer ? false : this.settings.deviceFitWindow.get(), scale, 0, 0,
741 this.settings.deviceTextAutosizing.get(), this._fontScaleFactor( overrideWidth || dipWidth, overrideHeight || dipHeight),
742 apiCallback.bind(this, finishCallback)); 736 apiCallback.bind(this, finishCallback));
743 } 737 }
744 738
745 /** 739 /**
746 * @param {!WebInspector.Throttler.FinishCallback} finishCallback 740 * @param {!WebInspector.Throttler.FinishCallback} finishCallback
747 * @this {WebInspector.OverridesSupport} 741 * @this {WebInspector.OverridesSupport}
748 */ 742 */
749 function clearDeviceMetricsOverride(finishCallback) 743 function clearDeviceMetricsOverride(finishCallback)
750 { 744 {
751 PageAgent.clearDeviceMetricsOverride(apiCallback.bind(this, finishCa llback)); 745 PageAgent.clearDeviceMetricsOverride(apiCallback.bind(this, finishCa llback));
(...skipping 160 matching lines...) Expand 10 before | Expand all | Expand 10 after
912 906
913 this.settings = {}; 907 this.settings = {};
914 this.settings._emulationEnabled = WebInspector.settings.createSetting("e mulationEnabled", false); 908 this.settings._emulationEnabled = WebInspector.settings.createSetting("e mulationEnabled", false);
915 909
916 this.settings.userAgent = WebInspector.settings.createSetting("userAgent ", ""); 910 this.settings.userAgent = WebInspector.settings.createSetting("userAgent ", "");
917 911
918 this.settings.emulateResolution = WebInspector.settings.createSetting("e mulateResolution", true); 912 this.settings.emulateResolution = WebInspector.settings.createSetting("e mulateResolution", true);
919 this.settings.deviceWidth = WebInspector.settings.createSetting("deviceW idth", 360); 913 this.settings.deviceWidth = WebInspector.settings.createSetting("deviceW idth", 360);
920 this.settings.deviceHeight = WebInspector.settings.createSetting("device Height", 640); 914 this.settings.deviceHeight = WebInspector.settings.createSetting("device Height", 640);
921 this.settings.deviceScaleFactor = WebInspector.settings.createSetting("d eviceScaleFactor", 0); 915 this.settings.deviceScaleFactor = WebInspector.settings.createSetting("d eviceScaleFactor", 0);
922 this.settings.deviceTextAutosizing = WebInspector.settings.createSetting ("deviceTextAutosizing", false);
923 this.settings.deviceFitWindow = WebInspector.settings.createSetting("dev iceFitWindow", true); 916 this.settings.deviceFitWindow = WebInspector.settings.createSetting("dev iceFitWindow", true);
924 // FIXME: rename viewport to mobile everywhere in the code. 917 // FIXME: rename viewport to mobile everywhere in the code.
925 this.settings.emulateViewport = WebInspector.settings.createSetting("emu lateViewport", false); 918 this.settings.emulateViewport = WebInspector.settings.createSetting("emu lateViewport", false);
926 919
927 this.settings.emulateTouch = WebInspector.settings.createSetting("emulat eTouch", false); 920 this.settings.emulateTouch = WebInspector.settings.createSetting("emulat eTouch", false);
928 921
929 this.settings.overrideGeolocation = WebInspector.settings.createSetting( "overrideGeolocation", false); 922 this.settings.overrideGeolocation = WebInspector.settings.createSetting( "overrideGeolocation", false);
930 this.settings.geolocationOverride = WebInspector.settings.createSetting( "geolocationOverride", ""); 923 this.settings.geolocationOverride = WebInspector.settings.createSetting( "geolocationOverride", "");
931 924
932 this.settings.overrideDeviceOrientation = WebInspector.settings.createSe tting("overrideDeviceOrientation", false); 925 this.settings.overrideDeviceOrientation = WebInspector.settings.createSe tting("overrideDeviceOrientation", false);
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after
970 /** 963 /**
971 * @return {boolean} 964 * @return {boolean}
972 */ 965 */
973 networkThroughputIsLimited: function() 966 networkThroughputIsLimited: function()
974 { 967 {
975 var conditions = this.settings.networkConditions.get(); 968 var conditions = this.settings.networkConditions.get();
976 return conditions.throughput !== WebInspector.OverridesSupport._networkT hroughputUnlimitedValue; 969 return conditions.throughput !== WebInspector.OverridesSupport._networkT hroughputUnlimitedValue;
977 }, 970 },
978 971
979 /** 972 /**
980 * Compute the font scale factor.
981 *
982 * Chromium on Android uses a device scale adjustment for fonts used in text autosizing for
983 * improved legibility. This function computes this adjusted value for text autosizing.
984 *
985 * For a description of the Android device scale adjustment algorithm, see:
986 * chrome/browser/chrome_content_browser_client.cc, GetFontScaleMultipli er(...)
987 *
988 * @param {number} width
989 * @param {number} height
990 * @return {number} font scale factor.
991 */
992 _fontScaleFactor: function(width, height)
993 {
994 if (!this.emulationEnabled())
995 return 1;
996 var deviceScaleFactor = this.settings.deviceScaleFactor.get();
997
998 if (!width || !height || !deviceScaleFactor)
999 return 1;
1000
1001 var minWidth = Math.min(width, height) / deviceScaleFactor;
1002
1003 var kMinFSM = 1.05;
1004 var kWidthForMinFSM = 320;
1005 var kMaxFSM = 1.3;
1006 var kWidthForMaxFSM = 800;
1007
1008 if (minWidth <= kWidthForMinFSM)
1009 return kMinFSM;
1010 if (minWidth >= kWidthForMaxFSM)
1011 return kMaxFSM;
1012
1013 // The font scale multiplier varies linearly between kMinFSM and kMaxFSM .
1014 var ratio = (minWidth - kWidthForMinFSM) / (kWidthForMaxFSM - kWidthForM inFSM);
1015 return ratio * (kMaxFSM - kMinFSM) + kMinFSM;
1016 },
1017
1018 /**
1019 * @param {!Document} document 973 * @param {!Document} document
1020 * @return {!Element} 974 * @return {!Element}
1021 */ 975 */
1022 createDeviceSelect: function(document) 976 createDeviceSelect: function(document)
1023 { 977 {
1024 var deviceSelectElement = document.createElement("select"); 978 var deviceSelectElement = document.createElement("select");
1025 979
1026 var selectDeviceOption = new Option(WebInspector.UIString("<Select model >"), WebInspector.UIString("<Select model>")); 980 var selectDeviceOption = new Option(WebInspector.UIString("<Select model >"), WebInspector.UIString("<Select model>"));
1027 selectDeviceOption.device = new WebInspector.OverridesSupport.Device("", ""); 981 selectDeviceOption.device = new WebInspector.OverridesSupport.Device("", "");
1028 deviceSelectElement.add(selectDeviceOption); 982 deviceSelectElement.add(selectDeviceOption);
(...skipping 19 matching lines...) Expand all
1048 } 1002 }
1049 } 1003 }
1050 1004
1051 deviceSelectElement.addEventListener("change", deviceSelected, false); 1005 deviceSelectElement.addEventListener("change", deviceSelected, false);
1052 1006
1053 var emulatedSettingChangedMuted = false; 1007 var emulatedSettingChangedMuted = false;
1054 WebInspector.overridesSupport.settings.emulateResolution.addChangeListen er(emulatedSettingChanged); 1008 WebInspector.overridesSupport.settings.emulateResolution.addChangeListen er(emulatedSettingChanged);
1055 WebInspector.overridesSupport.settings.deviceWidth.addChangeListener(emu latedSettingChanged); 1009 WebInspector.overridesSupport.settings.deviceWidth.addChangeListener(emu latedSettingChanged);
1056 WebInspector.overridesSupport.settings.deviceHeight.addChangeListener(em ulatedSettingChanged); 1010 WebInspector.overridesSupport.settings.deviceHeight.addChangeListener(em ulatedSettingChanged);
1057 WebInspector.overridesSupport.settings.deviceScaleFactor.addChangeListen er(emulatedSettingChanged); 1011 WebInspector.overridesSupport.settings.deviceScaleFactor.addChangeListen er(emulatedSettingChanged);
1058 WebInspector.overridesSupport.settings.deviceTextAutosizing.addChangeLis tener(emulatedSettingChanged);
1059 WebInspector.overridesSupport.settings.emulateViewport.addChangeListener (emulatedSettingChanged); 1012 WebInspector.overridesSupport.settings.emulateViewport.addChangeListener (emulatedSettingChanged);
1060 WebInspector.overridesSupport.settings.emulateTouch.addChangeListener(em ulatedSettingChanged); 1013 WebInspector.overridesSupport.settings.emulateTouch.addChangeListener(em ulatedSettingChanged);
1061 WebInspector.overridesSupport.settings.userAgent.addChangeListener(emula tedSettingChanged); 1014 WebInspector.overridesSupport.settings.userAgent.addChangeListener(emula tedSettingChanged);
1062 emulatedSettingChanged(); 1015 emulatedSettingChanged();
1063 1016
1064 function deviceSelected() 1017 function deviceSelected()
1065 { 1018 {
1066 if (deviceSelectElement.selectedIndex === 0) 1019 if (deviceSelectElement.selectedIndex === 0)
1067 return; 1020 return;
1068 1021
(...skipping 92 matching lines...) Expand 10 before | Expand all | Expand 10 after
1161 }, 1114 },
1162 1115
1163 __proto__: WebInspector.Object.prototype 1116 __proto__: WebInspector.Object.prototype
1164 } 1117 }
1165 1118
1166 1119
1167 /** 1120 /**
1168 * @type {!WebInspector.OverridesSupport} 1121 * @type {!WebInspector.OverridesSupport}
1169 */ 1122 */
1170 WebInspector.overridesSupport; 1123 WebInspector.overridesSupport;
OLDNEW
« no previous file with comments | « Source/devtools/front_end/elements/OverridesView.js ('k') | Source/devtools/front_end/ui/SettingsUI.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698