// ==UserScript==
// @name           userChrome.js
// @namespace      scrollbars_win10
// @version        0.0.4
// @note           Windows 10 style by /u/mrkwatz https://www.reddit.com/r/FirefoxCSS/comments/7fkha6/firefox_57_windows_10_uwp_style_overlay_scrollbars/
// @note           Brought to Firefox 57 by /u/Wiidesire https://www.reddit.com/r/firefox/comments/7f6kc4/floating_scrollbar_finally_possible_in_firefox_57/
// @note           userChrome.js https://github.com/nuchi/firefox-quantum-userchromejs
// @note           Forked from https://github.com/Endor8/userChrome.js/blob/master/floatingscrollbar/FloatingScrollbar.uc.js
// ==/UserScript==

(function () {
	var prefs = Services.prefs,
		enabled;
	if (prefs.prefHasUserValue('userChromeJS.floating_scrollbar.enabled')) {
		enabled = prefs.getBoolPref('userChromeJS.floating_scrollbar.enabled');
	} else {
		prefs.setBoolPref('userChromeJS.floating_scrollbar.enabled', true);
		enabled = true;
	}

var css = `
		@namespace url(http: //www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

		:not(select):not(hbox) > scrollbar {
			-moz-appearance: none!important;
			position: relative!important;
			background-color: transparent;
		}
		:not(select):not(hbox) > scrollbar thumb,
		:not(select):not(hbox) > scrollbar scrollbarbutton{
			-moz-appearance: none!important;
			background-color: transparent;
			pointer-events: auto;
			opacity: 0.5;
			transition: opacity 0.1s ease-in;
		}
		:not(select):not(hbox) > scrollbar scrollbarbutton{
			opacity: 0;
			filter: invert(100%);
		}
		scrollbarbutton[type="decrement"]{
			border-image-source: url("chrome://global/skin/icons/calendar-arrow-left.svg");
		}
		scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]{
			border-image-source: url("chrome://global/skin/icons/find-previous-arrow.svg");
		}
		scrollbarbutton[type="increment"]{
			border-image-source: url("chrome://global/skin/icons/calendar-arrow-right.svg");
		}
		scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]{
			border-image-source: url("chrome://global/skin/icons/find-next-arrow.svg");
		}
		:not(select):not(hbox) > scrollbar[orient = "vertical"] thumb{
			border-image-source: linear-gradient(to right, transparent 12px, black 14px);
			border-image-width: 0 0 0 16px;
			border-image-slice: 0% 0% 0% 100%;
			border-image-repeat: stretch;
		}
		:not(select):not(hbox) > scrollbar[orient = "horizontal"] thumb{
			border-image-source: linear-gradient(to bottom, transparent 12px, black 14px);
			border-image-width: 16px 0 0 0;
			border-image-slice: 100% 0% 0% 0%;
			border-image-repeat: stretch;
		}

		:not(select):not(hbox) > scrollbar scrollbarbutton{
			border-image-width: 0 0 0 12px;
			border-image-slice: 0% 0% 0% 84%;
			border-image-repeat: stretch;
			min-width: unset !important;
			min-height: 16px !important;
		}
		:not(select):not(hbox) > scrollbar[orient = "vertical"] {
			min-width: 16px!important;
			-moz-margin-start: -16px;/*margin to fill the whole render window with content and overlay the scrollbars*/
		}
		:not(select):not(hbox) > scrollbar[orient = "horizontal"] {
			height: 16px!important;
			margin-top: -16px;
		}
		:not(select):not(hbox) > scrollbar[orient = "vertical"] thumb,
		:not(select):not(hbox) > scrollbar[orient = "vertical"] scrollbarbutton		{
			border-right: 16px solid rgba(133, 132, 131, 1);
			width: 16px;
			min-height: 16px;
		}
		:not(select):not(hbox) > scrollbar[orient = "horizontal"] thumb,
		:not(select):not(hbox) > scrollbar[orient = "horizontal"] scrollbarbutton		{
			border-bottom: 16px solid rgba(133, 132, 131, 1);
			min-width: 16px !important;
		}
		:not(select):not(hbox) > scrollbar:hover {
			background-color: rgba(0, 0, 0, 0.25);
		}
		:not(select):not(hbox) > scrollbar:hover thumb,
		:not(select):not(hbox) > scrollbar:hover scrollbarbutton		{
			opacity: 1;
		}
		:not(select):not(hbox) > scrollbar:hover thumb{
			border-image: none !important;
		}

:not(select):not(hbox) > scrollbar gripper {
			display: none;
		}
	`;

	var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
	var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));

	var p = document.getElementById('devToolsSeparator');
	var m = document.createElement('menuitem');
	m.setAttribute('label', "Windows 10 Style Scrollbars");
	m.setAttribute('type', 'checkbox');
	m.setAttribute('autocheck', 'false');
	m.setAttribute('checked', enabled);
	p.parentNode.insertBefore(m, p);
	m.addEventListener('command', command, false);

	if (enabled) {
		sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
	}

	function command() {
		if (sss.sheetRegistered(uri, sss.AGENT_SHEET)) {
			prefs.setBoolPref('userChromeJS.floating_scrollbar.enabled', false);
			sss.unregisterSheet(uri, sss.AGENT_SHEET);
			m.setAttribute('checked', false);
		} else {
			prefs.setBoolPref('userChromeJS.floating_scrollbar.enabled', true);
			sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
			m.setAttribute('checked', true);
		}

		let root = document.documentElement;
		let display = root.style.display;
		root.style.display = 'none';
		window.getComputedStyle(root).display; // Flush
		root.style.display = display;
	}

})();