<html id="stylus">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<script src="codemirror/lib/codemirror.js"></script>
		<link rel="stylesheet" href="codemirror/lib/codemirror.css">
		<script src="codemirror/mode/css/css.js"></script>

		<link rel="stylesheet" href="codemirror/addon/dialog/dialog.css">
		<link rel="stylesheet" href="codemirror/addon/search/matchesonscrollbar.css">
		<script src="codemirror/addon/scroll/annotatescrollbar.js"></script>
		<script src="codemirror/addon/search/matchesonscrollbar.js"></script>
		<script src="codemirror-overwrites/addon/search/match-highlighter.js"></script>
		<script src="codemirror/addon/dialog/dialog.js"></script>
		<script src="codemirror/addon/search/searchcursor.js"></script>
		<script src="codemirror/addon/search/search.js"></script>
		<script src="codemirror/addon/comment/comment.js"></script>
		<script src="codemirror/addon/selection/active-line.js"></script>

		<link rel="stylesheet" href="codemirror/addon/fold/foldgutter.css" />
		<script src="codemirror/addon/fold/foldcode.js"></script>
		<script src="codemirror/addon/fold/foldgutter.js"></script>
		<script src="codemirror/addon/fold/brace-fold.js"></script>
		<script src="codemirror/addon/fold/comment-fold.js"></script>

		<script src="codemirror/addon/edit/matchbrackets.js"></script>

		<link rel="stylesheet" href="codemirror/addon/lint/lint.css" />
		<script src="csslint/csslint-worker.js"></script>
		<script src="codemirror/addon/lint/lint.js"></script>
		<script src="codemirror-overwrites/addon/lint/css-lint.js"></script>

		<link rel="stylesheet" href="codemirror/addon/hint/show-hint.css" />
		<script src="codemirror/addon/hint/show-hint.js"></script>
		<script src="codemirror/addon/hint/css-hint.js"></script>

		<script src="codemirror/keymap/sublime.js"></script>
		<script src="codemirror/keymap/emacs.js"></script>
		<script src="codemirror/keymap/vim.js"></script>

		<style type="text/css">

			body {
				margin: 0;
				font: 12px arial,sans-serif;
			}
			/************ header ************/
			#header {
				width: 280px;
				height: 100vh;
				overflow: auto;
				position: fixed;
				top: 0;
				padding: 15px;
				border-right: 1px dashed #AAA;
				-webkit-box-shadow: 0 0 3rem -1.2rem black;
				box-sizing: border-box;
			}
			#header h1 {
				margin-top: 0;
			}
			#sections {
				padding-left: 280px;
			}
			#sections h2 {
				margin-top: 1rem;
				margin-left: 1.7rem;
			}
			.aligned {
				display: table-row;
			}
			.aligned > *:not(svg) {
				display: table-cell;
				margin-top: 0.1rem;
				min-height: 1.4rem;
			}
			input[type="checkbox"] {
				margin-left: 0.1rem;
			}
			/* basic info */
			#basic-info {
				margin-bottom: 1rem;
			}
			#name {
				width: 100%;
			}
			#basic-info-name {
				display: flex;
				align-items: center;
			}
			#url {
				margin-left: 0.25rem;
				color: inherit;
			}
			#url:not([href^="http"]) {
				display: none;
			}
			.svg-icon {
				cursor: pointer;
				vertical-align: middle;
				transition: opacity .5s;
				width: 16px;
				height: 16px;
				fill: currentColor;
			}
			.svg-icon:not(.applies-to-help):not(.dismiss) {
				margin-left: 0.2rem;
			}
			h2 .svg-icon, label .svg-icon {
				margin-top: -2px;
			}
			.svg-icon:hover,
			.svg-icon.info {
				opacity: .6;
			}
			.svg-icon,
			.svg-icon.info:hover {
				opacity: 1;
			}
			#enabled {
				margin-left: 0;
				vertical-align: middle;
			}
			#enabled-label {
				vertical-align: middle;
			}
			/* actions */
			#actions > * {
				margin-right: 0.5rem;
				margin-bottom: 0.5rem;
			}
			/* options */
			#options [type="number"] {
				max-width: 2.5rem;
				text-align: right;
			}
			#options .option > * {
				padding-right: 0.25rem;
			}
			/************ content ***********/
			#sections > div {
				margin: 0.7rem;
				padding: 1rem;
			}
			#sections > div:not(:first-of-type) {
				border-top: 2px solid black;
			}
			#sections > div:only-of-type .remove-section {
				display: none;
			}
			#sections > div > button:not(:first-of-type) {
				margin-left: 0.2rem;
			}
			.dirty > label::before {
				content: "*";
				font-weight: bold;
			}
			#sections {
				counter-reset: codebox;
			}
			#sections > div > label::after {
				counter-increment: codebox;
				content: counter(codebox);
				margin-left: 0.25rem;
			}
			/* code */
			.code {
				height: 10rem;
				width: 40rem;
			}
			.CodeMirror {
				border: solid #CCC 1px;
			}
			.CodeMirror-lint-mark-warning {
				background: none;
			}
			.CodeMirror-vscrollbar {
				margin-bottom: 8px; /* make space for resize-grip */
			}
			.CodeMirror-dialog {
				-webkit-animation: highlight 3s ease-out;
			}
			.CodeMirror-focused {
				outline: -webkit-focus-ring-color auto 5px;
				outline-offset: -2px;
			}
			.CodeMirror-search-field {
				width: 10em;
			}
			.CodeMirror-jump-field {
				width: 5em;
			}
			.CodeMirror-search-hint {
				color: #888;
			}
			.cm-matchhighlight-approved .cm-matchhighlight,
			.CodeMirror-selection-highlight-scrollbar {
				animation: fadein-match-highlighter 1s cubic-bezier(.97,.01,.42,.98);
				animation-fill-mode: both;
			}
			@-webkit-keyframes highlight {
				from {
					background-color: #ff9;
				}
				to {
					background-color: none;
				}
			}
			@keyframes fadein {
				from {
					opacity: 0;
				}
				to {
					opacity: 1;
				}
			}
			@keyframes fadein-match-highlighter {
				from { background-color: transparent; }
				to   { background-color: rgba(1, 151, 193, 0.1); }
			}
			.resize-grip {
				position: absolute;
				display: block;
				width: 8px;
				height: 8px;
				content: " ";
				right: 0;
				bottom: 0;
				z-index: 99;
				cursor: n-resize;
				background: linear-gradient(-45deg, transparent 2px, rgba(0,0,0,0.5) 2px, transparent 3px, transparent 4.5px, rgba(0,0,0,0.5) 5px, transparent 5.5px);
			}
			/* applies-to */
			.applies-to {
				display: flex;
			}
			.applies-to label {
				flex: auto;
				margin-top: 0.2rem;
			}
			.applies-to ul {
				flex: auto;
				flex-grow: 99;
				margin: 0;
				padding: 0;
			}
			.applies-to li {
				display: flex;
				list-style-type: none;
				align-items: center;
				margin-bottom: 0.35rem;
			}
			.applies-to li > *:not(button) {
				flex: auto;
				min-height: 1.4rem;
				margin-left: 0.35rem;
			}
			.applies-to li .add-applies-to {
				visibility: hidden;
				text-align: left;
			}
			.applies-to li:last-child .add-applies-to {
				visibility: visible
			}
			.applies-to li .add-applies-to:first-child {
				margin-left: 1rem;
			}
			.applies-to li .applies-value {
				flex-grow: 99;
				padding-left: 0.2rem;
			}
			.applies-to img {
				vertical-align: bottom;
			}
			.test-regexp {
				display: none;
			}
			.has-regexp .test-regexp {
				display: inline-block;
			}
			.regexp-report summary, .regexp-report div {
				cursor: pointer;
			}
			.regexp-report mark {
				background-color: rgba(255, 255, 0, .5);
			}
			.regexp-report details {
				margin-left: 1rem;
			}
			.regexp-report details:not(:last-child) {
				margin-bottom: 1rem;
			}
			.regexp-report summary {
				font-weight: bold;
				margin-left: -1rem;
				margin-bottom: .5rem;
				outline: none;
				cursor: default;
			}
			.regexp-report details[data-type="full"] {
				color: darkgreen;
			}
			.regexp-report details[data-type="partial"] {
				color: darkgray;
			}
			.regexp-report details[data-type="invalid"] {
				color: maroon;
			}
			.regexp-report details details {
				margin-left: 2rem;
				margin-top: .5rem;
			}
			.regexp-report .svg-icon {
				position: absolute;
				margin-top: -1px;
			}
			.regexp-report details div:hover {
				text-decoration: underline;
				text-decoration-skip: ink;
			}
			.regexp-report details div img {
				width: 16px;
				max-height: 16px;
				position: absolute;
				margin-left: -20px;
				margin-top: -1px;
				animation: fadein 1s cubic-bezier(.03, .67, .08, .94);
				animation-fill-mode: both;
			}
			/************ help popup ************/
			#help-popup {
				top: 3rem;
				right: 3rem;
				max-width: 50vw;
				position: fixed;
				display: none;
				background-color: white;
				box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.5);
				padding: 0.5rem;
				z-index: 99;
			}
			#help-popup.big {
				max-width: 100%;
				left: 3rem;
			}
			#help-popup.big .CodeMirror {
				min-height: 2rem;
				height: 70vh;
			}
			#help-popup .title {
				font-weight: bold;
				background-color: rgba(0,0,0,0.05);
				margin: -0.5rem -0.5rem 0.5rem;
				padding: .5rem 32px .5rem .5rem;
			}
			#help-popup .contents {
				max-height: calc(100vh - 8rem);
				overflow-y: auto;
			}
			#help-popup .dismiss {
				position: absolute;
				right: 4px;
				top: .5em;
			}

			.keymap-list {
				font-size: 85%;
				line-height: 1.0;
				border-spacing: 0;
				word-break: break-all;
			}
			.keymap-list input {
				width: 100%;
			}
			.keymap-list tr:nth-child(odd) {
				background-color: rgba(0, 0, 0, 0.07);
			}
			.keymap-list td:first-child {
				white-space: nowrap;
				font-family: monospace;
				padding-right: 0.5rem;
			}

			#help-popup button[name^="import"] {
				line-height: 1.5rem;
				padding: 0 0.5rem;
				margin: 0.5rem 0 0 0.5rem;
				pointer-events: none;
				opacity: 0.5;
				float: right;
			}
			#help-popup.ready button[name^="import"] {
				pointer-events: all;
				opacity: 1.0;
			}

			/************ lint ************/
			#lint {
				display: none;
			}
			#lint > div {
				overflow-y: auto;
			}
			#lint table {
				font-size: 100%;
				border-spacing: 0;
				margin-bottom: 1rem;
				line-height: 1.0;
			}
			#lint table:last-child {
				margin-bottom: 0;
			}
			#lint caption {
				text-align: left;
				font-weight: bold;
			}
			#lint tbody {
				font-size: 85%;
				cursor: pointer;
			}
			#lint tr:hover {
				background-color: rgba(0, 0, 0, 0.1);
			}
			#lint td[role="severity"] {
				font-size: 0;
				width: 16px;
				padding-right: 0.25rem;
			}
			#lint td[role="line"], #lint td[role="sep"] {
				text-align: right;
				padding-right: 0;
			}
			#lint td[role="col"] {
				text-align: left;
				padding-right: 0.25rem;
			}
			#lint td[role="message"] {
				text-align: left;
			}

			/************ CSS beautifier ************/
			.beautify-options {
				white-space: nowrap;
				font-family: monospace;
			}
			.beautify-options div {
				float: left;
			}
			.beautify-options div[newline="true"] + div {
				clear: left;
			}
			.beautify-options div[newline="true"] + div span[indent] {
				padding-left: 2rem;
			}
			.beautify-options:after {
				clear: both;
				display: block;
				content: " ";
				height: 1rem;
			}
			.beautify-options span {
				font-weight: bold;
			}
			.beautify-options select {
				border: none;
				background-color: rgba(0, 0, 0, 0.05);
			}

			/************ reponsive layouts ************/
			@media(max-width:737px) {
				#header {
					width: auto;
					height: auto;
					position: inherit;
					border-right: none;
					border-bottom: 1px dashed #AAA;
				}
				#header section:not(:last-child) {
					margin-bottom: 0.4rem;
				}
				#header input[type="checkbox"] {
					vertical-align: middle;
				}
				h2 {
					display: none;
				}
				#basic-info {
					display: flex;
					align-items: baseline;
				}
				#basic-info > * {
					flex: auto;
				}
				#basic-info > *:first-child {
					flex-grow: 99;
					display: flex;
				}
				#basic-info > *:not(:last-child) {
					margin-right: 0.8rem;
				}
				#basic-info #name {
					width: auto;
					flex-grow: 99;
				}
				#actions {
					margin-top: 1rem;
				}
				#actions > * {
					display: inline-block;
				}
				#options {
					-webkit-column-count: 2;
				}
				#options .aligned > *:not(svg) {
					margin: 1px 0 0 0; /* workaround the flowing-padding column bug in webkit */
					padding-right: 0.4rem;
					vertical-align: baseline;
					min-height: 1.4rem;
				}
				.option {
					-webkit-column-break-inside: avoid;
				}
				.option label {
					line-height: 1.25rem;
					margin: 0;
				}
				#options [type="number"] {
					text-align: left; /* workaround the column flow bug in webkit */
					padding-left: 0.2rem;
				}
				#options #tabSize-label {
					position: relative;
					top: 0.2rem;
				}
				#lint h2 {
					display: block;
					cursor: default;
					margin-bottom: 0;
				}
				#lint > div {
					max-height: 0;
				}
				#lint.collapsed > div {
					display: none;
				}
				#lint:hover > div {
					margin-top: 1em;
					max-height: 30vh;
				}
				#sections {
					padding-left: 0;
				}
				#sections > div {
					padding: 0;
				}
				#sections > *:not(h2) {
					padding-left: 0.4rem;
				}
				.applies-type {
					width: 30%;
				}
			}
			@media(max-width:500px) {
				#options {
					-webkit-column-count: 1;
				}
				#options #tabSize-label {
					position: static;
				}
			}
		</style>
		<link id="cm-theme" rel="stylesheet">

		<template data-id="appliesTo">
			<li>
				<select name="applies-type" class="applies-type style-contributor">
					<option value="url" i18n-text="appliesUrlOption"></option>
					<option value="url-prefix" i18n-text="appliesUrlPrefixOption"></option>
					<option value="domain" i18n-text="appliesDomainOption"></option>
					<option value="regexp" i18n-text="appliesRegexpOption"></option>
				</select>
				<input name="applies-value" class="applies-value style-contributor">
				<button class="remove-applies-to" i18n-text="appliesRemove"></button>
				<button class="add-applies-to" i18n-text="appliesAdd"></button>
			</li>
		</template>
		<template data-id="appliesToEverything">
			<li class="applies-to-everything" i18n-html="appliesToEverything">
				<button class="add-applies-to" i18n-text="appliesSpecify"></button>
			</li>
		</template>
		<template data-id="section">
			<div>
				<label i18n-text="sectionCode"></label>
				<textarea class="code"></textarea>
				<br>
				<div class="applies-to">
					<label i18n-text="appliesLabel">
						<svg class="svg-icon info applies-to-help"><use xlink:href="#svg-icon-help"/></svg>
					</label>
					<ul class="applies-to-list"></ul>
				</div>
				<button class="remove-section" i18n-text="sectionRemove"></button>
				<button class="add-section" i18n-text="sectionAdd"></button>
				<button class="beautify-section" i18n-text="styleBeautify"></button>
				<button class="test-regexp" i18n-text="styleRegexpTestButton"></button>
			</div>
		</template>
		<template data-id="find">
			<span i18n-text="search">: <input type="text" class="CodeMirror-search-field">
				<span class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>
			</span>
		</template>
		<template data-id="replace">
			<span i18n-text="replace">: <input type="text" class="CodeMirror-search-field">
				<span class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>
			</span>
		</template>
		<template data-id="replaceAll">
			<span i18n-text="replaceAll">: <input type="text" class="CodeMirror-search-field">
				<span class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>
			</span>
		</template>
		<template data-id="replaceWith">
			<span i18n-text="replaceWith">: <input type="text" class="CodeMirror-search-field">
			</span>
		</template>
		<template data-id="replaceConfirm">
			<span i18n-text="replace">?
				<button i18n-text="confirmYes"></button>
				<button i18n-text="confirmNo"></button>
				<button i18n-text="confirmStop"></button>
			</span>
		</template>
		<template data-id="jumpToLine">
			<span i18n-text="editGotoLine">: <input class="CodeMirror-jump-field" type="text"></span>
		</template>

		<script src="storage.js"></script>
		<script src="messaging.js"></script>
		<script src="localization.js"></script>
		<script src="apply.js"></script>
		<script src="edit.js"></script>
	</head>
	<body id="stylus-edit">
		<div id="header">
			<h1 id="heading">&nbsp;</h1> <!-- nbsp allocates the actual height which prevents page shift -->
			<section id="basic-info">
				<div id="basic-info-name">
					<input id="name" class="style-contributor" i18n-placeholder="styleMissingName">
					<a id="url" target="_blank"><svg class="svg-icon"><use xlink:href="#svg-icon-external-link"/></svg></a>
				</div>
				<div id="basic-info-enabled">
					<input type="checkbox" id="enabled" class="style-contributor">
					<label for="enabled" id="enabled-label" i18n-text="styleEnabledLabel"></label>
				</div>
			</section>
			<section id="actions">
				<div>
					<button id="save-button" title="Ctrl-S" i18n-text="styleSaveLabel"></button>
					<button id="beautify" i18n-text="styleBeautify"></button>
					<a href="manage.html"><button id="cancel-button" i18n-text="styleCancelEditLabel"></button></a>
				</div>
				<div>
					<h2 id="mozilla-format-heading" i18n-text="styleMozillaFormatHeading"><svg id="to-mozilla-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></h2>
					<button id="from-mozilla" i18n-text="importLabel"></button>
					<button id="to-mozilla" i18n-text="exportLabel"></button>
				</div>
			</section>
			<section id="options">
				<h2 id="options-heading" i18n-text="optionsHeading"></h2>
				<div class="option">
					<input data-option="lineWrapping" id="editor.lineWrapping" type="checkbox">
					<label id="lineWrapping-label" for="editor.lineWrapping" i18n-text="cm_lineWrapping"></label>
				</div>
				<div class="option">
					<input data-option="smartIndent" id="editor.smartIndent" type="checkbox">
					<label id="smartIndent-label" for="editor.smartIndent" i18n-text="cm_smartIndent"></label>
				</div>
				<div class="option">
					<input data-option="indentWithTabs" id="editor.indentWithTabs" type="checkbox">
					<label id="indentWithTabs-label" for="editor.indentWithTabs" i18n-text="cm_indentWithTabs"></label>
				</div>
				<div class="option aligned">
					<label id="tabSize-label" for="editor.tabSize" i18n-text="cm_tabSize"></label>
					<input data-option="tabSize" id="editor.tabSize" type="number" min="0">
				</div>
				<div class="option aligned">
					<label id="keyMap-label" for="editor.keyMap" i18n-text="cm_keyMap"></label>
					<select data-option="keyMap" id="editor.keyMap"></select>
					<svg id="keyMap-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
				</div>
				<div class="option aligned">
					<label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label>
					<select data-option="theme" id="editor.theme"></select>
				</div>
			</section>
			<section id="lint"><h2 i18n-text="issues">: <span id="issue-count"></span><svg id="lint-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></h2><div></div></section>
		</div>
		<section id="sections">
			<h2><span id="sections-heading" i18n-text="styleSectionsTitle"></span><svg id="sections-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></h2>
		</section>
		<div id="help-popup">
			<div class="title"></div><svg id="sections-help" class="svg-icon dismiss"><use xlink:href="#svg-icon-close"/></svg></svg>
			<div class="contents"></div>
		</div>

		<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
			<symbol id="svg-icon-external-link" height="16" width="16" viewBox="0 0 8 8">
				<path d="M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z"></path>
			</symbol>
			<symbol id="svg-icon-help" height="16" width="14" viewBox="0 0 14 16" i18n-alt="helpAlt">
				<path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
			</symbol>
			<symbol id="svg-icon-close" height="16" width="12" viewBox="0 0 12 16">
				<path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"></path>
			</symbol>
		</svg>

	</body>
</html>