From 65c89998fa11d797fee1bc7c9d5bbf2bb6406c0c Mon Sep 17 00:00:00 2001 From: ElbertF Date: Sun, 26 Aug 2012 12:39:44 +1000 Subject: [PATCH] Added options page --- drivers/chrome/_locales/en/messages.json | 4 + drivers/chrome/css/options.css | 46 ++++ drivers/chrome/{ => css}/popup.css | 0 drivers/chrome/css/widgets.css | 298 +++++++++++++++++++++++ drivers/chrome/js/i18n.js | 5 + drivers/chrome/js/options.js | 37 +++ drivers/chrome/js/popup.js | 2 - drivers/chrome/manifest.json | 1 + drivers/chrome/options.html | 26 ++ drivers/chrome/popup.html | 5 +- 10 files changed, 420 insertions(+), 4 deletions(-) create mode 100644 drivers/chrome/css/options.css rename drivers/chrome/{ => css}/popup.css (100%) create mode 100644 drivers/chrome/css/widgets.css create mode 100644 drivers/chrome/js/i18n.js create mode 100644 drivers/chrome/js/options.js create mode 100644 drivers/chrome/options.html diff --git a/drivers/chrome/_locales/en/messages.json b/drivers/chrome/_locales/en/messages.json index 6fc0fc08d..aad3436bd 100644 --- a/drivers/chrome/_locales/en/messages.json +++ b/drivers/chrome/_locales/en/messages.json @@ -1,4 +1,8 @@ { + "options": { "message": "Wappalyzer Options" }, + "optionsSave": { "message": "Save options" }, + "optionsSaved": { "message": "Saved" }, + "optionTracking": { "message": "Anonymously send reports on detected applications to wappalyzer.com for research" }, "analyzeHeaders": { "message": "Analyze headers" }, "nothingToDo": { "message": "Nothing to do here." }, "noAppsDetected": { "message": "No applications detected." }, diff --git a/drivers/chrome/css/options.css b/drivers/chrome/css/options.css new file mode 100644 index 000000000..0f74c9cff --- /dev/null +++ b/drivers/chrome/css/options.css @@ -0,0 +1,46 @@ +body { + color: #303942; + cursor: default; + font-family: 'DejaVu Sans', Arial, sans-serif; font-size: 75%; + margin: 0 20px; +} + +p { + line-height: 1.8em; +} + +h1, h2, h3 { + font-weight: normal; + line-height: 1; +} + +h1 { + border-bottom: 1px solid #eee; + font-size: 1.5em; + margin: 0; + padding: 21px 0 13px; +} + +h2 { + font-size: 1.3em; + margin-bottom: 0.4em; +} + +h3 { + color: black; + font-size: 1.2em; + margin-bottom: 0.5em; +} + +a { + color: rgb(17, 85, 204); + text-decoration: underline; +} + +a:active { + color: rgb(5, 37, 119); +} + +#options-saved { + display: none; +} diff --git a/drivers/chrome/popup.css b/drivers/chrome/css/popup.css similarity index 100% rename from drivers/chrome/popup.css rename to drivers/chrome/css/popup.css diff --git a/drivers/chrome/css/widgets.css b/drivers/chrome/css/widgets.css new file mode 100644 index 000000000..9322e4635 --- /dev/null +++ b/drivers/chrome/css/widgets.css @@ -0,0 +1,298 @@ +/* Copyright (c) 2012 The Chromium Authors. All rights reserved. + * Use of this source code is governed by a BSD-style license that can be + * found in the LICENSE file. + */ + +/* This file defines styles for form controls. The order of rule blocks is + * important as there are some rules with equal specificity that rely on order + * as a tiebreaker. These are marked with OVERRIDE. + */ + +/* Default state **************************************************************/ + +button:not(.custom-appearance):not(.link-button), +input[type='button']:not(.custom-appearance):not(.link-button), +input[type='submit']:not(.custom-appearance):not(.link-button), +select, +input[type='checkbox'], +input[type='radio'] { + -webkit-appearance: none; + -webkit-user-select: none; + background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); + border: 1px solid rgba(0, 0, 0, 0.25); + border-radius: 2px; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), + inset 0 1px 2px rgba(255, 255, 255, 0.75); + color: #444; + font: inherit; + margin: 0 1px 0 0; + text-shadow: 0 1px 0 rgb(240, 240, 240); +} + +button:not(.custom-appearance):not(.link-button), +input[type='button']:not(.custom-appearance):not(.link-button), +input[type='submit']:not(.custom-appearance):not(.link-button), +select { + min-height: 2em; + min-width: 4em; + + +} + +button:not(.custom-appearance):not(.link-button), +input[type='button']:not(.custom-appearance):not(.link-button), +input[type='submit']:not(.custom-appearance):not(.link-button) { + -webkit-padding-end: 10px; + -webkit-padding-start: 10px; +} + +select { + -webkit-appearance: none; + -webkit-padding-end: 20px; + -webkit-padding-start: 6px; + /* OVERRIDE */ + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAAWklEQVQokWNgoAOIAuI0PDiKaJMSgYCZmfkbkPkfHYPEQfJEG/b//3+FBQsWLGRjY/uJbBCIDxIHyRNtGDYDyTYI3UA+Pr4vFBmEbODbt2+bKDYIyUBWYtQBAIRzRP/XKJ//AAAAAElFTkSuQmCC"), + -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); + background-position: right center; + background-repeat: no-repeat; +} + +html[dir='rtl'] select { + background-position: center left; +} + +input[type='checkbox'] { + bottom: 2px; + height: 13px; + position: relative; + vertical-align: middle; + width: 13px; +} + +input[type='radio'] { + /* OVERRIDE */ + border-radius: 100%; + bottom: 3px; + height: 15px; + position: relative; + vertical-align: middle; + width: 15px; +} + +/* TODO(estade): add more types here? */ +input[type='password'], +input[type='search'], +input[type='text'], +input[type='url'], +input:not([type]) { + border: 1px solid #bfbfbf; + border-radius: 2px; + box-sizing: border-box; + color: #444; + font: inherit; + margin: 0; + /* Use min-height to accommodate addditional padding for touch as needed. */ + min-height: 2em; + padding: 3px; + + +} + +input[type='search'] { + -webkit-appearance: textfield; + /* NOTE: Keep a relatively high min-width for this so we don't obscure the end + * of the default text in relatively spacious languages (i.e. German). */ + min-width: 160px; +} + +/* Checked ********************************************************************/ + +input[type='checkbox']:checked::before { + -webkit-user-select: none; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wDBhYcG79aGIsAAACbSURBVBjTjdFBCkFhFAXgj4fp24PBy0SZ2ICRXRgYGb2xlKzBSEo2YgsiKWVoZgFKMjD5X/2Ux6lb99bpnNO5lKMR5i8MsEQHkhJiEzlS9HCqfiFWMUIt3AfsC3KKLCL30Qr7HfM4Ro4h6rhiEqmusIMKuphGqo+ogSPGcbYLzh91vdkXSHDDBk+0gxussS3rNcMCs+D6E18/9gLPPhbDshfzLgAAAABJRU5ErkJggg=="); + background-size: 100% 100%; + content: ''; + display: block; + height: 100%; + width: 100%; +} + +html[dir='rtl'] input[type='checkbox']:checked::before { + -webkit-transform: scaleX(-1); +} + +input[type='radio']:checked::before { + background-color: #666; + border-radius: 100%; + bottom: 25%; + content: ''; + display: block; + left: 25%; + position: absolute; + right: 25%; + top: 25%; +} + +/* Hover **********************************************************************/ + +button:not(.custom-appearance):not(.link-button):enabled:hover, +input[type='button']:not(.custom-appearance):not(.link-button):enabled:hover, +input[type='submit']:not(.custom-appearance):not(.link-button):enabled:hover, +select:enabled:hover, +input[type='checkbox']:enabled:hover, +input[type='radio']:enabled:hover { + background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); + border-color: rgba(0, 0, 0, 0.3); + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), + inset 0 1px 2px rgba(255, 255, 255, 0.95); + color: black; +} + +select:enabled:hover { + /* OVERRIDE */ + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAAWklEQVQokWNgoAOIAuI0PDiKaJMSgYCZmfkbkPkfHYPEQfJEG/b//3+FBQsWLGRjY/uJbBCIDxIHyRNtGDYDyTYI3UA+Pr4vFBmEbODbt2+bKDYIyUBWYtQBAIRzRP/XKJ//AAAAAElFTkSuQmCC"), + -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); +} + +/* Active *********************************************************************/ + +button:not(.custom-appearance):not(.link-button):enabled:active, +input[type='button']:not(.custom-appearance):not(.link-button):enabled:active, +input[type='submit']:not(.custom-appearance):not(.link-button):enabled:active, +select:enabled:active, +input[type='checkbox']:enabled:active, +input[type='radio']:enabled:active { + background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); + box-shadow: none; + text-shadow: none; +} + +select:enabled:active { + /* OVERRIDE */ + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAAWklEQVQokWNgoAOIAuI0PDiKaJMSgYCZmfkbkPkfHYPEQfJEG/b//3+FBQsWLGRjY/uJbBCIDxIHyRNtGDYDyTYI3UA+Pr4vFBmEbODbt2+bKDYIyUBWYtQBAIRzRP/XKJ//AAAAAElFTkSuQmCC"), + -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); +} + +/* Disabled *******************************************************************/ + +button:not(.custom-appearance):not(.link-button):disabled, +input[type='button']:not(.custom-appearance):not(.link-button):disabled, +input[type='submit']:not(.custom-appearance):not(.link-button):disabled, +select:disabled { + background-image: -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); + border-color: rgba(80, 80, 80, 0.2); + box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08), + inset 0 1px 2px rgba(255, 255, 255, 0.75); + color: #aaa; +} + +select:disabled { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAAAXNSR0IArs4c6QAAAAd0SU1FB9sLAxYEBKriBmwAAAAGYktHRAD/AP8A/6C9p5MAAAAJcEhZcwAACxMAAAsTAQCanBgAAABLSURBVCiRY2CgA4gC4jQ8OIpokxKBoKGh4T8uDJIn2rD///8rLFiwYCE2g0DiIHkSfIndQLIMwmYgRQYhG/j27dsmig1CMpCVGHUAo8FcsHfxfXQAAAAASUVORK5CYII="), + -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); +} + +input[type='checkbox']:disabled, +input[type='radio']:disabled { + opacity: .75; +} + +input[type='password']:disabled, +input[type='search']:disabled, +input[type='text']:disabled, +input[type='url']:disabled, +input:not([type]):disabled { + color: #999; +} + +/* Focus **********************************************************************/ + +button:not(.custom-appearance):not(.link-button):enabled:focus, +input[type='button']:not(.custom-appearance):enabled:focus, +input[type='checkbox']:enabled:focus, +input[type='password']:enabled:focus, +input[type='radio']:enabled:focus, +input[type='search']:enabled:focus, +input[type='submit']:not(.custom-appearance):enabled:focus, +input[type='text']:enabled:focus, +input[type='url']:enabled:focus, +input:not([type]):enabled:focus, +select:enabled:focus { + /* OVERRIDE */ + -webkit-transition: border-color 200ms; + /* We use border color because it follows the border radius (unlike outline). + * This is particularly noticeable on mac. */ + border-color: rgb(77, 144, 254); + outline: none; +} + +/* Link buttons ***************************************************************/ + +.link-button { + -webkit-box-shadow: none; + background: transparent none; + border: none; + color: rgb(17, 85, 204); + cursor: pointer; + /* Input elements have -webkit-small-control which can override the body font. + * Resolve this by using 'inherit'. */ + font: inherit; + margin: 0; + padding: 0 4px; +} + +.link-button:hover { + text-decoration: underline; +} + +.link-button:active { + color: rgb(5, 37, 119); + text-decoration: underline; +} + +.link-button[disabled] { + color: #999; + cursor: default; + text-decoration: none; +} + +/* Checkbox/radio helpers ****************************************************** + * + * .checkbox and .radio classes wrap labels. Checkboxes and radios should use + * these classes with the markup structure: + * + *
+ * + *
+ */ + +.checkbox, +.radio { + margin: 0.65em 0; +} + +.checkbox label, +.radio label { + /* Don't expand horizontally: . */ + display: -webkit-inline-box; +} + +.checkbox label input ~ span, +.radio label input ~ span { + -webkit-margin-start: 0.6em; + /* Make sure long spans wrap at the same horizontal position they start. */ + display: block; +} + +.checkbox label:hover, +.radio label:hover { + color: black; +} + +label > input[type=checkbox]:disabled ~ span, +label > input[type=radio]:disabled ~ span { + color: #999; +} + diff --git a/drivers/chrome/js/i18n.js b/drivers/chrome/js/i18n.js new file mode 100644 index 000000000..1548b0cdf --- /dev/null +++ b/drivers/chrome/js/i18n.js @@ -0,0 +1,5 @@ +$(function() { + $('[data-i18n]').each(function() { + $(this).html(chrome.i18n.getMessage($(this).attr('data-i18n'))); + }); +}); diff --git a/drivers/chrome/js/options.js b/drivers/chrome/js/options.js new file mode 100644 index 000000000..e2462cfbb --- /dev/null +++ b/drivers/chrome/js/options.js @@ -0,0 +1,37 @@ +$(function() { + var options = { + opts: { + tracking: 1 + }, + + init: function() { + options.load(); + + $('#options-save').click(options.save); + }, + + load: function() { + for ( option in options.opts ) { + if ( value = localStorage[option] ) { + options.opts[option] = value; + } + } + + if ( parseInt(options.opts.tracking) ) { + $('#option-tracking').attr('checked', 'checked'); + } + }, + + save: function() { + options.opts.tracking = $('#option-tracking').is(':checked') ? 1 : 0; + + for ( option in options.opts ) { + localStorage[option] = options.opts[option]; + } + + $('#options-saved').stop().show().fadeOut(2000); + } + }; + + options.init(); +}); diff --git a/drivers/chrome/js/popup.js b/drivers/chrome/js/popup.js index 749cc3771..5da2d491a 100644 --- a/drivers/chrome/js/popup.js +++ b/drivers/chrome/js/popup.js @@ -6,8 +6,6 @@ var wappalyzer = {}; init: function() { chrome.tabs.getSelected(null, function(tab) { - $('#analyze-headers').html(chrome.i18n.getMessage('analyzeHeaders')); - if ( tab.url.match(/https?:\/\//) ) { $('#detected-apps').html('
' + chrome.i18n.getMessage('noAppsDetected') + '
'); diff --git a/drivers/chrome/manifest.json b/drivers/chrome/manifest.json index e45d60de6..cecffc22a 100644 --- a/drivers/chrome/manifest.json +++ b/drivers/chrome/manifest.json @@ -19,6 +19,7 @@ "js": [ "js/content.js" ], "run_at": "document_idle" }], + "options_page": "options.html", "permissions": [ "tabs", "http://*/*", "https://*/*" ], "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'" } diff --git a/drivers/chrome/options.html b/drivers/chrome/options.html new file mode 100644 index 000000000..32807ea10 --- /dev/null +++ b/drivers/chrome/options.html @@ -0,0 +1,26 @@ + + + + + Wappalyzer Options + + + + + + + + + + +

+ +

+ +

+ +

+ +

+ + diff --git a/drivers/chrome/popup.html b/drivers/chrome/popup.html index 2dd1c67df..a83267c7f 100644 --- a/drivers/chrome/popup.html +++ b/drivers/chrome/popup.html @@ -4,16 +4,17 @@ Popup - + +
-
+