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.

1 files changed, 25 insertions, 149 deletions

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.
 -->
-<div id="vimiumHelpDialog">
-  <style>
-    /* Reset the elements on this page */
-    #vimiumHelpDialogContainer,
-    #vimiumHelpDialog,
-    #vimiumHelpDialog a,
-    #vimiumTitle,
-    #vimiumTitle span,
-    #vimiumHelpDialogFooter, 
-    .vimiumColumn,
-    .vimiumColumn span,
-    .vimiumDivider,
-    .optionsPage,
-    .closeButton {
-      opacity: 0.92;
-      letter-spacing: 0;
-      height: auto;
-      width: auto;
-      max-width: none;
-      max-height: none;
-      min-width: 0;
-      min-height: 0;
-      text-shadow: none;
-      padding: 0;
-      margin: 0;
-      position: static;
-      top: auto;
-      left: auto;
-      bottom: auto;
-      right: auto;
-      line-height: 100%;
-      font-size:11px;
-      font-weight: normal;
-      font-width: normal;
-      font-size-adjust: none;
-    }
-    #vimiumHelpDialog * {
-      font-size:11px;
-      line-height:130%;
-      color:black;
-      background-color:transparent;
-      opacity: 1;
-    }
-    #vimiumHelpDialog {
-      text-align:left;
-      border:3px solid red;
-      opacity:0.92;
-      background-color:#eee;
-      position:fixed;
-      font-family:helvetica, arial, sans;
-      border:2px solid #b3b3b3;
-      border-radius:6px;
-      padding:8px 12px;
-      width:640px;
-      max-width:none;
-      height: auto;
-      max-height:none;
-      left:50%;
-      /* This needs to be 1/2 width to horizontally center the help dialog */
-      margin-left:-320px;
-      top:50px;
-      -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px;
-      z-index:99999998;
-      overflow-y: scroll;
-    }
-    #vimiumHelpDialog a { color:blue; }
-    #vimiumTitle, #vimiumTitle span,  #vimiumTitle * { font-size:20px; }
-    .vimiumColumn {
-      width:50%;
-      float:left;
-    }
-    .vimiumColumn table, .vimiumColumn td, .vimiumColumn tr { padding:0; margin:0; }
-    .vimiumColumn table { width:100%; table-layout:auto; }
-    .vimiumColumn td { vertical-align:top; padding:1px; }
-    #vimiumHelpDialog .vimiumColumn tr > td:first-of-type {
-      text-align:right;
-      font-weight:bold;
-      color:#2f508e;
-      white-space:nowrap;
-    }
-    /* Make the description column as wide as it can be. */
-    #vimiumHelpDialog .vimiumColumn tr > td:nth-of-type(3) { width:100%; }
-    #vimiumHelpDialog .vimiumDivider {
-      height:1px;
-      width:92%;
-      margin:10px auto;
-      background-color:#9a9a9a;
-    }
-    #vimiumHelpDialog .vimiumHelpSectionTitle {
-      font-weight:bold;
-      padding-top:3px;
-    }
-    #vimiumHelpDialog .commandName { font-family:"courier new"; }
-    /* Advanced commands are hidden by default until you show them. */
-    #vimiumHelpDialog .advanced { display: none; }
-    #vimiumHelpDialog .advanced td:nth-of-type(3) { color: #555; }
-    #vimiumHelpDialog .closeButton {
-      position:absolute;
-      right:10px;
-      top:5px;
-      font-family:"courier new";
-      font-weight:bold;
-      color:#555;
-      text-decoration:none;
-      padding-left:10px;
-      font-size:16px;
-    }
-    #vimiumHelpDialog a {
-      text-decoration: underline;
-    }
-    #vimiumHelpDialog a.optionsPage {
-      position: absolute;
-      right: 60px;
-      top: 8px;
-    }
-    #vimiumHelpDialog .closeButton:hover {
-      color:black;
-      cursor:default;
-      -webkit-user-select:none;
-    }
-    #vimiumHelpDialogFooter { position: relative; }
-    #vimiumHelpDialogFooter * { font-size:10px; }
-    #vimiumHelpDialogFooter .toggleAdvancedCommands {
-      position: absolute;
-      right: 2px;
-      top: -34px;
-    }
-  </style>
-
   <!-- Note that the template placeholders (e.g. "pageNavigation") will be filled in by the background
        page with the up-to-date key bindings when the dialog is shown. -->
-  <a class="optionsPage" href="#">Options</a>
-  <a class="closeButton" href="#">x</a>
-  <div id="vimiumTitle"><span style="color:#2f508e">Vim</span>ium {{title}}</div>
-  <div class="vimiumColumn">
-    <table>
-      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Navigating the page</td></tr>
+  <div id="vimiumHelpDialog" class="vimiumReset">
+  <a class="vimiumReset optionsPage" href="#">Options</a>
+  <a class="vimiumReset closeButton" href="#">x</a>
+  <div id="vimiumTitle" class="vimiumReset"><span class="vimiumReset" style="color:#2f508e">Vim</span>ium {{title}}</div>
+  <div class="vimiumReset vimiumColumn">
+    <table class="vimiumReset">
+      <tbody class="vimiumReset">
+      <tr class="vimiumReset" ><td class="vimiumReset"></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating the page</td></tr>
       {{pageNavigation}}
+      </tbody>
     </table>
   </div>
-  <div class="vimiumColumn">
-    <table>
-      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Using find</td></tr>
+  <div class="vimiumReset vimiumColumn">
+    <table class="vimiumReset" >
+      <tbody class="vimiumReset">
+      <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using find</td></tr>
       {{findCommands}}
-      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Navigating history</td></tr>
+      <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating history</td></tr>
       {{historyNavigation}}
-      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Manipulating tabs</td></tr>
+      <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Manipulating tabs</td></tr>
       {{tabManipulation}}
-      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Miscellaneous</td></tr>
+      <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Miscellaneous</td></tr>
       {{misc}}
+      </tbody>
     </table>
   </div>
 
   <br clear="both"/>
-  <div class="vimiumDivider"></div>
+  <div class="vimiumReset vimiumDivider"></div>
 
-  <div id="vimiumHelpDialogFooter">
-    <a href="#" class="toggleAdvancedCommands">Show advanced commands</a>
+  <div id="vimiumHelpDialogFooter" class="vimiumReset">
+    <a href="#" class="vimiumReset toggleAdvancedCommands">Show advanced commands</a>
 
-    <div class="vimiumColumn">
+    <div class="vimiumReset vimiumColumn">
       Enjoying Vimium?
-      <a href="https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb">Leave us
+      <a class="vimiumReset" href="https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb">Leave us
           feedback</a>.<br/>
-      Found a bug? <a href="http://github.com/philc/vimium/issues">Report it here</a>.
+      Found a bug? <a class="vimiumReset" href="http://github.com/philc/vimium/issues">Report it here</a>.
     </div>
-    <div class="vimiumColumn" style="text-align:right">
-      <span>Version {{version}}</span><br/>
+    <div class="vimiumReset vimiumColumn" style="text-align:right">
+      <span class="vimiumReset">Version {{version}}</span><br/>
     </div>
   </div>