--- a
+++ b/options.html
@@ -0,0 +1,328 @@
+ďťż<html>
+
+ <head>
+
+ <meta charset="utf-8"/>
+
+<!--
+/************************************************************************/
+/* */
+/* Save Page WE - Generic WebExtension - Options Page */
+/* */
+/* HTML and CSS for Options Page */
+/* */
+/* Last Edit - 27 Oct 2017 */
+/* */
+/* Copyright (C) 2016-2017 DW-dev */
+/* */
+/* Distributed under the GNU General Public License version 2 */
+/* See LICENCE.txt file and http://www.gnu.org/licenses/ */
+/* */
+/************************************************************************/
+-->
+
+ <title>Save Page WE Options</title>
+
+ <script src="options.js"></script>
+
+ <style>
+
+ /* Chrome - maximum height to avoid scrolling is 531px */
+
+ body
+ {
+ background-color: #F0F0F0;
+ }
+
+ #options
+ {
+ width: 337px;
+ margin: auto;
+ padding: 5px;
+ border: 1px solid #808080;
+ font-family: "Segoe UI","Helvetica Neue",Ubuntu,Arial;
+ font-size: 12px;
+ background-color: white;
+ }
+
+ #options *
+ {
+ font-family: "Segoe UI","Helvetica Neue",Ubuntu,Arial;
+ font-size: 12px;
+ }
+
+ #options-title
+ {
+ font-size: 16px;
+ margin-bottom: 7px;
+ }
+
+ #options-tabbar
+ {
+ margin: 0px 3px 4px 2px;
+ padding: 1px 1px 1px 2px;
+ border: 1px solid #C0C0C0;
+ }
+
+ #options-tabbar button
+ {
+ display: inline-block;
+ margin: 0px -1px;
+ padding: 1px 6px;
+ background-color: #E0E0E0;
+ border: 1px solid #C0C0C0;
+ cursor: pointer;
+ }
+
+ #options-tabbar button:not([selected]):hover
+ {
+ background-color: #F0F0F0;
+ }
+
+ #options-tabbar button:not([selected]):active
+ {
+ background-color: #FFFFFF;
+ }
+
+ #options-tabbar button[selected]
+ {
+ background-color: #FFFFFF;
+ }
+
+ #options-tab-general,
+ #options-tab-saveditems
+ {
+ /* display: none; */
+ }
+
+ #options-tabs
+ {
+ height: 420px;
+ }
+
+ form
+ {
+ margin-bottom: 3px;
+ }
+
+ #options-buttonaction fieldset i
+ {
+ color: #808080;
+ }
+
+ fieldset div
+ {
+ margin-bottom: 5px;
+ }
+
+ fieldset > div:last-child
+ {
+ margin-bottom: 0px;
+ }
+
+ fieldset input[type="checkbox"]
+ {
+ margin-right: 7px;
+ vertical-align: 0px;
+ }
+
+ fieldset input[type="radio"]
+ {
+ margin-left: 4px;
+ margin-right: 7px;
+ vertical-align: 0px;
+ }
+
+ fieldset input[type="number"]
+ {
+ width: 50px;
+ margin-left: 4px;
+ margin-right: 8px;
+ padding: 1px 0px 1px 3px;
+ text-align: center;
+ vertical-align: 2px;
+ }
+
+ #options-maxframedepth
+ {
+ margin-bottom: 3px;
+ }
+
+ fieldset label
+ {
+ vertical-align: 2px;
+ }
+
+ #options-save
+ {
+ margin-top: 10px;
+ }
+
+ #options-save-button
+ {
+ width: 70px;
+ margin-left: 2px;
+ margin-bottom: 2px;
+ padding-bottom: 2px;
+ text-align: center;
+ }
+
+ #options-save-status
+ {
+ margin-left: 15px;
+ color: #404040;
+ visibility: hidden;
+ }
+
+ </style>
+
+ </head>
+
+ <body>
+
+ <div id="options">
+
+ <div>
+
+ <div id="options-title">Save Page WE Options</div>
+
+ <div id="options-tabbar">
+ <button id="options-tabbar-general">General</button>
+ <button id="options-tabbar-saveditems">Saved Items</button>
+ </div>
+
+ <div id="options-tabs">
+
+ <div id="options-tab-general">
+
+ <form id="options-buttonaction">
+ <fieldset>
+ <legend> Button Action </legend>
+ <div>
+ <input id="options-currentstate" type="radio" name="action" value="0"/><label for="options-currentstate">Save Current State <i>– only Current State items</i></label>
+ </div>
+ <div>
+ <input id="options-chosenitems" type="radio" name="action" value="1"/><label for="options-chosenitems">Save Chosen Items <i>– plus chosen Additional items</i></label>
+ </div>
+ <div>
+ <input id="options-completepage" type="radio" name="action" value="2"/><label for="options-completepage">Save Complete Page <i>– all except CSS images (all)</i></label>
+ </div>
+ </fieldset>
+ </form>
+
+ <form>
+ <fieldset>
+ <legend> User Interface </legend>
+ <div>
+ <input id="options-showsubmenu" type="checkbox"/><label for="options-showsubmenu">Show add-on submenu on context menu</label>
+ </div>
+ <div>
+ <input id="options-showwarning" type="checkbox"/><label for="options-showwarning">Show warning if any resources cannot be saved</label>
+ </div>
+ <div>
+ <input id="options-showurllist" type="checkbox"/><label for="options-showurllist">Show list with URLs of all unsaved resources</label>
+ </div>
+ <div>
+ <input id="options-prefixfilename" type="checkbox"/><label for="options-prefixfilename">Prefix file name with website domain name</label>
+ </div>
+ <div>
+ <input id="options-suffixfilename" type="checkbox"/><label for="options-suffixfilename">Suffix file name with date and time</label>
+ </div>
+ </fieldset>
+ </form>
+
+ <form>
+ <fieldset>
+ <legend> Save Method </legend>
+ <div>
+ <input id="options-usepageloader" type="checkbox"/><label for="options-usepageloader">Use page loader to reduce saved file size</label>
+ </div>
+ <div>
+ <input id="options-removeunsavedurls" type="checkbox"/><label for="options-removeunsavedurls">Remove URLs of all unsaved resources</label>
+ </div>
+ <div>
+ <input id="options-includeinfobar" type="checkbox"/><label for="options-includeinfobar">Include information bar at top of page</label>
+ </div>
+ <div>
+ <input id="options-includesummary" type="checkbox"/><label for="options-includesummary">Include metrics and resource summary</label>
+ </div>
+ </fieldset>
+ </form>
+
+ </div>
+
+ <div id="options-tab-saveditems">
+
+ <form>
+ <fieldset>
+ <legend> Saved Items </legend>
+ <div>
+ Current State:
+ </div>
+ <div>
+ <input type="checkbox" checked disabled /><label>HTML elements (excluding multimedia)</label>
+ </div>
+ <div>
+ <input type="checkbox" checked disabled /><label>CSS style sheets</label>
+ </div>
+ <div>
+ <input type="checkbox" checked disabled /><label>HTML images (currently displayed)</label>
+ </div>
+ <div>
+ <input type="checkbox" checked disabled /><label>CSS images (currently displayed)</label>
+ </div>
+ <div>
+ <input type="checkbox" checked disabled /><label>CSS fonts (used by this browser)</label>
+ </div>
+ <div>
+ Additional:
+ </div>
+ <div>
+ <input id="options-savehtmlaudiovideo" type="checkbox"/><label for="options-savehtmlaudiovideo">HTML elements (audio & video)</label>
+ </div>
+ <div>
+ <input id="options-savehtmlobjectembed" type="checkbox"/><label for="options-savehtmlobjectembed">HTML elements (object & embed)</label>
+ </div>
+ <div>
+ <input id="options-savehtmlimagesall" type="checkbox"/><label for="options-savehtmlimagesall">HTML images (all)</label>
+ </div>
+ <div>
+ <input id="options-savecssimagesall" type="checkbox"/><label for="options-savecssimagesall">CSS images (all)</label>
+ </div>
+ <div>
+ <input id="options-savecssfontswoff" type="checkbox"/><label for="options-savecssfontswoff">CSS fonts (woff for any browser)</label>
+ </div>
+ <div>
+ <input id="options-savescripts" type="checkbox"/><label for="options-savescripts">Scripts</label>
+ </div>
+ </fieldset>
+ </form>
+
+ <form>
+ <fieldset>
+ <legend> Save Constraints </legend>
+ <div>
+ <input id="options-maxframedepth" type="number" min="0" max="10" value="0"/><label for="options-maxframedepth">Maximum depth of saved nested frames</label>
+ </div>
+ <div>
+ <input id="options-maxresourcesize" type="number" min="0" max="200" value="50"/><label for="options-maxresourcesize">Maximum size allowed for a resource (MB)</label>
+ </div>
+ </fieldset>
+ </form>
+
+ </div>
+
+ </div>
+
+ <div id="options-save">
+ <button id="options-save-button">Save</button>
+ <span id="options-save-status">Saved</span>
+ </div>
+
+ </div>
+
+ </div>
+
+ </body>
+
+</html>