| /* |
| * Copyright (C) 2013 Google Inc. All rights reserved. |
| * |
| * Redistribution and use in source and binary forms, with or without |
| * modification, are permitted provided that the following conditions are |
| * met: |
| * |
| * * Redistributions of source code must retain the above copyright |
| * notice, this list of conditions and the following disclaimer. |
| * * Redistributions in binary form must reproduce the above |
| * copyright notice, this list of conditions and the following disclaimer |
| * in the documentation and/or other materials provided with the |
| * distribution. |
| * * Neither the name of Google Inc. nor the names of its |
| * contributors may be used to endorse or promote products derived from |
| * this software without specific prior written permission. |
| * |
| * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS |
| * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT |
| * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR |
| * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT |
| * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, |
| * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT |
| * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
| * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
| * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
| * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| */ |
| |
| /** |
| * @constructor |
| * @extends {WebInspector.VBox} |
| * @implements {WebInspector.DOMNodeHighlighter} |
| * @param {!WebInspector.Target} target |
| * @param {!WebInspector.ResourceTreeModel} resourceTreeModel |
| */ |
| WebInspector.ScreencastView = function(target, resourceTreeModel) |
| { |
| WebInspector.VBox.call(this); |
| this._target = target; |
| this._domModel = WebInspector.DOMModel.fromTarget(target); |
| this._resourceTreeModel = resourceTreeModel; |
| |
| this.setMinimumSize(150, 150); |
| this.registerRequiredCSS("screencast/screencastView.css"); |
| }; |
| |
| WebInspector.ScreencastView._bordersSize = 44; |
| |
| WebInspector.ScreencastView._navBarHeight = 29; |
| |
| WebInspector.ScreencastView._HttpRegex = /^http:\/\/(.+)/; |
| |
| 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 = /** !Object.<number, function(Event=):boolean> */ ({}); |
| this._shortcuts[WebInspector.KeyboardShortcut.makeKey("l", WebInspector.KeyboardShortcut.Modifiers.Ctrl)] = this._focusNavigationBar.bind(this); |
| |
| this._resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.Events.ScreencastFrame, this._screencastFrame, this); |
| this._resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.Events.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._target.emulationAgent().setTouchEmulationEnabled(true); |
| this._domModel.setHighlighter(this); |
| }, |
| |
| _stopCasting: function() |
| { |
| if (!this._isCasting) |
| return; |
| this._isCasting = false; |
| this._target.pageAgent().stopScreencast(); |
| this._target.emulationAgent().setTouchEmulationEnabled(false); |
| this._domModel.setHighlighter(null); |
| }, |
| |
| /** |
| * @param {!WebInspector.Event} event |
| */ |
| _screencastFrame: function(event) |
| { |
| var metadata = /** type {PageAgent.ScreencastFrameMetadata} */(event.data.metadata); |
| var base64Data = /** type {string} */(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; |
| |
| 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"); |
| }, |
| |
| /** |
| * @param {!WebInspector.Event} event |
| */ |
| _screencastVisibilityChanged: function(event) |
| { |
| this._targetInactive = !event.data.visible; |
| this._updateGlasspane(); |
| }, |
| |
| /** |
| * @param {!WebInspector.Event} event |
| */ |
| _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"); |
| } |
| }, |
| |
| /** |
| * @param {!Event} event |
| */ |
| _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)); |
| |
| /** |
| * @param {?WebInspector.DOMNode} node |
| * @this {WebInspector.ScreencastView} |
| */ |
| 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); |
| } |
| } |
| }, |
| |
| /** |
| * @param {!Event} event |
| */ |
| _handleKeyEvent: function(event) |
| { |
| if (this._isGlassPaneActive()) { |
| event.consume(); |
| return; |
| } |
| |
| var shortcutKey = WebInspector.KeyboardShortcut.makeKeyFromEvent(/** @type {!KeyboardEvent} */ (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(); |
| }, |
| |
| /** |
| * @param {!Event} event |
| */ |
| _handleContextMenuEvent: function(event) |
| { |
| event.consume(true); |
| }, |
| |
| /** |
| * @param {!Event} event |
| */ |
| _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); |
| }, |
| |
| /** |
| * @param {!Event} event |
| */ |
| _handleBlurEvent: function(event) |
| { |
| if (typeof this._eventScreenOffsetTop !== "undefined") { |
| var params = this._eventParams; |
| delete this._eventParams; |
| params.type = "mouseReleased"; |
| this._target.inputAgent().invoke_emulateTouchFromMouseEvent(params); |
| } |
| }, |
| |
| /** |
| * @param {!Event} event |
| * @return {!{x: number, y: number}} |
| */ |
| _zoomIntoScreenSpace: function(event) |
| { |
| var position = {}; |
| position.x = Math.round(event.offsetX / this._screenZoom); |
| position.y = Math.round(event.offsetY / this._screenZoom); |
| 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 {!Event} event |
| * @return {number} |
| */ |
| _modifiersForEvent: function(event) |
| { |
| var modifiers = 0; |
| if (event.altKey) |
| modifiers = 1; |
| if (event.ctrlKey) |
| modifiers += 2; |
| if (event.metaKey) |
| modifiers += 4; |
| if (event.shiftKey) |
| modifiers += 8; |
| return modifiers; |
| }, |
| |
| onResize: function() |
| { |
| if (this._deferredCasting) { |
| clearTimeout(this._deferredCasting); |
| delete this._deferredCasting; |
| } |
| |
| this._stopCasting(); |
| this._deferredCasting = setTimeout(this._startCasting.bind(this), 100); |
| }, |
| |
| /** |
| * @override |
| * @param {?WebInspector.DOMNode} node |
| * @param {?DOMAgent.HighlightConfig} config |
| * @param {!DOMAgent.BackendNodeId=} backendNodeId |
| * @param {!RuntimeAgent.RemoteObjectId=} objectId |
| */ |
| highlightDOMNode: function(node, config, backendNodeId, objectId) |
| { |
| this._highlightNode = node; |
| this._highlightConfig = config; |
| if (!node) { |
| this._model = null; |
| this._config = null; |
| this._node = null; |
| this._titleElement.classList.add("hidden"); |
| this._repaint(); |
| return; |
| } |
| |
| this._node = node; |
| node.boxModel(callback.bind(this)); |
| |
| /** |
| * @param {?DOMAgent.BoxModel} model |
| * @this {WebInspector.ScreencastView} |
| */ |
| function callback(model) |
| { |
| if (!model || !this._pageScaleFactor) { |
| this._repaint(); |
| return; |
| } |
| this._model = this._scaleModel(model); |
| this._config = config; |
| this._repaint(); |
| } |
| }, |
| |
| /** |
| * @param {!DOMAgent.BoxModel} model |
| * @return {!DOMAgent.BoxModel} |
| */ |
| _scaleModel: function(model) |
| { |
| /** |
| * @param {!DOMAgent.Quad} quad |
| * @this {WebInspector.ScreencastView} |
| */ |
| function scaleQuad(quad) |
| { |
| for (var i = 0; i < quad.length; i += 2) { |
| quad[i] = quad[i] * this._screenZoom; |
| quad[i + 1] = (quad[i + 1] + this._screenOffsetTop) * this._screenZoom; |
| } |
| } |
| |
| scaleQuad.call(this, model.content); |
| scaleQuad.call(this, model.padding); |
| scaleQuad.call(this, model.border); |
| scaleQuad.call(this, model.margin); |
| return model; |
| }, |
| |
| _repaint: function() |
| { |
| var model = this._model; |
| var config = this._config; |
| |
| var canvasWidth = this._canvasElement.getBoundingClientRect().width; |
| var canvasHeight = this._canvasElement.getBoundingClientRect().height; |
| this._canvasElement.width = window.devicePixelRatio * canvasWidth; |
| this._canvasElement.height = window.devicePixelRatio * canvasHeight; |
| |
| this._context.save(); |
| this._context.scale(window.devicePixelRatio, window.devicePixelRatio); |
| |
| // Paint top and bottom gutter. |
| this._context.save(); |
| this._context.fillStyle = this._checkerboardPattern; |
| this._context.fillRect(0, 0, canvasWidth, this._screenOffsetTop * this._screenZoom); |
| this._context.fillRect(0, this._screenOffsetTop * this._screenZoom + this._imageElement.naturalHeight * this._imageZoom, canvasWidth, canvasHeight); |
| this._context.restore(); |
| |
| if (model && config) { |
| this._context.save(); |
| const transparentColor = "rgba(0, 0, 0, 0)"; |
| var quads = []; |
| if (model.content && config.contentColor !== transparentColor) |
| quads.push({quad: model.content, color: config.contentColor}); |
| if (model.padding && config.paddingColor !== transparentColor) |
| quads.push({quad: model.padding, color: config.paddingColor}); |
| if (model.border && config.borderColor !== transparentColor) |
| quads.push({quad: model.border, color: config.borderColor}); |
| if (model.margin && config.marginColor !== transparentColor) |
| quads.push({quad: model.margin, color: config.marginColor}); |
| |
| for (var i = quads.length - 1; i > 0; --i) |
| this._drawOutlinedQuadWithClip(quads[i].quad, quads[i - 1].quad, quads[i].color); |
| if (quads.length > 0) |
| this._drawOutlinedQuad(quads[0].quad, quads[0].color); |
| this._context.restore(); |
| |
| this._drawElementTitle(); |
| |
| this._context.globalCompositeOperation = "destination-over"; |
| } |
| |
| this._context.drawImage(this._imageElement, 0, this._screenOffsetTop * this._screenZoom, this._imageElement.naturalWidth * this._imageZoom, this._imageElement.naturalHeight * this._imageZoom); |
| this._context.restore(); |
| |
| }, |
| |
| /** |
| * @param {!DOMAgent.RGBA} color |
| * @return {string} |
| */ |
| _cssColor: function(color) |
| { |
| if (!color) |
| return "transparent"; |
| return WebInspector.Color.fromRGBA([color.r, color.g, color.b, color.a]).asString(WebInspector.Color.Format.RGBA) || ""; |
| }, |
| |
| /** |
| * @param {!DOMAgent.Quad} quad |
| * @return {!CanvasRenderingContext2D} |
| */ |
| _quadToPath: function(quad) |
| { |
| this._context.beginPath(); |
| this._context.moveTo(quad[0], quad[1]); |
| this._context.lineTo(quad[2], quad[3]); |
| this._context.lineTo(quad[4], quad[5]); |
| this._context.lineTo(quad[6], quad[7]); |
| this._context.closePath(); |
| return this._context; |
| }, |
| |
| /** |
| * @param {!DOMAgent.Quad} quad |
| * @param {!DOMAgent.RGBA} fillColor |
| */ |
| _drawOutlinedQuad: function(quad, fillColor) |
| { |
| this._context.save(); |
| this._context.lineWidth = 2; |
| this._quadToPath(quad).clip(); |
| this._context.fillStyle = this._cssColor(fillColor); |
| this._context.fill(); |
| this._context.restore(); |
| }, |
| |
| /** |
| * @param {!DOMAgent.Quad} quad |
| * @param {!DOMAgent.Quad} clipQuad |
| * @param {!DOMAgent.RGBA} fillColor |
| */ |
| _drawOutlinedQuadWithClip: function(quad, clipQuad, fillColor) |
| { |
| this._context.fillStyle = this._cssColor(fillColor); |
| this._context.save(); |
| this._context.lineWidth = 0; |
| this._quadToPath(quad).fill(); |
| this._context.globalCompositeOperation = "destination-out"; |
| this._context.fillStyle = "red"; |
| this._quadToPath(clipQuad).fill(); |
| this._context.restore(); |
| }, |
| |
| _drawElementTitle: function() |
| { |
| if (!this._node) |
| return; |
| |
| var canvasWidth = this._canvasElement.getBoundingClientRect().width; |
| var canvasHeight = this._canvasElement.getBoundingClientRect().height; |
| |
| var lowerCaseName = this._node.localName() || this._node.nodeName().toLowerCase(); |
| this._tagNameElement.textContent = lowerCaseName; |
| this._nodeIdElement.textContent = this._node.getAttribute("id") ? "#" + this._node.getAttribute("id") : ""; |
| this._nodeIdElement.textContent = this._node.getAttribute("id") ? "#" + this._node.getAttribute("id") : ""; |
| var className = this._node.getAttribute("class"); |
| if (className && className.length > 50) |
| className = className.substring(0, 50) + "\u2026"; |
| this._classNameElement.textContent = className || ""; |
| this._nodeWidthElement.textContent = this._model.width; |
| this._nodeHeightElement.textContent = this._model.height; |
| |
| this._titleElement.classList.remove("hidden"); |
| var titleWidth = this._titleElement.offsetWidth + 6; |
| var titleHeight = this._titleElement.offsetHeight + 4; |
| |
| var anchorTop = this._model.margin[1]; |
| var anchorBottom = this._model.margin[7]; |
| |
| const arrowHeight = 7; |
| var renderArrowUp = false; |
| var renderArrowDown = false; |
| |
| var boxX = Math.max(2, this._model.margin[0]); |
| if (boxX + titleWidth > canvasWidth) |
| boxX = canvasWidth - titleWidth - 2; |
| |
| var boxY; |
| if (anchorTop > canvasHeight) { |
| boxY = canvasHeight - titleHeight - arrowHeight; |
| renderArrowDown = true; |
| } else if (anchorBottom < 0) { |
| boxY = arrowHeight; |
| renderArrowUp = true; |
| } else if (anchorBottom + titleHeight + arrowHeight < canvasHeight) { |
| boxY = anchorBottom + arrowHeight - 4; |
| renderArrowUp = true; |
| } else if (anchorTop - titleHeight - arrowHeight > 0) { |
| boxY = anchorTop - titleHeight - arrowHeight + 3; |
| renderArrowDown = true; |
| } else |
| boxY = arrowHeight; |
| |
| this._context.save(); |
| this._context.translate(0.5, 0.5); |
| this._context.beginPath(); |
| this._context.moveTo(boxX, boxY); |
| if (renderArrowUp) { |
| this._context.lineTo(boxX + 2 * arrowHeight, boxY); |
| this._context.lineTo(boxX + 3 * arrowHeight, boxY - arrowHeight); |
| this._context.lineTo(boxX + 4 * arrowHeight, boxY); |
| } |
| this._context.lineTo(boxX + titleWidth, boxY); |
| this._context.lineTo(boxX + titleWidth, boxY + titleHeight); |
| if (renderArrowDown) { |
| this._context.lineTo(boxX + 4 * arrowHeight, boxY + titleHeight); |
| this._context.lineTo(boxX + 3 * arrowHeight, boxY + titleHeight + arrowHeight); |
| this._context.lineTo(boxX + 2 * arrowHeight, boxY + titleHeight); |
| } |
| this._context.lineTo(boxX, boxY + titleHeight); |
| this._context.closePath(); |
| this._context.fillStyle = "rgb(255, 255, 194)"; |
| this._context.fill(); |
| this._context.strokeStyle = "rgb(128, 128, 128)"; |
| this._context.stroke(); |
| |
| this._context.restore(); |
| |
| this._titleElement.style.top = (boxY + 3) + "px"; |
| this._titleElement.style.left = (boxX + 3) + "px"; |
| }, |
| |
| /** |
| * @return {!{width: number, height: number}} |
| */ |
| _viewportDimensions: function() |
| { |
| const gutterSize = 30; |
| const bordersSize = WebInspector.ScreencastView._bordersSize; |
| var width = this.element.offsetWidth - bordersSize - gutterSize; |
| var height = this.element.offsetHeight - bordersSize - gutterSize - WebInspector.ScreencastView._navBarHeight; |
| return { width: width, height: height }; |
| }, |
| |
| /** |
| * @override |
| * @param {!DOMAgent.InspectMode} mode |
| * @param {!DOMAgent.HighlightConfig} config |
| * @param {function(?Protocol.Error)=} callback |
| */ |
| setInspectMode: function(mode, config, callback) |
| { |
| this._inspectModeConfig = mode !== DOMAgent.InspectMode.None ? config : null; |
| if (callback) |
| callback(null); |
| }, |
| |
| /** |
| * @override |
| * @param {!PageAgent.FrameId} frameId |
| */ |
| highlightFrame: function(frameId) |
| { |
| }, |
| |
| /** |
| * @param {!CanvasRenderingContext2D} context |
| */ |
| _createCheckerboardPattern: function(context) |
| { |
| var pattern = /** @type {!HTMLCanvasElement} */(createElement("canvas")); |
| const size = 32; |
| pattern.width = size * 2; |
| pattern.height = size * 2; |
| var pctx = pattern.getContext("2d"); |
| |
| pctx.fillStyle = "rgb(195, 195, 195)"; |
| pctx.fillRect(0, 0, size * 2, size * 2); |
| |
| pctx.fillStyle = "rgb(225, 225, 225)"; |
| pctx.fillRect(0, 0, size, size); |
| pctx.fillRect(size, size, size, size); |
| return context.createPattern(pattern, "repeat"); |
| }, |
| |
| _createNavigationBar: function() |
| { |
| this._navigationBar = this.element.createChild("div", "screencast-navigation"); |
| |
| this._navigationBack = this._navigationBar.createChild("button", "back"); |
| this._navigationBack.disabled = true; |
| this._navigationBack.addEventListener("click", this._navigateToHistoryEntry.bind(this, -1), false); |
| |
| this._navigationForward = this._navigationBar.createChild("button", "forward"); |
| this._navigationForward.disabled = true; |
| this._navigationForward.addEventListener("click", this._navigateToHistoryEntry.bind(this, 1), false); |
| |
| this._navigationReload = this._navigationBar.createChild("button", "reload"); |
| this._navigationReload.addEventListener("click", this._navigateReload.bind(this), false); |
| |
| this._navigationUrl = this._navigationBar.createChild("input"); |
| this._navigationUrl.type = "text"; |
| this._navigationUrl.addEventListener("keyup", this._navigationUrlKeyUp.bind(this), true); |
| |
| this._navigationProgressBar = new WebInspector.ScreencastView.ProgressTracker(this._navigationBar.createChild("div", "progress")); |
| |
| this._requestNavigationHistory(); |
| WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Events.InspectedURLChanged, this._requestNavigationHistory, this); |
| }, |
| |
| _navigateToHistoryEntry: function(offset) |
| { |
| var newIndex = this._historyIndex + offset; |
| if (newIndex < 0 || newIndex >= this._historyEntries.length) |
| return; |
| this._target.pageAgent().navigateToHistoryEntry(this._historyEntries[newIndex].id); |
| this._requestNavigationHistory(); |
| }, |
| |
| _navigateReload: function() |
| { |
| this._resourceTreeModel.reloadPage(); |
| }, |
| |
| _navigationUrlKeyUp: function(event) |
| { |
| if (event.key !== "Enter") |
| return; |
| var url = this._navigationUrl.value; |
| if (!url) |
| return; |
| if (!url.match(WebInspector.ScreencastView._SchemeRegex)) |
| url = "http://" + url; |
| this._target.pageAgent().navigate(url); |
| this._canvasElement.focus(); |
| }, |
| |
| _requestNavigationHistory: function() |
| { |
| this._target.pageAgent().getNavigationHistory(this._onNavigationHistory.bind(this)); |
| }, |
| |
| _onNavigationHistory: function(error, currentIndex, entries) |
| { |
| if (error) |
| return; |
| |
| this._historyIndex = currentIndex; |
| this._historyEntries = entries; |
| |
| this._navigationBack.disabled = currentIndex === 0; |
| this._navigationForward.disabled = currentIndex === (entries.length - 1); |
| |
| var url = entries[currentIndex].url; |
| var match = url.match(WebInspector.ScreencastView._HttpRegex); |
| if (match) |
| url = match[1]; |
| InspectorFrontendHost.inspectedURLChanged(url); |
| this._navigationUrl.value = url; |
| }, |
| |
| _focusNavigationBar: function() |
| { |
| this._navigationUrl.focus(); |
| this._navigationUrl.select(); |
| return true; |
| }, |
| |
| __proto__: WebInspector.VBox.prototype |
| } |
| |
| /** |
| * @param {!Element} element |
| * @constructor |
| */ |
| WebInspector.ScreencastView.ProgressTracker = function(element) |
| { |
| this._element = element; |
| |
| WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.Events.MainFrameNavigated, this._onMainFrameNavigated, this); |
| WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.Events.Load, this._onLoad, this); |
| WebInspector.targetManager.addModelListener(WebInspector.NetworkManager, WebInspector.NetworkManager.Events.RequestStarted, this._onRequestStarted, this); |
| WebInspector.targetManager.addModelListener(WebInspector.NetworkManager, WebInspector.NetworkManager.Events.RequestFinished, this._onRequestFinished, this); |
| } |
| |
| WebInspector.ScreencastView.ProgressTracker.prototype = { |
| _onMainFrameNavigated: function() |
| { |
| this._requestIds = {}; |
| this._startedRequests = 0; |
| this._finishedRequests = 0; |
| this._maxDisplayedProgress = 0; |
| this._updateProgress(0.1); // Display first 10% on navigation start. |
| }, |
| |
| _onLoad: function() |
| { |
| delete this._requestIds; |
| this._updateProgress(1); // Display 100% progress on load, hide it in 0.5s. |
| setTimeout(function() { |
| if (!this._navigationProgressVisible()) |
| this._displayProgress(0); |
| }.bind(this), 500); |
| }, |
| |
| _navigationProgressVisible: function() |
| { |
| return !!this._requestIds; |
| }, |
| |
| _onRequestStarted: function(event) |
| { |
| if (!this._navigationProgressVisible()) |
| return; |
| var request = /** @type {!WebInspector.NetworkRequest} */ (event.data); |
| // Ignore long-living WebSockets for the sake of progress indicator, as we won't be waiting them anyway. |
| if (request.type === WebInspector.resourceTypes.WebSocket) |
| return; |
| this._requestIds[request.requestId] = request; |
| ++this._startedRequests; |
| }, |
| |
| _onRequestFinished: function(event) |
| { |
| if (!this._navigationProgressVisible()) |
| return; |
| var request = /** @type {!WebInspector.NetworkRequest} */ (event.data); |
| if (!(request.requestId in this._requestIds)) |
| return; |
| ++this._finishedRequests; |
| setTimeout(function() { |
| this._updateProgress(this._finishedRequests / this._startedRequests * 0.9); // Finished requests drive the progress up to 90%. |
| }.bind(this), 500); // Delay to give the new requests time to start. This makes the progress smoother. |
| }, |
| |
| _updateProgress: function(progress) |
| { |
| if (!this._navigationProgressVisible()) |
| return; |
| if (this._maxDisplayedProgress >= progress) |
| return; |
| this._maxDisplayedProgress = progress; |
| this._displayProgress(progress); |
| }, |
| |
| _displayProgress: function(progress) |
| { |
| this._element.style.width = (100 * progress) + "%"; |
| } |
| }; |
