tweak (#326)

* add widget sizes
* tidy font*size/name
* make sure anything measured in fixed position for stability

Author: Thorin-Oakenpants

css/index.css

@@ -332,7 +332,7 @@ div.scrollthin {scrollbar-width: thin;}
 #tbfp td:first-child {color: var(--test99);}
 #tbperf td:first-child {color: var(--test99);}
 
-#lh-fp, #mathml-fp {
+#lh-fp, #mathml-fp, #font-fp, #form-fp, #glyph-fp {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -353,6 +353,11 @@ div.scrollthin {scrollbar-width: thin;}
 .measureScale {
 	transform: scale(1.1234567); /* cause decimals */
 }
+.unstyled {
+	-moz-appearance: none;
+	-webkit-appearance: none;
+	appearance: none;
+}
 
 /* TZP main */
 #divrect {position: fixed; padding: 8px; opacity: 0; z-index: -1;}

js/elements.js

@@ -179,11 +179,84 @@ function get_mathml(METRIC) {
 	return
 }
 
+function get_widget_sizes(METRIC) {
+	let t0 = nowFn()
+	let hash, btn ='', data = {}
+	const id = 'form-fp'
+	let oList = {
+		button: '<input type="button">',
+		checkbox: '<input type="checkbox">',
+		checkbox_unstyled: '<input type="checkbox">',
+		color: '<input type="color">',
+		date: '<input type="date">',
+		"datetime-local": '<input type="datetime-local">',
+		details: '<details></details>',
+		directory: '<input webkitdirectory directory type="file">',
+		file: '<input type="file">',
+		files: '<input multiple="" type="file">',
+		image: '<input type="image">',
+		number: '<input type="number">',
+		radio: '<input type="radio">',
+		radio_unstyled: '<input type="radio">',
+		reset: '<input type="reset">',
+		select: '<select><option id="Y"></option></select>',
+		select_empty: '<select multiple=""><option></option></select>',
+		select_empty_option: '<select multiple=""><option></option></select>',
+		select_spaces: '<select multiple=""><option> &nbsp;  &nbsp;  &nbsp; </option>"</select>',
+		select_spaces_option: '<select multiple=""><option> &nbsp;  &nbsp;  &nbsp; </option>"</select>',
+		select_string: '<select multiple=""><option>Mōá?-&#xffff;</option></select>',
+		select_string_option: '<select multiple=""><option>Mōá?-&#xffff;</option></select>',
+		select_unstyled: '<select><option id="Y"></option></select>',
+		submit: '<input type="submit">',
+		time: '<input type="time">',
+	}
+	let width, height, x, y, range, method
+	try {
+		const doc = document
+		const div = doc.createElement('div')
+		div.setAttribute('id', id)
+		doc.body.appendChild(div)
+		div.classList.add('measure')
+		div.classList.add("measureScale")
+		let parent = dom[id]
+		for (const k of Object.keys(oList)) {
+			// important to clear the div so no other elements can affect measurements
+			parent.innerHTML = ""
+			try {
+				parent.innerHTML = oList[k]
+				let target = parent.firstChild
+				target.setAttribute("style","display:inline;")
+				if (k.includes('_unstyled')) {target.classList.add('unstyled')}
+				if (k.includes('_option')) {target = target.lastElementChild}
+				// method
+				if (isDomRect > 1) {range = document.createRange(); range.selectNode(target)}
+				if (isDomRect < 1) {method = target.getBoundingClientRect() // get a result regardless
+				} else if (isDomRect == 1) {method = target.getClientRects()[0]
+				} else if (isDomRect == 2) {method = range.getBoundingClientRect()
+				} else if (isDomRect > 2) {method = range.getClientRects()[0]
+				}
+				data[k] = [method.width, method.height, method.x, method.y]
+			} catch(e) {
+				data[k] = zErr
+				log_error(15, METRIC +'_'+ k, e)
+			}
+		}
+		hash = mini(data), btn = addButton(15, METRIC)
+	} catch(e) {
+		hash = e; data = zErrLog
+	}
+	removeElementFn(id)
+	addBoth(15, METRIC, hash, btn,'', data, (isDomRect == -1))
+	log_perf(15, METRIC, t0)
+	return
+}
+
 const outputElements = () => new Promise(resolve => {
 	Promise.all([
 		get_element_keys('htmlelement_keys'),
-		get_lineheight('line-height'),
-		get_mathml('mathml'),
+		get_lineheight('line-height_sizes'),
+		get_mathml('mathml_sizes'),
+		get_widget_sizes('widget_sizes'),
 	]).then(function(){
 		return resolve()
 	})

js/fonts.js

@@ -625,7 +625,7 @@ function get_document_fonts(METRIC) {
 	return
 }
 
-const get_font_sizes = (isMain = true) => new Promise(resolve => {
+const get_font_sizes = (isMain = true, METRIC = 'font_sizes') => new Promise(resolve => {
 	/* getDimensions code based on https://github.com/abrahamjuliot/creepjs */
 	const id = 'font-fp'
 	try {
@@ -703,7 +703,7 @@ const get_font_sizes = (isMain = true) => new Promise(resolve => {
 			const transform = style.transformOrigin.split(' ')
 			const perspective = style.perspectiveOrigin.split(' ')
 			const dimensions = {
-				// keep in order for fontsizes_base_reported
+				// keep in order for font_sizes_base_reported
 				clientHeight: span.clientHeight,
 				clientWidth: span.clientWidth,
 				domrectboundingHeight: span.getBoundingClientRect().height,
@@ -868,7 +868,7 @@ const get_font_sizes = (isMain = true) => new Promise(resolve => {
 			if (error !== undefined) {
 				item[1].clear()
 				item[1].add(zErr)
-				addDisplay(12, name, log_error(12, 'fontsizes_'+ (name.slice(5).toLowerCase()), error))
+				addDisplay(12, name, log_error(12, METRIC +'_'+ (name.slice(5).toLowerCase()), error))
 			}
 		})
 
@@ -947,7 +947,7 @@ const get_font_sizes = (isMain = true) => new Promise(resolve => {
 			if (error !== undefined) {
 				item[1].clear()
 				item[1].add(zErr)
-				addDisplay(12, name, log_error(12, 'fontsizes_'+ (name.slice(5).toLowerCase()), error))
+				addDisplay(12, name, log_error(12, METRIC +'_'+ (name.slice(5).toLowerCase()), error))
 				delete fntBasesValid[name]
 			}
 		})
@@ -986,17 +986,16 @@ const get_font_sizes = (isMain = true) => new Promise(resolve => {
 			fontsDomRectClientRange,
 		})
 	} catch(e) {
-		if (isMain) {log_error(12, 'fontsizes', e)} else {console.error(e)}
+		if (isMain) {log_error(12, METRIC, e)} else {console.error(e)}
 		return resolve(zErr)
 	}
 })
 
-function get_fonts() {
+function get_fonts(METRIC) {
 	let t0 = nowFn()
-	const METRIC = 'fontsizes'
 	const METRICG = METRIC +'_groups'
 	const METRICB = METRIC +'_base'
-	const METRICN = 'fontnames'
+	const METRICN = 'font_names'
 	let badnotation = isTB ? tb_red : rfp_red
 	let goodnotation = isTB ? tb_green : rfp_green
 	let oDomList = {
@@ -1078,7 +1077,7 @@ function get_fonts() {
 		//console.log(res)
 		let firstBaseFont = fntData['control_name'][0]
 		let oData = {}, oValid = {}
-		// note: do not sort: these are fontnames:size and fntList was already sorted
+		// note: do not sort: these are font_names:size and fntList was already sorted
 		for (let name in res) {
 			let data = res[name]
 			if (data.length > 1 && data[0] !== zErr) { // non-errors
@@ -1782,7 +1781,7 @@ const outputFonts = () => new Promise(resolve => {
 	Promise.all([
 		get_document_fonts('document_fonts'), // sets fntDocEnabled
 		get_script_defaults('script_defaults'),
-		get_fonts(), // uses fntDocEnabled
+		get_fonts('font_sizes'), // uses fntDocEnabled
 		get_system_fonts('moz_fonts'),
 		get_system_fonts('system_fonts'),
 		get_widget_fonts('widget_fonts'),

js/generic.js

@@ -687,7 +687,6 @@ function get_isDomRect() {
 	if (runSL) {aDomRect = [false, false, false, false]}
 	isDomRect = aDomRect.indexOf(true)
 	//console.log(isDomRect, aDomRect)
-
 	log_perf(SECTP, "isDomRect",t0,"", aDomRect.join(", ") +" | "+ isDomRect)
 	return
 }
@@ -1039,8 +1038,8 @@ function lookup_health(sect, metric, scope, isPass) {
 			let typeCheck = typeFn(data, true)
 			hash = data
 			// handle sDetailTemp: copy per run so it doesn't change in gData
-			if ('fontnames' == metric) {sDetailTemp = sDetail[scope]['fontnames_health']}
 			if (undefined !== sDetail[scope][metric]) {sDetailTemp = sDetail[scope][metric]}
+			if ('font_names' == metric) {sDetailTemp = sDetail[scope]['font_names_health']}
 			if (undefined !== sDetailTemp) {
 				let tmpCheck = typeFn(sDetailTemp)
 				if ('object' == tmpCheck) {

js/globals.js

@@ -14,12 +14,12 @@ let sectionOrder = [], // numerical order for objects
 	sectionNos = {} // lookup numbers by name
 
 // ToDo: expand: some info can go into lies but we could create new items such as methods/tampered-data
-	// some 'methods/entropy' are in the FP: e.g. canvas/domrect or errors e.g. fontsizes
+	// some 'methods/entropy' are in the FP: e.g. canvas/domrect or errors e.g. font sizes
 const btnList = ['alerts', 'errors', 'lies']
 
 const jsFilesExpected = 14,
 	gSectionsExpected = 16,
-	expectedMetrics = 150
+	expectedMetrics = 151
 let jsFiles = 0, gCount = 0, gCountTiming = 0
 
 // global

tzp.html

@@ -47,7 +47,7 @@
 		<div class="cssGraphite" style="font-size: 300px;"><span id="testGraphite">+</span><span id="ctrlGraphite">-</span></div>
 		<div id="elementFS" width=0 height=0></div>
 		<div id='divDPI' style='height: 1in; width: 1in;'></div>
-		<div class="normalized">
+		<div id='glyph-fp' class="normalized">
 			<div id="ugDiv"><span id="ugSpan"><span id="ugSlot"></span></span></div>
 			<div><canvas id="ugCanvas"></canvas></div>
 			<div><span id="dfsize"></span></div>
@@ -709,10 +709,10 @@
 		</td></tr>
 		<!--fonts-->
 		<tr><td></td><td><span class="s12">fonts</span></td></tr>
-		<tr><td>[groups] fonts <sup>3</sup></td><td class="c mono" id="fontsizes_groups"></td></tr>
+		<tr><td>[groups] fonts <sup>3</sup></td><td class="c mono" id="font_sizes_groups"></td></tr>
 		<tr><td><span id="labelF" class="btn btn0" onClick="togglerows('F','btn')">[ show ]</span>
 			[sizes | names] fonts <sup>3</sup></td>
-			<td class="mono"><span class="c" id="fontsizes"></span> | <span class="c" id="fontnames"></span></td>
+			<td class="mono"><span class="c" id="font_sizes"></span> | <span class="c" id="font_names"></span></td>
 		</tr>
 		<tr class="togF"><td>client</td><td class="c mono" id="fontsClient"></td></tr>
 		<tr class="togF"><td>offset</td><td class="c mono" id="fontsOffset"></td></tr>
@@ -730,7 +730,7 @@
 		<tr class="togF"><td>client</td><td class="c mono" id="fontsDomRectClient"></td></tr>
 		<tr class="togF"><td>client range</td><td class="c mono border-bottom" id="fontsDomRectClientRange"></td></tr>
 
-		<tr><td>[base sizes] fonts <sup>3</sup></td><td class="c mono" id="fontsizes_base"></td></tr>
+		<tr><td>[base sizes] fonts <sup>3</sup></td><td class="c mono" id="font_sizes_base"></td></tr>
 		<tr><td>[moz] fonts</td><td class="c mono" id="moz_fonts"></td></tr>
 		<tr><td>[system] fonts</td><td class="c mono" id="system_fonts"></td></tr>
 		<tr><td>[widget] fonts</td><td class="c mono" id="widget_fonts"></td></tr>
@@ -859,10 +859,12 @@
 			&nbsp; DOMRect</td><td class="c mono" id="domrect"></td></tr>
 		<tr><td>HTMLElement keys <sup>1</sup></td><td class="c mono" id="htmlelement_keys"></td></tr>
 		<tr><td><a class="blue" href="tests/lineheight.html" target="blank">[PoC]</a>
-			&nbsp; line-height</td><td class="c mono" id="line-height"></td></tr>
+			&nbsp; line-height</td><td class="c mono" id="line-height_sizes"></td></tr>
 		<tr><td><div class="ttip"><span class="icon">[ i ]</span>
 			<span class="ttxt">mathml.disabled</span></div>
-			&nbsp; mathml</td><td class="c mono" id="mathml"></td></tr>
+			&nbsp; mathml</td><td class="c mono" id="mathml_sizes"></td></tr>
+		<tr><td><a class="blue" href="tests/elementforms.html" target="blank">[PoC]</a>
+			&nbsp; widgets</td><td class="c mono" id="widget_sizes"></td></tr>
 		<tr><td colspan="2"><span class="no_color">code by </span><a target="_blank" class="blue"
 			href="https://github.com/abrahamjuliot/creepjs">CreepJS</a> <sup>1</sup>
 		</td></tr>