From 47cd065dd491435b33831930c0ea32df6eb114ff Mon Sep 17 00:00:00 2001
From: legomushroom <legomushroom@gmail.com>
Date: Tue, 27 Jun 2017 12:26:33 -0500
Subject: [PATCH 1/2] [expand button]: initial PR

---
 src/index.js                    | 22 ++++++++++-----
 src/index.scss                  | 47 ++++++++++++++++++++++++++++++---
 src/views/expand-button-view.js | 14 ++++++++++
 3 files changed, 73 insertions(+), 10 deletions(-)
 create mode 100644 src/views/expand-button-view.js

diff --git a/src/index.js b/src/index.js
index 5e67c4c..af3a00d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -12,6 +12,7 @@ var timingView = require('./views/timing');
 var ajaxView = require('./views/ajax');
 var dataView = require('./views/data');
 var logsView = require('./views/logs');
+var expandButtonView = require('./views/expand-button-view');
 var util = require('./lib/util');
 
 const state = {
@@ -23,11 +24,13 @@ function render(state) {
         <div class="glimpse-hud">
             <div class="glimpse-hud-data" data-glimpse-expanded="${state.expanded}">
                 ${versionView.render()}
+                ${expandButtonView.render()}
                 ${timingView.render()}
                 ${logsView.render()}
                 ${dataView.render()}
                 ${ajaxView.render()}
                 <div class="glimpse-hud-popup">
+                    ${expandButtonView.renderPopup()}
                     ${timingView.renderPopup()}
                     ${logsView.renderPopup()}
                     ${dataView.renderPopup()}
@@ -40,16 +43,21 @@ function render(state) {
 }
 
 function postRender(initPromise) {
+    var hudData = document.querySelector('.glimpse-hud-data');
+    var expandButton = document.querySelector('#js-glimpse-expand-button');
+    var collapseButton = document.querySelector('#js-glimpse-collapse-button');
+
     ajaxView.postRender(initPromise);
-    logsView.postRender(initPromise)
+    logsView.postRender(initPromise);
 
-    var hudData = document.querySelector('.glimpse-hud-data');
+    var setOpenState = function(panelState) {
+      util.localSet(state, 'expanded', panelState, function() {
+          hudData.setAttribute('data-glimpse-expanded', panelState);
+      });
+    };
 
-    hudData.addEventListener('click', function() {
-        util.localSet(state, 'expanded', !state.expanded, function() {
-            hudData.setAttribute('data-glimpse-expanded', state.expanded);
-        });
-    });
+    expandButton.addEventListener('click', function() { setOpenState(true); });
+    collapseButton.addEventListener('click', function() { setOpenState(false); });
 }
 
 function preInit(initPromise) {
diff --git a/src/index.scss b/src/index.scss
index 3789c1b..02a4144 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -84,7 +84,7 @@ $popup-delay: 0s;
 
     &[data-glimpse-expanded="true"] {
         border-color: transparent !important;
-        transition-delay: 0s !important;        
+        transition-delay: 0s !important;
 
         > :not(.glimpse-hud-popup) {
             background-color: transparent !important;
@@ -297,7 +297,7 @@ $popup-delay: 0s;
     white-space: nowrap !important;
     text-overflow: ellipsis !important;
     overflow: hidden !important;
-    
+
     &:last-child {
         text-align: right !important;
     }
@@ -331,15 +331,19 @@ $popup-delay: 0s;
 
 .glimpse-hud-popup-section {
     padding: 10px !important;
+    padding-right: 15px !important;
 
     ~ * {
         border-left: 1px solid #999 !important;
-        margin-left: 5px !important;
     }
 
     &.-ajax {
         flex-grow: 1 !important;
     }
+
+    &:last-of-type {
+        padding-right: 10px !important;
+    }
 }
 
 .glimpse-hud-field {
@@ -450,3 +454,40 @@ $popup-delay: 0s;
     max-height: 150px !important;
     overflow-y: auto !important;
 }
+
+$expandHoverColor: #3c3c3c;
+$collapseHoverColor: #353535;
+.glimpse-expand-button,
+.glimpse-hud-popup-section--arrow {
+    position: relative !important;
+
+    $arrowSize: 5px;
+    &::after {
+        content: "" !important;
+        position: absolute !important;
+        left: 50% !important;
+        top: 50% !important;
+        border: $arrowSize solid transparent !important;
+        margin-top: -$arrowSize !important;
+        margin-left: -$arrowSize/5 !important;
+        border-left-color: white !important;
+    }
+
+    &:hover {
+        background-color: $expandHoverColor !important;
+        cursor: pointer !important;
+    }
+}
+
+.glimpse-hud-popup-section--arrow {
+    background-color: $expandHoverColor !important;
+
+    &::after {
+        transform: rotate(45deg) translateX(-1px) !important;
+    }
+
+    &:hover {
+        background-color: $collapseHoverColor !important;
+        cursor: pointer !important;
+    }
+}
diff --git a/src/views/expand-button-view.js b/src/views/expand-button-view.js
new file mode 100644
index 0000000..0ac7ef4
--- /dev/null
+++ b/src/views/expand-button-view.js
@@ -0,0 +1,14 @@
+module.exports = {
+    render: function() {
+        return `
+            <div class="glimpse-section glimpse-expand-button" id="js-glimpse-expand-button" title="expand">
+            </div>
+        `;
+    },
+    renderPopup: function() {
+        return `
+            <div class="glimpse-hud-popup-section glimpse-hud-popup-section--arrow" id="js-glimpse-collapse-button" title="collapse">
+            </div>
+        `;
+    }
+};

From fd1220144abf619eeb62b9f7e8e097306c8dab01 Mon Sep 17 00:00:00 2001
From: legomushroom <legomushroom@gmail.com>
Date: Tue, 27 Jun 2017 12:57:21 -0500
Subject: [PATCH 2/2] PR feedback

---
 src/index.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index 02a4144..6b1ed49 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -460,8 +460,9 @@ $collapseHoverColor: #353535;
 .glimpse-expand-button,
 .glimpse-hud-popup-section--arrow {
     position: relative !important;
+    padding: 0 8px !important;
 
-    $arrowSize: 5px;
+    $arrowSize: 4px;
     &::after {
         content: "" !important;
         position: absolute !important;
@@ -469,7 +470,7 @@ $collapseHoverColor: #353535;
         top: 50% !important;
         border: $arrowSize solid transparent !important;
         margin-top: -$arrowSize !important;
-        margin-left: -$arrowSize/5 !important;
+        margin-left: -$arrowSize/4 !important;
         border-left-color: white !important;
     }