update

node_modules/browser-sync-ui/lib/plugins/connections/connections.client.js

@@ -0,0 +1,69 @@
+(function (angular) {
+
+    const SECTION_NAME = "connections";
+
+    angular
+        .module("BrowserSync")
+        .controller("ConnectionsController", [
+            "pagesConfig",
+            ConnectionsControllers
+        ]);
+
+    /**
+     * @param pagesConfig
+     * @constructor
+     */
+    function ConnectionsControllers(pagesConfig) {
+        var ctrl = this;
+        ctrl.section = pagesConfig[SECTION_NAME];
+    }
+
+    angular
+        .module("BrowserSync")
+        .directive("connectionList", function () {
+            return {
+                restrict:    "E",
+                scope:       {
+                    options:     "="
+                },
+                templateUrl: "connections.directive.html",
+                controller:  ["$scope", "Clients", "Socket", connectionListDirective],
+                controllerAs: "ctrl"
+            };
+        });
+
+    /**
+     * Controller for the URL sync
+     * @param $scope - directive scope
+     * @param Clients
+     * @param Socket
+     */
+    function connectionListDirective($scope, Clients, Socket) {
+
+        var ctrl = this;
+        ctrl.connections = [];
+
+        ctrl.update = function (data) {
+            ctrl.connections = data;
+            $scope.$digest();
+        };
+
+        // Always try to retreive the sockets first time.
+        Socket.getData("clients").then(function (data) {
+            ctrl.connections = data;
+        });
+
+        // Listen to events to update the list on the fly
+        Socket.on("ui:connections:update", ctrl.update);
+
+        $scope.$on("$destroy", function () {
+            Socket.off("ui:connections:update", ctrl.update);
+        });
+
+        ctrl.highlight = function (connection) {
+            Clients.highlight(connection);
+        };
+    }
+
+})(angular);
+

node_modules/browser-sync-ui/lib/plugins/connections/connections.directive.html

@@ -0,0 +1,10 @@
+<ul bs-list="basic" ng-show="ctrl.connections" id="bs-connection-list">
+    <li ng-repeat="connection in ctrl.connections track by connection.id">
+        <p>{{connection.browser.name}} - ({{connection.browser.version}})</p>
+        <!--<span bs-multi-controls="right">
+            <a href="#" ng-click="highlight(connection)" bs-button>
+                <svg bs-svg-icon><use xlink:href="#svg-target"></use></svg> Highlight
+            </a>
+        </span>-->
+    </li>
+</ul>

node_modules/browser-sync-ui/lib/plugins/connections/connections.html

@@ -0,0 +1,18 @@
+<div bs-panel="controls outline">
+    <h1 bs-heading><icon icon="{{section.icon}}"></icon> {{section.title}}</h1>
+</div>
+<div bs-panel ng-if="!ui.connections.length">
+    <div bs-panel-content="basic">
+        <p>Connected devices/browsers will be listed here. If you are not seeing your device in the list,
+        it's probably because the Browsersync script tag is not being loaded on your page.</p>
+        <p>
+            Browsersync works by injecting an asynchronous script tag (<code>&lt;script async&gt;...&lt;/script&gt;</code>) right after the &lt;body&gt; tag during initial request. In order for this to work properly the &lt;body&gt; tag must be present. Alternatively you can provide a custom rule for the snippet using snippetOptions
+        </p>
+    </div>
+</div>
+
+<div bs-skinny>
+    <connection-list ng-if="ui.connections"
+                  options="options"
+                  connections="ui.connections"></connection-list>
+</div>

node_modules/browser-sync-ui/lib/plugins/connections/connections.plugin.js

@@ -0,0 +1,45 @@
+var connections = require("./lib/connections");
+
+const PLUGIN_NAME = "Connections";
+
+/**
+ * @type {{plugin: Function, plugin:name: string, markup: string}}
+ */
+module.exports = {
+    /**
+     * @param {UI} ui
+     * @param {BrowserSync} bs
+     */
+    "plugin": function (ui, bs) {
+        connections.init(ui, bs);
+    },
+    /**
+     * Hooks
+     */
+    "hooks": {
+        "client:js": fileContent("/connections.client.js"),
+        "templates": [
+            getPath("/connections.directive.html")
+        ]
+    },
+    /**
+     * Plugin name
+     */
+    "plugin:name": PLUGIN_NAME
+};
+
+/**
+ * @param filepath
+ * @returns {*}
+ */
+function getPath (filepath) {
+    return require("path").join(__dirname, filepath);
+}
+
+/**
+ * @param filepath
+ * @returns {*}
+ */
+function fileContent (filepath) {
+    return require("fs").readFileSync(getPath(filepath), "utf-8");
+}

node_modules/browser-sync-ui/lib/plugins/connections/lib/connections.js

@@ -0,0 +1,132 @@
+var Immutable = require("immutable");
+
+/**
+ * Track connected clients
+ * @param {UI} ui
+ * @param {BrowserSync} bs
+ */
+module.exports.init = function (ui, bs) {
+
+    var uaParser = new bs.utils.UAParser();
+
+    var currentConnections = [];
+
+    ui.clients.on("connection", function (client) {
+        client.on("client:heartbeat", function (data) {
+            var match;
+            if (currentConnections.some(function (item, index) {
+                    if (item.id === client.id) {
+                        match = index;
+                        return true;
+                    }
+                    return false;
+                })) {
+                if (typeof match === "number") {
+                    currentConnections[match].timestamp = new Date().getTime();
+                    currentConnections[match].data = data;
+                }
+            } else {
+                currentConnections.push({
+                    id: client.id,
+                    timestamp: new Date().getTime(),
+                    browser: uaParser.setUA(client.handshake.headers["user-agent"]).getBrowser(),
+                    data: data
+                });
+            }
+        });
+    });
+
+    var registry;
+    var temp;
+    var initialSent;
+
+    var int = setInterval(function () {
+
+        var sockets = ui.clients.sockets;
+        var keys = Object.keys(sockets);
+
+        if (keys.length) {
+            temp = Immutable.List(keys.map(function (clientKey) {
+                var currentClient = sockets[clientKey];
+                return Immutable.fromJS({
+                    id: currentClient.id,
+                    browser: uaParser.setUA(currentClient.handshake.headers["user-agent"]).getBrowser()
+                });
+            }));
+            if (!registry) {
+                registry = temp;
+                sendUpdated(ui.socket, decorateClients(registry.toJS(), currentConnections));
+            } else {
+                if (Immutable.is(registry, temp)) {
+                    if (!initialSent) {
+                        sendUpdated(ui.socket, decorateClients(registry.toJS(), currentConnections));
+                        initialSent = true;
+                    }
+                } else {
+                    registry = temp;
+                    sendUpdated(ui.socket, decorateClients(registry.toJS(), currentConnections));
+                }
+            }
+        } else {
+            sendUpdated(ui.socket, []);
+        }
+
+    }, 1000);
+
+    bs.registerCleanupTask(function () {
+        clearInterval(int);
+    });
+};
+
+
+/**
+ * Use heart-beated data to decorate clients
+ * @param clients
+ * @param clientsInfo
+ * @returns {*}
+ */
+function decorateClients(clients, clientsInfo) {
+    return clients.map(function (item) {
+        clientsInfo.forEach(function (client) {
+            if (client.id === item.id) {
+                item.data = client.data;
+                return false;
+            }
+        });
+        return item;
+    });
+}
+
+/**
+ * @param socket
+ * @param connectedClients
+ */
+function sendUpdated(socket, connectedClients) {
+    socket.emit("ui:connections:update", connectedClients);
+}
+
+/**
+ * @param clients
+ * @param data
+ */
+//function highlightClient (clients, data) {
+//    var socket = getClientById(clients, data.id);
+//    if (socket) {
+//        socket.emit("highlight");
+//    }
+//}
+
+/**
+ * @param clients
+ * @param id
+ */
+//function getClientById (clients, id) {
+//    var match;
+//    clients.sockets.some(function (item, i) {
+//        if (item.id === id) {
+//            match = clients.sockets[i];
+//            return true;
+//        }
+//    });
+//    return match;
+//}