Skip to content

Commit

Permalink
Harden and move CSS declarations out of the code.
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@vendamere
vendamere committed Jan 15, 2012
1 parent 44c36c6 commit d211827
Show file tree
Hide file tree
Showing 9 changed files with 351 additions and 339 deletions.
83 changes: 11 additions & 72 deletions background_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",

Expand All @@ -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,
Expand Down Expand Up @@ -246,12 +185,12 @@
bindings = (commandsToKey[command] || [""]).join(", ");
if (showUnboundCommands || commandsToKey[command]) {
html.push(
"<tr class='" + (advancedCommands.indexOf(command) >= 0 ? "advanced" : "") + "'>",
"<td>", escapeHtml(bindings), "</td>",
"<td>:</td><td>", availableCommands[command].description);
"<tr class='vimiumReset " + (advancedCommands.indexOf(command) >= 0 ? "advanced" : "") + "'>",
"<td class='vimiumReset'>", escapeHtml(bindings), "</td>",
"<td class='vimiumReset'>:</td><td>", availableCommands[command].description);

if (showCommandNames)
html.push("<span class='commandName'>(" + command + ")</span>");
html.push("<span class='vimiumReset commandName'>(" + command + ")</span>");

html.push("</td></tr>");
}
Expand Down Expand Up @@ -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'] || "") };
}

/*
Expand Down
57 changes: 8 additions & 49 deletions completionDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
},
Expand Down Expand Up @@ -41,7 +42,6 @@

var initialize = function() {
var self = this;
addCssToPage(completionCSS);

self.currentSelection = 0;

Expand Down Expand Up @@ -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]);
}
Expand All @@ -127,6 +127,7 @@
};
var createDivInside = function(parent) {
var element = document.createElement("div");
element.className = "vimiumReset";
parent.appendChild(element);
return element;
}
Expand All @@ -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))
Loading

0 comments on commit d211827

Please sign in to comment.