From 242fcce1c37fa8779b8489404c61575f2cf91840 Mon Sep 17 00:00:00 2001
From: Oliver Blanthorn <freedom4cows@gmail.com>
Date: Sun, 22 Oct 2017 11:08:43 +0100
Subject: [PATCH] Change commandline and completions to look more like
 Vimperator

---
 src/commandline_content.ts |  8 ++++++--
 src/excmds.ts              |  2 +-
 src/static/commandline.css | 28 ++++++++++++++++++++--------
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/commandline_content.ts b/src/commandline_content.ts
index 135e17ea..4661b7a8 100644
--- a/src/commandline_content.ts
+++ b/src/commandline_content.ts
@@ -25,13 +25,17 @@ function init(){
 // every time.
 init()
 
+// The CSS in this file should probably go in static/
 export function show(){
-    cmdline_iframe.setAttribute("style", "position: fixed; bottom: 0; left: 0; z-index: 10000; width: 100%; height: 36px; border: 0; padding: 0; margin: 1;");
+    // I don't understand how CSS works - but this ensures that the commandline is always at the bottom of the page.
+    cmdline_iframe.setAttribute("style", "position: fixed; bottom: 0; left: 0; z-index: 10000; width: 100%; height: 24px; border: 0; padding: 0; margin: 0;");
+    const height = cmdline_iframe.contentWindow.document.body.offsetHeight + 'px'
+    cmdline_iframe.setAttribute("style", `position: fixed; bottom: 0; left: 0; z-index: 10000; width: 100%; height: ${height}; border: 0; padding: 0; margin: 0;`);
 }
 
 export function resize() {
     const height = cmdline_iframe.contentWindow.document.body.offsetHeight + 'px'
-    cmdline_iframe.setAttribute("style", `position: fixed; bottom: 0; left: 0; z-index: 10000; width: 100%; height: ${height}; border: 0; padding: 0; margin: 1;`);
+    cmdline_iframe.setAttribute("style", `position: fixed; bottom: 0; left: 0; z-index: 10000; width: 100%; height: ${height}; border: 0; padding: 0; margin: 0;`);
 }
 
 export function hide(){
diff --git a/src/excmds.ts b/src/excmds.ts
index dd5a7b4a..9b8bfd5c 100644
--- a/src/excmds.ts
+++ b/src/excmds.ts
@@ -454,7 +454,7 @@ function formatTab(tab: browser.tabs.Tab, prev?: boolean) {
     else if (prev) formatted += "#"
     if (tab.pinned) formatted += "@"
     formatted = formatted.padEnd(9)
-    // TODO: Dynamically set favicon dimensions.
+    // TODO: Dynamically set favicon dimensions. Should be able to use em.
     formatted += tab.favIconUrl
         ? `<img src="${tab.favIconUrl}" height="10px" width="10px"> `
         : `<img src="${DEFAULT_FAVICON}" height="10px" width="10px"> `
diff --git a/src/static/commandline.css b/src/static/commandline.css
index ed37e765..8f9998a7 100644
--- a/src/static/commandline.css
+++ b/src/static/commandline.css
@@ -6,27 +6,32 @@ body {
 input {
   width: 100%;
   padding: 0;
-  font-family: mono;
-  font-size: 8pt;
+  font-family: "mono", "monospace", "Courier New";
+  font-size: 10pt;
+  color: black;
+  border: unset;
+  /* we currently have a border from the completions */
+  /* border-top: solid 1px lightgray; */
+  padding-left: 0.5ex;
 }
 
 #completions {
-  background: black;
-  color: white;
+  background: white;
+  color: black;
   display: inline-block;
   font-family: mono;
-  font-size: 8pt;
+  font-size: 10pt;
   height: auto;
-  line-height: 1.5em;
+  /* line-height: 1.5em; */
   overflow: hidden;
-  bottom: 36px;
   white-space: pre;
   width: 100%;
   z-index: 9998;
+  border-top: 1px solid lightgray;
 }
 
 .url, a.url, a.url:link, a.url:visited {
-  background: black;
+  background: white;
   color: #d0ffd0 !important;
   display: inline;
   left: 50%;
@@ -37,6 +42,13 @@ input {
   z-index: 9999;
 }
 
+/* Hide the URLs if the screen is small */
+@media all and (max-width: 980px) {
+    .url, a.url, a.url:link, a.url:visited {
+        display: none;
+    }
+}
+
 a.url:hover {
   cursor: pointer;
   text-decoration: underline !important;