return this.requisition.update(value).then(() => {
const Inputter = require("gcli/mozui/inputter").Inputter;
const Completer = require("gcli/mozui/completer").Completer;
const Tooltip = require("gcli/mozui/tooltip").Tooltip;
const FocusManager = require("gcli/ui/focus").FocusManager;
this.onOutput = this.requisition.commandOutputManager.onOutput;
this.focusManager = new FocusManager(this._doc, requisition.system.settings);
this.inputter = new Inputter({
requisition: this.requisition,
focusManager: this.focusManager,
element: this._input,
});
this.completer = new Completer({
requisition: this.requisition,
inputter: this.inputter,
backgroundElement: this._doc.querySelector(".gclitoolbar-stack-node"),
element: this._doc.querySelector(".gclitoolbar-complete-node"),
});
this.tooltip = new Tooltip({
requisition: this.requisition,
focusManager: this.focusManager,
inputter: this.inputter,
element: this.tooltipPanel.hintElement,
});
this.inputter.tooltip = this.tooltip;
this.focusManager.addMonitoredElement(this.outputPanel._frame);
this.focusManager.addMonitoredElement(this._element);
this.focusManager.onVisibilityChange.add(this.outputPanel._visibilityChanged,
this.outputPanel);
this.focusManager.onVisibilityChange.add(this.tooltipPanel._visibilityChanged,
this.tooltipPanel);
this.onOutput.add(this.outputPanel._outputChanged, this.outputPanel);
let tabbrowser = this._chromeWindow.gBrowser;
tabbrowser.tabContainer.addEventListener("TabSelect", this, false);
tabbrowser.tabContainer.addEventListener("TabClose", this, false);
tabbrowser.addEventListener("load", this, true);
tabbrowser.addEventListener("beforeunload", this, true);
gDevTools.on("toolbox-ready", this._onToolboxReady);
gDevTools.on("toolbox-destroyed", this._onToolboxDestroyed);
this._initErrorsCount(tabbrowser.selectedTab);
this._element.hidden = false;
if (focus) {
// If the toolbar was just inserted, the <textbox> may still have
// its binding in process of being applied and not be focusable yet
let waitForBinding = () => {
// Bail out if the toolbar has been destroyed in the meantime
if (!this._input) {
return;
}
// mInputField is a xbl field of <xul:textbox>
if (typeof this._input.mInputField != "undefined") {
this._input.focus();
this._notify(NOTIFICATIONS.SHOW);
} else {
this._input.ownerDocument.defaultView.setTimeout(waitForBinding, 50);
}
};
waitForBinding();
} else {
this._notify(NOTIFICATIONS.SHOW);
}
if (!DeveloperToolbar.introShownThisSession) {
let intro = require("gcli/ui/intro");
intro.maybeShowIntro(this.requisition.commandOutputManager,
this.requisition.conversionContext);
DeveloperToolbar.introShownThisSession = true;
}
this._showPromise = null;
});
/**
* View is responsible for generating the web UI for GCLI.
* @param options Object containing user customization properties.
* See the documentation for the other components for more details.
* Options supported directly include:
* - document (default=document):
* - environment (default={}):
* - dontDecorate (default=false):
* - inputElement (default=#gcli-input):
* - completeElement (default=#gcli-row-complete):
* - displayElement (default=#gcli-display):
* - promptElement (default=#gcli-prompt):
*/
function Display(options) {
var doc = options.document || document;
this.displayStyle = undefined;
if (displayCss != null) {
this.displayStyle = util.importCss(displayCss, doc, 'gcli-css-display');
}
// Configuring the document is complex because on the web side, there is an
// active desire to have nothing to configure, where as when embedded in
// Firefox there could be up to 4 documents, some of which can/should be
// derived from some root element.
// When a component uses a document to create elements for use under a known
// root element, then we pass in the element (if we have looked it up
// already) or an id/document
this.requisition = new Requisition(options.enviroment || {}, doc);
this.focusManager = new FocusManager(options, {
document: doc
});
this.inputElement = find(doc, options.inputElement || null, 'gcli-input');
this.inputter = new Inputter(options, {
requisition: this.requisition,
focusManager: this.focusManager,
element: this.inputElement
});
// autoResize logic: we want Completer to keep the elements at the same
// position if we created the completion element, but if someone else created
// it, then it's their job.
this.completeElement = insert(this.inputElement,
options.completeElement || null, 'gcli-row-complete');
this.completer = new Completer(options, {
requisition: this.requisition,
inputter: this.inputter,
autoResize: this.completeElement.gcliCreated,
element: this.completeElement
});
this.prompt = new Prompt(options, {
inputter: this.inputter,
element: insert(this.inputElement,
options.promptElement || null, 'gcli-prompt')
});
this.element = find(doc, options.displayElement || null, 'gcli-display');
this.element.classList.add('gcli-display');
this.template = util.toDom(doc, displayHtml);
this.elements = {};
domtemplate.template(this.template, this.elements, { stack: 'display.html' });
this.element.appendChild(this.template);
this.tooltip = new Tooltip(options, {
requisition: this.requisition,
inputter: this.inputter,
focusManager: this.focusManager,
element: this.elements.tooltip,
panelElement: this.elements.panel
});
this.inputter.tooltip = this.tooltip;
this.outputElement = util.createElement(doc, 'div');
this.outputElement.classList.add('gcli-output');
this.outputList = new OutputTerminal(options, {
requisition: this.requisition,
element: this.outputElement
});
this.element.appendChild(this.outputElement);
intro.maybeShowIntro(this.outputList.commandOutputManager);
}
FFDisplay.prototype.maybeShowIntro = function() {
intro.maybeShowIntro(this.commandOutputManager);
};
this._showPromise = Task.spawn((function* () {
// hide() is async, so ensure we don't need to wait for hide() to
// finish. We unconditionally yield here, even if _hidePromise is
// null, so that the spawn call returns a promise before starting
// to do any real work.
yield this._hidePromise;
this.createToolbar();
Services.prefs.setBoolPref("devtools.toolbar.visible", true);
this._telemetry.toolOpened("developertoolbar");
this._notify(NOTIFICATIONS.LOAD);
this._input = this._doc.querySelector(".gclitoolbar-input-node");
// Initializing GCLI can only be done when we've got content windows to
// write to, so this needs to be done asynchronously.
let panelPromises = [
TooltipPanel.create(this),
OutputPanel.create(this)
];
let panels = yield promise.all(panelPromises);
[ this.tooltipPanel, this.outputPanel ] = panels;
this._doc.getElementById("menu_devToolbar").setAttribute("checked", "true");
this.target = TargetFactory.forTab(this._chromeWindow.gBrowser.selectedTab);
const options = {
environment: CommandUtils.createEnvironment(this, "target"),
document: this.outputPanel.document,
};
let requisition = yield CommandUtils.createRequisition(this.target, options);
this.requisition = requisition;
// The <textbox> `value` may still be undefined on the XUL binding if
// we fetch it early
let value = this._input.value || "";
yield this.requisition.update(value);
const Inputter = require("gcli/mozui/inputter").Inputter;
const Completer = require("gcli/mozui/completer").Completer;
const Tooltip = require("gcli/mozui/tooltip").Tooltip;
const FocusManager = require("gcli/ui/focus").FocusManager;
this.onOutput = this.requisition.commandOutputManager.onOutput;
this.focusManager = new FocusManager(this._doc, requisition.system.settings);
this.inputter = new Inputter({
requisition: this.requisition,
focusManager: this.focusManager,
element: this._input,
});
this.completer = new Completer({
requisition: this.requisition,
inputter: this.inputter,
backgroundElement: this._doc.querySelector(".gclitoolbar-stack-node"),
element: this._doc.querySelector(".gclitoolbar-complete-node"),
});
this.tooltip = new Tooltip({
requisition: this.requisition,
focusManager: this.focusManager,
inputter: this.inputter,
element: this.tooltipPanel.hintElement,
});
this.inputter.tooltip = this.tooltip;
this.focusManager.addMonitoredElement(this.outputPanel._frame);
this.focusManager.addMonitoredElement(this._element);
this.focusManager.onVisibilityChange.add(this.outputPanel._visibilityChanged,
this.outputPanel);
this.focusManager.onVisibilityChange.add(this.tooltipPanel._visibilityChanged,
this.tooltipPanel);
this.onOutput.add(this.outputPanel._outputChanged, this.outputPanel);
let tabbrowser = this._chromeWindow.gBrowser;
tabbrowser.tabContainer.addEventListener("TabSelect", this, false);
tabbrowser.tabContainer.addEventListener("TabClose", this, false);
tabbrowser.addEventListener("load", this, true);
tabbrowser.addEventListener("beforeunload", this, true);
gDevTools.on("toolbox-ready", this._onToolboxReady);
gDevTools.on("toolbox-destroyed", this._onToolboxDestroyed);
this._initErrorsCount(tabbrowser.selectedTab);
this._element.hidden = false;
if (focus) {
// If the toolbar was just inserted, the <textbox> may still have
// its binding in process of being applied and not be focusable yet
let waitForBinding = () => {
// Bail out if the toolbar has been destroyed in the meantime
if (!this._input) {
return;
}
// mInputField is a xbl field of <xul:textbox>
if (typeof this._input.mInputField != "undefined") {
this._input.focus();
this._notify(NOTIFICATIONS.SHOW);
} else {
this._input.ownerDocument.defaultView.setTimeout(waitForBinding, 50);
}
};
waitForBinding();
} else {
this._notify(NOTIFICATIONS.SHOW);
}
if (!DeveloperToolbar.introShownThisSession) {
let intro = require("gcli/ui/intro");
intro.maybeShowIntro(this.requisition.commandOutputManager,
this.requisition.conversionContext,
this.outputPanel);
DeveloperToolbar.introShownThisSession = true;
}
this._showPromise = null;
}).bind(this));