Demo/bin/Debug/front_end/screencast_module.js

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

WebInspector.ScreencastApp=function()
{this._enabledSetting=WebInspector.settings.createSetting("screencastEnabled",true);this._toggleButton=new WebInspector.ToolbarButton(WebInspector.UIString("Toggle screencast"),"screencast-toolbar-item");this._toggleButton.setToggled(this._enabledSetting.get());this._toggleButton.addEventListener("click",this._toggleButtonClicked,this);WebInspector.targetManager.observeTargets(this);};WebInspector.ScreencastApp.prototype={presentUI:function(document,callback)
{var rootView=new WebInspector.RootView();this._rootSplitWidget=new WebInspector.SplitWidget(false,true,"InspectorView.screencastSplitViewState",300,300);this._rootSplitWidget.setVertical(true);this._rootSplitWidget.setSecondIsSidebar(true);this._rootSplitWidget.show(rootView.element);this._rootSplitWidget.hideMain();this._rootSplitWidget.setSidebarWidget(WebInspector.inspectorView);WebInspector.inspectorView.showInitialPanel();rootView.attachToDocument(document);callback();},targetAdded:function(target)
{if(this._target)
return;this._target=target;if(target.hasCapability(WebInspector.Target.Capabilities.CanScreencast)){this._screencastView=new WebInspector.ScreencastView(target);this._rootSplitWidget.setMainWidget(this._screencastView);this._screencastView.initialize();}else{this._toggleButton.setEnabled(false);}
this._onScreencastEnabledChanged();},targetRemoved:function(target)
{if(this._target===target){delete this._target;if(!this._screencastView)
return;this._toggleButton.setEnabled(false);this._screencastView.detach();delete this._screencastView;this._onScreencastEnabledChanged();}},_toggleButtonClicked:function()
{var enabled=!this._toggleButton.toggled();this._enabledSetting.set(enabled);this._onScreencastEnabledChanged();},_onScreencastEnabledChanged:function()
{if(!this._rootSplitWidget)
return;var enabled=this._enabledSetting.get()&&this._screencastView;this._toggleButton.setToggled(enabled);if(enabled)
this._rootSplitWidget.showBoth();else
this._rootSplitWidget.hideMain();}};WebInspector.ScreencastApp._appInstance;WebInspector.ScreencastApp._instance=function()
{if(!WebInspector.ScreencastApp._appInstance)
WebInspector.ScreencastApp._appInstance=new WebInspector.ScreencastApp();return WebInspector.ScreencastApp._appInstance;};WebInspector.ScreencastApp.ToolbarButtonProvider=function()
{}
WebInspector.ScreencastApp.ToolbarButtonProvider.prototype={item:function()
{return WebInspector.ScreencastApp._instance()._toggleButton;}}
WebInspector.ScreencastAppProvider=function()
{};WebInspector.ScreencastAppProvider.prototype={createApp:function()
{return WebInspector.ScreencastApp._instance();}};;WebInspector.ScreencastView=function(target)
{WebInspector.VBox.call(this);this._target=target;this._domModel=WebInspector.DOMModel.fromTarget(target);this.setMinimumSize(150,150);this.registerRequiredCSS("screencast/screencastView.css");};WebInspector.ScreencastView._bordersSize=44;WebInspector.ScreencastView._navBarHeight=29;WebInspector.ScreencastView._HttpRegex=/^https?:\/\/(.+)/;WebInspector.ScreencastView._SchemeRegex=/^(https?|about|chrome):/;WebInspector.ScreencastView.prototype={initialize:function()
{this.element.classList.add("screencast");this._createNavigationBar();this._viewportElement=this.element.createChild("div","screencast-viewport hidden");this._canvasContainerElement=this._viewportElement.createChild("div","screencast-canvas-container");this._glassPaneElement=this._canvasContainerElement.createChild("div","screencast-glasspane fill hidden");this._canvasElement=this._canvasContainerElement.createChild("canvas");this._canvasElement.tabIndex=1;this._canvasElement.addEventListener("mousedown",this._handleMouseEvent.bind(this),false);this._canvasElement.addEventListener("mouseup",this._handleMouseEvent.bind(this),false);this._canvasElement.addEventListener("mousemove",this._handleMouseEvent.bind(this),false);this._canvasElement.addEventListener("mousewheel",this._handleMouseEvent.bind(this),false);this._canvasElement.addEventListener("click",this._handleMouseEvent.bind(this),false);this._canvasElement.addEventListener("contextmenu",this._handleContextMenuEvent.bind(this),false);this._canvasElement.addEventListener("keydown",this._handleKeyEvent.bind(this),false);this._canvasElement.addEventListener("keyup",this._handleKeyEvent.bind(this),false);this._canvasElement.addEventListener("keypress",this._handleKeyEvent.bind(this),false);this._canvasElement.addEventListener("blur",this._handleBlurEvent.bind(this),false);this._titleElement=this._canvasContainerElement.createChild("div","screencast-element-title monospace hidden");this._tagNameElement=this._titleElement.createChild("span","screencast-tag-name");this._nodeIdElement=this._titleElement.createChild("span","screencast-node-id");this._classNameElement=this._titleElement.createChild("span","screencast-class-name");this._titleElement.createTextChild(" ");this._nodeWidthElement=this._titleElement.createChild("span");this._titleElement.createChild("span","screencast-px").textContent="px";this._titleElement.createTextChild(" \u00D7 ");this._nodeHeightElement=this._titleElement.createChild("span");this._titleElement.createChild("span","screencast-px").textContent="px";this._titleElement.style.top="0";this._titleElement.style.left="0";this._imageElement=new Image();this._isCasting=false;this._context=this._canvasElement.getContext("2d");this._checkerboardPattern=this._createCheckerboardPattern(this._context);this._shortcuts=({});this._shortcuts[WebInspector.KeyboardShortcut.makeKey("l",WebInspector.KeyboardShortcut.Modifiers.Ctrl)]=this._focusNavigationBar.bind(this);this._target.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.ScreencastFrame,this._screencastFrame,this);this._target.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.ScreencastVisibilityChanged,this._screencastVisibilityChanged,this);WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Events.SuspendStateChanged,this._onSuspendStateChange,this);this._updateGlasspane();},wasShown:function()
{this._startCasting();},willHide:function()
{this._stopCasting();},_startCasting:function()
{if(WebInspector.targetManager.allTargetsSuspended())
return;if(this._isCasting)
return;this._isCasting=true;const maxImageDimension=2048;var dimensions=this._viewportDimensions();if(dimensions.width<0||dimensions.height<0){this._isCasting=false;return;}
dimensions.width*=window.devicePixelRatio;dimensions.height*=window.devicePixelRatio;this._target.pageAgent().startScreencast("jpeg",80,Math.min(maxImageDimension,dimensions.width),Math.min(maxImageDimension,dimensions.height));this._domModel.setHighlighter(this);},_stopCasting:function()
{if(!this._isCasting)
return;this._isCasting=false;this._target.pageAgent().stopScreencast();this._domModel.setHighlighter(null);},_screencastFrame:function(event)
{var metadata=(event.data.metadata);var base64Data=(event.data.data);this._imageElement.src="data:image/jpg;base64,"+base64Data;this._pageScaleFactor=metadata.pageScaleFactor;this._screenOffsetTop=metadata.offsetTop;this._scrollOffsetX=metadata.scrollOffsetX;this._scrollOffsetY=metadata.scrollOffsetY;if(event.data.frameNumber)
this._target.pageAgent().screencastFrameAck(event.data.frameNumber);var deviceSizeRatio=metadata.deviceHeight/metadata.deviceWidth;var dimensionsCSS=this._viewportDimensions();this._imageZoom=Math.min(dimensionsCSS.width/this._imageElement.naturalWidth,dimensionsCSS.height/(this._imageElement.naturalWidth*deviceSizeRatio));this._viewportElement.classList.remove("hidden");var bordersSize=WebInspector.ScreencastView._bordersSize;if(this._imageZoom<1.01/window.devicePixelRatio)
this._imageZoom=1/window.devicePixelRatio;this._screenZoom=this._imageElement.naturalWidth*this._imageZoom/metadata.deviceWidth;this._viewportElement.style.width=metadata.deviceWidth*this._screenZoom+bordersSize+"px";this._viewportElement.style.height=metadata.deviceHeight*this._screenZoom+bordersSize+"px";this.highlightDOMNode(this._highlightNode,this._highlightConfig);},_isGlassPaneActive:function()
{return!this._glassPaneElement.classList.contains("hidden");},_screencastVisibilityChanged:function(event)
{this._targetInactive=!event.data.visible;this._updateGlasspane();},_onSuspendStateChange:function(event)
{if(WebInspector.targetManager.allTargetsSuspended())
this._stopCasting();else
this._startCasting();this._updateGlasspane();},_updateGlasspane:function()
{if(this._targetInactive){this._glassPaneElement.textContent=WebInspector.UIString("The tab is inactive");this._glassPaneElement.classList.remove("hidden");}else if(WebInspector.targetManager.allTargetsSuspended()){this._glassPaneElement.textContent=WebInspector.UIString("Profiling in progress");this._glassPaneElement.classList.remove("hidden");}else{this._glassPaneElement.classList.add("hidden");}},_handleMouseEvent:function(event)
{if(this._isGlassPaneActive()){event.consume();return;}
if(!this._pageScaleFactor)
return;if(!this._inspectModeConfig||event.type==="mousewheel"){this._simulateTouchForMouseEvent(event);event.preventDefault();if(event.type==="mousedown")
this._canvasElement.focus();return;}
var position=this._convertIntoScreenSpace(event);this._domModel.nodeForLocation(position.x/this._pageScaleFactor+this._scrollOffsetX,position.y/this._pageScaleFactor+this._scrollOffsetY,callback.bind(this));function callback(node)
{if(!node)
return;if(event.type==="mousemove"){this.highlightDOMNode(node,this._inspectModeConfig);this._domModel.nodeHighlightRequested(node.id);}else if(event.type==="click"){WebInspector.Revealer.reveal(node);}}},_handleKeyEvent:function(event)
{if(this._isGlassPaneActive()){event.consume();return;}
var shortcutKey=WebInspector.KeyboardShortcut.makeKeyFromEvent((event));var handler=this._shortcuts[shortcutKey];if(handler&&handler(event)){event.consume();return;}
var type;switch(event.type){case"keydown":type="keyDown";break;case"keyup":type="keyUp";break;case"keypress":type="char";break;default:return;}
var text=event.type==="keypress"?String.fromCharCode(event.charCode):undefined;this._target.inputAgent().invoke_dispatchKeyEvent({type:type,modifiers:this._modifiersForEvent(event),timestamp:event.timeStamp/1000,text:text,unmodifiedText:text?text.toLowerCase():undefined,keyIdentifier:event.keyIdentifier,code:event.code,key:event.key,windowsVirtualKeyCode:event.keyCode,nativeVirtualKeyCode:event.keyCode,autoRepeat:false,isKeypad:false,isSystemKey:false});event.consume();this._canvasElement.focus();},_handleContextMenuEvent:function(event)
{event.consume(true);},_simulateTouchForMouseEvent:function(event)
{const buttons={0:"none",1:"left",2:"middle",3:"right"};const types={"mousedown":"mousePressed","mouseup":"mouseReleased","mousemove":"mouseMoved","mousewheel":"mouseWheel"};if(!(event.type in types)||!(event.which in buttons))
return;if(event.type!=="mousewheel"&&buttons[event.which]==="none")
return;if(event.type==="mousedown"||typeof this._eventScreenOffsetTop==="undefined")
this._eventScreenOffsetTop=this._screenOffsetTop;var modifiers=(event.altKey?1:0)|(event.ctrlKey?2:0)|(event.metaKey?4:0)|(event.shiftKey?8:0);var convertedPosition=this._zoomIntoScreenSpace(event);convertedPosition.y=Math.round(convertedPosition.y-this._eventScreenOffsetTop);var params={type:types[event.type],x:convertedPosition.x,y:convertedPosition.y,modifiers:modifiers,timestamp:event.timeStamp/1000,button:buttons[event.which],clickCount:0};if(event.type==="mousewheel"){params.deltaX=event.wheelDeltaX/this._screenZoom;params.deltaY=event.wheelDeltaY/this._screenZoom;}else{this._eventParams=params;}
if(event.type==="mouseup")
delete this._eventScreenOffsetTop;this._target.inputAgent().invoke_emulateTouchFromMouseEvent(params);},_handleBlurEvent:function(event)
{if(typeof this._eventScreenOffsetTop!=="undefined"){var params=this._eventParams;delete this._eventParams;params.type="mouseReleased";this._target.inputAgent().invoke_emulateTouchFromMouseEvent(params);}},_zoomIntoScreenSpace:function(event)
{var position={};position.x=Math.round(event.offsetX/this._screenZoom);position.y=Math.round(event.offsetY/this._screenZoom);return position;},_convertIntoScreenSpace:function(event)