Add: web socket status

.gitignore

@@ -104,3 +104,7 @@ typings/
 
 # NightwatchJS tests output
 tests_output/
+
+# build output
+dist/
+.DS_Store

src/panel/css/panel.css

@@ -11,8 +11,9 @@ body {
     margin: 0px;
 }
 
-.explore-container {
-    align-items: center;
+#socket-status {
+    display: flex;
+    flex-direction: row;
 }
 
 header {
@@ -33,6 +34,12 @@ header {
     padding-right: 10px;
 }
 
+.explore-container {
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+}
+
 .container1 {
     display: flex;
     flex-direction: row;
@@ -215,4 +222,20 @@ footer .heading2 {
     font-style: normal;
     font-weight: 400;
     font-size: 16px;
-}
+}
+
+#socket-status .socket {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    border-radius: 81px;
+    border: 1px solid hsl(23,35%,55%);
+    background: hsla(0,55%,94%,0.5);
+    padding: 8px;
+    box-sizing: border-box;
+}
+
+#socket-disconnected {
+    display: none;
+}

src/panel/index.html

@@ -17,6 +17,16 @@
               <input type="checkbox" id="exploreMode">
               <div class="heading2">Explore Mode</div>
           </div>
+          <div id="socket-status">
+            <div class="socket" id="socket-connected">
+                <img src="./icons/check.svg"></img>
+                <div class="heading2">Connected</div>
+            </div>
+            <div class="socket" id="socket-disconnected">
+                <img src="./icons/not-check.svg"></img>
+                <div class="heading2">Disconnected</div>
+            </div>
+          </div>
         </div>
 
         <div class="container">

src/panel/js/websocket.js

@@ -11,14 +11,17 @@ function connectWebSocket(port) {
     const socket = new WebSocket(`ws://localhost:${port}`);
     socket.onopen = () => {
       resolve(socket);
-
+      document.getElementById('socket-connected').style.display = 'flex';
+      document.getElementById('socket-disconnected').style.display = 'none';
       // eslint-disable-next-line no-console
       console.log(`Hurray, Connected to Nightwatch Server localhost:${port}`);
       socket.send('commandlist');
       webSocket = socket;
     };
 
     socket.onclose = () => {
+      document.getElementById('socket-connected').style.display = 'none';
+      document.getElementById('socket-disconnected').style.display = 'flex';
       // eslint-disable-next-line no-console
       console.log(`Disconnected from Nightwatch Server localhost:${port}`);
     };
@@ -46,8 +49,14 @@ function connectWebSocket(port) {
 
     socket.onerror = (err) => {
       console.error(`WebSocket error: ${err}`);
+      document.getElementById('socket-connected').style.display = 'none';
+      document.getElementById('socket-disconnected').style.display = 'flex';
       socket.close();
 
+      if (port > portNumber + 15) {
+        return;
+      }
+
       connectWebSocket(port + 1)
         .then(resolve)
         .catch(reject);

tests/basic.js

@@ -46,6 +46,11 @@ describe('Nightwatch Inspector Tests', function() {
     browser.expect.element('#exploreMode').to.not.be.selected;
   });
 
+  it('should display socket connected', function(browser) {
+    browser.expect.element('#socket-disconnected').to.be.visible;
+    browser.expect.element('#socket-connected').to.not.be.visible;
+  });
+
   after(browser => {
     server.close();
     browser.end();