From 3a0235c7d763f75f8219b3092d7b280613a1f26a Mon Sep 17 00:00:00 2001 From: Nick Fitzgerald Date: Mon, 14 Oct 2013 13:06:50 -0700 Subject: [PATCH] Bug 921630 - Show progress indicator while pretty printing; r=vporof --- .../devtools/debugger/debugger-controller.js | 2 +- browser/devtools/debugger/debugger-panes.js | 21 +++------- browser/devtools/debugger/debugger-view.js | 41 +++++++++++++++++++ browser/devtools/debugger/debugger.xul | 4 ++ .../test/browser_dbg_pretty-print-01.js | 12 ++++++ browser/themes/linux/devtools/debugger.css | 10 ++++- browser/themes/osx/devtools/debugger.css | 10 ++++- browser/themes/windows/devtools/debugger.css | 10 ++++- 8 files changed, 88 insertions(+), 22 deletions(-) diff --git a/browser/devtools/debugger/debugger-controller.js b/browser/devtools/debugger/debugger-controller.js index c59793b2ac01..3fc5fbe535b7 100644 --- a/browser/devtools/debugger/debugger-controller.js +++ b/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(); }, /** diff --git a/browser/devtools/debugger/debugger-panes.js b/browser/devtools/debugger/debugger-panes.js index 31dbe4895934..e36756a2286f 100644 --- a/browser/devtools/debugger/debugger-panes.js +++ b/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. */ diff --git a/browser/devtools/debugger/debugger-view.js b/browser/devtools/debugger/debugger-view.js index 350d0b79f431..8d93df69ff1d 100644 --- a/browser/devtools/debugger/debugger-view.js +++ b/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, }; /** diff --git a/browser/devtools/debugger/debugger.xul b/browser/devtools/debugger/debugger.xul index dc4c0ef08a0d..490f22118005 100644 --- a/browser/devtools/debugger/debugger.xul +++ b/browser/devtools/debugger/debugger.xul @@ -345,6 +345,10 @@ image="chrome://browser/skin/devtools/blackBoxMessageEye.png" command="unBlackBoxCommand"/> + + + { 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(); diff --git a/browser/themes/linux/devtools/debugger.css b/browser/themes/linux/devtools/debugger.css index 8d3466f844ff..50d36b7193db 100644 --- a/browser/themes/linux/devtools/debugger.css +++ b/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; diff --git a/browser/themes/osx/devtools/debugger.css b/browser/themes/osx/devtools/debugger.css index 34cc039cac75..45adf7b0e7c2 100644 --- a/browser/themes/osx/devtools/debugger.css +++ b/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; diff --git a/browser/themes/windows/devtools/debugger.css b/browser/themes/windows/devtools/debugger.css index 5329931a0444..1bbb2b20ea59 100644 --- a/browser/themes/windows/devtools/debugger.css +++ b/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;