From 4a0c4e26739be0648de499459d94ad0617bcb8a6 Mon Sep 17 00:00:00 2001
From: Daniel Compton <desk@danielcompton.net>
Date: Fri, 10 Nov 2017 16:08:04 +1300
Subject: [PATCH] Add a warning when the host page unloads

Fixes #102
---
 resources/day8/re_frame/trace/main.css            |  4 ++++
 resources/day8/re_frame/trace/main.less           |  4 ++++
 src/day8/re_frame/trace/components/container.cljs | 14 +++++++++-----
 src/day8/re_frame/trace/db.cljs                   |  1 +
 src/day8/re_frame/trace/events.cljs               | 13 ++++++++++++-
 src/day8/re_frame/trace/subs.cljs                 |  5 +++++
 6 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/resources/day8/re_frame/trace/main.css b/resources/day8/re_frame/trace/main.css
index edd9020..1752c29 100644
--- a/resources/day8/re_frame/trace/main.css
+++ b/resources/day8/re_frame/trace/main.css
@@ -474,6 +474,10 @@
 #--re-frame-trace-- .re-frame-trace--object > span {
   vertical-align: text-top;
 }
+#--re-frame-trace-- .host-closed {
+  font-size: 4em;
+  background-color: rgba(255, 255, 0, 0.8);
+}
 #--re-frame-trace-- .expansion-button {
   font-family: sans-serif;
   width: 16px;
diff --git a/resources/day8/re_frame/trace/main.less b/resources/day8/re_frame/trace/main.less
index 31cb6ff..d20f095 100644
--- a/resources/day8/re_frame/trace/main.less
+++ b/resources/day8/re_frame/trace/main.less
@@ -575,6 +575,10 @@
     }
   }
 
+  .host-closed {
+    font-size: 4em;
+    background-color: fade(@yellow, 80%);
+  }
 
   .expansion-button {
     font-family: sans-serif;
diff --git a/src/day8/re_frame/trace/components/container.cljs b/src/day8/re_frame/trace/components/container.cljs
index 4d3d1f9..c23bcd4 100644
--- a/src/day8/re_frame/trace/components/container.cljs
+++ b/src/day8/re_frame/trace/components/container.cljs
@@ -7,10 +7,14 @@
             [reagent.core :as r]))
 
 (defn devtools-inner [traces opts]
-  (let [selected-tab (rf/subscribe [:settings/selected-tab])
-        panel-type   (:panel-type opts)]
+  (let [selected-tab     (rf/subscribe [:settings/selected-tab])
+        panel-type       (:panel-type opts)
+        external-window? (= panel-type :popup)
+        unloading?       (rf/subscribe [:global/unloading?])]
     [:div.panel-content
      {:style {:width "100%" :display "flex" :flex-direction "column"}}
+     (when (and external-window? @unloading?)
+       [:h1.host-closed "Host window has closed. Reopen external window to continue tracing."])
      [:div.panel-content-top
       [:div.nav
        [:button {:class    (str "tab button " (when (= @selected-tab :traces) "active"))
@@ -20,10 +24,10 @@
        #_[:button {:class    (str "tab button " (when (= @selected-tab :subvis) "active"))
                    :on-click #(reset! selected-tab :subvis)} "SubVis"]
 
-       (when-not (= panel-type :popup)
+       (when-not external-window?
          [:img.popout-icon
-          {:src (str "data:image/svg+xml;utf8,"
-                     "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 8 8\" x=\"0px\" y=\"0px\">\n    <path fill=\"#444444\" d=\"M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z\"/>\n</svg>\n")
+          {:src      (str "data:image/svg+xml;utf8,"
+                          "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 8 8\" x=\"0px\" y=\"0px\">\n    <path fill=\"#444444\" d=\"M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z\"/>\n</svg>\n")
            :on-click #(rf/dispatch-sync [:global/launch-external])}])]]
      (case @selected-tab
        :traces [traces/render-trace-panel traces]
diff --git a/src/day8/re_frame/trace/db.cljs b/src/day8/re_frame/trace/db.cljs
index 37a2c15..0fdcda5 100644
--- a/src/day8/re_frame/trace/db.cljs
+++ b/src/day8/re_frame/trace/db.cljs
@@ -13,5 +13,6 @@
     (rf/dispatch [:settings/selected-tab selected-tab])
     (rf/dispatch [:traces/filter-items filter-items])
     (rf/dispatch [:app-db/paths app-db-paths])
+    (rf/dispatch [:global/add-unload-hook])
     (when show-panel?
       (rf/dispatch [:global/enable-tracing]))))
diff --git a/src/day8/re_frame/trace/events.cljs b/src/day8/re_frame/trace/events.cljs
index e343a0c..a4a7ca8 100644
--- a/src/day8/re_frame/trace/events.cljs
+++ b/src/day8/re_frame/trace/events.cljs
@@ -61,7 +61,7 @@
                                              ",resizable=yes,scrollbars=yes,status=no,directories=no,toolbar=no,menubar=no"))
         d (.-document w)]
     (.open d)
-    (.write d "<head></head><body><div id=\"--re-frame-trace--\" class=\"external-window\"></div></body>")
+    (.write d "<head></head><body style=\"margin: 0px;\"><div id=\"--re-frame-trace--\" class=\"external-window\"></div></body>")
     (aset w "onload" #(mount w d))
     (.close d)))
 
@@ -91,6 +91,17 @@
     (utils.traces/disable-tracing!)
     nil))
 
+(rf/reg-event-fx
+  :global/add-unload-hook
+  (fn [_ _]
+    (js/window.addEventListener "beforeunload" #(rf/dispatch-sync [:global/unloading? true]))
+    nil))
+
+(rf/reg-event-db
+  :global/unloading?
+  (fn [db [_ unloading?]]
+    (assoc-in db [:global :unloading?] unloading?)))
+
 ;; Traces
 
 (defn save-filter-items [filter-items]
diff --git a/src/day8/re_frame/trace/subs.cljs b/src/day8/re_frame/trace/subs.cljs
index d661997..ec1daf1 100644
--- a/src/day8/re_frame/trace/subs.cljs
+++ b/src/day8/re_frame/trace/subs.cljs
@@ -25,3 +25,8 @@
   :traces/filter-items
   (fn [db _]
     (get-in db [:traces :filter-items])))
+
+(rf/reg-sub
+  :global/unloading?
+  (fn [db _]
+    (get-in db [:global :unloading?])))