Bug 921630 - Show progress indicator while pretty printing; r=vporof

browser/devtools/debugger/debugger-controller.js

@@ -1143,7 +1143,7 @@ SourceScripts.prototype = {
     if (item) {
       DebuggerView.Sources.callMethod("checkItem", item.target, !isBlackBoxed);
     }
-    DebuggerView.Sources.maybeShowBlackBoxMessage();
+    DebuggerView.maybeShowBlackBoxMessage();
   },
 
   /**

browser/devtools/debugger/debugger-panes.js

@@ -50,7 +50,6 @@ SourcesView.prototype = Heritage.extend(WidgetMethods, {
     this._cmPopup = document.getElementById("sourceEditorContextMenu");
     this._cbPanel = document.getElementById("conditional-breakpoint-panel");
     this._cbTextbox = document.getElementById("conditional-breakpoint-panel-textbox");
-    this._editorDeck = document.getElementById("editor-deck");
     this._stopBlackBoxButton = document.getElementById("black-boxed-message-button");
     this._prettyPrintButton = document.getElementById("pretty-print");
 
@@ -401,9 +400,11 @@ SourcesView.prototype = Heritage.extend(WidgetMethods, {
       return;
     }
 
-    let { source } = this.selectedItem.attachment;
-    let prettyPrinted = DebuggerController.SourceScripts.prettyPrint(source);
-    prettyPrinted.then(resetEditor, printError);
+    DebuggerView.showProgressBar();
+    const { source } = this.selectedItem.attachment;
+    DebuggerController.SourceScripts.prettyPrint(source)
+      .then(resetEditor, printError)
+      .then(DebuggerView.showEditor);
   },
 
   /**
@@ -694,7 +695,7 @@ SourcesView.prototype = Heritage.extend(WidgetMethods, {
     let script = sourceItem.value.split(" -> ").pop();
     document.title = L10N.getFormatStr("DebuggerWindowScriptTitle", script);
 
-    this.maybeShowBlackBoxMessage();
+    DebuggerView.maybeShowBlackBoxMessage();
     this._updatePrettyPrintButtonState();
   },
 
@@ -711,16 +712,6 @@ SourcesView.prototype = Heritage.extend(WidgetMethods, {
     }
   },
 
-  /**
-   * Show or hide the black box message vs. source editor depending on if the
-   * selected source is black boxed or not.
-   */
-  maybeShowBlackBoxMessage: function() {
-    let sourceForm = this.selectedItem.attachment.source;
-    let sourceClient = DebuggerController.activeThread.source(sourceForm);
-    this._editorDeck.selectedIndex = sourceClient.isBlackBoxed ? 1 : 0;
-  },
-
   /**
    * The click listener for the sources container.
    */

browser/devtools/debugger/debugger-view.js

@@ -114,6 +114,12 @@ let DebuggerView = {
     this._instrumentsPane = document.getElementById("instruments-pane");
     this._instrumentsPaneToggleButton = document.getElementById("instruments-pane-toggle");
 
+    this.showEditor = this.showEditor.bind(this);
+    this.showBlackBoxMessage = this.showBlackBoxMessage.bind(this);
+    this.showProgressBar = this.showProgressBar.bind(this);
+    this.maybeShowBlackBoxMessage = this.maybeShowBlackBoxMessage.bind(this);
+    this._editorDeck = document.getElementById("editor-deck");
+
     this._onTabSelect = this._onInstrumentsPaneTabSelect.bind(this);
     this._instrumentsPane.tabpanels.addEventListener("select", this._onTabSelect);
 
@@ -221,6 +227,40 @@ let DebuggerView = {
     });
   },
 
+  /**
+   * Display the source editor.
+   */
+  showEditor: function() {
+    this._editorDeck.selectedIndex = 0;
+  },
+
+  /**
+   * Display the black box message.
+   */
+  showBlackBoxMessage: function() {
+    this._editorDeck.selectedIndex = 1;
+  },
+
+  /**
+   * Display the progress bar.
+   */
+  showProgressBar: function() {
+    this._editorDeck.selectedIndex = 2;
+  },
+
+  /**
+   * Show or hide the black box message vs. source editor depending on if the
+   * selected source is black boxed or not.
+   */
+  maybeShowBlackBoxMessage: function() {
+    let { source } = DebuggerView.Sources.selectedItem.attachment;
+    if (gThreadClient.source(source).isBlackBoxed) {
+      this.showBlackBoxMessage();
+    } else {
+      this.showEditor();
+    }
+  },
+
   /**
    * Sets the currently displayed text contents in the source editor.
    * This resets the mode and undo stack.
@@ -522,6 +562,7 @@ let DebuggerView = {
   _instrumentsPaneToggleButton: null,
   _collapsePaneString: "",
   _expandPaneString: "",
+  _editorDeck: null,
 };
 
 /**

browser/devtools/debugger/debugger.xul

@@ -345,6 +345,10 @@
                     image="chrome://browser/skin/devtools/blackBoxMessageEye.png"
                     command="unBlackBoxCommand"/>
           </vbox>
+          <vbox id="source-progress-container" align="center" pack="center">
+            <progressmeter id="source-progress"
+                           mode="undetermined"/>
+          </vbox>
         </deck>
         <splitter class="devtools-side-splitter"/>
         <tabbox id="instruments-pane"

browser/devtools/debugger/test/browser_dbg_pretty-print-01.js

@@ -24,9 +24,11 @@ function test() {
       .then(() => {
         const finished = waitForSourceShown(gPanel, "code_ugly.js");
         clickPrettyPrintButton();
+        testProgressBarShown();
         return finished;
       })
       .then(testSourceIsPretty)
+      .then(testEditorShown)
       .then(testSourceIsStillPretty)
       .then(() => closeDebuggerAndFinish(gPanel))
       .then(null, aError => {
@@ -46,11 +48,21 @@ function clickPrettyPrintButton() {
                             gDebugger);
 }
 
+function testProgressBarShown() {
+  const deck = gDebugger.document.getElementById("editor-deck");
+  is(deck.selectedIndex, 2, "The progress bar should be shown");
+}
+
 function testSourceIsPretty() {
   ok(gEditor.getText().contains("\n    "),
      "The source should be pretty printed.")
 }
 
+function testEditorShown() {
+  const deck = gDebugger.document.getElementById("editor-deck");
+  is(deck.selectedIndex, 0, "The editor should be shown");
+}
+
 function testSourceIsStillPretty() {
   const deferred = promise.defer();
 

browser/themes/linux/devtools/debugger.css

@@ -66,9 +66,10 @@
   display: none;
 }
 
-/* Black box message */
+/* Black box message and source progress meter */
 
-#black-boxed-message {
+#black-boxed-message,
+#source-progress-container {
   background: url(background-noise-toolbar.png) rgb(61,69,76);
   /* Prevent the container deck from aquiring the height from this message. */
   min-height: 1px;
@@ -76,6 +77,11 @@
   color: white;
 }
 
+#source-progress {
+  min-height: 2em;
+  min-width: 40em;
+}
+
 #black-boxed-message-label,
 #black-boxed-message-button {
   text-align: center;

browser/themes/osx/devtools/debugger.css

@@ -64,9 +64,10 @@
   display: none;
 }
 
-/* Black box message */
+/* Black box message and source progress meter */
 
-#black-boxed-message {
+#black-boxed-message,
+#source-progress-container {
   background: url(background-noise-toolbar.png) rgb(61,69,76);
   /* Prevent the container deck from aquiring the height from this message. */
   min-height: 1px;
@@ -74,6 +75,11 @@
   color: white;
 }
 
+#source-progress {
+  min-height: 2em;
+  min-width: 40em;
+}
+
 #black-boxed-message-label,
 #black-boxed-message-button {
   text-align: center;

browser/themes/windows/devtools/debugger.css

@@ -64,9 +64,10 @@
   display: none;
 }
 
-/* Black box message */
+/* Black box message and source progress meter */
 
-#black-boxed-message {
+#black-boxed-message,
+#source-progress-container {
   background: url(background-noise-toolbar.png) rgb(61,69,76);
   /* Prevent the container deck from aquiring the height from this message. */
   min-height: 1px;
@@ -74,6 +75,11 @@
   color: white;
 }
 
+#source-progress {
+  min-height: 2em;
+  min-width: 40em;
+}
+
 #black-boxed-message-label,
 #black-boxed-message-button {
   text-align: center;