From d2118277a39ddb89e95dbcc2c339b15923caea74 Mon Sep 17 00:00:00 2001
From: Peter Parks
Date: Sat, 14 Jan 2012 22:17:56 -0800
Subject: Harden and move CSS declarations out of the code. Remove CSS from
background_page.html and change getLinkHintCss to only return the user's
overrides. Add vimiumReset class to html generated by completionDialog,
helpDialog, linkHints and vimiumFrontEnd Add vimium.css to the manifest and
link to it in the tests_harnesses/automated.html and options.html. Add an id,
vimiumLinkHintsContainer, to linkhints div to allow user overrides to have a
higher specificity. Change the default for the user CSS override.
---
background_page.html | 83 ++-----------
completionDialog.js | 57 ++-------
helpDialog.html | 174 ++++-----------------------
linkHints.js | 10 +-
manifest.json | 1 +
options.html | 1 +
test_harnesses/automated.html | 23 ++++
vimium.css | 272 ++++++++++++++++++++++++++++++++++++++++++
vimiumFrontend.js | 69 +----------
9 files changed, 351 insertions(+), 339 deletions(-)
create mode 100644 vimium.css
diff --git a/background_page.html b/background_page.html
index 7ba2471d..d436c51e 100644
--- a/background_page.html
+++ b/background_page.html
@@ -29,9 +29,11 @@
linkHintCharacters: "sadfjklewcmpgh",
filterLinkHints: false,
userDefinedLinkHintCss:
- ".vimiumHintMarker \n/* linkhint boxes */ {\nbackground-color:yellow;\nborder:1px solid #E3BE23;\n}\n\n" +
- ".vimiumHintMarker span \n/* linkhint text */ {\ncolor: black;\nfont-weight: bold;\nfont-size: 12px;\n}\n\n" +
- ".vimiumHintMarker > .matchingCharacter {\n\n}",
+ "#vimiumHintMarkerContainer .vimiumHintMarker \n/* linkhint boxes */ " +
+ "{\nbackground-color:yellow;\nborder:1px solid #E3BE23;\n}\n\n" +
+ "#vimiumHintMarkerContainer .vimiumHintMarker span \n/* linkhint text */ " +
+ "{\ncolor: black;\nfont-weight: bold;\nfont-size: 12px;\n}\n\n" +
+ "#vimiumHintMarkerContainer .vimiumHintMarker > .matchingCharacter {\n\n}",
excludedUrls: "http*://mail.google.com/*\n" +
"http*://www.google.com/reader/*\n",
@@ -46,69 +48,6 @@
nextPatterns: "next,more,>,\u2192,\xbb,\u226b,>>",
};
- // This is the base internal link hints CSS. It's combined with the userDefinedLinkHintCss before
- // being sent to the frontend.
- var linkHintCss =
- '.internalVimiumHintMarker {' +
- 'position:absolute;' +
- 'background-color:yellow;' +
- 'padding:0 1px;' +
- 'margin: 0;' +
- 'width:auto;' +
- 'height:auto;' +
- 'display:block;' +
- 'border:1px solid #E3BE23;' +
- 'opacity: 1;' +
- 'z-index:99999999;' +
- 'top:-1px;' +
- 'left:-1px;' +
- 'bottom: auto;' +
- 'right: auto;' +
- 'text-indent: 0;' +
- // set font-size and line-height to ensure the box height adjust to the span height
- 'font-size: 0px;' +
- 'line-height: 100%;' +
- // Add drop shadow in case the linkhint color is the same as the page color
- 'box-shadow: rgba(0, 0, 0, 0.3) 2px 2px;' +
- 'max-width: none;' +
- 'min-width: 0;' +
- 'max-height: none;' +
- 'min-height: 0;' +
- '}' +
- '.internalVimiumHintMarker span {' +
- 'color: black;' +
- 'opacity: 1;' +
- 'text-decoration: none;' +
- 'font-weight: bold;' +
- 'font-size: 12px;' +
- 'font-size-adjust: normal;' +
- 'font-style: normal;' +
- 'font-width: normal;' +
- 'letter-spacing: 0;' +
- 'text-transform: none;' +
- 'text-align: left;' +
- 'text-indent: 0;' +
- 'text-shadow: none;' +
- 'line-height: 100%;' +
- 'font-family: "Helvetica Neue", "Helvetica", "Arial", "Sans";' +
- 'padding: 0;' +
- 'margin: 0;' +
- 'width: auto;' +
- 'height: auto;' +
- 'min-height: 0;' +
- 'max-height: none;' +
- 'min-width: 0;' +
- 'max-width: none;' +
- 'display: inline;' +
- 'float: none;' +
- 'border: none;' +
- 'background: none;' +
- '}' +
- '.internalVimiumHintMarker > .matchingCharacter {' +
- 'color:#C79F0B;' +
- '}';
-
-
// Port handler mapping
var portHandlers = {
keyDown: handleKeyDown,
@@ -246,12 +185,12 @@
bindings = (commandsToKey[command] || [""]).join(", ");
if (showUnboundCommands || commandsToKey[command]) {
html.push(
- "",
- "| ", escapeHtml(bindings), " | ",
- ": | ", availableCommands[command].description);
+ " |
",
+ "| ", escapeHtml(bindings), " | ",
+ ": | ", availableCommands[command].description);
if (showCommandNames)
- html.push("(" + command + ")");
+ html.push("(" + command + ")");
html.push(" |
");
}
@@ -316,10 +255,10 @@
}
/*
- * Returns the core CSS used for link hints, along with any user-provided overrides.
+ * Returns the user-provided CSS overrides.
*/
function getLinkHintCss(request) {
- return { linkHintCss: linkHintCss + (localStorage['userDefinedLinkHintCss'] || "") };
+ return { linkHintCss: (localStorage['userDefinedLinkHintCss'] || "") };
}
/*
diff --git a/completionDialog.js b/completionDialog.js
index 7a01a10d..eec089a0 100644
--- a/completionDialog.js
+++ b/completionDialog.js
@@ -14,6 +14,7 @@
handlerStack.push({ keydown: this.onKeydown });
render.call(this);
clearInterval(this._tweenId);
+ this.container.style.display = "block";
this._tweenId = Tween.fade(this.container, 1.0, 150);
}
},
@@ -41,7 +42,6 @@
var initialize = function() {
var self = this;
- addCssToPage(completionCSS);
self.currentSelection = 0;
@@ -94,27 +94,27 @@
container.style.display = "";
if (searchString === undefined) {
- this.container.className = "vimium-dialog";
+ this.container.className = "vimiumReset vimium-dialog";
createDivInside(container).innerHTML = this.options.initialSearchText || "Begin typing";
}
else {
- this.container.className = "vimium-dialog vimium-completions";
+ this.container.className = "vimiumReset vimium-dialog vimium-completions";
var searchBar = createDivInside(container);
searchBar.innerHTML=searchString;
- searchBar.className="vimium-searchBar";
+ searchBar.className="vimiumReset vimium-searchBar";
searchResults = createDivInside(container);
- searchResults.className="vimium-searchResults";
+ searchResults.className="vimiumReset vimium-searchResults";
if (completions.length<=0) {
var resultDiv = createDivInside(searchResults);
- resultDiv.className="vimium-noResults";
+ resultDiv.className="vimiumReset vimium-noResults";
resultDiv.innerHTML="No results found";
}
else {
for (var i = 0; i < completions.length; i++) {
var resultDiv = createDivInside(searchResults);
if (i === this.currentSelection) {
- resultDiv.className="vimium-selected";
+ resultDiv.className="vimiumReset vimium-selected";
}
resultDiv.innerHTML=this.options.renderOption(searchString, completions[i]);
}
@@ -127,6 +127,7 @@
};
var createDivInside = function(parent) {
var element = document.createElement("div");
+ element.className = "vimiumReset";
parent.appendChild(element);
return element;
}
@@ -139,48 +140,6 @@
}
}
- var completionCSS = ".vimium-dialog {"+
- "position:fixed;"+
- "background-color: #ebebeb;" +
- "z-index: 99999998;" +
- "border: 1px solid #b3b3b3;" +
- "font-size: 12px;" +
- "text-align:left;"+
- "color: black;" +
- "padding:10px;"+
- "border-radius: 4px;" +
- "}"+
-
- ".vimium-completions {"+
- "width:400px;"+
- "}"+
-
- ".vimium-completions .vimium-searchBar {"+
- "height: 15px;"+
- "border-bottom: 1px solid #b3b3b3;"+
- "}"+
-
- ".vimium-completions .vimium-searchResults {"+
- "}"+
-
- ".vimium-completions .vimium-searchResults .vimium-selected{"+
- "background-color:#aaa;"+
- "border-radius: 4px;" +
- "}"+
-
- ".vimium-completions div{"+
- "padding:4px;"+
- "}"+
-
- ".vimium-completions div strong{"+
- "color: black;" +
- "font-weight:bold;"+
- "}"+
-
- ".vimium-completions .vimium-noResults{"+
- "color:#555;"+
- "}";
-
window.CompletionDialog = CompletionDialog;
}(window, document))
diff --git a/helpDialog.html b/helpDialog.html
index aae8b619..7bd08829 100644
--- a/helpDialog.html
+++ b/helpDialog.html
@@ -2,173 +2,49 @@
This is shown when typing "?". This HTML is loaded by the background page and then populated with the
latest keybindings information before displaying.
-->
-
-
-
-
Options
-
x
-
Vimium {{title}}
-
-
- | | Navigating the page |
+
+
Options
+
x
+
Vimium {{title}}
+
+
+
+ | | Navigating the page |
{{pageNavigation}}
+
-
-
- | | Using find |
+
+
+
+ | | Using find |
{{findCommands}}
- | | Navigating history |
+ | | Navigating history |
{{historyNavigation}}
- | | Manipulating tabs |
+ | | Manipulating tabs |
{{tabManipulation}}
- | | Miscellaneous |
+ | | Miscellaneous |
{{misc}}
+
-
+
-