Bug 397397 - commonHTML fragments should use NLS string binding
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/commonHTMLFragments.js b/bundles/org.eclipse.orion.client.core/web/orion/commonHTMLFragments.js
index 5675b25..b6e45eb 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/commonHTMLFragments.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/commonHTMLFragments.js
@@ -12,21 +12,11 @@
 /*global window document define login logout localStorage orion */
 /*browser:true*/
 
-define(['i18n!orion/nls/messages', 'require', 'orion/webui/littlelib'], 
-        function(messages, require, lib){
-	
-	function asHTMLText(input) {
-		if (!input) {
-			return "";
-		}
-		var span = document.createElement("span"); //$NON-NLS-0$
-		span.textContent = input;
-		return span.innerHTML;
-	}
+define(['require', 'orion/webui/littlelib'], 
+        function(require, lib){
 	
 	/**
-	 * This class contains static utility methods. It is not intended to be instantiated.
-	 * @class This class contains HTML fragments for the common banner, footer, toolbars
+	 * This module contains HTML fragments for the common banner, footer, toolbars.
 	 * @name orion.commonHTMLFragments
 	 */
 
@@ -34,20 +24,20 @@
 	var topHTMLFragment =
 	
 	'<header id="banner" role="banner" class="headerLayout">' + //$NON-NLS-0$
-		//Top row:  Logo + discovery links + user
+		//Top row:  Logo + discovery links + search + user
 		'<div id="staticBanner" class="primaryNav layoutBlock topRowBanner">' + //$NON-NLS-0$
-			'<a id="home" class="layoutLeft logo" href="' + require.toUrl("navigate/table.html") + '" aria-label="Orion Home"></a>' + //$NON-NLS-8$ //$NON-NLS-6$ //$NON-NLS-5$ //$NON-NLS-4$ //$NON-NLS-2$ //$NON-NLS-1$ //$NON-NLS-0$
+			'<a id="home" class="layoutLeft logo" href="' + require.toUrl("navigate/table.html")+ '"></a>' +  //$NON-NLS-2$ //$NON-NLS-1$ //$NON-NLS-0$
 			'<nav id="primaryNav" class="layoutLeft" role="navigation"></nav>' + //$NON-NLS-0$
 			'<div class="layoutRight">' + //$NON-NLS-0$
 				'<div id="globalActions" class="spacingLeft layoutLeft"></div>' + //$NON-NLS-0$
 				'<div id="relatedLinks" class="spacingLeft layoutLeft" style="padding-top:1px;">' + //$NON-NLS-0$
-					'<span tabindex="0" role="button" id="relatedTrigger" class="dropdownTrigger hidden">' + messages["Related"] + '<span class="dropdownArrowDown"></span></span>' +  //$NON-NLS-2$ //$NON-NLS-1$ //$NON-NLS-0$
+					'<span tabindex="0" role="button" id="relatedTrigger" class="dropdownTrigger hidden">${Related}<span class="dropdownArrowDown"></span></span>' +  //$NON-NLS-0$
 					'<ul id="relatedDropdown" class="dropdownMenu" role="menu"></ul>' + //$NON-NLS-0$
 				'</div>' + //$NON-NLS-0$
-				'<input type="text" id="search" autocomplete="off" placeholder="Search" title="Type a keyword or wild card to search in root" class="layoutLeft spacingLeft searchbox" role="search">' + //$NON-NLS-2$ //$NON-NLS-0$
+				'<input type="text" id="search" autocomplete="off" class="layoutLeft spacingLeft searchbox" role="search">' + //$NON-NLS-0$
 				'<div id="searchOptions" class="layoutLeft" style="padding-top:1px;"></div>' + //$NON-NLS-0$
 				'<div id="userMenu" class="spacingLeft layoutLeft">' + //$NON-NLS-0$
-					'<span id="userTrigger" tabindex="0" role="button" class="dropdownTrigger">' + messages["Options"] + '<span class="dropdownArrowDown"></span></span>' +  //$NON-NLS-2$ //$NON-NLS-1$ //$NON-NLS-0$
+					'<span id="userTrigger" tabindex="0" role="button" class="dropdownTrigger">${Options}<span class="dropdownArrowDown"></span></span>' +  //$NON-NLS-0$
 					'<ul id="userDropdown" class="dropdownMenu" role="menu"></ul>' + //$NON-NLS-0$
 				'</div>' + //$NON-NLS-0$
 			'</div>' + //$NON-NLS-0$
@@ -56,7 +46,7 @@
 		'<div id="titleArea" class="layoutBlock titleArea">' + //$NON-NLS-0$
 			'<div class="clear" style="padding-bottom:5px;display:inline;"><span id="location" class="currentLocation"></span><span id="dirty" class="currentLocation"></span></div>' + //$NON-NLS-0$
 			'<div class="layoutRight pageNav">' + //$NON-NLS-0$
-				'<span id="pageFavorite" tabindex="0" role="button" aria-label="Add this page to the favorites list" class="spacingLeft layoutLeft imageSprite core-sprite-favorite_sml"></span>' + //$NON-NLS-2$ //$NON-NLS-0$
+				'<span id="pageFavorite" tabindex="0" role="button" class="spacingLeft layoutLeft imageSprite core-sprite-favorite_sml"></span>' + //$NON-NLS-0$
 			'</div>' + //$NON-NLS-0$
 		'</div>' + //$NON-NLS-0$
 	'</header>'; //$NON-NLS-0$
@@ -66,15 +56,13 @@
 	// styling of the surrounding div (text-align, etc) is in ide.css "footer"
 	var bottomHTMLFragment = 
 		'<footer id="footerContent" class="layoutBlock footerLayout" role="contentinfo">' + //$NON-NLS-0$
-			'<div class="footerBlock">' + //$NON-NLS-0$
-				asHTMLText(messages['Orion is in Beta. Please try it out but BEWARE your data may be lost.']) +
-			'</div>' + //$NON-NLS-0$
+			'<div class="footerBlock">${Orion is in Beta. Please try it out but BEWARE your data may be lost.}</div>' + //$NON-NLS-0$
 			'<div class="footerRightBlock">' + //$NON-NLS-0$
-				'<a href="http://wiki.eclipse.org/Orion/FAQ" target="_blank">'+asHTMLText(messages['FAQ'])+'</a> | ' +  //$NON-NLS-0$
-				'<a href="https://bugs.eclipse.org/bugs/enter_bug.cgi?product=Orion&version=1.0" target="_blank">'+asHTMLText(messages['Report a Bug'])+'</a> | ' + //$NON-NLS-0$
-				'<a href="http://www.eclipse.org/legal/privacy.php" target="_blank">'+asHTMLText(messages['Privacy Policy'])+'</a> | ' +  //$NON-NLS-0$
-				'<a href="http://www.eclipse.org/legal/termsofuse.php" target="_blank">'+asHTMLText(messages['Terms of Use'])+'</a> | '+  //$NON-NLS-0$
-				'<a href="http://www.eclipse.org/legal/copyright.php" target="_blank">'+asHTMLText(messages['Copyright Agent'])+'</a>'+ //$NON-NLS-0$
+				'<a href="http://wiki.eclipse.org/Orion/FAQ" target="_blank">${FAQ}</a> | ' +  //$NON-NLS-0$
+				'<a href="https://bugs.eclipse.org/bugs/enter_bug.cgi?product=Orion&version=1.0" target="_blank">${Report a Bug}</a> | ' + //$NON-NLS-0$
+				'<a href="http://www.eclipse.org/legal/privacy.php" target="_blank">${Privacy Policy}</a> | ' +  //$NON-NLS-0$
+				'<a href="http://www.eclipse.org/legal/termsofuse.php" target="_blank">${Terms of Use}</a> | '+  //$NON-NLS-0$
+				'<a href="http://www.eclipse.org/legal/copyright.php" target="_blank">${Copyright Agent}</a>'+ //$NON-NLS-0$
 			'</div>' + //$NON-NLS-0$
 		'</footer>'; //$NON-NLS-0$
 	// END BOTTOM BANNER FRAGMENT
@@ -89,15 +77,15 @@
 	var toolbarHTMLFragment = 
 		'<ul class="layoutLeft commandList pageActions" id="pageActions"></ul>' + //$NON-NLS-0$
 		'<ul class="layoutLeft commandList pageActions" id="selectionTools"></ul>' + //$NON-NLS-0$
-		'<img class="layoutRight progressPane" src="'+ require.toUrl("images/none.png") +'" id="progressPane" tabindex="0" role="progressbar" aria-label="Operations - Press spacebar to show current operations"></img>' + //$NON-NLS-4$ //$NON-NLS-2$ //$NON-NLS-1$ //$NON-NLS-0$
-		'<div class="layoutRight" style="padding-left:7px;padding-right:7px;margin-top:3px;" id="settingsTab" style="visibility:hidden;">' +
-		'<div class="layoutRight core-sprite-settings" id="settingsAction" role="settings" aria-live="off" style="visibility:hidden;"></div>' + //$NON-NLS-0$
-		'</div>' + 
+		'<img class="layoutRight progressPane" src="'+ require.toUrl("images/none.png") +'" id="progressPane" tabindex="0" role="progressbar"></img>' + //$NON-NLS-2$  //$NON-NLS-1$ //$NON-NLS-0$
+		'<div class="layoutRight" style="padding-left:7px;padding-right:7px;margin-top:3px;" id="settingsTab" style="visibility:hidden;">' +  //$NON-NLS-0$
+			'<div class="layoutRight core-sprite-settings" id="settingsAction" role="settings" aria-live="off" style="visibility:hidden;"></div>' + //$NON-NLS-0$
+		'</div>' +  //$NON-NLS-0$
 		'<div class="layoutRight status" id="statusPane" role="status" aria-live="off"></div>' + //$NON-NLS-0$
 		'<ul class="layoutRight commandList pageActions" id="pageNavigationActions"></ul>' + //$NON-NLS-0$
 		'<div id="notificationArea" class="layoutLeft layoutBlock slideContainer">' + //$NON-NLS-0$
 				'<div class="layoutLeft" id="notifications" aria-live="assertive" aria-atomic="true"></div>' + //$NON-NLS-0$
-				'<div class="layoutRight"><span tabindex="0" role="button" aria-label="Close notification" class="layoutRight core-sprite-close imageSprite" id="closeNotifications"></span></div>' + //$NON-NLS-0$
+				'<div class="layoutRight"><span tabindex="0" role="button" class="layoutRight core-sprite-close imageSprite" id="closeNotifications"></span></div>' + //$NON-NLS-0$
 		'</div>' + slideoutHTMLFragment("mainToolbar"); //$NON-NLS-1$ //$NON-NLS-0$
 		
 	
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/globalCommands.js b/bundles/org.eclipse.orion.client.core/web/orion/globalCommands.js
index 9af3968..97da98c 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/globalCommands.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/globalCommands.js
@@ -51,6 +51,8 @@
 	var authenticationIds = [];
 	
 	function startProgressService(serviceRegistry){
+		var progressPane = lib.node("progressPane"); //$NON-NLS-0$
+		progressPane.setAttribute("aria-label", messages['Operations - Press spacebar to show current operations']); //$NON-NLS-1$ //$NON-NLS-0$
 		var progressService = serviceRegistry.getService("orion.page.progress"); //$NON-NLS-0$
 		if(progressService) {
 			progressService.init.bind(progressService)("progressPane"); //$NON-NLS-0$
@@ -58,7 +60,6 @@
 	}
 	
 	function setUserName(registry, node){
-			
 			var authService = registry.getService("orion.core.auth"); //$NON-NLS-0$
 			if (authService !== null) {
 				authService.getUser().then(function(jsonData){
@@ -152,7 +153,7 @@
 		dropDownImage.tabIndex = 0;
 		dropDownImage.classList.add("advancedSearchDecorationSprite");//$NON-NLS-0$
 		dropDownImage.classList.add("core-sprite-openarrow"); //$NON-NLS-0$
-		dropDownImage.title = "advanced search";
+		dropDownImage.title = messages["Advanced search"];
 		dropDownImage.onclick = function(evt) {
 			container.toggle();
 		};
@@ -377,6 +378,7 @@
 						makeFavorite(serviceRegistry);
 					}
 				}, false);
+				faveButton.setAttribute("aria-label", messages["Add to the favorites list"]); //$NON-NLS-1$ //$NON-NLS-0$
 				new mTooltip.Tooltip({
 					node: faveButton,
 					text: messages["Add to the favorites list"],
@@ -471,7 +473,7 @@
 		title = options.title;
 		if (!title) {
 			if (name) {
-				title = name + " - "+ options.task;
+				title = name + " - "+ options.task; //$NON-NLS-0$
 			} else {
 				title = options.task;
 			}
@@ -538,7 +540,7 @@
 		}
 		// no reference node has been given, so use the main toolbar.
 		if (!toolNode) {
-			toolNode = lib.node("pageActions");
+			toolNode = lib.node("pageActions"); //$NON-NLS-0$
 		}
 		var node = toolNode;
 		// the trickiest part is finding where to start looking (section or main toolbar).
@@ -596,8 +598,8 @@
 		a settings gear will appear at the right hand side */
 	
 	function addSettings( settings ){
-		var settingsNode = document.getElementById("settingsTab");
-		var settingsButton = document.getElementById("settingsAction");
+		var settingsNode = document.getElementById("settingsTab"); //$NON-NLS-0$
+		var settingsButton = document.getElementById("settingsAction"); //$NON-NLS-0$
 		var CLICKED = false;
 		var panel;
 		
@@ -610,50 +612,48 @@
 				CLICKED = true;
 		
 				var TAB_HEIGHT = 24;
-				var TAB_WIDTH = 25;
 				var PANEL_HEIGHT = 150;
 				var PANEL_WIDTH = 150;
-				var BORDER_RADIUS = '3px';
-				var COLOR = '#555';
+				var BORDER_RADIUS = '3px'; //$NON-NLS-0$
+				var COLOR = '#555'; //$NON-NLS-0$
 			
 				settingsNode.style.backgroundColor = COLOR;
-				settingsNode.style.zIndex = '99';
+				settingsNode.style.zIndex = '99'; //$NON-NLS-0$
 				settingsNode.style.borderTopRightRadius = BORDER_RADIUS;
 				settingsNode.style.borderTopLeftRadius = BORDER_RADIUS;
 				
-				settingsButton.className = "core-sprite-settings-white";
+				settingsButton.className = "core-sprite-settings-white"; //$NON-NLS-0$
 				
-				settingsNode.id = 'settingsNode';
-				settingsButton.id = 'settingsButton';
+				settingsNode.id = 'settingsNode'; //$NON-NLS-0$
+				settingsButton.id = 'settingsButton'; //$NON-NLS-0$
 				
-				var rightPane = document.getElementById( 'innerPanels' );	
+				var rightPane = document.getElementById( 'innerPanels' );	 //$NON-NLS-0$
 				var rpBox = rightPane.getBoundingClientRect();
 				var box = settingsNode.getBoundingClientRect();
-				var leftPane = document.getElementById( 'outlineContainer' );
-				var lpBox = leftPane.getBoundingClientRect();
+				var leftPane = document.getElementById( 'outlineContainer' ); //$NON-NLS-0$
 				
 				if (!panel) {
-					panel = document.createElement( 'div' );
-					panel.className = 'settingsPanel';
-					panel.style.width = PANEL_WIDTH + 'px';
-					panel.style.height = PANEL_HEIGHT + 'px';
+					panel = document.createElement( 'div' ); //$NON-NLS-0$
+					panel.className = 'settingsPanel'; //$NON-NLS-0$
+					panel.style.width = PANEL_WIDTH + 'px'; //$NON-NLS-0$
+					panel.style.height = PANEL_HEIGHT + 'px'; //$NON-NLS-0$
 					panel.style.backgroundColor = COLOR;
-					panel.style.zIndex = '99';
-					panel.style.top = box.top - rpBox.top + TAB_HEIGHT -4 + 'px';
-					panel.id = 'settingsPanel';		
+					panel.style.zIndex = '99'; //$NON-NLS-0$
+					panel.style.top = box.top - rpBox.top + TAB_HEIGHT -4 + 'px'; //$NON-NLS-0$
+					panel.id = 'settingsPanel';		 //$NON-NLS-0$
 					panel.style.borderTopLeftRadius = BORDER_RADIUS;
 					panel.style.borderBottomRightRadius = BORDER_RADIUS;
 					panel.style.borderBottomLeftRadius = BORDER_RADIUS;
 					
 					rightPane.appendChild( panel );
 					lib.addAutoDismiss([settingsButton, settingsNode, panel], function() {
-						settingsButton.className = "core-sprite-settings";
-						settingsNode.style.backgroundColor = 'white';
-						panel.style.visibility = 'hidden';
+						settingsButton.className = "core-sprite-settings"; //$NON-NLS-0$
+						settingsNode.style.backgroundColor = 'white'; //$NON-NLS-0$
+						panel.style.visibility = 'hidden'; //$NON-NLS-0$
 						CLICKED = false;
 					});	
 				} else {
-					panel.style.visibility = 'visible';
+					panel.style.visibility = 'visible'; //$NON-NLS-0$
 				}
 				lib.empty(panel);	
 				settings.appendTo( panel );
@@ -681,21 +681,33 @@
 		var range = document.createRange();
 		range.selectNode(parent);
 		var headerFragment = range.createContextualFragment(commonHTML.topHTMLFragment);
+		// do the i18n string substitutions
+		lib.processTextNodes(headerFragment, messages);
+		
 		if (parent.firstChild) {
 			parent.insertBefore(headerFragment, parent.firstChild);
 		} else {
 			parent.appendChild(headerFragment);
 		}
-		
+		var home = lib.node("home"); //$NON-NLS-0$
+		if (home) {
+			home.setAttribute("aria-label", messages['Orion Home']);  //$NON-NLS-1$ //$NON-NLS-0$
+		}
 		var toolbar = lib.node("pageToolbar"); //$NON-NLS-0$
 		if (toolbar) {
 			toolbar.classList.add("toolbarLayout"); //$NON-NLS-0$
 			toolbar.innerHTML = commonHTML.toolbarHTMLFragment;
 		}
+		var closeNotification = lib.node("closeNotifications"); //$NON-NLS-0$
+		if (closeNotification) {
+			closeNotification.setAttribute("aria-label", messages['Close notification']);  //$NON-NLS-1$ //$NON-NLS-0$
+		}
 		
 		var footer = lib.node("footer"); //$NON-NLS-0$
 		if (footer) {
 			footer.innerHTML = commonHTML.bottomHTMLFragment;
+			// do the i18n string substitutions
+			lib.processTextNodes(footer, messages);
 		}
 		
 		// Set up a custom parameter collector that slides out of adjacent tool areas.
@@ -736,6 +748,13 @@
 		if (!searchField) {
 			throw "failed to generate HTML for banner"; //$NON-NLS-0$
 		}
+		// this stuff
+		searchField.setAttribute("placeholder", messages['Search']); //$NON-NLS-1$ //$NON-NLS-0$
+		new mTooltip.Tooltip({
+			node: searchField,
+			text: messages["Type a keyword or wild card to search in root"],
+			position: ["below", "left"] //$NON-NLS-1$ //$NON-NLS-0$
+		});
 		var advSearchOptContainer = new mAdvSearchOptContainer.advSearchOptContainer(searchField, searcher, serviceRegistry,
 									{group: "advancedSearch"});//$NON-NLS-0$
 
@@ -749,7 +768,7 @@
 							fullSet.push({type: "category", label: messages["Saved searches"]});//$NON-NLS-0$
 							hasSavedSearch = true;
 						}
-						fullSet.push({type: "proposal", value: {name: searches[i].label, value: require.toUrl("search/search.html") + "#" + searches[i].value, type: "link"}});
+						fullSet.push({type: "proposal", value: {name: searches[i].label, value: require.toUrl("search/search.html") + "#" + searches[i].value, type: "link"}});  //$NON-NLS-3$ //$NON-NLS-2$ //$NON-NLS-1$ //$NON-NLS-0$
 						//fullSet.push({type: "proposal", label: searches[i].label, value: searches[i].name});//$NON-NLS-0$
 					} else {
 						if(!hasRecentSearch){
@@ -776,7 +795,7 @@
 			}
             var promises = [];
 			serviceReferences.forEach(function(serviceRef) {
-				var filterForMe = serviceRef.getProperty("filterForMe");
+				var filterForMe = serviceRef.getProperty("filterForMe");  //$NON-NLS-0$
 				promises.push( serviceRegistry.getService(serviceRef).run(keyWord).then(function(returnValue) {
 					//The return value has to be an array of {category : string, datalist: [string,string,string...]}
 					var proposalList = {filterForMe: filterForMe, proposals: []};
@@ -825,8 +844,8 @@
 			if (side && main) {
 				splitter = new mSplitter.Splitter({node: splitNode, sidePanel: side, mainPanel: main});
 				var toggleSidePanelCommand = new mCommands.Command({
-					name: "Toggle side panel",
-					tooltip:"Open or close the side panel",
+					name: messages["Toggle side panel"],
+					tooltip: messages["Open or close the side panel"],
 					id: "orion.toggleSidePane", //$NON-NLS-0$
 					callback: function() {
 						splitter.toggleSidePanel();}
@@ -845,7 +864,7 @@
 					editor.getTextView().setAction("toggleOutliner", function(){ //$NON-NLS-0$
 						splitter.toggleSidePanel();
 						return true;
-					}, {name:"Toggle Outliner"});
+					}, {name: messages["Toggle Outliner"]});
 				}
 			}
 		}
@@ -1060,7 +1079,7 @@
 								var bindingString = mUIUtils.getUserKeyString(bindings[j]);
 								var span = document.createElement("span"); //$NON-NLS-0$
 								span.role = "listitem"; //$NON-NLS-0$
-								span.appendChild(document.createTextNode(bindingString + " = " + actionName)); 
+								span.appendChild(document.createTextNode(bindingString + " = " + actionName));  //$NON-NLS-0$
 								span.appendChild(document.createElement("br")); //$NON-NLS-0$
 								keyAssistDiv.appendChild(span);
 							}
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/nls/root/messages.js b/bundles/org.eclipse.orion.client.core/web/orion/nls/root/messages.js
index 980814e..b179a2e 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/nls/root/messages.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/nls/root/messages.js
@@ -73,7 +73,8 @@
 	"Close": "Close",
 	"Expand all": "Expand all",
 	"Collapse all": "Collapse all",
-	"Search": "Search",
+	"Search" : "Search",
+	"Advanced search" : "Advanced search",
 	"Submit" : "Submit",
 	"More" : "More",
 	"Saved searches" : "Saved searches",
@@ -81,5 +82,12 @@
 	"Open in new tab" : "Open in new tab", 
 	"Regular expression" : "Regular expression",
 	"Search options" : "Search options",
-	"Global search" : "Global search"
+	"Global search" : "Global search",
+	"Orion Home" : "Orion Home",
+	"Close notification" : "Close notification",
+	"Operations - Press spacebar to show current operations" : "Operations - Press spacebar to show current operations",
+	"Type a keyword or wild card to search in root" : "Type a keyword or wild card to search in root",
+	"Toggle side panel" : "Toggle side panel",
+	"Open or close the side panel": "Open or close the side panel",
+	"Toggle Outliner" : "Toggle Outliner"
 });
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/webui/littlelib.js b/bundles/org.eclipse.orion.client.core/web/orion/webui/littlelib.js
index dd9f1c2..fe0da18 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/webui/littlelib.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/webui/littlelib.js
@@ -65,7 +65,7 @@
 	function processTextNodes(node, messages) {

 		if (node.nodeType === 3) { // TEXT_NODE

 			var matches = variableRegEx.exec(node.nodeValue);

-			if (matches.length > 1) {

+			if (matches && matches.length > 1) {

 				node.parentNode.replaceChild(document.createTextNode(messages[matches[1]]), node);

 			}

 		}