Merge pull request #83 from tophf/narrow-editor

Editor: webkit bug workaround; better alignment

_locales/ar/messages.json

@@ -178,10 +178,6 @@
     "message":"أدخل اسمًا.",
     "description":"Error displayed when user saves without providing a name"
   },
-  "styleNameLabel":{
-    "message":"الاسم",
-    "description":"Label for the name of styles"
-  },
   "styleSaveLabel":{
     "message":"حفظ",
     "description":"Label for save button for style editing"

_locales/cs/messages.json

@@ -186,10 +186,6 @@
     "message":"Zadejte název.",
     "description":"Error displayed when user saves without providing a name"
   },
-  "styleNameLabel":{
-    "message":"Název",
-    "description":"Label for the name of styles"
-  },
   "styleSaveLabel":{
     "message":"Uložit",
     "description":"Label for save button for style editing"

_locales/el/messages.json

@@ -112,10 +112,6 @@
     "message":"Εισάγετε ένα όνομα.",
     "description":"Error displayed when user saves without providing a name"
   },
-  "styleNameLabel":{
-    "message":"Όνομα",
-    "description":"Label for the name of styles"
-  },
   "styleSaveLabel":{
     "message":"Αποθήκευση",
     "description":"Label for save button for style editing"

_locales/en/messages.json

@@ -242,10 +242,6 @@
 		"message": "Enter a name.",
 		"description": "Error displayed when user saves without providing a name"
 	},
-	"styleNameLabel": {
-		"message": "Name",
-		"description": "Label for the name of styles"
-	},
 	"styleSaveLabel": {
 		"message": "Save",
 		"description": "Label for save button for style editing"

_locales/es/messages.json

@@ -174,10 +174,6 @@
     "message":"Introduce un nombre.",
     "description":"Error displayed when user saves without providing a name"
   },
-  "styleNameLabel":{
-    "message":"Nombre",
-    "description":"Label for the name of styles"
-  },
   "styleSaveLabel":{
     "message":"Guardar",
     "description":"Label for save button for style editing"

_locales/fi/messages.json

@@ -186,10 +186,6 @@
     "message":"Syötä nimi.",
     "description":"Error displayed when user saves without providing a name"
   },
-  "styleNameLabel":{
-    "message":"Nimi",
-    "description":"Label for the name of styles"
-  },
   "styleSaveLabel":{
     "message":"Tallenna",
     "description":"Label for save button for style editing"

_locales/fr/messages.json

@@ -170,10 +170,6 @@
     "message":"Veuillez saisir un nom.",
     "description":"Error displayed when user saves without providing a name"
   },
-  "styleNameLabel":{
-    "message":"Nom",
-    "description":"Label for the name of styles"
-  },
   "styleSaveLabel":{
     "message":"Enregistrer",
     "description":"Label for save button for style editing"

_locales/it/messages.json

@@ -174,10 +174,6 @@
     "message":"Inserisci un nome.",
     "description":"Error displayed when user saves without providing a name"
   },
-  "styleNameLabel":{
-    "message":"Nome",
-    "description":"Label for the name of styles"
-  },
   "styleSaveLabel":{
     "message":"Salva",
     "description":"Label for save button for style editing"

_locales/ja/messages.json

@@ -186,10 +186,6 @@
     "message":"名前を入力してください。",
     "description":"Error displayed when user saves without providing a name"
   },
-  "styleNameLabel":{
-    "message":"名前",
-    "description":"Label for the name of styles"
-  },
   "styleSaveLabel":{
     "message":"保存",
     "description":"Label for save button for style editing"

_locales/pt_BR/messages.json

@@ -174,10 +174,6 @@
     "message":"Insira um nome.",
     "description":"Error displayed when user saves without providing a name"
   },
-  "styleNameLabel":{
-    "message":"Nome",
-    "description":"Label for the name of styles"
-  },
   "styleSaveLabel":{
     "message":"Salvar",
     "description":"Label for save button for style editing"

_locales/ru/messages.json

@@ -174,10 +174,6 @@
     "message":"Введите название.",
     "description":"Error displayed when user saves without providing a name"
   },
-  "styleNameLabel":{
-    "message":"Название",
-    "description":"Label for the name of styles"
-  },
   "styleSaveLabel":{
     "message":"Сохранить",
     "description":"Label for save button for style editing"

_locales/sv_SE/messages.json

@@ -186,10 +186,6 @@
     "message":"Ange namn.",
     "description":"Error displayed when user saves without providing a name"
   },
-  "styleNameLabel":{
-    "message":"Namn",
-    "description":"Label for the name of styles"
-  },
   "styleSaveLabel":{
     "message":"Spara",
     "description":"Label for save button for style editing"

_locales/te/messages.json

@@ -60,10 +60,6 @@
     "message":"స్టైలిష్",
     "description":"Title for the manage page"
   },
-  "styleNameLabel":{
-    "message":"పేరు",
-    "description":"Label for the name of styles"
-  },
   "styleSaveLabel":{
     "message":"భద్రపరచు",
     "description":"Label for save button for style editing"

_locales/tr/messages.json

@@ -174,10 +174,6 @@
     "message":"Bir ad girin.",
     "description":"Error displayed when user saves without providing a name"
   },
-  "styleNameLabel":{
-    "message":"Ad",
-    "description":"Label for the name of styles"
-  },
   "styleSaveLabel":{
     "message":"Kaydet",
     "description":"Label for save button for style editing"

_locales/zh/messages.json

@@ -140,9 +140,6 @@
 	"styleMissingName": {
 		"message": "请输入名称."
 	},
-	"styleNameLabel": {
-		"message": "名称"
-	},
 	"styleSaveLabel": {
 		"message": "保存"
 	},

_locales/zh_CN/messages.json

@@ -227,10 +227,6 @@
         "message": "修改",
         "description": "Label for the button to go to the edit style page"
     },
-    "styleNameLabel": {
-        "message": "名称",
-        "description": "Label for the name of styles"
-    },
     "description": {
         "message": "Stylish 是一款用户样式管理器，可让您调整网页的样式。它可让您轻松地为 Google、Facebook、YouTube、Orkut 和其他许多网站安装主题背景和皮肤。",
         "description": "Extension description"

_locales/zh_TW/messages.json

@@ -178,10 +178,6 @@
     "message":"请输入名称.",
     "description":"Error displayed when user saves without providing a name"
   },
-  "styleNameLabel":{
-    "message":"名称",
-    "description":"Label for the name of styles"
-  },
   "styleSaveLabel":{
     "message":"保存",
     "description":"Label for save button for style editing"

edit.html

@@ -35,57 +35,93 @@
 
 			body {
 				margin: 0;
-				font: 12px arial,sans-serif;
+				font: 9pt arial,sans-serif;
 			}
+			/************ header ************/
 			#header {
 				height: 100%;
-				width: 250px;
+				width: 15rem;
 				position: fixed;
 				top: 0;
-				padding: 15px;
+				padding: 0.95rem;
 				border-right: 1px dashed #AAA;
-				-webkit-box-shadow: 0 0 50px -18px black;
+				-webkit-box-shadow: 0 0 3rem -1.2rem black;
 			}
 			#header h1 {
 				margin-top: 0;
 			}
 			#sections {
-				padding-left: 290px;
+				padding-left: 18rem;
 			}
 			#sections h2 {
-				margin-top: 8px;
+				margin-top: 0.5rem;
 			}
+			.aligned {
+				display: table-row;
+			}
+			.aligned > * {
+				display: table-cell;
+				margin-top: 0.1rem;
+				min-height: 1.4rem;
+			}
+			input[type="checkbox"] {
+				margin-left: 0.1rem;
+			}
+			/* basic info */
 			#basic-info {
-				margin-bottom: 12px;
+				margin-bottom: 1rem;
 			}
 			#name {
-				width: 185px;
+				width: 100%;
 			}
+			#enabled {
+				margin-left: 0;
+				vertical-align: middle;
+			}
+			#enabled-label {
+				vertical-align: middle;
+			}
+			/* actions */
+			#actions > * {
+				margin-right: 0.5rem;
+				margin-bottom: 0.5rem;
+				display: block;
+			}
+			#actions img {
+				margin-left: 0.2rem;
+				position: relative;
+				top: 0.2rem;
+			}
+			/* options */
+			#options [type="number"] {
+				max-width: 2.5rem;
+				text-align: right;
+			}
+			#options .option > * {
+				padding-right: 0.25rem;
+			}
+			/************ content ***********/
 			#sections > div {
-				margin: 10px;
+				margin: 0.7rem;
-				padding: 0 15px;
+				padding: 1rem;
 			}
 			#sections > div:not(:first-of-type) {
 				border-top: 2px solid black;
 			}
+			#sections > div:only-of-type .remove-section {
+				display: none;
+			}
+			#sections > div .add-section {
+				margin-left: 0.4rem;
+			}
 			.dirty > label::before {
 				content: "*";
 				font-weight: bold;
 			}
-			#basic-info label {
+			/* code */
-				display: inline-block;
-				width: 10em;
-				vertical-align: top;
-			}
-			#header label {
-				width: 60px;
-			}
-			#options .aligned {
-				display: table-row;
-			}
 			.code {
-				height: 10em;
+				height: 10rem;
-				width: 40em;
+				width: 40rem;
 			}
 			.CodeMirror {
 				border: solid #CCC 1px;
@@ -93,12 +129,16 @@
 			.CodeMirror-focused {
 				border-color: black;
 			}
+			.CodeMirror-lint-mark-warning {
+				background: none;
+			}
+			/* applies-to */
 			.applies-to {
 				display: flex;
 			}
 			.applies-to label {
 				flex: auto;
-				margin-top: 0.25em;
+				margin-top: 0.2rem;
 			}
 			.applies-to ul {
 				flex: auto;
@@ -110,12 +150,12 @@
 				display: flex;
 				list-style-type: none;
 				align-items: center;
-				margin-bottom: 0.4em;
+				margin-bottom: 0.35rem;
 			}
 			.applies-to li > *:not(button) {
 				flex: auto;
-				min-height: 1.7em;
+				min-height: 1.4rem;
-				margin-left: 0.4em;
+				margin-left: 0.35rem;
 			}
 			.applies-to li .add-applies-to {
 				visibility: hidden;
@@ -125,53 +165,27 @@
 				visibility: visible
 			}
 			.applies-to li .add-applies-to:first-child {
-				margin-left: 1em;
+				margin-left: 1rem;
 			}
 			.applies-to li .applies-value {
 				flex-grow: 99;
-				padding-left: 0.5ex;
+				padding-left: 0.2rem;
-			}
-			body > section > *:not(h2) {
-				padding-left: 15px;
-			}
-			#sections > div {
-				padding-top: 1em;
-				padding-bottom: 1em;
-			}
-			#sections > div:only-of-type .remove-section {
-				display: none;
-			}
-			#sections > div .add-section {
-				margin-left: 0.4em;
 			}
 			.applies-to img {
 				vertical-align: bottom;
 			}
-			.CodeMirror-lint-mark-warning {
-				background: none;
-			}
-
-			@media(min-width: 738px) {
-				#options .aligned > * {
-					display: table-cell;
-					margin: 0.5ex 0 0 0;
-				}
-			}
 
+			/************ reponsive layouts ************/
 			@media(max-width:737px) {
 				#header {
+					width: auto;
 					height: auto;
 					position: inherit;
-					width: auto;
 					border-right: none;
+					border-bottom: 1px dashed #AAA;
 				}
-				#header section {
+				#header section:not(:last-child) {
-					margin-bottom: 0.5em;
+					margin-bottom: 0.4rem;
-				}
-				#header label {
-					width: auto;
-					vertical-align: baseline;
-					margin-right: .5em;
 				}
 				#header input[type="checkbox"] {
 					vertical-align: middle;
@@ -181,9 +195,7 @@
 				}
 				#basic-info {
 					display: flex;
-				}
+					align-items: baseline;
-				#basic-info > div:not(:last-child) {
-					margin-right: 1em;
 				}
 				#basic-info > * {
 					flex: auto;
@@ -192,60 +204,53 @@
 					flex-grow: 99;
 					display: flex;
 				}
+				#basic-info > *:not(:last-child) {
+					margin-right: 0.8rem;
+				}
 				#basic-info #name {
 					width: auto;
 					flex-grow: 99;
 				}
-				#basic-info #name-label {
-					line-height: 20px;
-				}
 				#actions {
-					padding: 1em 0;
+					margin-top: 1rem;
 				}
-				#actions br {
+				#actions > * {
-					display: none;
+					display: inline-block;
-				}
-				#actions img {
-					position: relative;
-					top: .2em;
-					margin-left: .2em;
-				}
-				#actions > * + button, #actions a {
-					margin-left: 1em;
 				}
 				#options {
 					-webkit-column-count: 2;
 				}
+				#options .aligned > * {
+					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: 20px;
+					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;
+				}
 				#sections {
 					padding-left: 0;
 				}
 				#sections > div {
 					padding: 0;
 				}
-				#sections-heading {
+				#sections > *:not(h2) {
-					padding-left: 8px;
+					padding-left: 0.4rem;
-				}
-				body > section > *:not(h2) {
-					padding-left: 8px;
 				}
 			}
-
-			/* editor options */
-			[type="number"] {
-				max-width: 2.8em;
-				text-align: right;
-			}
-			table, input, select {
-				font-size: inherit;
-			}
-			table td:first-child {min-width: 60px}
 		</style>
 		<script src="storage.js"></script>
 		<script src="messaging.js"></script>
@@ -256,13 +261,18 @@
 		<div id="header">
 			<h1 id="heading"></h1>
 			<section id="basic-info">
-				<div><label for="name" id="name-label"></label><input id="name" class="style-contributor"></div>
+				<div id="basic-info-name">
-				<div><label for="enabled" id="enabled-label"></label><input type="checkbox" id="enabled" class="style-contributor"></div>
+					<input id="name" class="style-contributor">
+				</div>
+				<div id="basic-info-enabled">
+					<input type="checkbox" id="enabled" class="style-contributor">
+					<label for="enabled" id="enabled-label"></label>
+				</div>
 			</section>
 			<section id="actions">
-				<button id="to-mozilla"></button><img id="to-mozilla-help" src="help.png"><br><br>
+				<div><button id="to-mozilla"></button><img id="to-mozilla-help" src="help.png"></div>
-				<button id="save-button" title="Ctrl-S"></button>
 				<a href="manage.html"><button id="cancel-button"></button></a>
+				<button id="save-button" title="Ctrl-S"></button>
 			</section>
 			<section id="options">
 				<h2 id="options-heading"></h2>

edit.js

@@ -671,7 +671,7 @@ chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
 	}
 });
 
-tE("name-label", "styleNameLabel");
+tE("name", "styleMissingName", "placeholder");
 tE("enabled-label", "styleEnabledLabel");
 tE("to-mozilla", "styleToMozillaFormat");
 tE("save-button", "styleSaveLabel");