Show Backbone detection workaround on "Waiting for Backbone..." view #31

Maluen · Sep 16, 2015 · a0c2003 · a0c2003
1 parent 43eb700
commit a0c2003
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git a/js/panel/routers/Router.js b/js/panel/routers/Router.js
@@ -48,7 +48,7 @@ function(Backbone, inspectedPageClient, backboneAgentClient, WaitingView, Debugg
 
             // Wait until the inspected page is ready, in order to wait the completion of 
             // an eventual Backbone Agent in-progress activation.
-            waitingView.setWaitingText('Waiting for inspected page loading...');
+            waitingView.inspectedPagePhase();
             inspectedPageClient.ready(_.bind(function() {
                 backboneAgentClient.isActive(_.bind(function(isActive) {
                     if (isActive) {
@@ -58,7 +58,7 @@ function(Backbone, inspectedPageClient, backboneAgentClient, WaitingView, Debugg
 
                         // Wait until Backbone is detected
                         // and the client is connected to the agent
-                        waitingView.setWaitingText('Waiting for Backbone...');
+                        waitingView.backbonePhase();
                         backboneAgentClient.connect(_.bind(function() { // on connected
                             waitingView.remove();
                             var debuggerView = new DebuggerView();

diff --git a/js/panel/views/main/WaitingView.js b/js/panel/views/main/WaitingView.js
@@ -8,25 +8,33 @@ function(Backbone, _, $, View, Handlebars, template) {
         template: Handlebars.compile(template),
 
         // the waiting text to display
-        waitingText: undefined,
+        waitingPhase: undefined,
 
         initialize: function(options) {
             View.prototype.initialize.apply(this, arguments);
 
             options = options || {};
 
-            this.setWaitingText(options.waitingText || '');
-            // (first render provided by above function)
+            this.render();
+        },
+
+        inspectedPagePhase: function() {
+            return this.setWaitingPhase('inspectedPage');
+        },
+
+        backbonePhase: function() {
+            return this.setWaitingPhase('backbone');
         },
 
-        setWaitingText: function(waitingText) {
-            this.waitingText = waitingText;
+        setWaitingPhase: function(waitingPhase) {
+            this.waitingPhase = waitingPhase;
             this.render();
         },
 
         templateData: function() {
             return {
-                'waitingText': this.waitingText
+                inspectedPagePhase: this.waitingPhase === 'inspectedPage',
+                backbonePhase: this.waitingPhase === 'backbone'
             };
         },
 

diff --git a/templates/waiting.html b/templates/waiting.html
@@ -1,3 +1,12 @@
 <div id="waiting" class="container-fluid">
-    {{waitingText}}
-</div>
+    {{#inspectedPagePhase}}
+    <p>Waiting for inspected page loading...</p>
+    {{/inspectedPagePhase}}
+
+    {{#backbonePhase}}
+    <p>Waiting for Backbone...</p>
+    <p>
+        Are you stuck here indefinitely? Then try to use the <a href="https://github.com/Maluen/Backbone-Debugger#backbone-detection" target="_blank">Backbone detection</a> workaround.
+    </p>
+    {{/backbonePhase}}
+</div>