expand screen methods

[Thorin-Oakenpants]

reminder

• use available screen, not screen .. in FP metrics, as available has more entropy
  • n/a : the loose fingerprint collects everything and anything it wants

items: extra conversation at abrahamjuliot/creepjs#97

• vw/vh
• visualViewport - https://github.com/WICG/visual-viewport
  • note: creepyJS showed decimals on my android, but the decimals varied between RFP on/off
  • Android 68+ 1512813, Desktop by default FF91+ 1551302
• dynamic toolbar enabled/disabled might be detectable: see https://bugzilla.mozilla.org/show_bug.cgi?id=1579584#c5
• documentElement.clientHeight
• use an element such as in FS test
• iframe
• matchMedia object
• detect screen via getComputedStyle: https://jsfiddle.net/jrnca3wh/
• @media: https://jsfiddle.net/w8qxu1p2/1/
• @import can access media queries: https://jsfiddle.net/873kspn4/1/
• intersectionObserver
• https://devicepixelratio.glitch.me/

[Thorin-Oakenpants]

assigning @abrahamjuliot 🤣 🤣 🤣

[Thorin-Oakenpants]

just a random idea

• using JS to generate css @media rules, e.g. min-device-width and min-device-height
• width would set background color
• height would set color
• use the width/height to determine the color value
  • e.g. width 500 = rgb(5,0,0), 2560 = rgb(25,6,0)
• apply to a div
• this would only have to happen once

Read the div's colors back to return the width/height. i.e a JS approach to read back pure css (which extensions can't alter?)

---

function evil_bastard(styleType, styleMin, styleMax) {
  // styleType: e.g. inner, outer, screen, availablescreen

  //loop, create styles
  styles = [] // not sure if array is the way to go
  for (let i=styleMin; i < (styleMax + 1); i++) {
    //build rules and add to styles
  }

  var styleSheet = document.createElement("style")
  styleSheet.type = "text/css"
  styleSheet.innerText = styles
  document.head.appendChild(styleSheet)

  // apply class to element
}

evil_bastard(screen, 300, 2560) // promise it and then check the element's colors?

edit: perf: it could also be used to simply check the reported screen/window values, as compared to unmasking the real values

[Thorin-Oakenpants]

actually .. I already have the css rules, and can just use the after pseudo element

#cssPCS:after{content:"not supported"}
@media (prefers-color-scheme:light){#cssPCS:after{content:"light";}}
@media (prefers-color-scheme:dark){#cssPCS:after{content:"dark";}}
@media (prefers-color-scheme:no-preference){#cssPCS:after{content:"no-preference";}} /* obsolete FF79+: 1643656 */

edit: updated version

function getElementProp(id, prop, pseudo) {
	try {
		let item = window.getComputedStyle(document.querySelector(id), pseudo)
		item = item.getPropertyValue(prop)
		if (item == "none") {item = "x"; console.warn(id, item)}
		item = item.replace(/"/g,"")
		if (!isNaN(item * 1)) {item = item * 1} // return numbers as numbers
		item = (item == "" ? "x" : item) // handle blanks as invalid
		return item
	} catch(e) {
		console.error(id, e.name, e.message)
		return "x"
	}
}

Since some extensions block matchMedia (e.g. Cydec), I now use this as the real value

example

	// snip: mmValue = window.matchMedia .. etc
	let cssValue = getElementProp("#cssPCS","content",":after")
	if (cssValue !== "none" ) {mmValue = cssValue} // update with real value, record lie, etc

Of course the wee media.css file (26k) I can move up to the header, but not sure about 500kb of screen.css + window.css - but something to think about

[Thorin-Oakenpants]

^ actually, some items might return "none", which after stripping quotes marks fail, so instead use some unique string

#cssH:after{content:"not supported";}
@media (hover:none){#cssH:after{content:"none";}}
@media (hover:hover){#cssH:after{content:"hover";}}

[Thorin-Oakenpants]

what is the point of offset and page? they're zero's

• https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport

I don't follow, can you apply them to an element of something? (which could come in handy in some element tests down the track)

@abrahamjuliot

[abrahamjuliot]

As far as I know, these values indicate x and y scroll positions.

• if a user scrolls down, pageTop will measure the viewport distance from the top of the page
• if a user shrinks the viewport and causes the x-axis to overflow, scrolling to the right will cause pageLeft to measure the scroll distance. offsetLeft is affected too, but I'm not sure what it's measuring.
• really not sure how to affect offsetTop, but all this seems tied to the layout flow and positioning, and the scroll positions.
  ​

offsetLeft: 0.01666259765625
offsetTop: 0
pageLeft: 286.01666259765625
pageTop: 1020