From 44c36c6ab1c6111f25e535fabfd3b5c75fb4120e Mon Sep 17 00:00:00 2001
From: Peter Parks
Date: Wed, 2 Nov 2011 14:10:54 -0700
Subject: Adjusted CSS for linkhints, help menu, text search, and bookmarks
 search UI elements. They should now be able to stand up to base element
 declarations created by a website. Added comments to the linkhints css
 settings on the options page and set default properties that a user would
 change to make it clear where they should be modified. Added a dropshadow to
 the linkhints to make them stand out better against similarly colored site
 backgrounds.

---
 helpDialog.html | 44 ++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 42 insertions(+), 2 deletions(-)

(limited to 'helpDialog.html')

diff --git a/helpDialog.html b/helpDialog.html
index aa534640..aae8b619 100644
--- a/helpDialog.html
+++ b/helpDialog.html
@@ -4,11 +4,46 @@
 -->
 <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;
@@ -16,12 +51,14 @@
       opacity:0.92;
       background-color:#eee;
       position:fixed;
-      width:600px;
       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;
@@ -31,7 +68,7 @@
       overflow-y: scroll;
     }
     #vimiumHelpDialog a { color:blue; }
-    #vimiumTitle, #vimiumTitle * { font-size:20px; }
+    #vimiumTitle, #vimiumTitle span,  #vimiumTitle * { font-size:20px; }
     .vimiumColumn {
       width:50%;
       float:left;
@@ -72,6 +109,9 @@
       padding-left:10px;
       font-size:16px;
     }
+    #vimiumHelpDialog a {
+      text-decoration: underline;
+    }
     #vimiumHelpDialog a.optionsPage {
       position: absolute;
       right: 60px;
-- 
cgit v1.2.3


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.

---
 helpDialog.html | 174 ++++++++------------------------------------------------
 1 file changed, 25 insertions(+), 149 deletions(-)

(limited to 'helpDialog.html')

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>
 
-- 
cgit v1.2.3