Merge pull request #11 from n-tim/master

Styling improvements
captainbrosset · Oct 20, 2014 · 91ab9ef · 91ab9ef
2 parents bb8cf71 + 9d2f88f
commit 91ab9ef
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 22 deletions.
diff --git a/data/images/icon.svg b/data/images/icon.svg
diff --git a/data/panel.css b/data/panel.css
@@ -4,31 +4,44 @@ html, body {
   width: 100%;
   height: 100%;
   overflow: hidden;
-
   font-size: 3mm;
-  font-family: arial;
+  font-family: Arial, sans-serif;
   color: #18191A;
 }
 
 body {
-   display: flex;
-   flex-flow: column;
+  display: flex;
+  flex-flow: column;
 }
 
 .toolbar {
   padding: 3px;
-  border-bottom: 1px solid #AAA;
+  border-bottom: 1px solid rgba(0,0,0,0.2);
+  min-height: 23px;
 }
 
 .toolbar button {
-  background: #E2E2E2;
-  color: #18191A;
+  background: rgba(0,0,0,0.2);
   border: none;
-  padding: 3px;
+  padding: 0 3px;
+}
+
+.toolbar button::after {
+  content: "";
+  display: inline-block;
+  margin-top: 1px;
+  width: 16px;
+  height: 16px;
+  background-image: url("chrome://browser/skin/devtools/profiler-stopwatch.svg");
+  background-size: cover;
+}
+
+.toolbar button:not([checked]):hover {
+  background: rgba(0,0,0,0.3);
 }
 
-.toolbar button:hover {
-  background: #DDD;
+.toolbar button[checked]::after {
+  background-image: url("chrome://browser/skin/devtools/profiler-stopwatch-checked.svg");
 }
 
 .main {
@@ -40,36 +53,37 @@ body {
 
 .records {
   flex-grow: 1;
-  overflow-y: scroll;
+  overflow-y: auto;
   overflow-x: hidden;
   padding: 0;
   margin: 0;
   list-style-type: none;
-  background: white;
+  background: rgba(255,255,255,0.07);
 }
 
 .screenshots {
   width: 30%;
-  border-left: 1px solid #AAA;
+  border-left: 1px solid rgba(0,0,0,0.2);
 }
 
 .screenshots img {
   width: 100%;
 }
 
 .record {
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid rgba(0,0,0,0.2);
   padding: 5px 3px;
   margin: 0;
   list-style-type: none;
 }
 
 .record:hover {
   background: #4C9ED9;
+  border-bottom-color: transparent;
   color: white;
 }
 
-.record.event {
+.record.event:not(:hover) {
   color: orange;
 }
 
@@ -80,12 +94,12 @@ body {
 .target-tag {}
 
 .target-id {
-  color: #4C9ED9;
+  color: #70bf53;
   margin-left: 3px;
 }
 
 .target-classes {
-  color: rgb(207, 224, 236);
+  color: #46afe3;
   margin-left: 3px;
 }
 
@@ -97,7 +111,7 @@ body {
 
 .attribute-name {
   font-weight: bold;
-  color: #4C9ED9;
+  color: #46afe3;
 }
 
 .attribute-value {

diff --git a/data/panel.html b/data/panel.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <link rel="stylesheet" type="text/css" href="panel.css">
 <header class="toolbar">
-  <button id="toggle">start</button>
+  <button id="toggle"></button>
 </header>
 <div class="main">
   <ul class="records"></ul>

diff --git a/data/panel.js b/data/panel.js
@@ -56,7 +56,7 @@ PageRecorderPanel.prototype = {
     }
     this.isStarted = true;
 
-    this.toggleEl.textContent = "stop";
+    this.toggleEl.setAttribute("checked", "true")
     this.recordsEl.innerHTML = "";
     this.mm.sendAsyncMessage("PageRecorder:Start");
   },
@@ -67,7 +67,7 @@ PageRecorderPanel.prototype = {
     }
     this.isStarted = false;
 
-    this.toggleEl.textContent = "start";
+    this.toggleEl.removeAttribute("checked");
     this.mm.sendAsyncMessage("PageRecorder:Stop");
   },
 

diff --git a/index.js b/index.js
@@ -7,7 +7,7 @@ const {gDevTools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
 
 gDevTools.registerTool({
   id: "pagerecorder",
-  icon: self.data.url("images/icon.png"),
+  icon: self.data.url("images/icon.svg"),
   invertIconForLightTheme: true,
   url: self.data.url("panel.html"),
   label: "Page Recorder",