EmulationModel.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. export default class EmulationModel extends SDK.SDKModel{constructor(target){super(target);this._emulationAgent=target.emulationAgent();this._pageAgent=target.pageAgent();this._deviceOrientationAgent=target.deviceOrientationAgent();this._cssModel=target.model(SDK.CSSModel);this._overlayModel=target.model(SDK.OverlayModel);if(this._overlayModel){this._overlayModel.addEventListener(SDK.OverlayModel.Events.InspectModeWillBeToggled,this._updateTouch,this);}
  2. const disableJavascriptSetting=Common.settings.moduleSetting('javaScriptDisabled');disableJavascriptSetting.addChangeListener(()=>this._emulationAgent.setScriptExecutionDisabled(disableJavascriptSetting.get()));if(disableJavascriptSetting.get()){this._emulationAgent.setScriptExecutionDisabled(true);}
  3. const mediaTypeSetting=Common.moduleSetting('emulatedCSSMedia');const mediaFeaturePrefersColorSchemeSetting=Common.moduleSetting('emulatedCSSMediaFeaturePrefersColorScheme');const mediaFeaturePrefersReducedMotionSetting=Common.moduleSetting('emulatedCSSMediaFeaturePrefersReducedMotion');this._mediaConfiguration=new Map([['type',mediaTypeSetting.get()],['prefers-color-scheme',mediaFeaturePrefersColorSchemeSetting.get()],['prefers-reduced-motion',mediaFeaturePrefersReducedMotionSetting.get()],]);mediaTypeSetting.addChangeListener(()=>{this._mediaConfiguration.set('type',mediaTypeSetting.get());this._updateCssMedia();});mediaFeaturePrefersColorSchemeSetting.addChangeListener(()=>{this._mediaConfiguration.set('prefers-color-scheme',mediaFeaturePrefersColorSchemeSetting.get());this._updateCssMedia();});mediaFeaturePrefersReducedMotionSetting.addChangeListener(()=>{this._mediaConfiguration.set('prefers-reduced-motion',mediaFeaturePrefersReducedMotionSetting.get());this._updateCssMedia();});this._updateCssMedia();this._touchEnabled=false;this._touchMobile=false;this._customTouchEnabled=false;this._touchConfiguration={enabled:false,configuration:'mobile',scriptId:''};}
  4. supportsDeviceEmulation(){return this.target().hasAllCapabilities(SDK.Target.Capability.DeviceEmulation);}
  5. resetPageScaleFactor(){return this._emulationAgent.resetPageScaleFactor();}
  6. emulateDevice(metrics){if(metrics){return this._emulationAgent.invoke_setDeviceMetricsOverride(metrics);}else{return this._emulationAgent.clearDeviceMetricsOverride();}}
  7. overlayModel(){return this._overlayModel;}
  8. async emulateGeolocation(geolocation){if(!geolocation){this._emulationAgent.clearGeolocationOverride();this._emulationAgent.setTimezoneOverride('');}
  9. if(geolocation.error){this._emulationAgent.setGeolocationOverride();this._emulationAgent.setTimezoneOverride('');}else{return Promise.all([this._emulationAgent.setGeolocationOverride(geolocation.latitude,geolocation.longitude,Geolocation.DefaultMockAccuracy).catch(err=>Promise.reject({type:'emulation-set-geolocation',message:err.message})),this._emulationAgent.setTimezoneOverride(geolocation.timezoneId).catch(err=>Promise.reject({type:'emulation-set-timezone',message:err.message}))]);}}
  10. emulateDeviceOrientation(deviceOrientation){if(deviceOrientation){this._deviceOrientationAgent.setDeviceOrientationOverride(deviceOrientation.alpha,deviceOrientation.beta,deviceOrientation.gamma);}else{this._deviceOrientationAgent.clearDeviceOrientationOverride();}}
  11. _emulateCSSMedia(type,features){this._emulationAgent.setEmulatedMedia(type,features);if(this._cssModel){this._cssModel.mediaQueryResultChanged();}}
  12. setCPUThrottlingRate(rate){this._emulationAgent.setCPUThrottlingRate(rate);}
  13. emulateTouch(enabled,mobile){this._touchEnabled=enabled;this._touchMobile=mobile;this._updateTouch();}
  14. overrideEmulateTouch(enabled){this._customTouchEnabled=enabled;this._updateTouch();}
  15. _updateTouch(){let configuration={enabled:this._touchEnabled,configuration:this._touchMobile?'mobile':'desktop',};if(this._customTouchEnabled){configuration={enabled:true,configuration:'mobile'};}
  16. if(this._overlayModel&&this._overlayModel.inspectModeEnabled()){configuration={enabled:false,configuration:'mobile'};}
  17. if(!this._touchConfiguration.enabled&&!configuration.enabled){return;}
  18. if(this._touchConfiguration.enabled&&configuration.enabled&&this._touchConfiguration.configuration===configuration.configuration){return;}
  19. this._touchConfiguration=configuration;this._emulationAgent.setTouchEmulationEnabled(configuration.enabled,1);this._emulationAgent.setEmitTouchEventsForMouse(configuration.enabled,configuration.configuration);}
  20. _updateCssMedia(){const type=this._mediaConfiguration.get('type');const features=[{name:'prefers-color-scheme',value:this._mediaConfiguration.get('prefers-color-scheme'),},{name:'prefers-reduced-motion',value:this._mediaConfiguration.get('prefers-reduced-motion'),},];this._emulateCSSMedia(type,features);}}
  21. export class Geolocation{constructor(latitude,longitude,timezoneId,error){this.latitude=latitude;this.longitude=longitude;this.timezoneId=timezoneId;this.error=error;}
  22. static parseSetting(value){if(value){const[position,timezoneId,error]=value.split(':');const[latitude,longitude]=position.split('@');return new Geolocation(parseFloat(latitude),parseFloat(longitude),timezoneId,Boolean(error));}
  23. return new Geolocation(0,0,'',false);}
  24. static parseUserInput(latitudeString,longitudeString,timezoneId){if(!latitudeString&&!longitudeString){return null;}
  25. const{valid:isLatitudeValid}=Geolocation.latitudeValidator(latitudeString);const{valid:isLongitudeValid}=Geolocation.longitudeValidator(longitudeString);if(!isLatitudeValid&&!isLongitudeValid){return null;}
  26. const latitude=isLatitudeValid?parseFloat(latitudeString):-1;const longitude=isLongitudeValid?parseFloat(longitudeString):-1;return new Geolocation(latitude,longitude,timezoneId,false);}
  27. static latitudeValidator(value){const numValue=parseFloat(value);const valid=/^([+-]?[\d]+(\.\d+)?|[+-]?\.\d+)$/.test(value)&&numValue>=-90&&numValue<=90;return{valid};}
  28. static longitudeValidator(value){const numValue=parseFloat(value);const valid=/^([+-]?[\d]+(\.\d+)?|[+-]?\.\d+)$/.test(value)&&numValue>=-180&&numValue<=180;return{valid};}
  29. static timezoneIdValidator(value){const valid=value===''||/[a-zA-Z]/.test(value);return{valid};}
  30. toSetting(){return`${this.latitude}@${this.longitude}:${this.timezoneId}:${this.error || ''}`;}}
  31. Geolocation.DefaultMockAccuracy=150;export class DeviceOrientation{constructor(alpha,beta,gamma){this.alpha=alpha;this.beta=beta;this.gamma=gamma;}
  32. static parseSetting(value){if(value){const jsonObject=JSON.parse(value);return new DeviceOrientation(jsonObject.alpha,jsonObject.beta,jsonObject.gamma);}
  33. return new DeviceOrientation(0,0,0);}
  34. static parseUserInput(alphaString,betaString,gammaString){if(!alphaString&&!betaString&&!gammaString){return null;}
  35. const{valid:isAlphaValid}=DeviceOrientation.validator(alphaString);const{valid:isBetaValid}=DeviceOrientation.validator(betaString);const{valid:isGammaValid}=DeviceOrientation.validator(gammaString);if(!isAlphaValid&&!isBetaValid&&!isGammaValid){return null;}
  36. const alpha=isAlphaValid?parseFloat(alphaString):-1;const beta=isBetaValid?parseFloat(betaString):-1;const gamma=isGammaValid?parseFloat(gammaString):-1;return new DeviceOrientation(alpha,beta,gamma);}
  37. static validator(value){const valid=/^([+-]?[\d]+(\.\d+)?|[+-]?\.\d+)$/.test(value);return{valid};}
  38. toSetting(){return JSON.stringify(this);}}
  39. self.SDK=self.SDK||{};SDK=SDK||{};SDK.EmulationModel=EmulationModel;SDK.EmulationModel.Geolocation=Geolocation;SDK.EmulationModel.DeviceOrientation=DeviceOrientation;SDK.SDKModel.register(EmulationModel,SDK.Target.Capability.Emulation,true);