* @constructor
* @extends {WebInspector.VBox}
* @implements {WebInspector.DOMNodeHighlighter}
+ * @param {!WebInspector.Target} target
*/
-WebInspector.ScreencastView = function()
+WebInspector.ScreencastView = function(target)
{
WebInspector.VBox.call(this);
+ this._target = target;
+
this.setMinimumSize(150, 150);
this.registerRequiredCSS("screencastView.css");
};
this._createNavigationBar();
this._viewportElement = this.element.createChild("div", "screencast-viewport hidden");
- this._glassPaneElement = this.element.createChild("div", "screencast-glasspane hidden");
+ this._canvasContainerElement = this._viewportElement.createChild("div", "screencast-canvas-container");
+ this._glassPaneElement = this._canvasContainerElement.createChild("div", "screencast-glasspane hidden");
- this._canvasElement = this._viewportElement.createChild("canvas");
+ 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("keyup", this._handleKeyEvent.bind(this), false);
this._canvasElement.addEventListener("keypress", this._handleKeyEvent.bind(this), false);
- this._titleElement = this._viewportElement.createChild("div", "screencast-element-title monospace hidden");
+ 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");
}
dimensions.width *= WebInspector.zoomManager.zoomFactor();
dimensions.height *= WebInspector.zoomManager.zoomFactor();
- PageAgent.startScreencast("jpeg", 80, Math.min(maxImageDimension, dimensions.width), Math.min(maxImageDimension, dimensions.height));
- WebInspector.domModel.setHighlighter(this);
+ this._target.pageAgent().startScreencast("jpeg", 80, Math.min(maxImageDimension, dimensions.width), Math.min(maxImageDimension, dimensions.height));
+ this._target.domModel.setHighlighter(this);
},
_stopCasting: function()
if (!this._isCasting)
return;
this._isCasting = false;
- PageAgent.stopScreencast();
- WebInspector.domModel.setHighlighter(null);
+ this._target.pageAgent().stopScreencast();
+ this._target.domModel.setHighlighter(null);
},
/**
this._resizeViewport(screenWidthDIP, screenHeightDIP);
this._imageZoom = this._imageElement.naturalWidth ? this._canvasElement.offsetWidth / this._imageElement.naturalWidth : 1;
- this.highlightDOMNode(this._highlightNodeId, this._highlightConfig);
+ this.highlightDOMNode(this._highlightNode, this._highlightConfig);
},
_isGlassPaneActive: function()
}
var position = this._convertIntoScreenSpace(event);
- DOMAgent.getNodeForLocation(position.x / this._pageScaleFactor, position.y / this._pageScaleFactor, callback.bind(this));
+ this._target.domModel.nodeForLocation(position.x / this._pageScaleFactor, position.y / this._pageScaleFactor, callback.bind(this));
/**
- * @param {?Protocol.Error} error
- * @param {number} nodeId
+ * @param {?WebInspector.DOMNode} node
* @this {WebInspector.ScreencastView}
*/
- function callback(error, nodeId)
+ function callback(node)
{
- if (error)
+ if (!node)
return;
if (event.type === "mousemove")
- this.highlightDOMNode(nodeId, this._inspectModeConfig);
+ node.highlight(this._inspectModeConfig);
else if (event.type === "click")
- WebInspector.Revealer.reveal(WebInspector.domModel.nodeForId(nodeId));
+ node.reveal();
}
},
var text = event.type === "keypress" ? String.fromCharCode(event.charCode) : undefined;
InputAgent.dispatchKeyEvent(type, this._modifiersForEvent(event), event.timeStamp / 1000, text, text ? text.toLowerCase() : undefined,
- event.keyIdentifier, event.keyCode /* windowsVirtualKeyCode */, event.keyCode /* nativeVirtualKeyCode */, undefined /* macCharCode */, false, false, false);
+ event.keyIdentifier, event.keyCode /* windowsVirtualKeyCode */, event.keyCode /* nativeVirtualKeyCode */, false, false, false);
event.consume();
this._canvasElement.focus();
},
*/
_simulateTouchGestureForMouseEvent: function(event)
{
- var position = this._convertIntoScreenSpace(event);
+ var convertedPosition = this._convertIntoScreenSpace(event);
+ var zoomedPosition = this._zoomIntoScreenSpace(event);
var timeStamp = event.timeStamp / 1000;
- var x = position.x;
- var y = position.y;
+
+ /**
+ * @this {!WebInspector.ScreencastView}
+ */
+ function clearPinch()
+ {
+ delete this._lastPinchAnchor;
+ delete this._lastPinchZoomedY;
+ delete this._lastPinchScale;
+ }
+
+ /**
+ * @this {!WebInspector.ScreencastView}
+ */
+ function clearScroll()
+ {
+ delete this._lastScrollZoomedPosition;
+ }
+
+ /**
+ * @this {!WebInspector.ScreencastView}
+ */
+ function scrollBegin()
+ {
+ InputAgent.dispatchGestureEvent("scrollBegin", convertedPosition.x, convertedPosition.y, timeStamp);
+ this._lastScrollZoomedPosition = zoomedPosition;
+ clearPinch.call(this);
+ }
+
+ /**
+ * @this {!WebInspector.ScreencastView}
+ */
+ function scrollUpdate()
+ {
+ var dx = this._lastScrollZoomedPosition ? zoomedPosition.x - this._lastScrollZoomedPosition.x : 0;
+ var dy = this._lastScrollZoomedPosition ? zoomedPosition.y - this._lastScrollZoomedPosition.y : 0;
+ if (dx || dy) {
+ InputAgent.dispatchGestureEvent("scrollUpdate", convertedPosition.x, convertedPosition.y, timeStamp, dx, dy);
+ this._lastScrollZoomedPosition = zoomedPosition;
+ }
+ }
+
+ /**
+ * @this {!WebInspector.ScreencastView}
+ */
+ function scrollEnd()
+ {
+ if (this._lastScrollZoomedPosition) {
+ InputAgent.dispatchGestureEvent("scrollEnd", convertedPosition.x, convertedPosition.y, timeStamp);
+ clearScroll.call(this);
+ return true;
+ }
+ return false;
+ }
+
+ /**
+ * @this {!WebInspector.ScreencastView}
+ */
+ function pinchBegin()
+ {
+ InputAgent.dispatchGestureEvent("pinchBegin", convertedPosition.x, convertedPosition.y, timeStamp);
+ this._lastPinchAnchor = convertedPosition;
+ this._lastPinchZoomedY = zoomedPosition.y;
+ this._lastPinchScale = 1;
+ clearScroll.call(this);
+ }
+
+ /**
+ * @this {!WebInspector.ScreencastView}
+ */
+ function pinchUpdate()
+ {
+ var dy = this._lastPinchZoomedY ? this._lastPinchZoomedY - zoomedPosition.y : 0;
+ if (dy) {
+ var scale = Math.exp(dy * 0.002);
+ InputAgent.dispatchGestureEvent("pinchUpdate", this._lastPinchAnchor.x, this._lastPinchAnchor.y, timeStamp, 0, 0, scale / this._lastPinchScale);
+ this._lastPinchScale = scale;
+ }
+ }
+
+ /**
+ * @this {!WebInspector.ScreencastView}
+ */
+ function pinchEnd()
+ {
+ if (this._lastPinchAnchor) {
+ InputAgent.dispatchGestureEvent("pinchEnd", this._lastPinchAnchor.x, this._lastPinchAnchor.y, timeStamp);
+ clearPinch.call(this);
+ return true;
+ }
+ return false;
+ }
switch (event.which) {
case 1: // Left
if (event.type === "mousedown") {
- InputAgent.dispatchGestureEvent("scrollBegin", x, y, timeStamp);
+ if (event.shiftKey) {
+ pinchBegin.call(this);
+ } else {
+ scrollBegin.call(this);
+ }
} else if (event.type === "mousemove") {
- var dx = this._lastScrollPosition ? position.x - this._lastScrollPosition.x : 0;
- var dy = this._lastScrollPosition ? position.y - this._lastScrollPosition.y : 0;
- if (dx || dy)
- InputAgent.dispatchGestureEvent("scrollUpdate", x, y, timeStamp, dx, dy);
+ if (event.shiftKey) {
+ if (scrollEnd.call(this))
+ pinchBegin.call(this);
+ pinchUpdate.call(this);
+ } else {
+ if (pinchEnd.call(this))
+ scrollBegin.call(this);
+ scrollUpdate.call(this);
+ }
} else if (event.type === "mouseup") {
- InputAgent.dispatchGestureEvent("scrollEnd", x, y, timeStamp);
+ pinchEnd.call(this);
+ scrollEnd.call(this);
} else if (event.type === "mousewheel") {
- if (event.altKey) {
- var factor = 1.1;
- var scale = event.wheelDeltaY < 0 ? 1 / factor : factor;
- InputAgent.dispatchGestureEvent("pinchBegin", x, y, timeStamp);
- InputAgent.dispatchGestureEvent("pinchUpdate", x, y, timeStamp, 0, 0, scale);
- InputAgent.dispatchGestureEvent("pinchEnd", x, y, timeStamp);
- } else {
- InputAgent.dispatchGestureEvent("scrollBegin", x, y, timeStamp);
- InputAgent.dispatchGestureEvent("scrollUpdate", x, y, timeStamp, event.wheelDeltaX, event.wheelDeltaY);
- InputAgent.dispatchGestureEvent("scrollEnd", x, y, timeStamp);
+ if (!this._lastPinchAnchor && !this._lastScrollZoomedPosition) {
+ if (event.shiftKey) {
+ var factor = 1.1;
+ var scale = event.wheelDeltaY < 0 ? 1 / factor : factor;
+ InputAgent.dispatchGestureEvent("pinchBegin", convertedPosition.x, convertedPosition.y, timeStamp);
+ InputAgent.dispatchGestureEvent("pinchUpdate", convertedPosition.x, convertedPosition.y, timeStamp, 0, 0, scale);
+ InputAgent.dispatchGestureEvent("pinchEnd", convertedPosition.x, convertedPosition.y, timeStamp);
+ } else {
+ InputAgent.dispatchGestureEvent("scrollBegin", convertedPosition.x, convertedPosition.y, timeStamp);
+ InputAgent.dispatchGestureEvent("scrollUpdate", convertedPosition.x, convertedPosition.y, timeStamp, event.wheelDeltaX, event.wheelDeltaY);
+ InputAgent.dispatchGestureEvent("scrollEnd", convertedPosition.x, convertedPosition.y, timeStamp);
+ }
}
} else if (event.type === "click") {
- InputAgent.dispatchMouseEvent("mousePressed", x, y, 0, timeStamp, "left", 1, true);
- InputAgent.dispatchMouseEvent("mouseReleased", x, y, 0, timeStamp, "left", 1, true);
- // FIXME: migrate to tap once it dispatches clicks again.
- // InputAgent.dispatchGestureEvent("tapDown", x, y, timeStamp);
- // InputAgent.dispatchGestureEvent("tap", x, y, timeStamp);
+ if (!event.shiftKey) {
+ InputAgent.dispatchMouseEvent("mousePressed", convertedPosition.x, convertedPosition.y, 0, timeStamp, "left", 1, true);
+ InputAgent.dispatchMouseEvent("mouseReleased", convertedPosition.x, convertedPosition.y, 0, timeStamp, "left", 1, true);
+ // FIXME: migrate to tap once it dispatches clicks again.
+ // InputAgent.dispatchGestureEvent("tapDown", x, y, timeStamp);
+ // InputAgent.dispatchGestureEvent("tap", x, y, timeStamp);
+ }
}
- this._lastScrollPosition = position;
break;
case 2: // Middle
if (event.type === "mousedown") {
- InputAgent.dispatchGestureEvent("tapDown", x, y, timeStamp);
+ InputAgent.dispatchGestureEvent("tapDown", convertedPosition.x, convertedPosition.y, timeStamp);
} else if (event.type === "mouseup") {
- InputAgent.dispatchGestureEvent("tap", x, y, timeStamp);
+ InputAgent.dispatchGestureEvent("tap", convertedPosition.x, convertedPosition.y, timeStamp);
}
break;
case 3: // Right
- if (event.type === "mousedown") {
- this._pinchStart = position;
- InputAgent.dispatchGestureEvent("pinchBegin", x, y, timeStamp);
- } else if (event.type === "mousemove") {
- var dx = this._pinchStart ? position.x - this._pinchStart.x : 0;
- var dy = this._pinchStart ? position.y - this._pinchStart.y : 0;
- if (dx || dy) {
- var scale = Math.pow(dy < 0 ? 0.999 : 1.001, Math.abs(dy));
- InputAgent.dispatchGestureEvent("pinchUpdate", this._pinchStart.x, this._pinchStart.y, timeStamp, 0, 0, scale);
- }
- } else if (event.type === "mouseup") {
- InputAgent.dispatchGestureEvent("pinchEnd", x, y, timeStamp);
- }
- break;
case 0: // None
default:
}
* @param {!Event} event
* @return {!{x: number, y: number}}
*/
- _convertIntoScreenSpace: function(event)
+ _zoomIntoScreenSpace: function(event)
{
var zoom = this._canvasElement.offsetWidth / this._viewport.width / this._pageScaleFactor;
var position = {};
position.x = Math.round(event.offsetX / zoom);
- position.y = Math.round(event.offsetY / zoom - this._screenOffsetTop);
+ position.y = Math.round(event.offsetY / zoom);
+ return position;
+ },
+
+ /**
+ * @param {!Event} event
+ * @return {!{x: number, y: number}}
+ */
+ _convertIntoScreenSpace: function(event)
+ {
+ var position = this._zoomIntoScreenSpace(event);
+ position.y = Math.round(position.y - this._screenOffsetTop);
return position;
},
},
/**
- * @param {!DOMAgent.NodeId} nodeId
+ * @param {?WebInspector.DOMNode} node
* @param {?DOMAgent.HighlightConfig} config
* @param {!RuntimeAgent.RemoteObjectId=} objectId
*/
- highlightDOMNode: function(nodeId, config, objectId)
+ highlightDOMNode: function(node, config, objectId)
{
- this._highlightNodeId = nodeId;
+ this._highlightNode = node;
this._highlightConfig = config;
- if (!nodeId) {
+ if (!node) {
this._model = null;
this._config = null;
this._node = null;
return;
}
- this._node = WebInspector.domModel.nodeForId(nodeId);
- DOMAgent.getBoxModel(nodeId, callback.bind(this));
+ this._node = node;
+ node.boxModel(callback.bind(this));
/**
- * @param {?Protocol.Error} error
- * @param {!DOMAgent.BoxModel} model
+ * @param {?DOMAgent.BoxModel} model
* @this {WebInspector.ScreencastView}
*/
- function callback(error, model)
+ function callback(model)
{
- if (error) {
+ if (!model) {
this._repaint();
return;
}
_createNavigationBar: function()
{
this._navigationBar = this.element.createChild("div", "toolbar-background screencast-navigation");
+ if (WebInspector.queryParam("hideNavigation"))
+ this._navigationBar.classList.add("hidden");
this._navigationBack = this._navigationBar.createChild("button", "back");
this._navigationBack.disabled = true;
var match = url.match(WebInspector.ScreencastView._HttpRegex);
if (match)
url = match[1];
+ InspectorFrontendHost.inspectedURLChanged(url);
this._navigationUrl.value = url;
},
this._rootSplitView.show(rootView.element);
WebInspector.inspectorView.show(this._rootSplitView.sidebarElement());
- this._screencastView = new WebInspector.ScreencastView();
+ var target = /** @type {!WebInspector.Target} */ (WebInspector.targetManager.activeTarget());
+ this._screencastView = new WebInspector.ScreencastView(target);
this._screencastView.show(this._rootSplitView.mainElement());
this._onStatusBarButtonStateChanged("disabled");
projects / platform / framework / web / crosswalk.git / blobdiff