From cfdace8da68aab9393689f68afb8cc9da897d008 Mon Sep 17 00:00:00 2001
From: Ben Francis <ben@tola.me.uk>
Date: Thu, 15 Oct 2015 11:54:44 +0100
Subject: [PATCH] Visual design changes

---
 css/shell.css           |  68 +++++++++++++++++++++++++---------------
 images/browser-icon.png | Bin 0 -> 1521 bytes
 js/BrowserTabPanel.js   |   3 +-
 3 files changed, 44 insertions(+), 27 deletions(-)
 create mode 100644 images/browser-icon.png

diff --git a/css/shell.css b/css/shell.css
index fb0024c..2e15b20 100755
--- a/css/shell.css
+++ b/css/shell.css
@@ -19,6 +19,11 @@ body {
   flex-direction: column;
 }
 
+/* Prevent dotted outlines on buttons */
+button::-moz-focus-inner {
+  border: 0;
+}
+
 /* Window Manager */
 
 #windows {
@@ -33,9 +38,6 @@ body {
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  background-color: #666;
-  border-radius: 0.5rem;
-  border: solid #666 0.5rem;
 }
 
 .browser-window.hidden {
@@ -46,8 +48,8 @@ body {
   position: absolute;
   top: 0;
   right: 0;
-  height: 3.5rem;
-  width: 3.5rem;
+  height: 3rem;
+  width: 3rem;
   padding: 0;
   margin: 0;
   background-color: transparent;
@@ -103,7 +105,7 @@ body {
 }
 
 .browser-tab.selected {
-  background-color: #e5e5e5;
+  background-color: #5d5d5d;
   border: none;
   border-radius: 0.5rem 0.5rem 0 0;
 }
@@ -133,10 +135,6 @@ body {
    opacity: 1;   
 }
 
-.browser-tab.selected .close-tab-button {
-  background-image: url("../images/close-dark.png");
-}
-
 .new-tab-button {
   height: 3rem;
   width: 3rem;
@@ -166,27 +164,43 @@ body {
 }
 
 .browser-tab-panel {
-  background-color: #e5e5e5;
+  background-color: #5d5d5d;
   height: 100%;
   display: none;
+  border-radius: 0.5rem;
+}
+
+.browser-tab-panel:first-child {
+  border-top-left-radius: 0;
 }
 
 .browser-tab-panel.selected {
   display: block;
 }
 
+.browser-tab-frame {
+  height: 100%;
+  width: 100%;
+  border: none;
+  border-radius: 0.5rem;
+}
+
+.browser-tab-panel:first-child .browser-tab-frame {
+  border-top-left-radius: 0;
+}
+
 /* System Toolbar */
 #system-toolbar {
   display: flex;
   width: 100%;
-  height: 3rem;
+  height: 3.2rem;
   margin: 0;
   padding: 0;
   color: #aaa;
 }
 
 #window-controls {
-  height: 3rem;
+  height: 3.2rem;
   padding: 0;
   margin: 0;
   flex: 1;
@@ -196,37 +210,39 @@ body {
   display: inline;
   margin: 0;
   padding: 0;
-  height: 3rem;
+  height: 3.2rem;
   width: auto;
   float: left;
 }
 
 .window-selector {
-  width: 3rem;
-  height: 2.6rem;
-  background-color: #333;
-  border-bottom-left-radius: 0.5rem;
-  border-bottom-right-radius: 0.5rem;
+  width: 3.2rem;
+  height: 3rem;
+  background-color: transparent;
+  background-image: url("../images/browser-icon.png");
+  background-position: center center;
+  background-repeat: no-repeat;
   border: none;
   margin: 0 0.2rem;
   padding: 0;
+  border-bottom: solid 2px transparent;
 }
 
 .window-selector:hover {
-  background-color: #444;
+  border-bottom: solid 2px #666;
 }
 
 .window-selector:active {
-  background-color: #666;
+  border-bottom: solid 2px #fff;
 }
 
 .window-selector.selected {
-  background-color: #666;
+  border-bottom: solid 2px #ccc;
 }
 
 #new-window-button {
-  height: 3rem;
-  width: 3rem;
+  height: 3.2rem;
+  width: 3.2rem;
   padding: 0;
   margin: 0;
   background-color: transparent;
@@ -247,6 +263,6 @@ body {
 
 #clock {
   font-size: 1.3rem;
-  line-height: 30px;
-  padding: 0 10px;
+  line-height: 3.2rem;
+  padding: 0 1rem;
 }
diff --git a/images/browser-icon.png b/images/browser-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..12c11febe26c5ad248b9326d00d1a8478171665e
GIT binary patch
literal 1521
zcmV<N1rGX&P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00004b3#c}2nYxW
zd<bNS00009a7bBm000Gv000Gv0c~iV`Tzg`8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H11#U@1K~zYIb(PI;9cLAXpZ8;C?!9xr;y6xh64%KsZKwzmi9js~
zH6T?L?V@b5L6y2>!xkj|2G}6jbXg$*VucV0fm8(Q4hax6t)R$pQsZDJv14D~d*|yt
z=Vf8z*l9A-(P+-h`~2qjew<@QqY+QLR+Fzim$lp9%?G{L^Sm?P@AW+f#(R5VT9lj9
z{mD<OarO2{et+v}4D%#`)$Okg^UuuvZDna`<#fMInmCeEIZ3xg)JU_nM+idQ2s>rX
z?K>O)n%o{=9kt(`J<f7-b8{yWYsvL*pM7@WkC&Ftoa(hbSz^e%rPXq@&-O|41Q!~p
zDp0|zFzB@AW7mG~?(FPGLs`3doM(?eY@B-a4;RkQ|7c;*GM<1Z;Ej?xr9H^V`x$vJ
zBeMrNZ^BV5<cU4MeEMg1=fD2zCkm|k>t8;zvhdZ+2-XTlYqASNy4Nm}E%nKtnJ3RP
z@;oE$XV@691War&T9cmZF?fEFPkrfy*H@F5UpgVMx_Z@}xpMKhsZ-jYUZVHX3;1D&
zZ226nosm6r4xB>)1#I4e)M7J7w!8o_&}?i`et3)4shl&Pz4W`))vFG`1GHZ}_s;P0
zg<d;N@Kr@DmHf){AO<ZJO)McOm`M5YU8>zN&9tD2;D-ZDrvnOF)P${FhL<n&CNFNi
z!+qX#4?EXSpZ?<Kf0A`F<1skzNW8~kuz-nxMxsWl``b)zZ%`E#brWbL;+GbQ?KYYu
zB+KV9-5#M4Xmzfve^mb1yZ+!6pLdLwiin`zBce>Vwy0HT^?NWshdRZ!df3G!W_Rw;
zRDsy(5J~}`Ap#MPl!7*j&pXET2e0@vAKs8s2x5@?JB&9s$h^mELz;M6-5is4NV5b3
zkmV#R&tmF8%rfdCPzS|!Pf<>1ga|<m(g<ljyy0!uz9!R(#s&62_<+<|H1nj1C&q}5
zC$zSAk--3C3;;2LMo*YEgrL+S%yxI#djIbP<H(jrn06PNwXb=fwiYLAw`itgY^Wej
z9ziq`Br?ALfUfHtH~=CLH4;<_5(%QHX%nKQnCvt8@Fv}*6`ao&JwdU?5sK;2;fOJ!
zQ4#TY5!l_s_v&K~A{s$e38FMj;Niv^#dJd51R$_?`=2E3zV|Yl{imAkT>3w}ZUU+i
zQ6&VW)#=ggFEg7wE^x534jittySYvfIZ<}BsVX1J*`Is!qf6D~0kiQYt?oSK{(VFh
z?*!NK%*F*iNifDxO&^kWhNyzZNC<)Hc>fb{0E7Lvi`~n%(_6feWPQ?XfVBx#v2*YT
z8Yzo?s<L3Rvw`zNLL*2pG<6`<!ffvzv+><ezyT2ZeHZi5R+9F=V{yjfsiqGIVS4hr
zra(fCGi~Z}pQf7OOa`JD97)opsmF)Qe^`TTf>y;h-DsgH9u$KM-n6d9P(zH=^)^I3
z77<YDYLB|wrLJ~C!I=yb!QcrpK{Y%Qh{?N`lE1ud0h+b)Tjl<Lx24#}G=Y{KfK(tg
z=wV1r46}or)Rfb8!fX#I_R(^R334>XMjE+Qy?RvaMx(#VYVq6~Nb{aGi4h$`tdExJ
z=x)H8l*A0Nq-Z%kd~HbR;7AE^LWs><qtW{U$2!_vvc0}j_T~xA7ot{1V}XeV7Zad?
z7!IaO6(<={geVO$)WpybC7@EpNcqEy>CGP;?WD(h^6K95%MSO;NHsJu!)k)K8PN#Q
z2EgDX$7<`5J7Z86b|hBc81-+zcbs>kWde)_AOA@ngfpo9MXZY`VG0$P${dCzR)RFs
zg9zg&aq@GyH#_?{{D}@uxOq5#9%J7i*w-L_&PX^55M8>7HUGfMZy^3^G`zR*G{*k`
X-t+zd6AK~j00000NkvXXu0mjfYKq(L

literal 0
HcmV?d00001

diff --git a/js/BrowserTabPanel.js b/js/BrowserTabPanel.js
index 0a64e74..8581bee 100644
--- a/js/BrowserTabPanel.js
+++ b/js/BrowserTabPanel.js
@@ -26,7 +26,8 @@ var BrowserTabPanel = function(tabId, windowId) {
  */
 BrowserTabPanel.prototype.view = function() {
   return '<div id="tab-panel' + this.windowId + '-' + this.id +
-    '"class="browser-tab-panel"></div>';
+    '"class="browser-tab-panel"><iframe src="http://duckduckgo.com"' +
+    'class="browser-tab-frame"></div>';
 };
 
 /**