From 696f9f44b252d1cef78130b5c8f31562713810b8 Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Sun, 19 Oct 2014 13:06:12 +0200 Subject: [PATCH 1/8] Update panel.css --- data/panel.css | 37 +++++++++++++++++++++++++------------ 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/data/panel.css b/data/panel.css index 66b8cef..ac98318 100644 --- a/data/panel.css +++ b/data/panel.css @@ -17,18 +17,31 @@ body { .toolbar { padding: 3px; - border-bottom: 1px solid #AAA; + border-bottom: 1px solid rgba(0,0,0,0.2); } .toolbar button { - background: #E2E2E2; - color: #18191A; + background: rgba(0,0,0,0.2); border: none; - padding: 3px; + padding: 0 2px; +} + +.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 { @@ -45,12 +58,12 @@ body { 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 { @@ -58,7 +71,7 @@ body { } .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; @@ -80,12 +93,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 +110,7 @@ body { .attribute-name { font-weight: bold; - color: #4C9ED9; + color: #46afe3; } .attribute-value { From b3ec6e78d02c6fadc581cc176a79bda7299cfb40 Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Sun, 19 Oct 2014 13:07:28 +0200 Subject: [PATCH 2/8] Update panel.js --- data/panel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/data/panel.js b/data/panel.js index eb54f07..8347f38 100644 --- 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"); }, From b8664e432d6d988a9281a395b5924ddafb79a10d Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Sun, 19 Oct 2014 13:08:01 +0200 Subject: [PATCH 3/8] Update panel.html --- data/panel.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/data/panel.html b/data/panel.html index 59a35a0..effe523 100644 --- a/data/panel.html +++ b/data/panel.html @@ -1,7 +1,7 @@
- +
    From 9da419d8c22e3473eaf6ef0bab4fdbc39f70201a Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Sun, 19 Oct 2014 13:17:22 +0200 Subject: [PATCH 4/8] Changes to the css --- data/panel.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/data/panel.css b/data/panel.css index ac98318..9ce7244 100644 --- a/data/panel.css +++ b/data/panel.css @@ -4,9 +4,8 @@ html, body { width: 100%; height: 100%; overflow: hidden; - font-size: 3mm; - font-family: arial; + font-family: Arial, sans-serif; color: #18191A; } @@ -79,10 +78,11 @@ body { .record:hover { background: #4C9ED9; + border-bottom-color: transparent; color: white; } -.record.event { +.record.event:not(:hover) { color: orange; } From 3c4c0ad921b10c51dcdda45aa0cf6ac0ac8c1ca7 Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Sun, 19 Oct 2014 13:41:44 +0200 Subject: [PATCH 5/8] Added icon --- data/images/icon.svg | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 data/images/icon.svg diff --git a/data/images/icon.svg b/data/images/icon.svg new file mode 100644 index 0000000..45cbe0b --- /dev/null +++ b/data/images/icon.svg @@ -0,0 +1,7 @@ + + + + + + + From a68213c7afe56ec0e685a4c2826fae689b215292 Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Sun, 19 Oct 2014 13:42:13 +0200 Subject: [PATCH 6/8] Added icon in panel definition --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 47910a6..c563ce4 100644 --- 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", From 556dec73056a79bc30a76ffebf39e0a11e0f030b Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Sun, 19 Oct 2014 14:09:11 +0200 Subject: [PATCH 7/8] Removed useless scrollbar when records are empty --- data/panel.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/data/panel.css b/data/panel.css index 9ce7244..b190421 100644 --- a/data/panel.css +++ b/data/panel.css @@ -10,8 +10,8 @@ html, body { } body { - display: flex; - flex-flow: column; + display: flex; + flex-flow: column; } .toolbar { @@ -52,7 +52,7 @@ body { .records { flex-grow: 1; - overflow-y: scroll; + overflow-y: auto; overflow-x: hidden; padding: 0; margin: 0; From 9d2f88f1e2d8d2224a63880a66b33b15c9658584 Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Sun, 19 Oct 2014 15:23:11 +0200 Subject: [PATCH 8/8] Tweaked a few things --- data/panel.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/data/panel.css b/data/panel.css index b190421..1d1f278 100644 --- a/data/panel.css +++ b/data/panel.css @@ -17,12 +17,13 @@ body { .toolbar { padding: 3px; border-bottom: 1px solid rgba(0,0,0,0.2); + min-height: 23px; } .toolbar button { background: rgba(0,0,0,0.2); border: none; - padding: 0 2px; + padding: 0 3px; } .toolbar button::after {