Full Code of quodroc/HumbleNewTabPage for AI

Repository: quodroc/HumbleNewTabPage
Branch: master
Commit: ad0a9659e4f0
Files: 8
Total size: 62.1 KB

Directory structure:
gitextract_b_3ma_xc/

├── LICENSE_MIT.txt
├── README.md
├── icons/
│   └── LICENSE_chromium_BSD.txt
├── manifest.json
├── newtab.css
├── newtab.html
├── newtab.js
└── privacy.md

================================================
FILE CONTENTS
================================================

================================================
FILE: LICENSE_MIT.txt
================================================
Copyright (c) 2012 Isaiah Billingsley

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

================================================
FILE: README.md
================================================
Humble New Tab Page
===================

Redesigned new tab page featuring your bookmarks, apps, most visited, and recently closed in a custom layout.

![](media/shot.1.png)

### Features

- Simple, clean design
- Highly customizable
- Fast loading and lightweight

[Download for Chrome](https://chrome.google.com/webstore/detail/mfgdmpfihlmdekaclngibpjhdebndhdj)

[Download for Firefox](https://addons.mozilla.org/firefox/addon/humble-new-tab/)

This extension replaces the default new tab page. Drag and drop folders to create new columns or reorder them. The font, colors, spacing, and more can be customized from the options menu.


Screenshots
-----------
![](media/shot.2.png)
![](media/shot.3.png)
![](media/shot.4.png)
![](media/shot.5.png)


License
-------

This project is licensed under the **MIT License**, see [LICENSE_MIT.txt](LICENSE_MIT.txt) for details.


Changelog
---------

### Version 1.26.2 - April 9, 2025

- (Firefox) Removed Favicon Kit and Qwant favicon providers, added Ecosia and Icon Horse

### Version 1.26.1 - October 15, 2023

- (Chrome) Fixed navigating to file:/// URLs (enable "Allow access to file URLs" in Manage Extensions > Details)
- (Vivaldi) Hide bookmark separators

### Version 1.26 - July 2, 2023

- Added font-weight option
- (Chrome) Replaced Apps folder with a link to chrome://apps
- (Firefox) Set home page to new tab page (change in Firefox settings)
- (Firefox) Updated Google favicon provider

### Version 1.25 - March 11, 2023

- Manifest V3
- Updated favicon
- (Firefox) Added Qwant and Yandex favicon providers

### Version 1.24.2 - February 21, 2020

- (Firefox) Added DuckDuckGo favicon provider

### Version 1.24.1 - May 14, 2019

- (Firefox) Set addon ID for consistent page URL

### Version 1.24 - February 10, 2019

- Temporarily disabled weather feature
- Improved keyboard navigation
- Fixed bug opening options
- (Firefox) Changed extension name to HNTP
- (Firefox) Fixed broken favicons
- (Firefox) Fixed context menu not opening

### Version 1.23.3 - December 3, 2018

- (Firefox) Fixed folder closing animation

### Version 1.23.1 - December 2, 2018

- (Firefox) Removed unused "management" permission

### Version 1.23 - December 2, 2018

- Added tooltips for truncated text
- Added option to remember open folders
- (Firefox) Added option for favicon provider

### Version 1.22 - October 15, 2017

- Firefox support

### Version 1.21 - November 20, 2016

- Added HiDPI icons
- Fixed export settings not selectable

### Version 1.20 - June 1, 2016

- Added import/export settings
- Fixed recently closed max items

### Version 1.19 - April 14, 2016

- Fixed weather not updating

### Version 1.18 - April 3, 2016

- Removed geolocation
- Fixed weather error

### Version 1.17 - January 24, 2016

- Fixed weather error

### Version 1.16 - August 29, 2014

- Added other devices folder
- Recently closed tabs preserve history
- Removed background process
- Chrome version 37 or later required

### Version 1.15 - July 6, 2014

- Fixed freezing issues

### Version 1.14 - May 11, 2014

- Reduced memory usage
- Added option to set number of items for recently closed, recent bookmarks, and most visited
- Added option for background image size
- Added link to bookmark manager in folder context menu

### Version 1.12 - August 18, 2013

- Reorder apps via drag and drop

### Version 1.11 - August 3, 2013

- Fixed launching packaged apps (Google Keep)
- Fixed launching file:/// and chrome:// URLs
- Fixed Mobile Bookmarks folder not being removable
- Disable weather if geolocation is denied
- Default layout changed to 2 columns
- Uninstall apps from the context menu
- Hide Google Wallet Service from apps

### Version 1.9 - December 30, 2012

- Uses geolocation for weather by default
- Fixed bug with drag and drop
- Added Chrome Web Store to apps

### Version 1.8 - November 9, 2012

- Redesigned options panel
- Added several new settings
- Performance tweaks
- Source code released under the MIT license

### Version 1.7 - September 8, 2012

- Added custom CSS field for advanced users
- Added option to hide Bookmarks bar and Other bookmarks

### Version 1.6 - August 30, 2012

- Added option to open links in new tabs
- Support local file for background image
- Weather errors fixed

### Version 1.5 - August 29, 2012

- Weather forecast now uses Yahoo
- System font list enabled on supported versions

### Version 1.4 - August 10, 2012

- Added option to disable the weather and other special folders
- Minor bug fixes

### Version 1.3 - August 9, 2012

- Fixed error on old Chrome versions

### Version 1.2 - August 8, 2012

- Added apps, most visited, recently closed, and weather
- More flexible layout with unlimited columns
- Open all links in folder from context menu
- Color themes and new default style
- Added smooth animation and highlight shadow
- Drag and drop to reorder folders and columns
- Background image support
- Bug fixes
- New name (formerly New Tab + Bookmark Tree)

### Version 1.1 - July 20, 2011

- Added options menu

### Version 1.0 - July 17, 2011

- Initial release


================================================
FILE: icons/LICENSE_chromium_BSD.txt
================================================
Copyright (c) 2012 The Chromium Authors. All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.
* Neither the name of Google Inc. nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

================================================
FILE: manifest.json
================================================
{
	"name": "Humble New Tab Page",
	"short_name": "HNTP",
	"version": "1.26.2",
	"minimum_chrome_version": "104",
	"manifest_version": 3,
	"description": "Redesigned new tab page featuring your bookmarks, apps, most visited, and recently closed in a custom layout.",
	"icons": {
		"128": "icons/icon_128.png",
		"48": "icons/icon_48.png",
		"16": "icons/icon_16.png"
	},
	"permissions": [
		"bookmarks",
		"favicon",
		"topSites",
		"tabs",
		"fontSettings",
		"sessions"
	],
	"optional_host_permissions": [
		"file:///"
	],
	"chrome_url_overrides": {
		"newtab": "newtab.html"
	},
	"options_ui": {
		"page": "newtab.html?options",
		"open_in_tab": true
	}
}


================================================
FILE: newtab.css
================================================
body {
	background-color: #FFF;
	background-attachment: fixed;
	background-position: left top;
	width: 100vw;
	margin: 0 auto;
	overflow-x: hidden;
	font-family: sans-serif;
	font-size: 62.5%;
	line-height: 1;
}
#main {
	width: 80%;
	margin: 5% auto 0;
	position: relative;
	max-width: 100%;
	white-space: nowrap;
	user-select: none;
}
#main ul, .menu {
	margin: 0;
	padding: 0;
	list-style: none;
}
#main a + ul, #main a + div {
	padding-left: 24px;
}
#main a {
	box-sizing: border-box;
	max-width: 100%;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 1.6em;
	line-height: 2;
	text-decoration: none;
	color: #555;
	padding: 0 .8em;
	border-radius: .2em;
	cursor: pointer;
	transition-property: color, background-color, box-shadow, opacity;
	transition-duration: 0.2s;
	transition-timing-function: ease-out;
}
#main a:hover {
	color: #000;
	background-color: #E4F4FF;
	box-shadow: 0 0 7px #57B0FF;
}
.icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: -3px .4em 0 0;
	background-size: 100% 100%;
	vertical-align: middle;
}
#main a:after {
	/* workaround Chromium issue 142154 */
	content: '';
	display: inline-block;
	width: 2px;
	margin-left: -2px;
}
.wrap {
	transition-property: height, opacity;
	transition-duration: 0.2s;
	transition-timing-function: ease-out;
}
.column {
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	padding: 10px 0 20px 0;
	min-height: 300px;
}
#main .empty {
	opacity: 0.5;
}
.menu {
	position: absolute;
	white-space: nowrap;
	font-size: 1.2em;
	line-height: 2;
	background-color: #FAFAFA;
	border: solid 1px #999;
	border-radius: 3px;
	box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
}
.menu a {
	display: block;
	text-decoration: none;
	color: #000;
	padding: 0 2em;
	cursor: default;
}
.menu a:hover {
	background-color: #E4F4FF;
	border: solid 1px #57B0FF;
	margin: -1px;
	position: relative;
}
.menu li:first-child a {
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}
.menu li:last-child a {
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}
.menu hr {
	margin: 0;
	border: solid #CCC;
	border-width: 1px 0 0 0;
}
.dragstart {
	opacity: 0.5;
}
.hide-focus :focus {
	outline: none;
}
#options, #options_button {
	position: absolute;
	top: 0;
	right: 0;
}
#options {
	display: none;
	font-size: 1.4em;
	color: #000;
	border: solid #999;
	border-width: 0 0 1px 1px;
	border-bottom-left-radius: 3px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
	min-width: 32em;
	min-height: 10em;
}
#options_nav {
	position: absolute;
	width: 10em;
	top: -1px;
	bottom: 0;
	background-color: #EEE;
	list-style: none;
	margin: 0;
	padding: 0;
	border-right: solid 1px #ccc;
}
#options_nav a {
	display: block;
	padding: 1em 2em;
	text-decoration: none;
	color: inherit;
	border: solid transparent;
	border-width: 1px 0;
	cursor: pointer;
}
#options_nav a:hover {
	background-color: #E4F4FF;
	outline: solid thin #57B0FF;
}
#options_nav a.current {
	color: #000;
	background-color: #FAFAFA;
	border-color: #CCC;
	margin-right: -1px;
	outline: none;
}
#options .section {
	margin-left: 10em;
	margin-top: -1px;
	padding: 1px 0;
	background-color: #FAFAFA;
	display: none;
}
#options .section.current {
	display: block;
}
#options_button {
	background: transparent no-repeat center center;
	width: 32px;
	height: 32px;
	opacity: 0.6;
	cursor: pointer;
}
#options_button:hover {
	opacity: 1;
}
#options_close_button {
	color: #000;
	text-align: center;
	text-decoration: none;
	font-size: 1.4em;
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 32px;
	height: 32px;
	line-height: 32px;
	cursor: pointer;
}
legend {
	color: #888;
}
fieldset {
	border: none;
	margin: 1em .5em 1em 2em;
	padding: .5em 0 0;
}
label {
	display: block;
	font-size: 0.85em;
	text-align: right;
	margin: 0 0 .1em 1.4em;
	clear: left;
}
label span {
	float: left;
	text-align: left;
	line-height: 1.9;
}
input, select, textarea, .revert {
	width: 9em;
	margin: 0 0 0 .5em;
	box-sizing: border-box;
	vertical-align: middle;
}
textarea {
	width: 20em;
	height: 16em;
	font-size: 1.1em;
	font-family: monospace;
	vertical-align: top;
	float: left;
}
input.color {
	width: 6em;
	font-family: monospace;
}
input[type="checkbox"] {
	width: 1.2em;
}
input[type=color] {
	width: 3em;
	margin: 0;
}
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0 1px;
}
input[type="file"]::-webkit-file-upload-button {
	width: 100%;
}
.subopt {
	margin: 0 0 .8em 2.5em;
}
.subopt input {
	width: 4em;
}
.revert {
	display: inline-block;
	width: 18px;
	height: 16px;
	opacity: .5;
	background-image: -webkit-image-set(url("icons/revert.png") 1x, url("icons/revert@2x.png") 2x);
	background-size: 100%;
	cursor: pointer;
}
.revert:hover {
	opacity: 1;
}
.folder .icon {
	background-image: -webkit-image-set(url("icons/folder.png") 1x, url("icons/folder@2x.png") 2x);
}
.open .icon {
	background-image: -webkit-image-set(url("icons/folder_open.png") 1x, url("icons/folder_open@2x.png") 2x);
}
.empty .icon {
	display: none;
}
/* The following icons are copyright (c) 2012 The Chromium Authors.
   see LICENSE_chromium_BSD.txt */
.recent .icon {
	background-image: -webkit-image-set(url("icons/recent.png") 1x, url("icons/recent@2x.png") 2x);
}
.top .icon {
	background-image: -webkit-image-set(url("icons/top.png") 1x, url("icons/top@2x.png") 2x);
}
.closed .icon {
	background-image: -webkit-image-set(url("icons/closed.png") 1x, url("icons/closed@2x.png") 2x);
}
.window .icon {
	background-image: -webkit-image-set(url("icons/window.png") 1x, url("icons/window@2x.png") 2x);
}
.devices .icon {
	background-image: -webkit-image-set(url("icons/phone.png") 1x, url("icons/phone@2x.png") 2x);
}
.error .icon {
	background-image: -webkit-image-set(url("icons/error.png") 1x, url("icons/error@2x.png") 2x);
}
#options_button {
	background-image: -webkit-image-set(url("icons/options.png") 1x, url("icons/options@2x.png") 2x);
}


================================================
FILE: newtab.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>New Tab</title>
<link rel="stylesheet" href="newtab.css">
<link rel="icon" href="icons/icon_16.png">
</head>
<body>
<div id="main">
</div>
<a id="options_button" title="Options" tabindex="0"></a>
<div id="options">
	<a id="options_close_button" title="Close" tabindex="0">&times;</a>
	<ul id="options_nav">
		<li><a class="current" tabindex="0">Settings</a></li>
		<li><a tabindex="0">Appearance</a></li>
		<li><a tabindex="0">Import/Export</a></li>
		<li><a tabindex="0">Advanced</a></li>
	</ul>
	<div class="section current">
	<fieldset>
		<legend>Settings</legend>
		<label><span>Open links in</span><select id="options_newtab">
			<option value="0">Current tab</option>
			<option value="1">New tab</option>
			<option value="2">New tab (background)</option>
		</select></label>
		<label><span>Lock columns</span><input id="options_lock" type="checkbox"/></label>
		<label><span>Remember open folders</span><input id="options_remember_open" type="checkbox"/></label>
		<label><span>Auto-close folders</span><input id="options_auto_close" type="checkbox"/></label>
		<label><span>Show top-level folders</span><input id="options_show_root" type="checkbox"/></label>
		<label><span>Hide options button</span><input id="options_hide_options" type="checkbox"/></label>
	</fieldset>
	<fieldset>
		<legend>Content</legend>
		<label><span>Apps</span><input id="options_show_apps" type="checkbox"/></label>
		<div id="options_show_bookmarks"></div>
		<label><span>Most visited</span><input id="options_show_top" type="checkbox"/></label>
		<label class="subopt"><span>Number of items</span><input id="options_number_top" type="number" min="1" max="10"/></label>
		<label><span>Recent bookmarks</span><input id="options_show_recent" type="checkbox"/></label>
		<label class="subopt"><span>Number of items</span><input id="options_number_recent" type="number" min="1" max="1000"/></label>
		<label><span>Recently closed</span><input id="options_show_closed" type="checkbox"/></label>
		<label class="subopt"><span>Number of items</span><input id="options_number_closed" type="number" min="1" max="25"/></label>
		<label><span>Other devices</span><input id="options_show_devices" type="checkbox"/></label>
	</fieldset>
	</div><div class="section">
	<fieldset>
		<legend>Font</legend>
		<label><span>Font</span><input id="options_font" type="text"/></label>
		<label><span>Size</span><input id="options_font_size" type="number" min="6" max="100"/></label>
		<label><span>Weight</span><select id="options_font_weight">
			<option value="100">Thin</option>
			<option value="200">Extra Light</option>
			<option value="300">Light</option>
			<option value="400">Regular</option>
			<option value="500">Medium</option>
			<option value="600">Semi Bold</option>
			<option value="700">Bold</option>
			<option value="800">Extra Bold</option>
			<option value="900">Heavy</option>
		</select></label>
	</fieldset>
	<fieldset>
		<legend>Colors</legend>
		<label><span>Theme</span><select id="options_theme"></select></label>
		<label><span>Text</span><input id="options_font_color" type="color"/></label>
		<label><span>Background</span><input id="options_background_color" type="color"/></label>
		<label><span>Highlight</span><input id="options_highlight_color" type="color"/></label>
		<label><span>Highlight text</span><input id="options_highlight_font_color" type="color"/></label>
		<label><span>Shadow</span><input id="options_shadow_color" type="color"/></label>
	</fieldset>
	<fieldset>
		<legend>Layout</legend>
		<label><span>Item spacing</span><input id="options_spacing" type="range" min="0" max="2" step="0.001"/></label>
		<label><span>Top margin</span><input id="options_v_margin" type="range" min="0" max="2" step="0.001"/></label>
		<label><span>Column width</span><input id="options_width" type="range" min="0" max="2" step="0.001"/></label>
		<label><span>Align</span><input id="options_h_pos" type="range" min="0" max="2" step="0.001"/></label>
		<label><span>Scale with window size</span><input id="options_auto_scale" type="checkbox"/></label>
	</fieldset>
	<fieldset>
		<legend>Highlight</legend>
		<label><span>Shadow size</span><input id="options_shadow_blur" type="range" min="0" max="2" step="0.001"/></label>
		<label><span>Corner roundness</span><input id="options_highlight_round" type="range" min="0" max="2" step="0.001"/></label>
	</fieldset>
	<fieldset>
		<legend>Animation</legend>
		<label><span>Highlight fade time</span><input id="options_fade" type="range" min="0" max="2" step="0.001"/></label>
		<label><span>Folder open time</span><input id="options_slide" type="range" min="0" max="2" step="0.001"/></label>
	</fieldset>
	<fieldset>
		<legend>Background image</legend>
		<label><span>URL</span><input id="options_background_image" type="url" placeholder="http://"/></label>
		<label><span>Local file</span><input id="options_background_image_file" type="file" accept="image/*"/></label>
		<label><span>Size</span><select id="options_background_size">
			<option value="auto">Original</option>
			<option value="cover">Full</option>
			<option value="contain">Best fit</option>
		</select></label>
		<label><span>Align</span><select id="options_background_align">
			<option value="left top">Top left</option>
			<option value="top">Top</option>
			<option value="right top">Top right</option>
			<option value="left">Left</option>
			<option value="center">Center</option>
			<option value="right">Right</option>
			<option value="left bottom">Bottom left</option>
			<option value="bottom">Bottom</option>
			<option value="right bottom">Bottom right</option>
		</select></label>
		<label><span>Tiling</span><select id="options_background_repeat">
			<option value="repeat">Tile</option>
			<option value="repeat-x">Horizontal</option>
			<option value="repeat-y">Vertical</option>
			<option value="no-repeat">None</option>
		</select></label>
	</fieldset>
	</div><div class="section">
	<fieldset>
		<legend>Export Settings</legend>
		<label><textarea id="options_export" readonly></textarea></label>
	</fieldset>
	<fieldset>
		<legend>Import Settings</legend>
		<label><textarea id="options_import"></textarea></label>
	</fieldset>
	</div><div class="section">
	<fieldset>
		<legend>Generated CSS</legend>
		<label><textarea id="all_css" readonly></textarea></label>
	</fieldset>
	<fieldset>
		<legend>Custom CSS</legend>
		<label><textarea id="options_css"></textarea></label>
	</fieldset>
	</div>
</div>
<script src="newtab.js"></script>
</body>
</html>


================================================
FILE: newtab.js
================================================
'use strict';

// render a single bookmark node
function render(node, target) {
	if (node.description == 'separator') return;

	var li = document.createElement('li');
	var a = document.createElement('a');

	var url = node.url;
	if (url)
		a.href = url;
	else
		a.tabIndex = 0;

	var text = node.title || node.name || '';
	if (!text && node.title === null) text = node.url || '';
	a.innerText = text;

	if (node.tooltip) a.title = node.tooltip;
	setClass(a, node);

	a.insertBefore(getIcon(node), a.firstChild);

	if (node.action) {
		a.onclick = function(event) {
			return node.action(event);
		};
	} else if (url) {
		var newtab = getConfig('newtab');
		if (newtab == 1) {
			// new foreground tab
			a.target = '_blank';
		} else if (newtab == 2) {
			// new background tab
			a.onclick = function(e) {
				openLink(node, newtab);
				return false;
			};
		}
		// fix opening chrome:// and file:/// urls
		var urlStart = url.substring(0, 6);
		if (urlStart === 'chrome' || urlStart === 'file:/'){
			a.onclick = function(e) {
				openLink(node, newtab || (e.ctrlKey ? 2 : 0));
				return false;
			};
			a.onauxclick = function(e) {
				if (e.button == 1) {
					openLink(node, 2);
					return false;
				}
			}
		}
	} else if (!node.children)
		a.style.pointerEvents = 'none';

	li.appendChild(a);

	// folder
	if (node.children) {
		// render children
		if (a.open || getConfig('remember_open') && localStorage.getItem('open.' + node.id)) {
			setClass(a, node, true);
			a.open = true;
			getChildrenFunction(node)(function(result) {
				renderAll(result, li);
			});
		}

		// click handlers
		addFolderHandlers(node, a);
		enableDragFolder(node, a);

	} else if (node.id == 'apps')
		enableDragFolder(node, a);

	target.appendChild(li);
	return li;
}

// render an array of bookmark nodes
function renderAll(nodes, target, toplevel) {
	var ul = document.createElement('ul');
	for (var i = 0; i < nodes.length; i++) {
		var node = nodes[i];
		// skip extensions and duplicated child folders
		if (toplevel || !coords[node.id])
			render(node, ul);
	}
	if (ul.childNodes.length === 0)
		render({ id: 'empty', title: '< Empty >' }, ul);
	if (toplevel)
		target.appendChild(ul);
	else {
		// wrap child ul for animation
		var wrap = document.createElement('div');
		wrap.appendChild(ul);
		target.appendChild(wrap);
	}
	updateTooltips();
	return ul;
}

// render column with given index
function renderColumn(index, target) {
	var ids = columns[index];
	if (ids.length == 1 && !getConfig('show_root'))
		getChildrenFunction({id: ids[0]})(function(result) {
			renderAll(result, target);
			addColumnHandlers(index, target);
		});
	else if (ids.length > 0) {
		var i = 0;
		var nodes = [];
		// get all nodes for column
		var callback = function(result) {
			for (var j = 0; j < result.length; j++)
				nodes.push(result[j]);
			i++;
			if (i < ids.length)
				getSubTree(ids[i], callback);
			else {
				// render node list
				renderAll(nodes, target, true);
				addColumnHandlers(index, target);
			}
		};
		getSubTree(ids[i], callback);
	}
}

// render all columns to main div
function renderColumns() {
	// clear main div
	var target = document.getElementById('main');
	while (target.hasChildNodes())
		target.removeChild(target.lastChild);

	// render columns
	for (var i = 0; i < columns.length; i++) {
		var column = document.createElement('div');
		column.className = 'column';
		column.style.width = (1 / columns.length) * 100 + '%';

		// enable drag and drop
		enableDragColumn(i, column);

		target.appendChild(column);
		renderColumn(i, column);
	}

	enableDragDrop();
}

// enables click and context menu for given folder
function addFolderHandlers(node, a) {
	// click handler
	a.onclick = function() {
		toggle(node, a, getChildrenFunction(node));
		return false;
	};

	// context menu handler
	var items = getMenuItems(node);

	// column layout items
	if (!getConfig('lock')) {
		items.push(null);// spacer
		items.push({
			label: 'Create new column',
			action: function() {
				addColumn([node.id]);
			}
		});

		if (coords[node.id]) {
			var pos = coords[node.id];
			if (pos.y > 0)
				items.push({
					label: 'Move folder up',
					action: function() {
						addRow(node.id, pos.x, pos.y - 1);
					}
				});
			if (pos.y < columns[pos.x].length - 1)
				items.push({
					label: 'Move folder down',
					action: function() {
						addRow(node.id, pos.x, pos.y + 2);
					}
				});
			if (pos.x > 0)
				items.push({
					label: 'Move folder left',
					action: function() {
						addRow(node.id, pos.x - 1);
					}
				});
			if (pos.x < columns.length - 1)
				items.push({
					label: 'Move folder right',
					action: function() {
						addRow(node.id, pos.x + 1);
					}
				});
			if (root.indexOf(node.id) < 0)
				items.push({
					label: 'Remove folder',
					action: function() {
						removeRow(pos.x, pos.y);
					}
				});
		}
	}

	a.oncontextmenu = function(event) {
		renderMenu(items, event.pageX, event.pageY);
		return false;
	};
}

// enables context menu for given column
function addColumnHandlers(index, ul) {
	var items = [];
	var ids = columns[index];

	// single folder items
	if (ids.length == 1)
		items = getMenuItems({id: ids[0]});

	// column layout items
	if (!getConfig('lock') && columns.length > 1) {
		items.push(null);// spacer
		if (index > 0)
			items.push({
				label: 'Move column left',
				action: function() {
					addColumn(ids, index - 1);
				}
			});
		if (index < columns.length - 1)
			items.push({
				label: 'Move column right',
				action: function() {
					addColumn(ids, index + 2);
				}
			});
		items.push({
			label: 'Remove column',
			action: function() {
				removeColumn(index);
			}
		});
		if (ids.length == 1) {
			if (index > 0)
				items.push({
					label: 'Move folder left',
					action: function() {
						addRow(ids[0], index - 1);
					}
				});
			if (index < columns.length - 1)
				items.push({
					label: 'Move folder right',
					action: function() {
						addRow(ids[0], index + 1);
					}
				});
		}
	}

	if (items.length > 0)
		ul.oncontextmenu = function(event) {
			if (event.target.tagName == 'A' || event.target.parentNode.tagName == 'A')
				return true;
			renderMenu(items, event.pageX, event.pageY);
			return false;
		};
}

// gets context menu items for given node
function getMenuItems(node) {
	var items = [];
		items.push({
			label: 'Open all links in folder',
			action: function() {
				openLinks(node);
			}
		});
	if (node.id == 'closed')
		items.push({
			label: 'Clear browsing data',
			action: function() {
				openLink({ url: 'chrome://settings/clearBrowserData' }, 1);
			}
		});
	if (node.id == 'devices')
		items.push({
			label: 'History',
			action: function() {
				openLink({ url: 'chrome://history' }, 1);
			}
		});
	if (Number(node.id))
		items.push({
			label: 'Edit bookmarks',
			action: function() {
				openLink({ url: 'chrome://bookmarks/?id=' + node.id }, 1);
			}
		});
	return items;
}

// wraps click handler for menu items
function onMenuClick(item) {
	return function() {
		item.action();
		return false;
	};
}

// renders a popup menu at given coordinates
function renderMenu(items, x, y) {
	var ul = document.createElement('ul');
	ul.className = 'menu';
	for (var i = 0; i < items.length; i++) {
		var li = document.createElement('li');
		if (items[i]) {
			var a = document.createElement('a');
			a.innerText = items[i].label;
			a.tabIndex = 0;
			a.onclick = onMenuClick(items[i]);

			li.appendChild(a);
		} else if (i > 0 && i < items.length - 1)
			li.appendChild(document.createElement('hr'));
		else
			continue;

		ul.appendChild(li);
	}
	document.body.appendChild(ul);
	ul.style.left = Math.max(Math.min(x, window.innerWidth + window.scrollX - ul.clientWidth), 0) + 'px';
	ul.style.top = Math.max(Math.min(y, window.innerHeight + window.scrollY - ul.clientHeight), 0) + 'px';
	ul.onmousedown = function(event) {
		event.stopPropagation();
		return true;
	};

	setTimeout(function() {
		document.onclick = function() {
			closeMenu(ul);
			return true;
		};
		document.onmousedown = function() {
			closeMenu(ul);
			return true;
		};
		document.oncontextmenu = function() {
			closeMenu(ul);
			return true;
		};
		document.onkeydown = function(event) {
			if (event.keyCode == 27)
				closeMenu(ul);
			return true;
		};
	}, 20);
	return ul;
}

// removes the given popup menu
function closeMenu(ul) {
	document.body.removeChild(ul);
	document.onclick = null;
	document.onmousedown = null;
	document.oncontextmenu = null;
	document.onkeydown = null;
}

var dragIds;

// enable drag and drop of column
function enableDragColumn(id, column) {
	if (getConfig('lock'))
		return;

	column.draggable = true;

	column.ondragstart = function(event) {
		dragIds = columns[id];
		event.dataTransfer.effectAllowed = 'move';
		this.classList.add('dragstart');
	};
	column.ondragend = function(event) {
		dragIds = null;
		this.classList.remove('dragstart');
		clearDropTarget();
	};
}

var dropTarget;

// enable drag and drop of folder
function enableDragFolder(node, a) {
	if (getConfig('lock'))
		return;

	a.draggable = true;
	a.ondragstart = function(event) {
		dragIds = [node.id];
		event.stopPropagation();
		event.dataTransfer.effectAllowed = 'move copy';
		this.classList.add('dragstart');
	};
	a.ondragend = function(event) {
		dragIds = null;
		this.classList.remove('dragstart');
		clearDropTarget();
	};
}

// init drag and drop handlers
function enableDragDrop() {
	var main = document.getElementById('main');

	if (getConfig('lock')) {
		main.ondragover = null;
		main.ondragleave = null;
		main.ondrop = null;
		return;
	}

	main.ondragover = function(event) {
		event.preventDefault();
		event.dataTransfer.dropEffect = 'move';
		// highlight drop target
		var target = getDropTarget(event);
		if (target) {
			clearDropTarget();
			dropTarget = target;
			var bordercss = 'solid 2px ' + getConfig('font_color');
			if (target.tagName == 'LI' || target.tagName == 'UL') {
				if (isAbove(event.pageY, target)) {
					target.style.borderBottom = bordercss;
					target.style.margin = '0 0 -2px 0';
				} else {
					target.style.borderTop = bordercss;
					target.style.margin = '-2px 0 0 0';
				}
			} else if (target.className == 'column') {
				if (event.pageX - target.offsetLeft > target.clientWidth / 2) {
					target.style.borderRight = bordercss;
					target.style.margin = '0';
				} else {
					target.style.borderLeft = bordercss;
					target.style.margin = '0 2px 0 -2px';
				}
			}
		}
		return false;
	};

	main.ondragleave = function(event) {
		clearDropTarget();
	};

	main.ondrop = function(event) {
		event.stopPropagation();

		var target = getDropTarget(event);
		if (!target)
			return false;

		// calculate drop coordinates
		var x = getDropX(target, event);
		var y = getDropY(target, event);

		if (dragIds.length == 1 && y != null)
			addRow(dragIds[0], x, y);
		else {
			if (event.pageX - target.offsetLeft > target.clientWidth / 2)
				x++;
			addColumn(dragIds, x);
		}

		return false;
	};
}

// gets proper drop target element
function getDropTarget(event) {
	if (!dragIds)
		return null;
	var target = event.target;
	if (target && (target.tagName == 'A' || target.parentNode.tagName == 'A') && dragIds.length == 1) {
		// get parent folder until toplevel
		while (target &&
			target.parentNode.parentNode &&
			target.parentNode.parentNode.className != 'column') {
			// target should be LI
			target = target.parentNode;
		}
		// if single-folder column, get the UL
		if (target && target.tagName == 'LI' &&
			columns[getDropX(target, event)].length == 1)
			target = target.parentNode;
		// target should be LI or UL by here...
	} else
		while (target && target.className != 'column')
			target = target.parentNode;// target column

	return target;
}

// gets x coordinate of drop target
function getDropX(target, event) {
	var x = null;
	while (target && target.className != 'column')
		target = target.parentNode;
	if (target) {
		x = 0;
		for (; target.previousSibling; x++)
			target = target.previousSibling;
	}
	return x;
}

// gets y coordinate of drop target
function getDropY(target, event) {
	var y = null;
	if (target.tagName == 'LI') {
		y = 0;
		if (isAbove(event.pageY, target))
			y++;
		for (; target.previousSibling; y++)
			target = target.previousSibling;
	} else if (target.tagName == 'UL') {
		y = 0;
		if (isAbove(event.pageY, target))
			y++;
	}
	return y;
}

// returns true if y position is above target element midpoint
function isAbove(pageY, target) {
	return pageY - window.scrollY - target.getBoundingClientRect().top > target.clientHeight / 2;
}

// clears droptarget styles
function clearDropTarget() {
	if (dropTarget) {
		dropTarget.style.border = null;
		dropTarget.style.margin = null;
	}
	dropTarget = null;
}

var tooltipTimeout = null;
// adds tootlips to truncated text
function updateTooltips() {
	if (tooltipTimeout) clearTimeout(tooltipTimeout);

	tooltipTimeout = setTimeout(function() {
		tooltipTimeout = null;
		var elements = document.querySelectorAll('#main li a');
		for (var i = 0; i < elements.length; i++) {
			var element = elements[i];
			if (element.clientWidth + 1 < element.scrollWidth) {
				element.title = element.title || element.textContent;
			} else if (element.title === element.textContent) {
				element.title = '';
			}
		}
	}, 100);
}

// gets function that returns children of node
function getChildrenFunction(node) {
	switch(node.id) {
		case 'top':
			return function(callback) {
				if (chrome.topSites)
					chrome.topSites.get(function(result) {
						callback(result.slice(0, getConfig('number_top')));
					});
				else
					callback([]);
			};
		case 'recent':
			return function(callback) {
				chrome.bookmarks.getRecent(getConfig('number_recent'), function(result) {
					callback(result);
				});
			};
		case 'closed':
			return function(callback) {
				getClosed(function(result) {
					callback(result);
				});
			};
		case 'devices':
			return function(callback) {
				getDevices(function(result) {
					callback(result);
				});
			};
		default:
			if (node.children)
				return function(callback) {
					callback(node.children);
				};
			else
				return function(callback) {
					chrome.bookmarks.getSubTree(node.id, function(result) {
						if (result)
							callback(result[0].children);
						else {
							// remove missing bookmark locations
							if (coords[node.id])
								removeRow(coords[node.id].x, coords[node.id].y);
						}
					});
				};
	}
}

// gets the subtree for given id
function getSubTree(id, callback) {
	switch(id) {
		case 'top':
			callback([{ title: 'Most visited', id: 'top', children: true}]);
			break;
		case 'apps':
			callback([{ title: 'Apps', id: 'apps', url: 'chrome://apps' }]);
			break;
		case 'recent':
			callback([{ title: 'Recent bookmarks', id: 'recent', children: true }]);
			break;
		case 'closed':
			callback([{ title: 'Recently closed', id: 'closed', children: true }]);
			break;
		case 'devices':
			callback([{ title: 'Other devices', id: 'devices', children: true }]);
			break;
		default:
			chrome.bookmarks.getSubTree(id, function(result) {
				if (result)
					callback(result);
				else {
					// remove missing bookmark locations
					if (coords[id])
						removeRow(coords[id].x, coords[id].y);
				}
			});
	}
}

// sets css classes for node
function setClass(target, node, isopen) {
	if (node.className)
		target.classList.add(node.className);
	if (node.children)
		target.classList.add('folder');
	if (isopen)
		target.classList.add('open');
	else
		target.classList.remove('open');

	switch(node.id) {
		case 'top':
		case 'apps':
		case 'recent':
		case 'closed':
		case 'devices':
		case 'empty':
			target.classList.add(node.id);
	}
}

// gets best icon for a node
function getIcon(node) {
	var url = null,
		url2x = null;
	if (node.icons) {
		var size;
		for (var i in node.icons) {
			var iconInfo = node.icons[i];
			if (iconInfo.url && (!size || (iconInfo.size < size && iconInfo.size > 15))) {
				url = iconInfo.url;
				if (iconInfo.size > 31) url2x = iconInfo.url;
				size = iconInfo.size;
			}
		}
	} else if (node.icon) {
		url = node.icon;
	} else if (node.url) {
		url = `/_favicon/?pageUrl=${encodeURIComponent(node.url)}&size=16`;
		url2x = `/_favicon/?pageUrl=${encodeURIComponent(node.url)}&size=32`;
	}

	var icon = document.createElement(url ? 'img' : 'div');
	icon.className = 'icon';
	icon.src = url;
	if (url2x) icon.srcset = url2x + ' 2x';
	icon.alt = ' ';
	return icon;
}

// toggle folder open state
function toggle(node, a) {
	var isopen = a.open;
	setClass(a, node, !isopen);
	a.open = !isopen;
	if (isopen) {
		// close folder
		localStorage.removeItem('open.' + node.id);
		if (a.nextSibling){
			// auto-close child folders
			if (getConfig('auto_close')) {
				var children = (a.nextSibling.tagName == 'DIV' ? a.nextSibling.firstChild : a.nextSibling).children;
				for (var i=0; i<children.length; i++) {
					var child = children[i].firstChild;
					if (child.open)
						child.onclick();
				}
			}
			// close folder
			animate(node, a, isopen);
		}
	} else {
		// open folder
		localStorage.setItem('open.' + node.id, true);
		// auto-close sibling folders
		if (getConfig('auto_close')) {
			var siblings = a.parentNode.parentNode.children;
			for (var i=0; i<siblings.length; i++) {
				var sibling = siblings[i].firstChild;
				if (sibling != a && sibling.open)
					sibling.onclick();
			}
		}
		// open folder
		if (a.nextSibling)
			animate(node, a, isopen);
		else
			getChildrenFunction(node)(function(result) {
				if (!a.nextSibling && a.open) {
					renderAll(result, a.parentNode);
					animate(node, a, isopen);
				}
			});
	}
}

// smoothly open or close folder
function animate(node, a, isopen) {
	// TODO: fix nested animations
	// wrapper needed for inner height value
	var wrap = a.nextSibling;
	if (a.animationHandle) {
		// clear last animation
		clearTimeout(a.animationHandle);
		a.animationHandle = null;
	} else {
		// start animation
		wrap.style.height = isopen ? wrap.firstChild.clientHeight + 'px' : 0;
		wrap.style.opacity = isopen ? 1 : 0;
	}
	// requestAnimationFrame twice to ensure at least one frame has passed
	requestAnimationFrame(function() {
		requestAnimationFrame(function() {
			if (wrap) {
				wrap.className = 'wrap';
				wrap.style.height = isopen ? 0 : wrap.firstChild.clientHeight + 'px';
				wrap.style.opacity = isopen ? 0 : 1;
				wrap.style.pointerEvents = isopen ? 'none' : null;
			}
		});
	});

	var duration = scale(getConfig('slide'), .2, 1) * 1000;
	a.animationHandle = setTimeout(function() {
		a.animationHandle = null;
		if (isopen)
			a.parentNode.removeChild(wrap);
		else {
			wrap.className = null;
			wrap.removeAttribute('style');
		}
		wrap = null;
	}, duration);
}

// opens immediate children of given node in new tabs
function openLinks(node) {
	chrome.tabs.getCurrent(function(tab) {
		getChildrenFunction(node)(function(result) {
			for (var i = 0; i < result.length; i++)
				openLink(result[i], 2);
		});
	});
}

// opens given node
function openLink(node, newtab) {
	var url = node.url;
	if (url) {
		chrome.tabs.getCurrent(function(tab) {
			if (newtab)
				chrome.tabs.create({url: url, active: (newtab == 1), openerTabId: tab.id});
			else
				chrome.tabs.update(tab.id, {url: url});
		});
	}
}

var columns; // columns[x][y] = id
var root; // root[] = id
var coords; // coords[id] = {x:x, y:y}
var special = ['apps', 'top', 'recent', 'closed', 'devices'];

// ensure root folders are included
function verifyColumns() {
	// default layout
	if (columns.length === 0) {
		columns.push([]);
		columns.push(special.filter(function(a) {
			return getConfig('show_' + a) != false;
		}));
	}

	// find missing root items
	var missing = root.slice(0);
	for (var x = 0; x < columns.length; x++) {
		for (var y = 0; y < columns[x].length; y++) {
			var i = missing.indexOf(columns[x][y]);
			if (i > -1)
				missing.splice(i, 1);
		}
	}

	// add missing root items
	var column = columns[0];
	for (var i = 0; i < missing.length; i++) {
		if (getConfig('show_' + missing[i]) != false)
			column.push(missing[i]);
	}

	// populate coordinate map
	coords = {};
	for (var x = 0; x < columns.length; x++) {
		for (var y = 0; y < columns[x].length; y++) {
			coords[columns[x][y]] = { x: x, y: y};
		}
		if (columns[x].length === 0) {
			columns.splice(x, 1);
			x--;
		}
	}
}

// load columns from storage or default
function loadColumns() {
	columns = [];
	for (var x = 0; ; x++) {
		var row = [];
		for (var y = 0; ; y++) {
			var id = localStorage.getItem('column.' + x + '.' + y);
			if (id) row.push(id); else break;
		}
		if (row.length > 0) columns.push(row); else break;
	}

	if (root) {
		verifyColumns();
		renderColumns();
	} else {
		chrome.bookmarks.getTree(function(result) {
			// init root nodes
			var nodes = result[0].children;
			root = special.slice(0);

			for (var i = 0; i < nodes.length; i++)
				root.push(nodes[i].id);

			verifyColumns();
			renderColumns();
		});
	}
}

// saves current column configuration to storage
function saveColumns() {
	// clear previous config
	for (var x = 0; ; x++) {
		for (var y = 0; ; y++) {
			var id = localStorage.getItem('column.' + x + '.' + y);
			if (id)
				localStorage.removeItem('column.' + x + '.' + y);
			else
				break;
		}
		if (y === 0)
			break;
	}
	verifyColumns();
	// save new config
	for (var x = 0; x < columns.length; x++) {
		for (var y = 0; y < columns[x].length; y++) {
			localStorage.setItem('column.' + x +'.' + y, columns[x][y]);
		}
	}
	// refresh
	loadColumns();
}

// creates and saves a new column
function addColumn(ids, index) {
	var column = ids.slice(0);
	// remove previous locations
	for (var x = 0; x < columns.length; x++) {
		for (var y = 0; y < columns[x].length; y++ ) {
			if (ids.indexOf(columns[x][y]) > -1) {
				columns[x].splice(y, 1);
				y--;
			}
		}
	}
	// insert new id
	if (index == null)
		index = columns.length;
	columns.splice(Math.min(index, columns.length), 0, column);

	// save
	saveColumns();
}

// removes given column
function removeColumn(index) {
	columns.splice(index, 1);
	saveColumns();
}

// creates and saves a new row
function addRow(id, xpos, ypos) {
	if (ypos == null)
		ypos = columns[xpos].length;

	// remove previous locations
	for (var x = 0; x < columns.length; x++) {
		var i = columns[x].indexOf(id);
		if (i > -1) {
			columns[x].splice(i, 1);
			if (x == xpos && ypos > i)
				ypos--;
		}
		if (columns[x].length === 0) {
			columns.splice(x, 1);
			x--;
			if (xpos > x)
				xpos--;
		}
	}
	// insert new id
	columns[xpos].splice(Math.min(ypos, columns[xpos].length), 0, id);

	// save
	saveColumns();
}

// removes given row
function removeRow(xpos, ypos) {
	columns[xpos].splice(ypos, 1);
	saveColumns();
}

// get recently closed tabs
function getClosed(callback) {
	var maxResults = getConfig('number_closed');
	chrome.sessions.getRecentlyClosed({ maxResults: maxResults }, function(sessions) {
		var nodes = [];
		for (var i = 0; i < sessions.length && i < maxResults; i++) {
			(function(session) {
				if (session.window && session.window.tabs.length == 1)
					session.tab = session.window.tabs[0];

				nodes.push({
					title: session.tab ? session.tab.title : session.window.tabs.length + ' Tabs',
					url: session.tab ? session.tab.url : null,
					className: session.window ? 'window' : null,
					action: function() {
						chrome.sessions.restore(session.window ? session.window.sessionId : session.tab.sessionId, function(session) {
							refreshClosed();
						});
						return false;
					}
				});
			})(sessions[i]);
		}
		callback(nodes);
	});
}

function getDevices(callback) {
	chrome.sessions.getDevices({ maxResults: getConfig('number_closed') }, function(devices) {
		var nodes = [];
		for (var i = 0; i < devices.length; i++) {
			(function(device) {
				var children = [];
				for (var j = 0; j < device.sessions.length; j++) {
					var session = device.sessions[j];
					var tabs = session.window ? session.window.tabs : [session.tab];
					for (var k = 0; k < tabs.length; k++) {
						children.push({
							title: tabs[k].title,
							url: tabs[k].url
						});
					}
				}
				nodes.push({
					id: 'device.' + device.deviceName,
					title: device.deviceName,
					children: children
				});
			})(devices[i]);
		}
		callback(nodes);
	});
}

// refresh recently closed tab lists
function refreshClosed() {
	var targets = [];
	var folders = document.getElementsByClassName('closed');
	for (var i = 0; i < folders.length; i++) {
		var a = folders[i];
		if (a.nextSibling) {
			a.parentNode.removeChild(a.nextSibling);
			targets.push(a.parentNode);
		}
	}
	if (folders.length === 0 && coords['closed']) {
		var target = document.getElementsByClassName('column')[coords['closed'].x];
		target.removeChild(target.firstChild);
		targets.push(target);
	}

	getChildrenFunction({id: 'closed'})(function(result) {
		for (var i = 0; i < targets.length; i++)
			renderAll(result, targets[i]);
	});
}

// options : default values
var config = {
	font: 'Sans-serif',
	font_size: 16,
	font_weight: 400,
	theme: 'Default',
	font_color: '#555555',
	background_color: '#ffffff',
	highlight_color: '#e4f4ff',
	highlight_font_color: '#000000',
	shadow_color: '#57b0ff',
	background_image_file: '',
	background_image: '',
	background_align: 'left top',
	background_repeat: 'repeat',
	background_size: 'auto',
	shadow_blur: 1,
	highlight_round: 1,
	fade: 1,
	spacing: 1,
	width: 1,
	h_pos: 1,
	v_margin: 1,
	slide: 1,
	hide_options: 0,
	lock: 0,
	show_top: 1,
	show_apps: 1,
	show_recent: 1,
	show_closed: 1,
	show_devices: 1,
	show_root: 0,
	newtab: 0,
	remember_open: 1,
	auto_close: 0,
	auto_scale: 1,
	css: '',
	number_top: 10,
	number_closed: 10,
	number_recent: 10
};

// color theme values
var themes = {
	Default: {},
	Classic: {
		font_color: '#000000',
		background_color: '#ffffff',
		highlight_color: '#3399ff',
		highlight_font_color: '#ffffff',
		shadow_color: '#97cbff'
	},
	Dusk: {
		font_color: '#c8b9be',
		background_color: '#56546b',
		highlight_color: '#494d5a',
		highlight_font_color: '#ffd275',
		shadow_color: '#000000'
	},
	Elegant: {
		font_color: '#888888',
		background_color: '#f6f6f6',
		highlight_color: '#ffffff',
		highlight_font_color: '#000000',
		shadow_color: '#aaaaaa'
	},
	Frosty: {
		font_color: '#3e5e82',
		background_color: '#e4eef3',
		highlight_color: '#0080c0',
		highlight_font_color: '#ffffff',
		shadow_color: '#8080ff'
	},
	Hacker: {
		font_color: '#00ff00',
		background_color: '#000000',
		highlight_color: '#00ff00',
		highlight_font_color: '#000000',
		shadow_color: '#ff0000'
	},
	Melon: {
		font_color: '#594526',
		background_color: '#f8ffe1',
		highlight_color: '#ff8000',
		highlight_font_color: '#ffff80',
		shadow_color: '#ff80c0'
	},
	Midnight: {
		font_color: '#bfdfff',
		background_color: '#101827',
		highlight_color: '#000000',
		highlight_font_color: '#80ecff',
		shadow_color: '#0080ff'
	},
	Slate: {
		font_color: '#555555',
		background_color: '#b7babf',
		highlight_color: '#aaaaaa',
		highlight_font_color: '#000000',
		shadow_color: '#2a2a2a'
	},
	Trees: {
		font_color: '#cdd088',
		background_color: '#566157',
		highlight_color: '#4d674b',
		highlight_font_color: '#ffff80',
		shadow_color: '#183010'
	},
	Valentine: {
		font_color: '#895fc2',
		background_color: '#eae1ff',
		highlight_color: '#ffb7f0',
		highlight_font_color: '#f00000',
		shadow_color: '#ffffff'
	},
	Warm: {
		font_color: '#824100',
		background_color: '#ffeedd',
		highlight_color: '#fffae8',
		highlight_font_color: '#800000',
		shadow_color: '#d98764'
	}
};
var theme = {};

// get config value or default
function getConfig(key) {
	var value = localStorage.getItem('options.' + key);
	if (value != null)
		return typeof config[key] === 'number' ? Number(value) : value;
	else
		return (theme.hasOwnProperty(key) ? theme[key] : config[key]);
}

// set config value
function setConfig(key, value) {
	if (value != null)
		localStorage.setItem('options.' + key, typeof config[key] === 'number' ? Number(value) : value);
	else {
		localStorage.removeItem('options.' + key);
		value = (theme.hasOwnProperty(key) ? theme[key] : config[key]);
	}
	// special case settings
	if (key == 'lock' || key == 'newtab' || key == 'show_root' || key.substring(0,6) == 'number')
		loadColumns();
	else if (key == 'theme') {
		theme = themes[value];
		for (var i in config) {
			if (i != key) {
				onChange(i);
				showConfig(i);
			}
		}
	} else if (key.substring(0,4) == 'show') {
		var id = key.substring(5);
		if (!value) {
			if (coords[id])
				removeRow(coords[id].x, coords[id].y);
			saveColumns();
		} else {
			saveColumns();
		}
	}
	onChange(key, value);
	return value;
}

// map config keys to styles
var styles = {};

function getStyle(key, value) {
	switch(key) {
		case 'font':
			return '#main a { font-family: "' + value + '"; }';
		case 'font_size':
			return '#main a { font-size: ' + (value / 10) + 'em; }';
		case 'font_weight':
			return '#main a { font-weight: ' + value + '; }';
		case 'font_color':
			return '#main a { color: ' + value + '; }';
		case 'background_color':
			return 'body { background-color: ' + value + '; }';
		case 'background_image':
			return 'body { background-image: url(' + value + '); }';
		case 'background_image_file':
			return 'body { background-image: url(' + value + '); }';
		case 'background_align':
			return 'body { background-position: ' + value + '; }';
		case 'background_repeat':
			return 'body { background-repeat: ' + value + '; }';
		case 'background_size':
			return 'body { background-size: ' + value + '; }';
		case 'highlight_font_color':
			return '#main a:hover { color: ' + value + '; }';
		case 'highlight_color':
			return '#main a:hover { background-color: ' + value + '; }';
		case 'shadow_color':
			return '#main a:hover { box-shadow: 0 0 ' + scale(getConfig('shadow_blur'), 7, 100) + 'px ' + value + '; }';
		case 'shadow_blur':
			return '#main a:hover { box-shadow: 0 0 ' + scale(value, 7, 100) + 'px ' + getConfig('shadow_color') + '; }';
		case 'highlight_round':
			return '#main a { border-radius: ' + scale(value, .2, 1.5) + 'em; }';
		case 'fade':
			return '#main a { transition-duration: ' + scale(value, .2, 1) + 's; }';
		case 'slide':
			return '.wrap { transition-duration: ' + scale(value, .2, 1) + 's; }';
		case 'spacing':
			return '#main a { line-height: ' + scale(value, 2, 5.6, .8) + '; ' +
							'padding-left: ' + scale(value, .8, 2, .4) + 'em; ' +
							'padding-right: ' + scale(value, .8, 2, .4) + 'em; }';
		case 'width':
			return '#main { width: ' + (getConfig('auto_scale') ?
				scale(value, 80, 100, 20) + '%' :
				scale(value, 1000, 3000, 400) + 'px') + '; }';
		case 'h_pos':
			var margin = 100 - scale(getConfig('width'), 80, 100, 20);
			return '#main { left: ' + scale(value, 0, margin/2, -margin/2) + '%; }';
		case 'v_margin':
			return '#main { margin-top: ' + (getConfig('auto_scale') ?
				scale(value, 5, 20) + '%' :
				scale(value, 80, 600) + 'px') + '; }';
		case 'hide_options':
			return '#options_button { opacity: 0; }';
		case 'css':
			return value;
		case 'auto_scale':
			return value ? null : '#main { margin-top: 80px; width: 1000px; }';
		default:
			return null;
	}
}

// scales input value from [0,1,2] to [min,mid,max]
function scale(value, mid, max, min) {
	min = min || 0;
	return value > 1 ?
		mid + (value - 1) * (max - mid) :
		min + value * (mid - min);
}

// gets rgb representation of hex color
function hexToRgb(hex) {
	hex = /[a-f\d]{6}/i.exec(hex);
	var bigint = parseInt(hex, 16);
	var r = (bigint >> 16) & 255;
	var g = (bigint >> 8) & 255;
	var b = bigint & 255;
	return r + "," + g + "," + b;
}

// apply config value change
function onChange(key, value) {
	if (value == null)
		value = getConfig(key);

	if (value != config[key]) {
		var css = getStyle(key, value);
		if (css) {
			var style;
			if (styles.hasOwnProperty(key))
				style = styles[key];
			else {
				style = document.createElement('style');
				styles[key] = style;
			}
			document.head.appendChild(style);

			// add style rules
			style.innerText = css;
		}
	} else if (styles.hasOwnProperty(key)) {
		// remove rules
		styles[key].parentNode.removeChild(styles[key]);
		delete styles[key];
	}
	// refresh dependent values
	if (key == 'width')
		onChange('h_pos');
	else if (key == 'shadow_blur')
		onChange('shadow_color');
	else if (key == 'auto_scale') {
		onChange('width');
		onChange('v_margin');
	}

	// update options panel
	if (!settingsInitialized)
		return;

	// show/hide default button
	var input = document.getElementById('options_' + key);
	if (input) {
		var isDefault = value == (theme.hasOwnProperty(key) ? theme[key] : config[key]);
		input.reset.style.visibility = (isDefault ? 'hidden' : null);
		if (input.swatch)
			input.swatch.value = value;
	}
}

// loads config settings
function loadSettings() {
	// load theme
	theme = themes[getConfig('theme')] || {};
	// load settings
	for (var key in config)
		if (key === 'background_image_file')
			setTimeout(function() { onChange('background_image_file'); }, 0);
		else
			onChange(key);
}

// apply config values to input controls
function showConfig(key) {
	var input = document.getElementById('options_' + key);
	if (!input || input.type === 'file')
		return;

	input[input.type === 'checkbox' ? 'checked' : 'value'] = getConfig(key);
}

// initialize config settings
function initConfig(key) {
	var input = document.getElementById('options_' + key);
	if (!input)
		return;

	if (input.type == 'color') {
		input.type = 'text';
		input.className = 'color';
		var swatch = document.createElement('input');
		swatch.type = 'color';
		swatch.value = input.value;
		swatch.oninput = function(event) {
			input.value = this.value;
			return input.onchange(event);
		};
		input.swatch = swatch;
		input.parentNode.appendChild(swatch);
	}
	input.onchange = function(event) {
		if (input.type == 'file') {
			// load file
			if (event.target.files.length == 1) {
				var file = event.target.files[0];
				if (file.size > 2097152) {
					input.value = null;
					alert('Image must be less than 2 MB.');
					return false;
				}
				var reader = new FileReader();
				reader.onload = function(f) {
					if (f.target.result)
						setConfig(key, f.target.result);
				};
				reader.readAsDataURL(file);
			}
		} else
			setConfig(key, input.type == 'checkbox' ? Number(input.checked) : input.value);
	};

	var reset = document.createElement('a');
	reset.className = 'revert';
	reset.title = 'Reset to default';
	reset.tabIndex = 0;
	reset.onclick = function() {
		setConfig(key, null);
		showConfig(key);
		return false;
	};

	input.reset = reset;
	input.parentNode.appendChild(reset);
	showConfig(key);
}

var settingsInitialized = false;

// initialize options panel
function initSettings() {
	settingsInitialized = true;

	// options close button
	document.getElementById('options_close_button').onclick = function() {
		showOptions(false);
		return false;
	};

	// options submenu navigation
	var options = document.getElementById('options');
	var nav = document.getElementById('options_nav');
	var index = 0;
	for (var i=0; i<nav.children.length; i++) {
		var a = nav.children[i].firstChild;
		a.onclick = function(e) {
			// clear current style
			nav.children[index].firstChild.classList.remove('current');
			options.getElementsByClassName('section')[index].classList.remove('current');
			// apply new current style
			index = Array.prototype.indexOf.call(nav.children, this.parentNode);
			nav.children[index].firstChild.classList.add('current');
			options.getElementsByClassName('section')[index].classList.add('current');
			// show custom css on advanced tab
			if (index === nav.children.length-1) {
				var allcss = document.getElementById('all_css');
				allcss.value = '';
				for (var key in config) {
					var css = (getStyle(key, getConfig(key)));
					if (css && css.length < 1000 && key != 'css')
						allcss.value += css + '\n';
				}
			}
			// import/export
			if (index === nav.children.length-2) {
				var exports = document.getElementById('options_export');
				var imports = document.getElementById('options_import');
				var replacer = function(key, value) {
					if (key == 'options.background_image_file' || key == 'weather.cache') {
						return undefined;
					}
					return value;
				};
				exports.value = JSON.stringify(localStorage, replacer);
				imports.value = '';
				imports.placeholder = 'Paste exported settings here';
				imports.onchange = function() {
					try {
						var imported = JSON.parse(imports.value);
						for(var key in imported) {
							localStorage.setItem(key, imported[key]);
						}
						imports.value = '';
						imports.placeholder = 'Import successful!';
						exports.value = JSON.stringify(localStorage, replacer);
						loadSettings();
						loadColumns();
					} catch (e) {
						imports.value = '';
						imports.placeholder = 'Import error! Please check if your settings are valid JSON.';
					}
				};
			}
			return false;
		};
	}

	// add options to hide bookmark folders
	chrome.bookmarks.getTree(function(result) {
		var placeholder = document.getElementById('options_show_bookmarks');
		var nodes = result[0].children;
		for (var i = 0; i < nodes.length; i++) {
			var key = 'show_' + nodes[i].id;
			config[key] = 1;

			var span = document.createElement('span');
			span.innerText = nodes[i].title;

			var input = document.createElement('input');
			input.type = 'checkbox';
			input.id = 'options_' + key;

			var label = document.createElement('label');
			label.appendChild(span);
			label.appendChild(input);
			placeholder.appendChild(label);
		}

		// replace text input with system font list
		if (chrome.fontSettings) {
			var input = document.getElementById('options_font');
			var select = document.createElement('select');
			input.parentNode.replaceChild(select, input);
			select.id = input.id;
		}

		// show settings
		for (var key in config)
			initConfig(key);

		loadSettings();

		// load themes
		var select = document.getElementById('options_theme');
		if (select.childNodes.length === 0) {
			for (var i in themes) {
				var option = document.createElement('option');
				option.innerText = i;
				if (i == getConfig('theme'))
					option.selected = 'selected';
				select.appendChild(option);
			}
		}

		// load font list
		if (chrome.fontSettings) {
			chrome.fontSettings.getFontList(function(fonts) {
				var select = document.getElementById('options_font');
				if (select.childNodes.length > 0)
					return;

				fonts.unshift({ fontId: 'Sans-serif' });
				for (var i = 0; i < fonts.length; i++) {
					var font = fonts[i].fontId;
					var option = document.createElement('option');
					option.innerText = font;
					if (font == getConfig('font'))
						option.selected = 'selected';
					select.appendChild(option);
				}
			});
		}
	});
}

// show options panel
function showOptions(show) {
	document.getElementById('options').style.display = show ? 'block' : 'none';
	if (show) {
		if (!settingsInitialized)
			initSettings();
		for (var key in config)
			showConfig(key);
	}
}

// initialize page
loadSettings();
loadColumns();

// keyboard shortcuts
document.addEventListener('keypress', function(event) {
	if (event.keyCode == 13 && event.target && event.target.onclick && event.target.tagName == 'A') {
		event.target.dispatchEvent(new MouseEvent('click'));
		event.preventDefault();
	}
});
document.addEventListener('mousedown', function(event) {
	document.body.classList.add('hide-focus');
});
document.addEventListener('keydown', function(event) {
	document.body.classList.remove('hide-focus');
});

window.onresize = function(event) {
	updateTooltips();
};

// load options panel
document.getElementById('options_button').onclick = function() {
	showOptions(true);
	return false;
};
if (location.search === '?options')
	showOptions(true);

// refresh recently closed
if (chrome.sessions)
	chrome.sessions.onChanged.addListener(refreshClosed);


================================================
FILE: privacy.md
================================================
# Privacy Policy

Humble New Tab Page does not collect, store, or share any user data or personal information, with the following exception:

- (Firefox only) To display website icons, the domain names of websites shown may be shared with the user selected third party: [DuckDuckGo](https://duckduckgo.com/privacy), [Qwant](https://about.qwant.com/legal/privacy/), [Google](https://policies.google.com/privacy), [Favicon Kit](https://faviconkit.com/), or [Yandex](https://yandex.com/legal/confidential/). This is configurable in the options.