BrowserSteps - Make the UI require an extra step so it doesnt slow down the experience when clicking through the tabs

changedetectionio/blueprint/browser_steps/browser_steps.py

@@ -211,7 +211,7 @@ class browsersteps_live_ui(steppable_browser_interface):
         # Listen for all console events and handle errors
         self.page.on("console", lambda msg: print(f"Browser steps console - {msg.type}: {msg.text} {msg.args}"))
 
-        print("time to browser setup", time.time() - now)
+        print("Time to browser setup", time.time() - now)
         self.page.wait_for_timeout(1 * 1000)
 
     def mark_as_closed(self):

changedetectionio/static/js/browser-steps.js

@@ -26,10 +26,30 @@ $(document).ready(function () {
         set_scale();
     });
 
-    $('a#browsersteps-tab').click(function () {
+    $('#browsersteps-click-start').click(function () {
+        $("#browsersteps-click-start").fadeOut();
+        $("#browsersteps-selector-wrapper .spinner").fadeIn();
         start();
     });
 
+    $('a#browsersteps-tab').click(function () {
+       reset();
+    });
+
+    window.addEventListener('hashchange', function () {
+        if (window.location.hash == '#browser-steps') {
+            reset();
+        }
+    });
+
+    function reset() {
+        xpath_data=[];
+        $('#browsersteps-img').attr('src', "");
+        $("#browsersteps-click-start").show();
+        $("#browsersteps-selector-wrapper .spinner").hide();
+        browserless_seconds_remaining=0;
+    }
+
     // Show seconds remaining until playwright/browserless needs to restart the session
     // (See comment at the top of changedetectionio/blueprint/browser_steps/__init__.py )
     setInterval(() => {
@@ -40,21 +60,6 @@ $(document).ready(function () {
     }, "1000")
 
 
-    if (window.location.hash == '#browser-steps') {
-        start();
-    }
-
-    window.addEventListener('hashchange', function () {
-        if (window.location.hash == '#browser-steps') {
-            start();
-        }
-        // For when the page loads
-        if (!window.location.hash || window.location.hash != '#browser-steps') {
-            $("img#browsersteps-img").attr('src', '');
-            return;
-        }
-    });
-
     function set_scale() {
 
         // some things to check if the scaling doesnt work
@@ -234,7 +239,7 @@ $(document).ready(function () {
         // @todo This setting of the first one should be done at the datalayer but wtforms doesnt wanna play nice
         $('#browser_steps >li:first-child').removeClass('empty');
         $('#browser_steps >li:first-child select').val('Goto site').attr('disabled', 'disabled');
-        $('#browser-steps-ui .loader').show();
+        $('#browser-steps-ui .loader .spinner').show();
         $('.clear,.remove', $('#browser_steps >li:first-child')).hide();
         $.ajax({
             type: "GET",
@@ -353,7 +358,7 @@ $(document).ready(function () {
         }
 
         var current_data = $(event.currentTarget).closest('li');
-        $('#browser-steps-ui .loader').fadeIn();
+        $('#browser-steps-ui .loader .spinner').fadeIn();
         apply_buttons_disabled=true;
         $('ul#browser_steps li .control .apply').css('opacity',0.5);
         $("#browsersteps-img").css('opacity',0.65);
@@ -397,7 +402,7 @@ $(document).ready(function () {
             // it should return the new state (selectors available and screenshot)
             xpath_data = data.xpath_data;
             $('#browsersteps-img').attr('src', data.screenshot);
-            $('#browser-steps-ui .loader').fadeOut();
+            $('#browser-steps-ui .loader .spinner').fadeOut();
             apply_buttons_disabled=false;
             $("#browsersteps-img").css('opacity',1);
             $('ul#browser_steps li .control .apply').css('opacity',1);

changedetectionio/static/styles/parts/browser-steps.scss

@@ -70,6 +70,8 @@
     transform: translate(-50%, -50%);
     margin-left: -40px;
     z-index: 100;
+    max-width: 350px;
+    text-align: center;
   }
 
   /* nice tall skinny one */
@@ -78,4 +80,10 @@
     height: 80px;
     font-size: 3px;
   }
+
+  #browsersteps-click-start {
+    &:hover {
+      cursor: pointer;
+    }
+  }
 }

changedetectionio/static/styles/styles.css

@@ -96,11 +96,15 @@ nvm use v14.18.1 && npm install && npm run build
     top: 50%;
     transform: translate(-50%, -50%);
     margin-left: -40px;
-    z-index: 100; }
+    z-index: 100;
+    max-width: 350px;
+    text-align: center; }
   #browsersteps-selector-wrapper .spinner, #browsersteps-selector-wrapper .spinner:after {
     width: 80px;
     height: 80px;
     font-size: 3px; }
+  #browsersteps-selector-wrapper #browsersteps-click-start:hover {
+    cursor: pointer; }
 
 .arrow {
   border: solid #1b98f8;

changedetectionio/templates/edit.html

@@ -166,8 +166,12 @@ User-Agent: wonderbra 1.0") }}
                             <div id="browser-steps-ui" class="noselect"  style="width: 100%; background-color: #eee; border-radius: 5px;">
 
                                 <div class="noselect"  id="browsersteps-selector-wrapper" style="width: 100%">
-                                    <span class="loader">
-                                        <div class="spinner"></div>
+                                    <span class="loader" >
+                                        <span id="browsersteps-click-start">
+                                            <h2 >Click to Start</h2>
+                                            Please allow 10-15 seconds for the browser to connect.
+                                        </span>
+                                        <div class="spinner"  style="display: none;"></div>
                                     </span>
                                     <img  class="noselect" id="browsersteps-img" src="" style="max-width: 100%; width: 100%;" />
                                     <canvas  class="noselect" id="browsersteps-selector-canvas" style="max-width: 100%; width: 100%;"></canvas>