adjust navigator and webgl flex grid #4

abrahamjuliot · Oct 18, 2020 · a07706c · a07706c
1 parent c3136b7
commit a07706c
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 43 deletions.
diff --git a/index.html b/index.html
@@ -88,11 +88,11 @@
 				</div>
 				<div>
 					<div id="creep-canvas-webgl">
-						<strong>Canvas webgl</strong>
-						<div>matching renderer/vendor:</div>
-						<div>matching data URI:</div>
 						<div class="flex-grid">
 							<div class="col-six">
+								<strong>Canvas webgl</strong>
+								<div>matching renderer/vendor:</div>
+								<div>matching data URI:</div>
 								<div>webgl:</div>
 								<div>parameters (0):</div>
 								<div>extensions (0):</div>
@@ -161,16 +161,22 @@
 					</div>
 				</div>
 				<div id="creep-timezone">
-					<strong>Timezone</strong>
-					<div>timezone:</div>
-					<div>timezone location:</div>
-					<div>timezone offset:</div>
-					<div>timezone offset computed:</div>
-					<div>matching offsets:</div>
-					<div>timezone measured:</div>
-					<div>relativeTimeFormat:</div>
-					<div>locale language:</div>
-					<div>writing system keys:</div>
+					<div class="flex-grid">
+						<div class="col-six">
+							<strong>Timezone</strong>
+							<div>timezone:</div>
+							<div>timezone location:</div>
+							<div>timezone offset:</div>
+							<div>timezone offset computed:</div>
+						</div>
+						<div class="col-six">
+							<div>matching offsets:</div>
+							<div>timezone measured:</div>
+							<div>relativeTimeFormat:</div>
+							<div>locale language:</div>
+							<div>writing system keys:</div>
+						</div>
+					</div>
 				</div>
 				<div id="creep-screen">
 					<div class="flex-grid">
@@ -244,9 +250,9 @@
 				</div>
 
 				<div id="creep-navigator">
-					<strong>Navigator</strong>
 					<div class="flex-grid">
 						<div class="col-six">
+							<strong>Navigator</strong>
 							<div>deviceMemory:</div>
 							<div>doNotTrack:</div>
 							<div>hardwareConcurrency:</div>

diff --git a/modules/canvasWebgl.js b/modules/canvasWebgl.js
@@ -263,11 +263,11 @@ export const getCanvasWebgl = imports => {
 
 			return patch(el, html`
 			<div>
-				<strong>Canvas webgl</strong><span class="${lied ? 'lies ' : ''}hash">${hashMini($hash)}</span>
-				<div>matching renderer/vendor: ${''+data.matchingUnmasked}</div>
-				<div>matching data URI: ${''+data.matchingDataURI}</div>
 				<div class="flex-grid">
 					<div class="col-six">
+						<strong>Canvas webgl</strong><span class="${lied ? 'lies ' : ''}hash">${hashMini($hash)}</span>
+						<div>matching renderer/vendor: ${''+data.matchingUnmasked}</div>
+						<div>matching data URI: ${''+data.matchingDataURI}</div>
 						<div>webgl:<span class="sub-hash">${hashMini(dataURI.$hash)}</span></div>
 						<div>parameters (${count(webglSpecsKeys)}): ${
 							!webglSpecsKeys.length ? note.unsupported :

diff --git a/modules/navigator.js b/modules/navigator.js
@@ -258,9 +258,9 @@ export const getNavigator = (imports, workerScope) => {
 			}
 			return patch(el, html`
 			<div>
-				<strong>Navigator</strong><span class="${lied ? 'lies ' : ''}hash">${hashMini($hash)}</span>
 				<div class="flex-grid">
 					<div class="col-six">
+						<strong>Navigator</strong><span class="${lied ? 'lies ' : ''}hash">${hashMini($hash)}</span>
 						<div>deviceMemory: ${!blocked[data.deviceMemory] ? data.deviceMemory : note.blocked}</div>
 						<div>doNotTrack: ${''+data.doNotTrack}</div>
 						<div>hardwareConcurrency: ${!blocked[data.hardwareConcurrency] ? data.hardwareConcurrency : note.blocked}</div>

diff --git a/modules/timezone.js b/modules/timezone.js
@@ -268,31 +268,37 @@ export const getTimezone = imports => {
 			const el = document.getElementById(id)
 			return patch(el, html`
 			<div>
-				<strong>Timezone</strong><span class="${lied ? 'lies ' : ''}hash">${hashMini($hash)}</span>
-				<div>timezone: ${timezone}</div>
-				<div>timezone location: ${timezoneLocation}</div>
-				<div>timezone offset: ${''+timezoneOffset}</div>
-				<div>timezone offset computed: ${''+timezoneOffsetComputed}</div>
-				<div>matching offsets: ${''+matchingOffsets}</div>
-				<div>timezone measured: ${measuredTimezones}</div>
-				<div>relativeTimeFormat: ${
-					!relativeTime ? note.unsupported : 
-					modal(`${id}-relative-time-format`, Object.keys(relativeTime).sort().map(key => `${key} => ${relativeTime[key]}`).join('<br>'))
-				}</div>
-				<div>locale language: ${locale.lang.join(', ')}</div>
-				<div>writing system keys: ${
-					!writingSystemKeys ? note.unsupported :
-					modal(`${id}-writing-system-keys`, writingSystemKeys.map(systemKey => {
-						const key = Object.keys(systemKey)[0]
-						const value = systemKey[key]
-						const style = `
-							background: #f6f6f6;
-							border-radius: 2px;
-							padding: 0px 5px;
-						`
-						return `${key}: <span style="${style}">${value}</span>`
-					}).join('<br>'))
-				}</div>
+				<div class="flex-grid">
+					<div class="col-six">
+						<strong>Timezone</strong><span class="${lied ? 'lies ' : ''}hash">${hashMini($hash)}</span>
+						<div>timezone: ${timezone}</div>
+						<div>timezone location: ${timezoneLocation}</div>
+						<div>timezone offset: ${''+timezoneOffset}</div>
+						<div>timezone offset computed: ${''+timezoneOffsetComputed}</div>
+					</div>
+					<div class="col-six">
+						<div>matching offsets: ${''+matchingOffsets}</div>
+						<div>timezone measured: ${measuredTimezones}</div>
+						<div>relativeTimeFormat: ${
+							!relativeTime ? note.unsupported : 
+							modal(`${id}-relative-time-format`, Object.keys(relativeTime).sort().map(key => `${key} => ${relativeTime[key]}`).join('<br>'))
+						}</div>
+						<div>locale language: ${locale.lang.join(', ')}</div>
+						<div>writing system keys: ${
+							!writingSystemKeys ? note.unsupported :
+							modal(`${id}-writing-system-keys`, writingSystemKeys.map(systemKey => {
+								const key = Object.keys(systemKey)[0]
+								const value = systemKey[key]
+								const style = `
+									background: #f6f6f6;
+									border-radius: 2px;
+									padding: 0px 5px;
+								`
+								return `${key}: <span style="${style}">${value}</span>`
+							}).join('<br>'))
+						}</div>
+					</div>
+				</div>
 			</div>
 			`)
 		}