Added Reverse Inspect in Live Preview using WebSockets, and now forwa… (

adobe#13044)

* Added Reverse Inspect in Live Preview using WebSockets, and now forward inspect brings the html element in focus to the viewport in Live Preview

* Added commands to start and close the WebSocketServer used in Live Preview and also now port is read from preferences file

* Addressed review comments- used window.scrollTo instead of scrollIntoViewIfNeeded, added a check for port number in RemoteFunctions and some minor changes

* Added dependency of ws in the root directory

* Used window.document instead of defining global document in RemoteFunctions.js

* Added JSDoc description in WebSocketTransportDomain.js and used lodash instead of for loop in HTMLInstrumentation.js

* Added copy task of copying LiveDevelopment/transports to dist

Gruntfile.js

@@ -69,6 +69,7 @@ module.exports = function (grunt) {
                             'dependencies.js',
                             'thirdparty/requirejs/require.js',
                             'LiveDevelopment/launch.html',
+                            'LiveDevelopment/transports/**',
                             'LiveDevelopment/MultiBrowserImpl/transports/**',
                             'LiveDevelopment/MultiBrowserImpl/launchers/**'
                         ]

package.json

@@ -15,7 +15,8 @@
     "dependencies": {
         "anymatch": "1.3.0",
         "chokidar": "1.6.0",
-        "lodash": "4.15.0"
+        "lodash": "4.15.0",
+        "ws": "~0.4.31"
     },
     "devDependencies": {
         "glob": "7.0.6",

src/LiveDevelopment/Agents/RemoteAgent.js

@@ -33,10 +33,11 @@
 define(function RemoteAgent(require, exports, module) {
     "use strict";
 
-    var LiveDevelopment = require("LiveDevelopment/LiveDevelopment"),
-        EventDispatcher = require("utils/EventDispatcher"),
-        Inspector       = require("LiveDevelopment/Inspector/Inspector"),
-        RemoteFunctions = require("text!LiveDevelopment/Agents/RemoteFunctions.js");
+    var LiveDevelopment     = require("LiveDevelopment/LiveDevelopment"),
+        EventDispatcher     = require("utils/EventDispatcher"),
+        Inspector           = require("LiveDevelopment/Inspector/Inspector"),
+        RemoteFunctions     = require("text!LiveDevelopment/Agents/RemoteFunctions.js"),
+        PreferencesManager  = require("preferences/PreferencesManager");
 
     var _load; // deferred load
     var _objectId; // the object id of the remote object
@@ -130,7 +131,7 @@ define(function RemoteAgent(require, exports, module) {
         _stopKeepAliveInterval();
 
         // inject RemoteFunctions
-        var command = "window._LD=" + RemoteFunctions + "(" + LiveDevelopment.config.experimental + ");";
+        var command = "window._LD=" + RemoteFunctions + "(" + LiveDevelopment.config.experimental + "," + PreferencesManager.get("livedev.wsPort") + ");";
 
         Inspector.Runtime.evaluate(command, function onEvaluate(response) {
             if (response.error || response.wasThrown) {

src/LiveDevelopment/Agents/RemoteFunctions.js

@@ -30,7 +30,7 @@
  * modules should define a single function that returns an object of all
  * exported functions.
  */
-function RemoteFunctions(experimental) {
+function RemoteFunctions(experimental, remoteWSPort) {
     "use strict";
 
     var lastKeepAliveTime = Date.now();
@@ -98,6 +98,23 @@ function RemoteFunctions(experimental) {
             element.removeAttribute(key);
         }
     }
+
+    // Checks if the element is in Viewport in the client browser
+    function isInViewport(element) {
+        var rect = element.getBoundingClientRect();
+        var html = window.document.documentElement;
+        return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || html.clientHeight) &&
+            rect.right <= (window.innerWidth || html.clientWidth)
+        );
+    }
+
+    // returns the distance from the top of the closest relatively positioned parent element
+    function getDocumentOffsetTop(element) {
+        return element.offsetTop + (element.offsetParent ? getDocumentOffsetTop(element.offsetParent) : 0);
+    }
 
     // construct the info menu
     function Menu(element) {
@@ -319,6 +336,14 @@ function RemoteFunctions(experimental) {
             if (this.trigger) {
                 _trigger(element, "highlight", 1);
             }
+
+            if (!window.event && !isInViewport(element)) {
+                var top = getDocumentOffsetTop(element);
+                if (top) {
+                    top -= (window.innerHeight / 2);
+                    window.scrollTo(0, top);
+                }
+            }
             this.elements.push(element);
 
             this._makeHighlightDiv(element, doAnimation);
@@ -824,7 +849,42 @@ function RemoteFunctions(experimental) {
     if (experimental) {
         window.document.addEventListener("keydown", onKeyDown);
     }
-
+
+    var _ws = null;
+
+    function onDocumentClick(event) {
+        var element = event.target,
+            currentDataId,
+            newDataId;
+
+        if (_ws && element && element.hasAttribute('data-brackets-id')) {
+            _ws.send(JSON.stringify({
+                type: "message",
+                message: element.getAttribute('data-brackets-id')
+            }));
+        }
+    }
+
+
+    function createWebSocket() {
+        _ws = new WebSocket("ws://localhost:" + remoteWSPort);
+        _ws.onopen = function () {
+            window.document.addEventListener("click", onDocumentClick);
+        };
+
+        _ws.onmessage = function (evt) {
+        };
+
+        _ws.onclose = function () {
+            // websocket is closed
+            window.document.removeEventListener("click", onDocumentClick);
+        };
+    }
+
+    if (remoteWSPort) {
+        createWebSocket();
+    }
+
     return {
         "DOMEditHandler"        : DOMEditHandler,
         "keepAlive"             : keepAlive,

src/LiveDevelopment/LiveDevelopment.js

@@ -94,7 +94,9 @@ define(function LiveDevelopment(require, exports, module) {
         ProjectManager       = require("project/ProjectManager"),
         Strings              = require("strings"),
         StringUtils          = require("utils/StringUtils"),
-        UserServer           = require("LiveDevelopment/Servers/UserServer").UserServer;
+        UserServer           = require("LiveDevelopment/Servers/UserServer").UserServer,
+        WebSocketTransport   = require("LiveDevelopment/transports/WebSocketTransport"),
+        PreferencesManager   = require("preferences/PreferencesManager");
 
     // Inspector
     var Inspector       = require("LiveDevelopment/Inspector/Inspector");
@@ -195,6 +197,10 @@ define(function LiveDevelopment(require, exports, module) {
      * Handles of registered servers
      */
     var _regServers = [];
+
+    PreferencesManager.definePreference("livedev.wsPort", "number", 8125, {
+        description: Strings.DESCRIPTION_LIVEDEV_WEBSOCKET_PORT
+    });
 
     function _isPromisePending(promise) {
         return promise && promise.state() === "pending";
@@ -849,6 +855,7 @@ define(function LiveDevelopment(require, exports, module) {
      * @return {jQuery.Promise} Always return a resolved promise once the connection is closed
      */
     function _close(doCloseWindow, reason) {
+        WebSocketTransport.closeWebSocketServer();
         if (_closeDeferred) {
             return _closeDeferred;
         } else {
@@ -1362,6 +1369,7 @@ define(function LiveDevelopment(require, exports, module) {
             // wait for server (StaticServer, Base URL or file:)
             prepareServerPromise
                 .done(function () {
+                    WebSocketTransport.createWebSocketServer(PreferencesManager.get("livedev.wsPort"));
                     _doLaunchAfterServerReady(doc);
                 })
                 .fail(function () {

src/LiveDevelopment/transports/WebSocketTransport.js

@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) 2017 - present Adobe Systems Incorporated. All rights reserved.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"),
+ * to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ *
+ */
+
+/** 
+ * This transport provides a WebSocket connection between Brackets and a live browser preview.
+ * This is just a thin wrapper around the Node extension (WebSocketTransportDomain) that actually
+ * provides the WebSocket server and handles the communication. We also rely on an injected script in
+ * the browser for the other end of the transport.
+ */
+
+define(function (require, exports, module) {
+    "use strict";
+
+    var FileUtils           = require("file/FileUtils"),
+        NodeDomain          = require("utils/NodeDomain"),
+        EditorManager       = require("editor/EditorManager"),
+        HTMLInstrumentation = require("language/HTMLInstrumentation");
+
+    // The node extension that actually provides the WebSocket server.
+
+    var domainPath = FileUtils.getNativeBracketsDirectoryPath() + "/" + FileUtils.getNativeModuleDirectoryPath(module) + "/node/WebSocketTransportDomain";
+
+    var WebSocketTransportDomain = new NodeDomain("webSocketTransport", domainPath);
+
+    // Events
+
+    WebSocketTransportDomain.on("message", function (obj, message) {
+        console.log("WebSocketTransport - event - message" + " - " + message);
+        var editor = EditorManager.getActiveEditor(),
+            position = HTMLInstrumentation.getPositionFromTagId(editor, parseInt(message, 10));
+        if (position) {
+            editor.setCursorPos(position.line, position.ch, true);
+        }
+    });
+
+    function createWebSocketServer(port) {
+        WebSocketTransportDomain.exec("start", parseInt(port, 10));
+    }
+
+    function closeWebSocketServer() {
+        WebSocketTransportDomain.exec("close");
+    }
+
+    exports.createWebSocketServer = createWebSocketServer;
+    exports.closeWebSocketServer  = closeWebSocketServer;
+});