diff --git a/.vscode/settings.json b/.vscode/settings.json index b969529..23fabbe 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,6 +6,7 @@ "files.trimTrailingWhitespace": false, "editor.minimap.enabled": false }, + "liveServer.settings.multiRootWorkspaceName": "live-server-web-extension", // "liveServer.settings.proxy": { // "enable": true, // "baseUri": "/", diff --git a/popup/css/style.css b/popup/css/style.css index 9f2a614..803262c 100644 --- a/popup/css/style.css +++ b/popup/css/style.css @@ -1,8 +1,6 @@ @import "button.css"; - - -*, -*::after, +*, +*::after, *::before { box-sizing: border-box; font-size: 15px; @@ -26,7 +24,7 @@ body { background-color: #d5d5d5; } -.header > p { +.header>p { font-size: 12px; font-style: italic; font-weight: 400; @@ -40,10 +38,10 @@ body { letter-spacing: 0.9px; background-color: #d5d5d5; display: block; - padding: 5px ; + padding: 5px; } -.footer > p { +.footer>p { font-size: 10px; padding: 10px; } @@ -78,10 +76,14 @@ body { .hide { display: none; } -input:focus, button:focus { + +input:focus, +button:focus { outline: none; } -label[for="proxyCheckBox"], input[type="checkbox"] { + +label[for="proxyCheckBox"], +input[type="checkbox"] { cursor: pointer; } @@ -95,6 +97,11 @@ label[for="proxyCheckBox"], input[type="checkbox"] { cursor: pointer; user-select: none; border: 0px; + transition: all 0.3s ease-in-out; +} + +.btn:active { + transform: scale(0.8); } .btn-highlight { @@ -111,4 +118,26 @@ label[for="proxyCheckBox"], input[type="checkbox"] { font-size: 10px; float: right; margin-right: 6px; +} + +#liveServerPort { + width: 65%; +} + +#liveServerConnBtn { + display: inline-block; + width: 34%; + vertical-align: bottom; + font-size: 12px; + margin-right: -5px; +} + +#liveServerConnBtn.connected { + background: green; + color: #fff +} + +#liveServerConnBtn.not-connected { + background: red; + color: #fff } \ No newline at end of file diff --git a/popup/popup.html b/popup/popup.html index 809bf8e..a5d3fec 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -31,22 +31,23 @@
- +
- +
- - + + + Install Live Server
@@ -57,8 +58,9 @@
Need Help? -

NOTE: You need two server. Live Server will give `live` power of your existing server (May be Wamp, XAMPP, IIS - or Node.js)

+

NOTE: You need two server. Live Server will give `live` power of your existing server (May be Wamp, XAMPP, IIS or + Node.js) +

diff --git a/popup/popup.js b/popup/popup.js index ea0b804..50eaf8c 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -5,8 +5,9 @@ const liveReloadCheck = document.getElementById('liveReloadCheck'); const noProxyCheckBox = document.getElementById('noProxyCheckBox'); const actualServerAddress = document.getElementById('actualServer'); - const liveServerAddress = document.getElementById('liveServer'); + const liveServerPort = document.getElementById('liveServerPort'); const submitBtn = document.getElementById('submitBtn'); + const liveServerConnBtn = document.getElementById('liveServerConnBtn'); const serverSetupDiv = document.getElementById('serverSetup'); @@ -15,7 +16,8 @@ isEnable: liveReloadCheck.checked, proxySetup: !noProxyCheckBox.checked, actualUrl: actualServerAddress.value || '', - liveServerUrl: liveServerAddress.value || '' + // liveServerUrl: `http://127.0.0.1:${liveServerPort.value}`, + liveServerPort: liveServerPort.value } chrome.runtime.sendMessage({ @@ -43,7 +45,7 @@ liveReloadCheck.checked = data.isEnable || false; noProxyCheckBox.checked = !data.proxySetup; actualServerAddress.value = data.actualUrl || ''; - liveServerAddress.value = data.liveServerUrl || ''; + liveServerPort.value = data.liveServerPort || 5500; serverSetupDiv.className = noProxyCheckBox.checked ? 'show' : 'hide'; }); }); @@ -54,10 +56,32 @@ submitBtn.disabled = true; } - liveServerAddress.onkeyup = actualServerAddress.onkeyup = () => { + liveServerPort.onkeyup = actualServerAddress.onkeyup = () => { submitBtn.disabled = false; submitBtn.classList.add('btn-highlight'); + liveServerConnBtn.innerText = 'Test Connection'; + liveServerConnBtn.classList.remove('connected'); + liveServerConnBtn.classList.remove('not-connected'); } + liveServerConnBtn.onclick = () => { + liveServerConnBtn.innerText = "Testing..."; + + const ws = new WebSocket(`ws://127.0.0.1:${liveServerPort.value}/ws`) + ws.onerror = () => { + liveServerConnBtn.classList.remove('connected'); + liveServerConnBtn.classList.add('not-connected'); + liveServerConnBtn.innerText = "Not Connected" + console.log('not connected'); + } + ws.onmessage = () => { + liveServerConnBtn.classList.add('connected'); + liveServerConnBtn.classList.remove('not-connected'); + liveServerConnBtn.innerText = "Connected" + console.log('connected'); + ws.close(); + } + }; + })(); \ No newline at end of file diff --git a/reload.js b/reload.js index 0682988..0e05d5c 100644 --- a/reload.js +++ b/reload.js @@ -10,16 +10,16 @@ function init(data) { if (!data.proxySetup) { //Correction - if (data.liveServerUrl.indexOf('http') !== 0) - data.liveServerUrl = 'http' + data.liveServerUrl; + // if (data.liveServerUrl.indexOf('http') !== 0) + // data.liveServerUrl = 'http' + data.liveServerUrl; if (data.actualUrl.indexOf('http') !== 0) - data.actualUrl = 'http' + data.actualUrl; + data.actualUrl = 'http://' + data.actualUrl; if (!data.actualUrl.endsWith('/')) data.actualUrl = data.actualUrl + '/'; - address = data.liveServerUrl.replace('http', 'ws') + '/ws'; + // address = data.liveServerUrl.replace('http', 'ws') + '/ws'; } - socket = new WebSocket(address); + socket = new WebSocket(`ws://127.0.0.1:${data.liveServerPort}/ws`); socket.onmessage = (msg) => { reloadWindow(msg, data) };