use dialog as bookmarklet interface

by Laurens Maneschijn

HTML

<dialog DISABLEDopen id="_tmp_dialog_brightness_contrast">
	<form method="dialog">
		<label>
			<input type="range" min="0.0" max="2.0" step="0.1" value="1" id="_tmp_dialog_brightness">
			brightness
		</label>
		<br>
		<label>
			<input type="range" min="0.0" max="2.0" step="0.1" value="1" id="_tmp_dialog_contrast">
			contrast
		</label>
		<br>
		<label><input type="checkbox" checked id="_tmp_dialog_html_background">adjust &lt;html&gt; background</label><br>
		<input type="reset">
		<button>close</button>
	</form>
</dialog>

<button id="start">start</button>

test

<hr>

drag link to bookmarks:
<a href="javascript:(function(){ var html = `  	&lt;dialog DISABLEDopen id=&quot;_tmp_dialog_brightness_contrast&quot;&gt; 		&lt;form method=&quot;dialog&quot;&gt; 			&lt;label&gt; 				&lt;input type=&quot;range&quot; min=&quot;0.0&quot; max=&quot;2.0&quot; step=&quot;0.1&quot; value=&quot;1&quot; id=&quot;_tmp_dialog_brightness&quot;&gt; 				brightness 			&lt;/label&gt; 			&lt;br&gt; 			&lt;label&gt; 				&lt;input type=&quot;range&quot; min=&quot;0.0&quot; max=&quot;2.0&quot; step=&quot;0.1&quot; value=&quot;1&quot; id=&quot;_tmp_dialog_contrast&quot;&gt; 				contrast 			&lt;/label&gt; 			&lt;br&gt; 			&lt;label&gt;&lt;input type=&quot;checkbox&quot; checked id=&quot;_tmp_dialog_html_background&quot;&gt;adjust &amp;lt;html&amp;gt; background&lt;/label&gt;&lt;br&gt; 			&lt;input type=&quot;reset&quot;&gt; 			&lt;button&gt;close&lt;/button&gt; 		&lt;/form&gt; 	&lt;/dialog&gt;  `; var css = `  html, body { background: #ffffffff; color: #000;} xxxhtml, xxxbody { background: #000; color: #fff;}  /* disable default darkened backdrop by overwriting with transparant value: */ dialog#_tmp_dialog_brightness_contrast::backdrop { 	background: rgba(128, 128, 128, 0); 	background: transparent; }  `; var prev_style = document.querySelector(&apos;#_tmp_dialog_brightness_contrast_style&apos;); if (prev_style) { prev_style.remove(); prev_style = null; } document.head.innerHTML +=...

CSS

html, body { background: #ffffffff; color: #000;}
xxxhtml, xxxbody { background: #000; color: #fff;}

/* disable default darkened backdrop by overwriting with transparant value: */
dialog#_tmp_dialog_brightness_contrast::backdrop {
	background: rgba(128, 128, 128, 0);
	background: transparent;
}

JavaScript

var qS = document.querySelector.bind(document);
var qSA = document.querySelectorAll.bind(document);
var dialog = document.querySelector('#_tmp_dialog_brightness_contrast');

document.querySelector('#start').addEventListener('click', function(e){
	dialog.showModal();
});

dialog.showModal();


bind('#_tmp_dialog_brightness_contrast form', 'submit change reset', update);
bind('#_tmp_dialog_brightness_contrast form input', 'input click keyup', update);
bind('#_tmp_dialog_brightness_contrast form input[type="range"]', 'input', function(e){
	this.title = this.value;
});

function bind(targets, events, handler) {
	if (typeof targets === 'string') {
		targets = document.querySelectorAll(targets);
	} else if (typeof targets === 'object' && !targets.forEach) {
		targets = [targets];
	}
	if (typeof events === 'string') {
		events = events.trim().split(/\s+/);
	}
	targets.forEach(function(el){
		events.forEach(function(event){
			el.addEventListener(event, handler);
		});
	});
}

var update_timeout;
function update() {
	clearTimeout(update_timeout);
	update_timeout = setTimeout(update2, 10);
}

function update2() {
	var dialog = document.querySelector('#_tmp_dialog_brightness_contrast');
	var input_brightness = dialog.querySelectorAll('input[type="range"]')[0]; // #_tmp_dialog_brightness
	var input_contrast   = dialog.querySelectorAll('input[type="range"]')[1]; // #_tmp_dialog_contrast
	var input_adjusthtml = dialog.querySelectorAll('input[type="checkbox"]')[0]; // #_tmp_dialog_html_background
	var b = parseFloat(input_brightness.value);
	var c = parseFloat(input_contrast.value);
	// this only changes appearance of everything inside the html element, but not the html background:
	document.querySelector('html').style.filter = 'brightness(' + b + ') contrast(' + c + ')';
	// this attempts to change the appearance of the html element background color:
	updateHtmlBackground(b, input_adjusthtml.checked);
}
function updateHtmlBackground(b, adjust) {
	var html =...