me/vytal-redux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Switching to a table

Browse source
This commit is contained in:
z0ccc 2021-06-07 20:49:10 -04:00
parent 1d03f40c70
commit a63492aa3f
3 changed files with 78 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/App.css
View file

@ -2,6 +2,15 @@
font-weight: 600;
}
table {
width: 100%;
margin: 0 0 6px 0;
}
tr {
margin: 3px 0;
}
.itemWrap {
display: flex;
align-items: center;

94
src/App.jsx
View file

@ -36,7 +36,8 @@ const App = () => {
updateDOM('timezone', Intl.DateTimeFormat().resolvedOptions().timeZone);
updateDOM('cookies', navigator.cookieEnabled);
updateDOM('java', navigator.javaEnabled());
updateDOM('plugins', navigator.plugins);
updateDOM('dnt', navigator.doNotTrack ? 'true' : 'false');
// updateDOM('plugins', navigator.plugins);
updateDOM('platform', uaResult.platform.type);
updateDOM('screenSize', `${window.screen.width}x${window.screen.height}`);
@ -44,39 +45,69 @@ const App = () => {
navigator.getBattery().then((battery) => {
updateDOM('batteryLevel', `${Math.round(battery.level * 100)}%`);
updateDOM('batteryStatus', `${battery.charging ? '' : 'not '} charging`);
updateDOM('batteryStatus', `${battery.charging ? '' : 'not'} charging`);
});
updateDOM('memory', `${navigator.deviceMemory}GB`);
updateDOM('cores', navigator.hardwareConcurrency);
const gl = document.createElement('canvas').getContext('webgl');
const ext = gl.getExtension('WEBGL_debug_renderer_info');
updateDOM('vendor', gl.getParameter(ext.UNMASKED_VENDOR_WEBGL));
updateDOM('renderer', gl.getParameter(ext.UNMASKED_RENDERER_WEBGL));
}, []);
return (
<div className="App">
<div className="title">Connection</div>
<div className="item" id="ipAddress">
IP address:{' '}
</div>
<div className="itemWrap">
<div className="item" id="country">
Country:{' '}
</div>
<div className="flagWrap">
{flag === true && <Flag code={country} size="S" />}
</div>
</div>
<div className="item" id="region">
Region:{' '}
</div>
<div className="item" id="city">
City:{' '}
</div>
<div className="item" id="zip">
Zip:{' '}
</div>
<div className="item" id="provider">
Provider:{' '}
</div>
<table>
<tr>
<td>IP address:</td>
<td>
<div id="ipAddress" />
</td>
<td>?</td>
</tr>
<tr>
<td>Country:</td>
<td>
<div className="itemWrap">
<div id="country" />
<div className="flagWrap">
{flag === true && <Flag code={country} size="S" />}
</div>
</div>
</td>
<td>?</td>
</tr>
<tr>
<td>Region:</td>
<td>
<div id="region" />
</td>
<td>?</td>
</tr>
<tr>
<td>City:</td>
<td>
<div id="city" />
</td>
<td>?</td>
</tr>
<tr>
<td>Zip:</td>
<td>
<div id="zip" />
</td>
<td>?</td>
</tr>
<tr>
<td>Provider:</td>
<td>
<div id="provider" />
</td>
<td>?</td>
</tr>
</table>
<div className="title">Software</div>
<div className="item" id="browser">
Browser:{' '}
@ -102,9 +133,12 @@ const App = () => {
<div className="item" id="java">
Java enabled:{' '}
</div>
<div className="item" id="plugins">
Plugins:{' '}
<div className="item" id="dnt">
DNT header enabled:{' '}
</div>
{/* <div className="item" id="plugins">
Plugins:{' '}
</div> */}
<div className="title">Hardware</div>
<div className="item" id="platform">
Platform:{' '}
@ -127,6 +161,12 @@ const App = () => {
<div className="item" id="cores">
# of CPU cores:{' '}
</div>
<div className="item" id="vendor">
WebGL vendor:{' '}
</div>
<div className="item" id="renderer">
WebGL renderer:{' '}
</div>
</div>
);
};

4
src/popup.css
View file

@ -6,7 +6,7 @@
body {
color: var(--text);
background-color: var(--background);
font-size: 14px;
font-size: 15px;
line-height: 22px;
width: 300px;
width: 350px;
}