Skip to content

Commit f7436c4

Browse files
ritwickdeyritwickdey
committed
new way to setting
1 parent e92c255 commit f7436c4

File tree

5 files changed

+78
-24
lines changed

5 files changed

+78
-24
lines changed

‎.vscode/settings.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"files.trimTrailingWhitespace": false,
77
"editor.minimap.enabled": false
88
},
9+
"liveServer.settings.multiRootWorkspaceName": "live-server-web-extension",
910
// "liveServer.settings.proxy": {
1011
// "enable": true,
1112
// "baseUri": "/",

‎popup/css/style.css‎

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
@import "button.css";
2-
3-
4-
*,
5-
*::after,
2+
*,
3+
*::after,
64
*::before {
75
box-sizing: border-box;
86
font-size: 15px;
@@ -26,7 +24,7 @@ body {
2624
background-color: #d5d5d5;
2725
}
2826

29-
.header > p {
27+
.header>p {
3028
font-size: 12px;
3129
font-style: italic;
3230
font-weight: 400;
@@ -40,10 +38,10 @@ body {
4038
letter-spacing: 0.9px;
4139
background-color: #d5d5d5;
4240
display: block;
43-
padding: 5px ;
41+
padding: 5px;
4442
}
4543

46-
.footer > p {
44+
.footer>p {
4745
font-size: 10px;
4846
padding: 10px;
4947
}
@@ -78,10 +76,14 @@ body {
7876
.hide {
7977
display: none;
8078
}
81-
input:focus, button:focus {
79+
80+
input:focus,
81+
button:focus {
8282
outline: none;
8383
}
84-
label[for="proxyCheckBox"], input[type="checkbox"] {
84+
85+
label[for="proxyCheckBox"],
86+
input[type="checkbox"] {
8587
cursor: pointer;
8688
}
8789

@@ -95,6 +97,11 @@ label[for="proxyCheckBox"], input[type="checkbox"] {
9597
cursor: pointer;
9698
user-select: none;
9799
border: 0px;
100+
transition: all 0.3s ease-in-out;
101+
}
102+
103+
.btn:active {
104+
transform: scale(0.8);
98105
}
99106

100107
.btn-highlight {
@@ -111,4 +118,26 @@ label[for="proxyCheckBox"], input[type="checkbox"] {
111118
font-size: 10px;
112119
float: right;
113120
margin-right: 6px;
121+
}
122+
123+
#liveServerPort {
124+
width: 65%;
125+
}
126+
127+
#liveServerConnBtn {
128+
display: inline-block;
129+
width: 34%;
130+
vertical-align: bottom;
131+
font-size: 12px;
132+
margin-right: -5px;
133+
}
134+
135+
#liveServerConnBtn.connected {
136+
background: green;
137+
color: #fff
138+
}
139+
140+
#liveServerConnBtn.not-connected {
141+
background: red;
142+
color: #fff
114143
}

‎popup/popup.html‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,22 +31,23 @@
3131
<div class="row">
3232
<div>
3333
<input type="checkbox" id="noProxyCheckBox">
34-
<label for="noProxyCheckBox">I don't want proxy setup (recommended)</label>
34+
<label for="noProxyCheckBox">No complicated Proxy Setup (recommended)</label>
3535
</div>
3636
</div>
3737

3838
<div id="serverSetup">
3939
<div class="row">
4040
<div>
41-
<label class="form-label" for="actualServer">Actual Server Address</label>
41+
<label class="form-label" for="actualServer">Original Server Address</label>
4242
<input class="form-control" type="text" id="actualServer" placeholder="http://Your Server Address">
4343
</div>
4444
</div>
4545

4646
<div class="row">
4747
<div>
48-
<label class="form-label" for="liveServer">Live Server Address</label>
49-
<input class="form-control" type="text" id="liveServer" placeholder="Eg. http://127.0.0.1:5500/">
48+
<label class="form-label" for="liveServerPort">Live Server Port</label>
49+
<input class="form-control" type="number" id="liveServerPort" value="5500">
50+
<button type="button" class="btn" id="liveServerConnBtn">Test Connection</button>
5051
<a class="short-right-label" target="_blank" href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer">Install Live Server</a>
5152
</div>
5253
</div>
@@ -57,8 +58,9 @@
5758
</div>
5859
<div class="footer">
5960
<a target="_blank" href="https://github.com/ritwickdey/live-server-web-extension">Need Help?</a>
60-
<p>NOTE: You need two server. Live Server will give `live` power of your existing server (May be Wamp, XAMPP, IIS
61-
or Node.js)</p>
61+
<p>NOTE: You need two server. Live Server will give `live` power of your existing server (May be Wamp, XAMPP, IIS or
62+
Node.js)
63+
</p>
6264
</div>
6365
<script src="./popup.js"></script>
6466
</body>

‎popup/popup.js‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@
55
const liveReloadCheck = document.getElementById('liveReloadCheck');
66
const noProxyCheckBox = document.getElementById('noProxyCheckBox');
77
const actualServerAddress = document.getElementById('actualServer');
8-
const liveServerAddress = document.getElementById('liveServer');
8+
const liveServerPort = document.getElementById('liveServerPort');
99
const submitBtn = document.getElementById('submitBtn');
10+
const liveServerConnBtn = document.getElementById('liveServerConnBtn');
1011

1112
const serverSetupDiv = document.getElementById('serverSetup');
1213

@@ -15,7 +16,8 @@
1516
isEnable: liveReloadCheck.checked,
1617
proxySetup: !noProxyCheckBox.checked,
1718
actualUrl: actualServerAddress.value || '',
18-
liveServerUrl: liveServerAddress.value || ''
19+
// liveServerUrl: `http://127.0.0.1:${liveServerPort.value}`,
20+
liveServerPort: liveServerPort.value
1921
}
2022

2123
chrome.runtime.sendMessage({
@@ -43,7 +45,7 @@
4345
liveReloadCheck.checked = data.isEnable || false;
4446
noProxyCheckBox.checked = !data.proxySetup;
4547
actualServerAddress.value = data.actualUrl || '';
46-
liveServerAddress.value = data.liveServerUrl || '';
48+
liveServerPort.value = data.liveServerPort || 5500;
4749
serverSetupDiv.className = noProxyCheckBox.checked ? 'show' : 'hide';
4850
});
4951
});
@@ -54,10 +56,30 @@
5456
submitBtn.disabled = true;
5557
}
5658

57-
liveServerAddress.onkeyup = actualServerAddress.onkeyup = () => {
59+
liveServerPort.onkeyup = actualServerAddress.onkeyup = () => {
5860
submitBtn.disabled = false;
5961
submitBtn.classList.add('btn-highlight');
62+
liveServerConnBtn.innerText = 'Test Connection';
63+
liveServerConnBtn.classList.remove('connected');
64+
liveServerConnBtn.classList.remove('not-connected');
6065
}
6166

67+
liveServerConnBtn.onclick = () => {
68+
const ws = new WebSocket(`ws://127.0.0.1:${liveServerPort.value}/ws`)
69+
ws.onerror = () => {
70+
liveServerConnBtn.classList.remove('connected');
71+
liveServerConnBtn.classList.add('not-connected');
72+
liveServerConnBtn.innerText = "Not Connected"
73+
console.log('not connected');
74+
}
75+
ws.onmessage = () => {
76+
liveServerConnBtn.classList.add('connected');
77+
liveServerConnBtn.classList.remove('not-connected');
78+
liveServerConnBtn.innerText = "Connected"
79+
console.log('connected');
80+
ws.close();
81+
}
82+
};
83+
6284

6385
})();

‎reload.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,16 @@
1010
function init(data) {
1111
if (!data.proxySetup) {
1212
//Correction
13-
if (data.liveServerUrl.indexOf('http') !== 0)
14-
data.liveServerUrl = 'http' + data.liveServerUrl;
13+
// if (data.liveServerUrl.indexOf('http') !== 0)
14+
// data.liveServerUrl = 'http' + data.liveServerUrl;
1515
if (data.actualUrl.indexOf('http') !== 0)
16-
data.actualUrl = 'http' + data.actualUrl;
16+
data.actualUrl = 'http://' + data.actualUrl;
1717
if (!data.actualUrl.endsWith('/'))
1818
data.actualUrl = data.actualUrl + '/';
1919

20-
address = data.liveServerUrl.replace('http', 'ws') + '/ws';
20+
// address = data.liveServerUrl.replace('http', 'ws') + '/ws';
2121
}
22-
socket = new WebSocket(address);
22+
socket = new WebSocket(`ws://127.0.0.1:${data.liveServerPort}/ws`);
2323
socket.onmessage = (msg) => {
2424
reloadWindow(msg, data)
2525
};

0 commit comments

Comments
 (0)