- help page updated

- help tooltip added in options page

WebContent/ui/pages/help.html

@@ -45,17 +45,17 @@ folder</a> - <a href="#notes">Technical notes</a> - <a href="#knownIssues">Known
 		<p class="notice">It is recommended to <u>uncheck</u> this option</p>
 		</li>
 
+		<li><span class="option">remove objects</span>
+		<p>Check this option to remove all non embeddable elements : flash objects, java applets ...</p>
+		<p class="notice">It is recommended to <u>check</u> this option</p>
+		</li>
+		
 		<li><span class="option">remove scripts</span>
 		<p>Check this option if you do not want to save scripts. Most of the time, you do not need scripts in the saved page. Thus they can alter it. Nevertheless if you want to save
 		page dynamic behavior then uncheck this option. If you uncheck this option then it is strongly recommended to check <span class="option">process raw document</span> option.</p>
 		<p class="notice">It is recommended to <u>check</u> this option</p>
 		</li>
 
-		<li><span class="option">remove objects</span>
-		<p>Check this option to remove all non embeddable elements : flash objects, java applets ...</p>
-		<p class="notice">It is recommended to <u>check</u> this option</p>
-		</li>
-
 		<li><span class="option">remove hidden elements</span>
 		<p>Check this option to remove all hidden elements (<code>visibility = "hidden"</code>&nbsp;or&nbsp;<code>display = "none"</code>&nbsp;or&nbsp;<code>opacity = "0"</code> CSS
 		property values). This option may alter the document but can considerably reduce the saved file size.</p>
@@ -75,13 +75,13 @@ folder</a> - <a href="#notes">Technical notes</a> - <a href="#knownIssues">Known
 
 		<li><span class="option">process in background</span>
 		<p>Check this option to process the page in background. Processing in background means it won't be blocking (only if <span class="option">display processed page</span> option
-		is unchecked). If you uncheck this option, a shadow will prevent you to navigate into the page during the SingleFile processing but processing will be faster.</p>
+		is unchecked). If you uncheck this option, a shadow will prevent you to navigate into the page during the SingleFile processing but it will be faster.</p>
 		<p class="notice">It is recommended to <u>uncheck</u> this option</p>
 		</li>
 
 		<li><span class="option">save processed page (*)</span>
 		<p>Check this option to save the processed page on filesystem. See <a href="#folder">Saved archives folder</a> for more details about saving folder location. If you check
-		this option and you do not want to use "Save as" dialog box to save the page then you should uncheck <span class="option">display processed page</span>.</p>
+		this option and you do not want to use "Save as" dialog box to save the page then you should uncheck <span class="option">display processed page</span> option.</p>
 		<p class="notice">It is recommended to <u>uncheck</u> this option</p>
 		</li>
 
@@ -93,7 +93,7 @@ folder</a> - <a href="#notes">Technical notes</a> - <a href="#knownIssues">Known
 		</li>
 
 		<li><span class="option">max filename length (*)</span>
-		<p>Set the value of maximum filename length. This value is used when <span class="option">save processed page</span> is checked. SingleFile cannot guess the maximum filename
+		<p>Set the value of maximum filename length. This value is used when <span class="option">save processed page</span> option is checked. SingleFile cannot guess the maximum filename
 		length allowed by the Operating System so you have to configure it manually.</p>
 		<p class="notice">It is recommended to set this option to <u>90</u> (if you are using Windows)</p>
 		</li>

WebContent/ui/pages/options.css

@@ -86,4 +86,25 @@ a {
 
 #filenameMaxLengthInput {
 	width: 20px;
+}
+
+.help {
+	font-size: 9pt;
+	color: LightSlateGrey;
+	display: none;	
+}
+
+.help p {
+	margin-top: 0.5em;
+	margin-bottom: 0.5em;
+}
+
+.question-mark {
+	padding-left: 4px;
+	cursor: pointer;
+	opacity: .5;
+}
+
+.question-mark:hover {
+	opacity: .8;
 }

WebContent/ui/pages/options.html

@@ -13,43 +13,92 @@
 <div id="popupContent">	
 	<h4>Basic options:</h4>
 	<div class="option">
-		<label for="removeFramesInput">remove frames</label> <input type="checkbox" id="removeFramesInput">
+		<label for="removeFramesInput">remove frames <img class="question-mark" src="../resources/icon_question_mark.jpg"></label> <input type="checkbox" id="removeFramesInput">
+		<div class="help">
+			<p>Check this option to remove all frames on the page. It may help to reduce the file size, to remove some ads and to view saved pages on IE8.</p>
+			<p class="notice">It is recommended to <u>uncheck</u> this option</p>
+		</div>
 	</div>
 	<div class="option">
-		<label for="removeObjectsInput">remove objects</label> <input type="checkbox" id="removeObjectsInput">
+		<label for="removeObjectsInput">remove objects <img class="question-mark" src="../resources/icon_question_mark.jpg"></label> <input type="checkbox" id="removeObjectsInput">
+		<div class="help">
+			<p>Check this option to remove all non embeddable elements : flash objects, java applets ...</p>
+			<p class="notice">It is recommended to <u>check</u> this option</p>
+		</div>
 	</div>
 	<div class="option">
-		<label for="removeScriptsInput">remove scripts</label> <input type="checkbox" id="removeScriptsInput">
+		<label for="removeScriptsInput">remove scripts <img class="question-mark" src="../resources/icon_question_mark.jpg"></label> <input type="checkbox" id="removeScriptsInput">
+		<div class="help">
+			<p>Check this option if you do not want to save scripts. Most of the time, you do not need scripts in the saved page. Thus they can alter it. Nevertheless if you want to save
+			page dynamic behavior then uncheck this option. If you uncheck this option then it is strongly recommended to check "process raw document" option.</p>
+			<p class="notice">It is recommended to <u>check</u> this option</p>		
+		</div>
 	</div>
 	<div class="option">
-		<label for="removeHiddenInput">remove hidden elements</label> <input type="checkbox" id="removeHiddenInput">
+		<label for="removeHiddenInput">remove hidden elements <img class="question-mark" src="../resources/icon_question_mark.jpg"></label> <input type="checkbox" id="removeHiddenInput">
+		<div class="help">
+			<p>Check this option to remove all hidden elements. This option may alter the document but can considerably reduce the saved file size.</p>
+			<p class="notice">It is recommended to <u>uncheck</u> this option</p>
+		</div>
 	</div>
 	<div class="option">
-		<label for="removeUnusedCSSRulesInput">remove unused CSS rules</label> <input type="checkbox" id="removeUnusedCSSRulesInput">
+		<label for="removeUnusedCSSRulesInput">remove unused CSS rules <img class="question-mark" src="../resources/icon_question_mark.jpg"></label> <input type="checkbox" id="removeUnusedCSSRulesInput">
+		<div class="help">
+			<p>Check this option to remove all CSS rules that do not match any element. This option may alter the document but can considerably reduce the saved file size. If you check
+			this option, it may also introduce some incompatibilities issues in the saved page when opening it into another browser (i.e. not based on Webkit).</p>
+			<p class="notice">It is recommended to <u>uncheck</u> this option</p>
+		</div>
 	</div>
 	<div class="option">
-		<label for="getContentInput">scrapbook the page</label> <input type="checkbox" id="getContentInput">
+		<label for="getContentInput">scrapbook the page <img class="question-mark" src="../resources/icon_question_mark.jpg"></label> <input type="checkbox" id="getContentInput">
+		<div class="help">
+			<p>Check this option to send the processed page to Scrapbook for SingleFile.</p>
+			<p class="notice">It is recommended to <u>uncheck</u> this option</p>
+		</div>
 	</div>	
 	<h4>Advanced options:</h4>
 	<div class="option">
-		<label for="processInBackgroundInput">process in background</label> <input type="checkbox" id="processInBackgroundInput">
+		<label for="processInBackgroundInput">process in background <img class="question-mark" src="../resources/icon_question_mark.jpg"></label> <input type="checkbox" id="processInBackgroundInput">
+		<div class="help">
+			<p>Check this option to process the page in background. Processing in background means it won't be blocking (only if "display processed page" option
+			is unchecked). If you uncheck this option, a shadow will prevent you to navigate into the page during the SingleFile processing but it will be faster.</p>
+			<p class="notice">It is recommended to <u>uncheck</u> this option</p>		
+		</div>
 	</div>
 	<div id="storageOptions">
 		<div class="option">
-			<label for="savePageInput">save processed page</label> <input type="checkbox" id="savePageInput">
+			<label for="savePageInput">save processed page <img class="question-mark" src="../resources/icon_question_mark.jpg"></label> <input type="checkbox" id="savePageInput">
+			<div class="help">
+				<p>Check this option to save the processed page on filesystem. See "Saved archives folder" in help page for more details about saving folder location. If you check
+				this option you should uncheck "display processed page" option.</p>
+				<p class="notice">It is recommended to <u>uncheck</u> this option</p>		
+			</div>
 		</div>
 		<div class="option">
-			<label for="displayProcessedPageInput">display processed page</label> <input type="checkbox" id="displayProcessedPageInput">
+			<label for="displayProcessedPageInput">display processed page <img class="question-mark" src="../resources/icon_question_mark.jpg"></label> <input type="checkbox" id="displayProcessedPageInput">
+			<div class="help">
+				<p>Check this option to display the processed page in the tab. This option must be checked if you want to use Chrome "Save as" dialog box to save the page. If you uncheck
+				this option then you should check "process in background" else you should uncheck "process in background".</p>
+				<p class="notice">It is recommended to <u>check</u> this option</p>
+			</div>
 		</div>
 		<div class="option">
-			<label for="filenameMaxLengthInput">max filename length</label> <input type="text" id="filenameMaxLengthInput">
+			<label for="filenameMaxLengthInput">max filename length <img class="question-mark" src="../resources/icon_question_mark.jpg"></label> <input type="text" id="filenameMaxLengthInput">
+			<div class="help">
+				<p>Set the value of maximum filename length. This value is used when "save processed page" option is checked.</p>
+				<p class="notice">It is recommended to set this option to <u>90</u> (if you are using Windows)</p>
+			</div>
 		</div>		
 	</div>
 	<div class="option">
-		<label for="getRawDocInput">process raw document</label> <input type="checkbox" id="getRawDocInput">
+		<label for="getRawDocInput">process raw document <img class="question-mark" src="../resources/icon_question_mark.jpg"></label> <input type="checkbox" id="getRawDocInput">
+		<div class="help">
+			<p>Check this option to process the raw downloaded document instead of the displayed document. This option also helps to not alter the saved page when "remove scripts" is unchecked</p>
+			<p class="notice">It is recommended to <u>uncheck</u> this option</p>		
+		</div>
 	</div>
 	<div class="option">	
-		<a href="help.html" target="SingleSileHelpPage">help</a><button id="resetButton">Reset to default options</button>
+		<a href="help.html" target="SingleSileHelpPage">help</a><button id="resetButton" title="Reset all the options to default (i.e. recommended) state">Reset to default options</button>
 	</div>	
 </div>
 </div>

WebContent/ui/scripts/bg/options.js

@@ -78,7 +78,15 @@ function load() {
 		bgPage.singlefile.config.reset();
 		load();
 	});
-	document.getElementById("storageOptions").style.display = storageIsEnabled ? "" : "none";
+	document.getElementById("storageOptions").style.display = storageIsEnabled ? "" : "none";	
 }
 
-addEventListener("load", load);
+addEventListener("load", load);
+addEventListener("click", function(event) {
+	var tooltip ;
+	if (event.target.className == "question-mark") {
+		tooltip = event.target.parentElement.parentElement.children[2];
+		tooltip.style.display = tooltip.style.display == "block" ? "none" : "block";
+		event.preventDefault();
+	}
+});