unalert is dom based alert dialog

unalert.user.js

// ==UserScript==
// @name           unalert
// @description    dom based alert dialog
// @include        http://www.nicovideo.jp/*
// @charset        utf-8
// @compatibility  Firefox
// @namespace      http://twitter.com/xulapp
// @author         xulapp
// @license        MIT License
// @version        2011/01/23 14:20 +09:00
// ==/UserScript==
// @version        2011/01/02 20:30 +09:00


(function unalert() {
	const DEFAULT_POSITION = 'right: 0; bottom: 0;';

	GM_addStyle(<><![CDATA[
		.unalert {
			position: fixed;
			min-width: 320px;
			font-size: 9pt;
			text-align: left;
			z-index: 2147483647;
		}
		.unalert-titlebar {
			min-height: 21px;
			padding: 0 5px;
			border-width: 1px 1px 0;
			border-style: solid;
			border-color: #272727;
			-moz-border-radius: 6px 6px 0 0;
			background-image: -moz-linear-gradient(#6e6e6e, #272727);
			color: #ffffff;
			line-height: 21px;
			cursor: default;
			-moz-user-select: none;
		}
		.unalert-content {
			max-width: 45em;
			padding: 8px;
			border-width: 0 3px 3px;
			border-style: solid;
			border-color: #272727;
			background-color: #f0f0f0;
		}
		.unalert-content-box {
			min-height: 32px;
			padding: 5px 5px 4px 47px;
			background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEqklEQVR4Xu2XW2wUVRyHv7OzXXrZ3ZZuL0vvpbu09MKWXjBQooKCKPFBbqYRgxgQCtEECAlgYtEXKVCjbWK5aAyBoNEEo8b44INPhuiDFaMQxCIo2LR0Y7d0e5mdmWMz2UxSGCrLJTzol0wyT//zze+c30xGSCl5kDiA/7aAE2D58uUkys6Vv7Gzy6tcunRJ7l8bNTZ2qkyFpmn3NAEBbDrepmhfvJMWBhruKgGn00kiNDf1VAbnlR3yBwZQx4ozxkfVt6H/UUBLXCBxlIpK9xFf0V8I0Y8rGQLzfE3vbYus2dShnVRVNXGBlJQUbpfnFvy4rKCycIFTuYyhSwSCrKIRKup8+6DvFDB2PxNwzazI7PJkXkYaBgASicMxTFljduGJXQOta95gDyATEuju7ubfaFmiUl2lbC+oLCgUDPLnH/DxKfB6YcM68GQOEqz3t2x58mrHu1+pvffjPeAvqc7bNS25h8ig5KkVTo6d9NHRlUnbWykIxikJJacve9jVDjjutYCoq0/emzszlo4xys+/SCQesz1JSUkMDRcidcm0lAEC9f7m9vWuhxJqQWpqKlOx9fG+2cVVwU2K45y5UIEfhBDW5VScpgBCJ79CUB1KPQCqVcu7TUCpqs04kpk3iNRjGLpBXq6BruuWQKhyxBSYuHAqYYKN2U2Ht7hWCyFuL4G0tDRuxcuPXVhaMmd2kzDOYH05BdSHVM73uM30CmaEkYbEBElW/jjlofQ2GPgUGLubGiYFa/yH3N4rSM2wFgeYWzXGrxcFbrebWcXnzQTiIESEQENO4fEdkda1B1WzlgnX8NUVqVRXsL2wuqJIxn4HySSB+mqVjz6XlJfpJLtUDJ04AiHAkzFEsNbXsnFRf8fRb/TeO0kgt2xu8W6XswdDM7hxPxvnaMRiMWrj+2+BRAoQjFAyJzd96QKlfULgeUBPREA01LtaZwQc6YYaAQlSSASTJWYHDDK9lgCISRq4pg0wqz6ned+zvZ3A6duu4WvPxMpLQ/ktQrsQH24NJR4yCMjPNcjPHrQVMNFV8oJOqmpcB4QQi4CYJSjlLRNQamq9R7NmjGKMjWGDlcaqJyJMd8dMAYRdjuAQ1wg25DR1vnBl1SvHjA+llDcn4PF4sJ7+6b4lM+sCC43Rn8xq2Qy10ogOR+mXxoSExBYBoJOVF6O8OqUNomYtp6ph0qyQ/7Db3Yc+otkNtNi810fP1Rw0TWPXhj6WLbx+k6SFESbQ4C98f/No64tdulVLS2Bl4DIAjbXJ20pra4q06A9Iw4zZdmjvNcVc3O12A3CmJ4Ol878nDnZvQI93mECNp2V9U6Tjg29lr10C2SU1/j1OeRE9ZtgdOgt/pkZRQQZ/R3TzAJcWqJPOgeRmeTk+RHGlL31x3VD7hMBawLAEDn5tcHgd66f7RtL1aBgpsUDYD3x941lOn6si2TXM4lD3JIFbyTtFmKxsmoGXgGEAIaVETNC+mq3zHxGducWgKNgjbrix3yHbRkhgLApnv5PXV7TJUill2EoAkDs+4cTuEZk13UcAB46pB0ruBG0c/cwFPgOidi2IvPkl+4HU+/jHpMejHyfO/z+nD1zgH1+KzmTFiwjRAAAAAElFTkSuQmCC") no-repeat 5px 5px;
			white-space: pre-wrap;
			word-wrap: break-word;
		}
		.unalert-button-box {
			text-align: center;
		}
		.unalert-button {
			min-width: 6em;
			margin: 6px 5px 2px;
			padding: 0;
			font-size: 9pt;
		}
	]]></>);

	var script = document.createElement('script');
	script.type = 'text/javascript; version=1.8';
	script.textContent = <><![CDATA[
		(function() {
			function Class(sup, pro) {
				if (sup && typeof sup === 'object')
					pro = sup, sup = Object;

				var con = Object.prototype.hasOwnProperty.call(pro, 'constructor') ? pro.constructor : Function();
				pro.constructor = con;
				pro.__proto__ = sup && sup.prototype;
				con.prototype = pro;
				con.superclass = sup;
				con.__proto__ = Class.prototype;

				return con;
			}
			Class = Class(Function, {
				constructor: Class,
				__noSuchMethod__: function __noSuchMethod__(name, args) {
					if (name in this.prototype)
						return Function.prototype.call.apply(this.prototype[name], args);
					throw new TypeError((this.name || 'class') + '.' + name + ' is not a function');
				},
				$super: function $super(self, args) {
					var sup = this.superclass;
					var method = $super.caller === this ? sup : sup.prototype[$super.caller.name];
					return method.apply(self, args || []);
				},
				createInstance: function createInstance(args) {
					var instance = {__proto__: this.prototype};
					var result = this.apply(instance, args || []);
					return result instanceof Object ? result : instance;
				},
			});

			var draggable = Class({
				constructor: function draggable(element) {
					if (!(this instanceof draggable))
						return draggable.createInstance(arguments);

					this.element = element;
					element.addEventListener('mousedown', this, false, false);
				},
				isDraggableTarget: let (formCtrlExp) function isDraggableTarget(target) {
					if (!target) return false;
					if (target === this.element) return true;
					if (!formCtrlExp)
						formCtrlExp = document.createExpression('ancestor-or-self::*[local-name()="select" or local-name()="button" or local-name()="input" or local-name()="textarea" or @*[local-name()="tabindex"]]', null);
					return !formCtrlExp.evaluate(target, XPathResult.BOOLEAN_TYPE, null).booleanValue;
				},
				detatch: function detatch() {
					this.element.removeEventListener('mousedown', this, false);
				},
				handleEvent: function handleEvent(event) {
					if (event.type in this)
						this[event.type](event);
				},
				mousedown: function onMouseDown(event) {
					if (event.button !== 0) return;
					if (!this.isDraggableTarget(event.target)) return;

					event.preventDefault();

					var focused = this.element.querySelector(':focus');
					if (focused)
						focused.blur();
					this.offsetX = event.pageX - this.element.offsetLeft;
					this.offsetY = event.pageY - this.element.offsetTop;
					document.addEventListener('mousemove', this, true, false);
					document.addEventListener('mouseup', this, true, false);
				},
				mousemove: function onMouseMove(event) {
					event.preventDefault();

					this.element.style.left = event.pageX - this.offsetX + 'px';
					this.element.style.top = event.pageY - this.offsetY + 'px';
				},
				mouseup: function onMouseUp(event) {
					if (event.button !== 0) return;

					event.preventDefault();

					document.removeEventListener('mousemove', this, true);
					document.removeEventListener('mouseup', this, true);
				},
			});

			alert = function unalert(message) {
				var wrapper = document.createElement('div');
				wrapper.className = 'unalert';

				var tbar = document.createElement('div');
				tbar.className = 'unalert-titlebar';
				tbar.textContent = 'unalert';

				var content = document.createElement('div');
				content.className = 'unalert-content';

				var cbox = document.createElement('div');
				cbox.className = 'unalert-content-box';
				cbox.textContent = message;

				var bbox = document.createElement('div');
				bbox.className = 'unalert-button-box';

				var btn = document.createElement('button');
				btn.className = 'unalert-button';
				btn.textContent = 'OK';
				btn.addEventListener('click', function() document.adoptNode(wrapper), false);

				draggable(wrapper);
				wrapper.appendChild(tbar);
				wrapper.appendChild(content);
				content.appendChild(cbox);
				content.appendChild(bbox);
				bbox.appendChild(btn);

				document.body.appendChild(wrapper);
				wrapper.setAttribute('style', ]]>{uneval(DEFAULT_POSITION)}<![CDATA[);
				wrapper.setAttribute('style', 'left: ' + wrapper.offsetLeft + 'px; top: ' + wrapper.offsetTop + 'px;');
			};
		})();
	]]></>;

	document.adoptNode(document.querySelector('head').appendChild(script));
})();