rewrite options page to be more chrome-like

diff --git a/.gitmodules b/.gitmodules
new file mode 100644 (file)
index 0000000..5623dde
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "chrome-bootstrap"]
+       path = chrome-bootstrap
+       url = https://github.com/roykolak/chrome-bootstrap.git

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 13074bfa82fd44f3c95557a5e9328134a0983f76..9ad84d36980f573492f5e7948b158305d2bbca96 100644 (file)
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -3,10 +3,15 @@
   "description": {"message": "Quickly clears the browser history. This is a fork of the Google version with more advanced options."},
   "title": {"message": "Click to clear history"},
   "direction": {"message": "ltr"},
+  "frameOptions": {"message": "Options"},
+  "headerTimeRange": {"message": "Time Range"},
+  "headerUserInterface": {"message": "User Interface"},
+  "headerDataSelection": {"message": "Data Selection"},
   "optionsTitle": {"message": "Options for Clear History [Advance Fork]"},
   "optionsHeader": {"message": "Clear History [Advance Fork]"},
   "optionsTimeFor": {"message": "Delete history for:"},
-  "optionsTimeStart": {"message": "Clear entries newer than the selected time (otherwise, entries older than the selection will be cleared)"},
+  "optionsTimeStartNewer": {"message": "Clear entries newer than the selected time"},
+  "optionsTimeStartOlder": {"message": "Clear entries older than the selected time"},
   "optionsTime": {
     "message": "Last $num$ $units$",
     "placeholders": {
@@ -16,7 +21,7 @@
   },
   "optionsTimeAll": {"message": "Everything"},
   "optionsPrompt": {"message": "Prompt before deleting"},
-  "optionsCookies": {"message": "Clear all cookies"},
+  "optionsCookies": {"message": "Clear all cookies (sorry, selective clearing not available)"},
   "optionsDownloads": {"message": "Clear download history"},
   "optionsSaved": {"message": "Preferences saved!"},
   "optionsAutoclear": {"message": "Automatically purge old entries"},

diff --git a/chrome-bootstrap b/chrome-bootstrap
new file mode 160000 (submodule)
index 0000000..419698e
--- /dev/null
+++ b/chrome-bootstrap
@@ -0,0 +1 @@
+Subproject commit 419698ec6fe922487d2fe3f11c92fd1c8ffbd8a6

diff --git a/css/options.css b/css/options.css
index 95dee56549ea00f81bad1e19099ed0a50928f80d..e83e13538e35f22130d4c4003ff22a89addd6b20 100644 (file)
--- a/css/options.css
+++ b/css/options.css
@@ -6,88 +6,13 @@
  */
 
 @CHARSET "UTF-8";
-body {
-  background-color: #eef;
-  color: #222;
-  direction: __MSG_@@bidi_dir__;  /* Predefined message from Chrome Extension */
-  font: 13px/18px "Arial";
-}
-header {
-  color: #333;
-  margin: 0 auto;
-  text-align: left;
-  width: 400px;
-}
-h1 {
-  color: #dd4b39;
-  font: 20px/24px "Arial" normal;
-  margin: 5px 0 0;
-  padding: 0 5px 3px;
-}
-h1 > img,
-h1 > span {
-  vertical-align: middle;
-}
-hr {
-  background-color: #ebebeb;
-  border: none;
-  clear: both;
-  height: 1px;
-  margin: 5px auto;
-  width: 400px;
-}
-#content {
-  background-color: #fff;
-  border: 4px solid rgba(0, 0, 0, 0.2);
-  border-radius: 12px;
-  margin: 40px auto 0;
-  padding: 10px 10px 0;
-  width: 500px;
-}
-#opt-form {
-  margin: 10px auto;
-  overflow: hidden;
-  width: 400px;
-}
-#opt-time,
-#opt-prompt,
-#opt-cookies,
-#opt-downloads,
-#opt-autoclear {
-  background-color: white;
-  clear: left;
-  margin: 5px auto;
-  overflow: hidden;
-  padding: 5px 5px;
-}
-.opt-name {
-  float: left;
-  width: 175px;
-}
-.opt-value {
-  float: left;
-  width: 215px;
-}
-.opt-value .opt-option {
-  clear: left;
-  margin-bottom: 5px;
-  overflow: hidden;
-}
-.opt-value .opt-option .opt-chk {
-  float: left;
-}
-.opt-value .opt-option .opt-label {
-  float: left;
-  margin-top: -3px;
-  padding-left: 6px;
-}
-#optionsSaved {
+div#optionsSaved {
   clear: left;
   margin: 10px auto 5px;
   padding: 5px;
   text-align: center;
 }
-#optionsSaved b {
+div#optionsSaved b {
   background-color: #f9edbe;
   border: 1px solid #f0c36d;
   border-radius: 2px;
@@ -97,52 +22,7 @@ hr {
   padding: 6px 16px;
   -webkit-transition: opacity 130ms ease-in-out;
 }
-#optionsSaved.show b {
+div#optionsSaved.show b {
   opacity: 1;
   -webkit-transition: opacity 50ms ease-in-out;
 }
-input[type="checkbox"],
-input[type="radio"] {
-  -webkit-appearance: none;
-  background-color: white;
-  border: 1px solid #dcdcdc;
-  height: 13px;
-  margin: 0;
-  width: 13px;
-}
-input[type="radio"] {
-  border-radius: 50%;
-  height: 15px;
-  width: 15px;
-}
-input[type="checkbox"]:hover,
-input[type="radio"]:hover {
-  border-color: #c6c6c6;
-  -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.1)
-}
-input[type="checkbox"]:active,
-input[type="radio"]:active {
-  background-color: #ebebeb;
-  border-color: #c6c6c6;
-}
-input[type="radio"]:checked::after {
-  background: #666;
-  border-radius: 50%;
-  content: '';
-  display: block;
-  height: 7px;
-  margin: 3px auto;
-  width: 7px;
-}
-input[type="checkbox"]:checked::after {
-  content: url('../images/check.png');
-  display: block;
-  left: -5px;
-  position: relative;
-  top: -6px;
-}
-input[type="checkbox"]:focus,
-input[type="radio"]:focus {
-  outline: none;
-  border-color: #4d90fe;
-}

diff --git a/images/check.png b/images/check.png
index d049b55ac84628f9b0fdaf59eb29b25737fd4b0f..57105a1531d12e83745f6244ff3dc99d7c98db2a 100644 (file)
Binary files a/images/check.png and b/images/check.png differ

diff --git a/javascript/options.js b/javascript/options.js
index f40b46ce5b0872aec1a2364a9688df926e80d103..bd3a2275c1b341372d9bc3f7f7d0b61556d7fb42 100644 (file)
--- a/javascript/options.js
+++ b/javascript/options.js
@@ -26,21 +26,15 @@ function init() {
     elements[1].innerText = message;
   });
 
-  $('#optionsTitle')[0].innerText = chrome.i18n.getMessage('optionsTitle');
-  $('#optionsHeader')[0].innerText = chrome.i18n.getMessage('optionsHeader');
-  $('#optionsPrompt')[0].innerText = chrome.i18n.getMessage('optionsPrompt');
-  $('#optionsTimeFor')[0].innerText = chrome.i18n.getMessage('optionsTimeFor');
-  $('#optionsTimeStart')[0].innerText = chrome.i18n.getMessage('optionsTimeStart');
-  $('#optionsCookies')[0].innerText = chrome.i18n.getMessage('optionsCookies');
-  $('#optionsDownloads')[0].innerText = chrome.i18n.getMessage('optionsDownloads');
-  $('#optionsAutoclear')[0].innerText = chrome.i18n.getMessage('optionsAutoclear');
-  $('#optionsSaved > b')[0].innerText = chrome.i18n.getMessage('optionsSaved');
+  $('[i18n-content]').forEach(function(ele) {
+    ele.innerText = chrome.i18n.getMessage(ele.getAttribute('i18n-content'));
+  });
 
   // Bind all the callbacks
-  $('#opt-time input.opt-chk[type=radio]').forEach(function(e) {
+  $('input[type=radio]').forEach(function(e) {
     e.onclick = toggle;
   });
-  $('input.opt-chk[type=checkbox]').forEach(function(e) {
+  $('input[type=checkbox]').forEach(function(e) {
     e.onclick = setCheck;
   });
 
@@ -56,7 +50,7 @@ function init() {
     var clearDownloads = s.downloads || CONSTANTS.NO;
     var autoClear = s.autoclear || CONSTANTS.NO;
 
-    $('input[name=timeStart]')[0].checked = (timeStart === CONSTANTS.YES);
+    $('input[name=timeStart][value="' + timeStart + '"]')[0].checked = true;
     $('input[name=time][value="' + time + '"]')[0].checked = true;
     $('input[name=prompt]')[0].checked = (showPrompt === CONSTANTS.YES);
     $('input[name=cookies]')[0].checked = (clearCookies === CONSTANTS.YES);
@@ -70,7 +64,9 @@ function init() {
  * @this {HTMLInputElement} The element (radio button) that was clicked.
  */
 function toggle() {
-  chrome.storage.sync.set({'time': this.value});
+  var setting = {};
+  setting[this.name] = this.value;
+  chrome.storage.sync.set(setting);
   optionSaved();
 }
 

diff --git a/views/options.html b/views/options.html
index ca3ca6ffdfec146607ea987d596f422312dc2c13..33e3748297b98f3d4cc6308ef0447c3a4a80b22a 100644 (file)
--- a/views/options.html
+++ b/views/options.html
@@ -9,118 +9,138 @@
 <html>
   <head>
     <title id="optionsTitle"></title>
-    <link rel="stylesheet" type="text/css" href="../css/options.css">
+    <link rel="stylesheet" type="text/css" href="../chrome-bootstrap/chrome-bootstrap.css" />
+    <link rel="stylesheet" type="text/css" href="../css/options.css" />
   </head>
-  <body>
-    <div id="content">
-      <header>
-        <h1>
-          <img alt="Clear History logo" src="../images/icon32.png">
-          <span id="optionsHeader"></span>
-        </h1>
-      </header>
-      <hr>
-      <div id="opt-form">
-        <div id="opt-time">
-          <div class="opt-name">
-            <b id="optionsTimeFor"></b>
-            <br><br>
-            <div class="opt-timeStart">
-              <input name="timeStart" class="opt-chk" type="checkbox" checked>
-              <div class="opt-label" id="optionsTimeStart"></div>
-            </div>
-          </div>
-          <div class="opt-value">
-            <div class="opt-option">   <!-- 1 hour -->
-              <input name="time" class="opt-chk" type="radio" value="1"
-                tabindex="1">
-              <div class="opt-label" id="opt-1"></div>
-            </div>
-            <!-- <br> -->
-            <div class="opt-option">   <!-- 2 hours -->
-              <input name="time" class="opt-chk" type="radio" value="2">
-              <div class="opt-label" id="opt-2"></div>
-            </div>
-            <!-- <br> -->
-            <div class="opt-option">   <!-- 1 day -->
-              <input name="time" class="opt-chk" type="radio" value="24">
-              <div class="opt-label" id="opt-24"></div>
-            </div>
-            <!-- <br> -->
-            <div class="opt-option">   <!-- 7 days -->
-              <input name="time" class="opt-chk" type="radio" value="168">
-              <div class="opt-label" id="opt-168"></div>
-            </div>
-            <!-- <br> -->
-            <div class="opt-option">   <!-- 14 days -->
-              <input name="time" class="opt-chk" type="radio" value="336">
-              <div class="opt-label" id="opt-336"></div>
-            </div>
-            <!-- <br> -->
-            <div class="opt-option">   <!-- 30 days -->
-              <input name="time" class="opt-chk" type="radio" value="720">
-              <div class="opt-label" id="opt-720"></div>
-            </div>
-            <!-- <br> -->
-            <div class="opt-option">
-              <input name="time" class="opt-chk" type="radio" value="-1">
-              <div class="opt-label" id="opt--1"></div>
-            </div>
-          </div>
-        </div>
-        <hr>
-        <div id="opt-prompt">
-          <div class="opt-name">
-            <b>&nbsp;</b>
-          </div>
-          <div class="opt-value">
-            <div class="opt-option">
-              <input name="prompt" class="opt-chk" type="checkbox" checked>
-              <div class="opt-label" id="optionsPrompt"></div>
-            </div>
-          </div>
-        </div>
-        <hr>
-        <div id="opt-cookies">
-          <div class="opt-name">
-            <b>&nbsp;</b>
-          </div>
-          <div class="opt-value">
-            <div class="opt-option">
-              <input name="cookies" class="opt-chk" type="checkbox">
-              <div class="opt-label" id="optionsCookies"></div>
-            </div>
-          </div>
-        </div>
-        <div id="opt-downloads">
-          <div class="opt-name">
-            <b>&nbsp;</b>
-          </div>
-          <div class="opt-value">
-            <div class="opt-option">
-              <input name="downloads" class="opt-chk" type="checkbox">
-              <div class="opt-label" id="optionsDownloads"></div>
-            </div>
-          </div>
-        </div>
-        <hr>
-        <div id="opt-autoclear">
-          <div class="opt-name">
-            <b>&nbsp;</b>
-          </div>
-          <div class="opt-value">
-            <div class="opt-option">
-              <input name="autoclear" class="opt-chk" type="checkbox">
-              <div class="opt-label" id="optionsAutoclear"></div>
-            </div>
-          </div>
-        </div>
-        <hr>
-        <div id="optionsSaved">
-          <b></b>
+
+<body class="chrome-bootstrap">
+  <div class="frame">
+
+    <div class="navigation">
+      <h1><a href="#" i18n-content="optionsHeader"></a></h1>
+      <ul class="menu">
+        <li class="selected">
+          <a href="#options" i18n-content="frameOptions"></a>
+        </li>
+      </ul>
+      <ul>
+        <li>&nbsp;<img src='../images/icon128.png'/></li>
+      </ul>
+    </div>
+
+    <div class="mainview view">
+      <div id="options" class="selected">
+        <header>
+          <h1 i18n-content="frameOptions"></h1>
+        </header>
+        <div class="content">
+
+<section>
+ <h3 i18n-content="headerTimeRange"></h3>
+
+ <div class="radio">
+ <label>
+  <input name="timeStart" type="radio" value="yes" selected/>
+  <span i18n-content="optionsTimeStartNewer"></span>
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+  <input name="timeStart" type="radio" value="no"/>
+  <span i18n-content="optionsTimeStartOlder"></span>
+ </label>
+ </div>
+
+ <br/>
+
+ <div class="radio">
+ <label>   <!-- 1 hour -->
+  <input name="time" type="radio" value="1" tabindex="1"/>
+  <span class="opt-label" id="opt-1"></span>
+ </label>
+ </div>
+ <div class="radio">
+ <label>   <!-- 2 hours -->
+  <input name="time" type="radio" value="2"/>
+  <span class="opt-label" id="opt-2"></span>
+ </label>
+ </div>
+ <div class="radio">
+ <label>   <!-- 1 day -->
+  <input name="time" type="radio" value="24"/>
+  <span class="opt-label" id="opt-24"></span>
+ </label>
+ </div>
+ <div class="radio">
+ <label>   <!-- 7 days -->
+  <input name="time" type="radio" value="168"/>
+  <span class="opt-label" id="opt-168"></span>
+ </label>
+ </div>
+ <div class="radio">
+ <label>   <!-- 14 days -->
+  <input name="time" type="radio" value="336"/>
+  <span class="opt-label" id="opt-336"></span>
+ </label>
+ </div>
+ <div class="radio">
+ <label>   <!-- 30 days -->
+  <input name="time" type="radio" value="720"/>
+  <span class="opt-label" id="opt-720"></span>
+ </label>
+ </div>
+ <div class="radio">
+ <label>
+  <input name="time" type="radio" value="-1"/>
+  <span class="opt-label" id="opt--1"></span>
+ </label>
+ </div>
+</section>
+
+<section>
+ <h3 i18n-content='headerUserInterface'></h3>
+
+ <div class="checkbox">
+ <label>
+  <input name="prompt" type="checkbox" checked/>
+  <span i18n-content="optionsPrompt"></span>
+ </label>
+ </div>
+
+ <div class="checkbox">
+ <label>
+  <input name="autoclear" type="checkbox"/>
+  <span i18n-content="optionsAutoclear"></span>
+ </label>
+ </div>
+</section>
+
+<section>
+ <h3 i18n-content='headerDataSelection'></h3>
+
+ <div class="checkbox">
+ <label>
+  <input name="cookies" type="checkbox"/>
+  <span i18n-content="optionsCookies"></span>
+ </label>
+ </div>
+
+ <div class="checkbox">
+ <label>
+  <input name="downloads" type="checkbox"/>
+  <span i18n-content="optionsDownloads"></span>
+ </label>
+ </div>
+</section>
+
+<div id="optionsSaved"><b i18n-content="optionsSaved"></b></div>
+
         </div>
       </div>
     </div>
+
+  </div>
+
     <script src="../javascript/background.js"></script>
     <script src="../javascript/util.js"></script>
     <script src="../javascript/options.js"></script>