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; font-weight: 600;
} }
table {
width: 100%;
margin: 0 0 6px 0;
}
tr {
margin: 3px 0;
}
.itemWrap { .itemWrap {
display: flex; display: flex;
align-items: center; align-items: center;

94
src/App.jsx
View file

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

4
src/popup.css
View file

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