Update missing locale string; fix button overflow issues

6 files changed, 24 insertions, 20 deletions

diff --git a/Gruntfile.js b/Gruntfile.js
index eb0bfee..ae58d39 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -82,6 +82,8 @@ module.exports = function( grunt ) {
 		clean : {
 			build : {
 				src : [
+					'dist/**/**/**/*', // locales
+					'dist/**/**/*',
 					'dist/**/*',
 					config.indexHtml,
 					'*.min.js'
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index a55de73..8047022 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -39,6 +39,10 @@
 		"message" : "View Keyboard Commands",
 		"description" : "Open a list of keyboard commands"
 	},
+	"hideKeyboardCommands" : {
+		"message" : "Hide Keyboard Commands",
+		"description" : "Close list of keyboard commands"
+	},
 	"keyColumn" : {
 		"message" : "Key",
 		"description" : "Key name column"
diff --git a/_locales/fr/messages.json b/_locales/fr/messages.json
index 5c924d4..5697c0e 100644
--- a/_locales/fr/messages.json
+++ b/_locales/fr/messages.json
@@ -39,6 +39,10 @@
 		"message" : "Voir les raccourcis clavier",
 		"description" : "Open a list of keyboard commands"
 	},
+	"hideKeyboardCommands" : {
+		"message" : "Masquer les raccourcis clavier",
+		"description" : "Close list of keyboard commands"
+	},
 	"keyColumn" : {
 		"message" : "Touche",
 		"description" : "Key name column"
diff --git a/src/chrome/popup.html b/src/chrome/popup.html
index bc23855..552cd41 100644
--- a/src/chrome/popup.html
+++ b/src/chrome/popup.html
@@ -52,21 +52,17 @@
 	<section>
 		<h3 i18n-text="commandButtons"></h3>
 		<ul>
-			<li class="<!-- @echo undo -->">
+			<li class="first <!-- @echo undo -->" i18n-title="undoLast" i18n-text="undoLast">
 				<span class="<!-- @echo icon -->"></span>
-				<span i18n-text="undoLast"></span>
 			</li>
-			<li class="<!-- @echo stylize -->">
+			<li class="<!-- @echo stylize -->" i18n-title="addStylize" i18n-text="addStylize">
 				<span class="<!-- @echo icon -->"></span>
-				<span i18n-text="addStylize"></span>
 			</li>
-			<li class="<!-- @echo noGraphics -->">
+			<li class="<!-- @echo noGraphics -->" i18n-title="removeGraphics" i18n-text="removeGraphics">
 				<span class="<!-- @echo icon -->"></span>
-				<span i18n-text="removeGraphics"></span>
 			</li>
-			<li class="<!-- @echo print -->">
+			<li class="last <!-- @echo print -->" i18n-title="sendToPrint" i18n-text="sendToPrint">
 				<span class="<!-- @echo icon -->"></span>
-				<span i18n-text="sendToPrint"></span>
 			</li>
 		</ul>
 		<div class="commands-wrap">
diff --git a/src/chrome/popup.js b/src/chrome/popup.js
index a0d86cb..37b6976 100644
--- a/src/chrome/popup.js
+++ b/src/chrome/popup.js
@@ -53,8 +53,7 @@ var commands = {
 			table = document.querySelector( '#/* @echo keyboard */' ),
 			mode = table.style.display === 'none';
 		table.style.display = mode ? '' : 'none';
-		this.innerHTML = ( mode ? 'Hide' : 'View' ) + ' Keyboard Commands';
-
+		this.innerHTML = chrome.i18n.getMessage( mode ? 'hideKeyboardCommands' : 'viewKeyboardCommands' );
 	},
 	undo : function() {
 		chrome.tabs.executeScript( null, {
@@ -63,19 +62,19 @@ var commands = {
 	},
 	setLanguage : function(){
 		// update all text content
-		commands.getMsg( document.querySelectorAll( '[i18n-text]' ), true );
-		commands.getMsg( document.querySelectorAll( '[i18n-title]' ), false );
+		commands.getMsg( document.querySelectorAll( '[i18n-text]' ), 'text' );
+		commands.getMsg( document.querySelectorAll( '[i18n-title]' ), 'title' );
 	},
-	getMsg : function( elms, isText ) {
+	getMsg : function( elms, target ) {
 		var indx, msgKey, message,
 			len = elms.length;
 		for ( indx = 0; indx < len; indx++ ) {
-			msgKey = elms[ indx ].getAttribute( 'i18n-' + ( isText ? 'text' : 'title' ) );
+			msgKey = elms[ indx ].getAttribute( 'i18n-' + target );
 			message = chrome.i18n.getMessage( msgKey );
-			if ( isText ) {
-				elms[ indx ].innerHTML = message;
+			if ( target === 'text' ) {
+				elms[ indx ].innerHTML += message;
 			} else {
-				elms[ indx ].title = message;
+				elms[ indx ].title = message.replace( '<br>', ' ' );
 			}
 		}
 	}
diff --git a/src/chrome/popup.scss b/src/chrome/popup.scss
index bfff2a6..c480db4 100644
--- a/src/chrome/popup.scss
+++ b/src/chrome/popup.scss
@@ -79,17 +79,16 @@ li {
 	vertical-align: middle;
 	padding: 4px 16px 4px 4px;
 	white-space: nowrap;
-	margin: 2px;
 	cursor: pointer;
+	max-width: 23%;
+	overflow: hidden;
 
 	&:hover {
 		background: #444;
 	}
-
 }
 
 .#{$icon} {
-	display: inline-block;
 	background: url(printliminator.png) no-repeat;
 	width: 25px;
 	height: 25px;