Bug 763932 - [devtb] Add the right buttons to the Developer Toolbar; r=dao,jwalker,cedricv

This commit is contained in:
Paul Rouget 2012-06-25 11:37:16 +02:00
parent 975a1bd483
commit 24e92e67a9
7 changed files with 200 additions and 39 deletions

View File

@ -187,6 +187,7 @@
command="Tools:Scratchpad"/>
<menuitem id="appmenu_styleeditor"
hidden="true"
type="checkbox"
label="&styleeditor.label;"
key="key_styleeditor"
command="Tools:StyleEditor"/>

View File

@ -563,6 +563,7 @@
key="key_scratchpad"
command="Tools:Scratchpad"/>
<menuitem id="menu_styleeditor"
type="checkbox"
hidden="true"
label="&styleeditor.label;"
accesskey="&styleeditor.accesskey;"

View File

@ -95,7 +95,7 @@
<command id="Tools:RemoteDebugger" oncommand="DebuggerUI.toggleRemoteDebugger();" disabled="true"/>
<command id="Tools:ChromeDebugger" oncommand="DebuggerUI.toggleChromeDebugger();" disabled="true"/>
<command id="Tools:Scratchpad" oncommand="Scratchpad.openScratchpad();" disabled="true"/>
<command id="Tools:StyleEditor" oncommand="StyleEditor.openChrome();" disabled="true"/>
<command id="Tools:StyleEditor" oncommand="StyleEditor.toggle();" disabled="true"/>
<command id="Tools:ResponsiveUI" oncommand="ResponsiveUI.toggle();" disabled="true"/>
<command id="Tools:Addons" oncommand="BrowserOpenAddonsMgr();"/>
<command id="Tools:Sanitize"

View File

@ -1477,6 +1477,7 @@ var gBrowserInit = {
#ifdef MENUBAR_CAN_AUTOHIDE
document.getElementById("appmenu_styleeditor").hidden = false;
#endif
document.getElementById("developer-toolbar-styleeditor").hidden = false;
}
#ifdef MENUBAR_CAN_AUTOHIDE
@ -1496,7 +1497,6 @@ var gBrowserInit = {
#ifdef MENUBAR_CAN_AUTOHIDE
document.getElementById("appmenu_responsiveUI").hidden = false;
#endif
document.getElementById("developer-toolbar-responsiveui").hidden = false;
}
let appMenuButton = document.getElementById("appmenu-button");
@ -7370,40 +7370,29 @@ var StyleEditor = {
*/
openChrome: function SE_openChrome(aSelectedStyleSheet, aLine, aCol)
{
const CHROME_URL = "chrome://browser/content/styleeditor.xul";
const CHROME_WINDOW_TYPE = "Tools:StyleEditor";
const CHROME_WINDOW_FLAGS = "chrome,centerscreen,resizable,dialog=no";
// focus currently open Style Editor window for this document, if any
let contentWindow = gBrowser.selectedBrowser.contentWindow;
let contentWindowID = contentWindow.QueryInterface(Ci.nsIInterfaceRequestor).
getInterface(Ci.nsIDOMWindowUtils).currentInnerWindowID;
let enumerator = Services.wm.getEnumerator(CHROME_WINDOW_TYPE);
while (enumerator.hasMoreElements()) {
var win = enumerator.getNext();
if (win.styleEditorChrome.contentWindowID == contentWindowID) {
if (aSelectedStyleSheet) {
win.styleEditorChrome.selectStyleSheet(aSelectedStyleSheet, aLine, aCol);
}
win.focus();
return win;
}
let win = this.StyleEditorManager.getEditorForWindow(contentWindow);
if (win) {
this.StyleEditorManager.selectEditor(win);
return win;
} else {
return this.StyleEditorManager.newEditor(contentWindow,
aSelectedStyleSheet, aLine, aCol);
}
},
let args = {
contentWindow: contentWindow,
selectedStyleSheet: aSelectedStyleSheet,
line: aLine,
col: aCol
};
args.wrappedJSObject = args;
let chromeWindow = Services.ww.openWindow(null, CHROME_URL, "_blank",
CHROME_WINDOW_FLAGS, args);
chromeWindow.focus();
return chromeWindow;
toggle: function SE_toggle()
{
this.StyleEditorManager.toggleEditor(gBrowser.contentWindow);
}
};
XPCOMUtils.defineLazyGetter(StyleEditor, "StyleEditorManager", function() {
let tmp = {};
Cu.import("resource:///modules/devtools/StyleEditor.jsm", tmp);
return new tmp.StyleEditorManager(window);
});
XPCOMUtils.defineLazyGetter(window, "gShowPageResizers", function () {
#ifdef XP_WIN

View File

@ -1045,11 +1045,11 @@
class="devtools-toolbarbutton"
hidden="true"
command="Tools:Inspect"/>
<toolbarbutton id="developer-toolbar-responsiveui"
label="&responsiveDesignTool.label;"
<toolbarbutton id="developer-toolbar-styleeditor"
label="&styleeditor.label;"
class="devtools-toolbarbutton"
hidden="true"
command="Tools:ResponsiveUI"/>
command="Tools:StyleEditor"/>
<toolbarbutton id="developer-toolbar-debugger"
label="&debuggerMenu.label2;"
class="devtools-toolbarbutton"

View File

@ -35,6 +35,7 @@ function checkOpen() {
let close = document.getElementById("developer-toolbar-closebutton");
let webconsole = document.getElementById("developer-toolbar-webconsole");
let inspector = document.getElementById("developer-toolbar-inspector");
let styleeditor = document.getElementById("developer-toolbar-styleeditor");
let debuggr = document.getElementById("developer-toolbar-debugger");
ok(close, "Close button exists");
@ -42,18 +43,21 @@ function checkOpen() {
ok(!isChecked(webconsole), "web console button state 1");
ok(!isChecked(inspector), "inspector button state 1");
ok(!isChecked(debuggr), "debugger button state 1");
ok(!isChecked(styleeditor), "styleeditor button state 1");
document.getElementById("Tools:WebConsole").doCommand();
ok(isChecked(webconsole), "web console button state 2");
ok(!isChecked(inspector), "inspector button state 2");
ok(!isChecked(debuggr), "debugger button state 2");
ok(!isChecked(styleeditor), "styleeditor button state 2");
document.getElementById("Tools:Inspect").doCommand();
ok(isChecked(webconsole), "web console button state 3");
ok(isChecked(inspector), "inspector button state 3");
ok(!isChecked(debuggr), "debugger button state 3");
ok(!isChecked(styleeditor), "styleeditor button state 3");
// Christmas tree!
@ -66,12 +70,14 @@ function checkOpen() {
ok(!isChecked(webconsole), "web console button state 6");
ok(isChecked(inspector), "inspector button state 6");
ok(!isChecked(debuggr), "debugger button state 6");
ok(!isChecked(styleeditor), "styleeditor button state 6");
document.getElementById("Tools:Inspect").doCommand();
ok(!isChecked(webconsole), "web console button state 7");
ok(!isChecked(inspector), "inspector button state 7");
ok(!isChecked(debuggr), "debugger button state 7");
ok(!isChecked(styleeditor), "styleeditor button state 7");
// All closed
@ -81,9 +87,38 @@ function checkOpen() {
ok(!isChecked(webconsole), "web console button state 8");
ok(isChecked(inspector), "inspector button state 8");
ok(!isChecked(debuggr), "debugger button state 8");
ok(!isChecked(styleeditor), "styleeditor button state 8");
oneTimeObserve(DeveloperToolbar.NOTIFICATIONS.HIDE, catchFail(checkClosed));
document.getElementById("Tools:DevToolbar").doCommand();
// Test Style Editor
document.getElementById("Tools:StyleEditor").doCommand();
ok(!isChecked(webconsole), "web console button state 9");
ok(isChecked(inspector), "inspector button state 9");
ok(!isChecked(debuggr), "debugger button state 9");
ok(isChecked(styleeditor), "styleeditor button state 9");
// Test Debugger
document.getElementById("Tools:Debugger").doCommand();
ok(!isChecked(webconsole), "web console button state 9");
ok(isChecked(inspector), "inspector button state 9");
ok(isChecked(debuggr), "debugger button state 9");
ok(isChecked(styleeditor), "styleeditor button state 9");
addTab("about:blank", function(browser, tab) {
info("Opening a new tab");
ok(!isChecked(webconsole), "web console button state 10");
ok(!isChecked(inspector), "inspector button state 10");
ok(!isChecked(debuggr), "debugger button state 10");
ok(!isChecked(styleeditor), "styleeditor button state 10");
gBrowser.removeCurrentTab();
oneTimeObserve(DeveloperToolbar.NOTIFICATIONS.HIDE, catchFail(checkClosed));
document.getElementById("Tools:DevToolbar").doCommand();
});
}
function checkClosed() {
@ -102,10 +137,15 @@ function checkReOpen() {
let webconsole = document.getElementById("developer-toolbar-webconsole");
let inspector = document.getElementById("developer-toolbar-inspector");
let debuggr = document.getElementById("developer-toolbar-debugger");
let styleeditor = document.getElementById("developer-toolbar-styleeditor");
ok(isChecked(webconsole), "web console button state 9");
ok(isChecked(inspector), "inspector button state 9");
ok(!isChecked(debuggr), "debugger button state 9");
ok(isChecked(webconsole), "web console button state 99");
ok(isChecked(inspector), "inspector button state 99");
ok(isChecked(debuggr), "debugger button state 99");
ok(isChecked(styleeditor), "styleeditor button state 99");
// We close the style editor (not automatically closed)
document.getElementById("Tools:StyleEditor").doCommand();
oneTimeObserve(DeveloperToolbar.NOTIFICATIONS.HIDE, catchFail(checkReClosed));
document.getElementById("developer-toolbar-closebutton").doCommand();

View File

@ -5,7 +5,7 @@
"use strict";
const EXPORTED_SYMBOLS = ["StyleEditor", "StyleEditorFlags"];
const EXPORTED_SYMBOLS = ["StyleEditor", "StyleEditorFlags", "StyleEditorManager"];
const Cc = Components.classes;
const Ci = Components.interfaces;
@ -1160,3 +1160,133 @@ function setupBracketCompletion(aSourceEditor)
aSourceEditor.setCaretOffset(aSourceEditor.getCaretOffset() - 1);
}, false);
}
/**
* Manage the different editors instances.
*/
function StyleEditorManager(aWindow) {
this.chromeWindow = aWindow;
this.listenToTabs();
this.editors = new WeakMap();
}
StyleEditorManager.prototype = {
/**
* Get the editor for a specific content window.
*/
getEditorForWindow: function SEM_getEditorForWindow(aContentWindow) {
return this.editors.get(aContentWindow);
},
/**
* Focus the editor and select a stylesheet.
*
* @param {CSSStyleSheet} [aSelectedStyleSheet] default Stylesheet.
* @param {Number} [aLine] Line to which the caret should be moved (one-indexed).
* @param {Number} [aCol] Column to which the caret should be moved (one-indexed).
*/
selectEditor: function SEM_selectEditor(aWindow, aSelectedStyleSheet, aLine, aCol) {
if (aSelectedStyleSheet) {
aWindow.styleEditorChrome.selectStyleSheet(aSelectedStyleSheet, aLine, aCol);
}
aWindow.focus();
},
/**
* Open a new editor.
*
* @param {Window} content window.
* @param {CSSStyleSheet} [aSelectedStyleSheet] default Stylesheet.
* @param {Number} [aLine] Line to which the caret should be moved (one-indexed).
* @param {Number} [aCol] Column to which the caret should be moved (one-indexed).
*/
newEditor: function SEM_newEditor(aContentWindow, aSelectedStyleSheet, aLine, aCol) {
const CHROME_URL = "chrome://browser/content/styleeditor.xul";
const CHROME_WINDOW_FLAGS = "chrome,centerscreen,resizable,dialog=no";
let args = {
contentWindow: aContentWindow,
selectedStyleSheet: aSelectedStyleSheet,
line: aLine,
col: aCol
};
args.wrappedJSObject = args;
let chromeWindow = Services.ww.openWindow(null, CHROME_URL, "_blank",
CHROME_WINDOW_FLAGS, args);
chromeWindow.onunload = function() {
if (chromeWindow.location == CHROME_URL) {
// not about:blank being unloaded
this.unregisterEditor(aContentWindow);
}
}.bind(this);
chromeWindow.focus();
this.editors.set(aContentWindow, chromeWindow);
this.refreshCommand();
return chromeWindow;
},
/**
* Toggle an editor.
*
* @param {Window} associated content window.
*/
toggleEditor: function SEM_toggleEditor(aContentWindow) {
let editor = this.getEditorForWindow(aContentWindow);
if (editor) {
editor.close();
} else {
this.newEditor(aContentWindow);
}
},
/**
* Close an editor.
*
* @param {Window} associated content window.
*/
unregisterEditor: function SEM_unregisterEditor(aContentWindow) {
let chromeWindow = this.editors.get(aContentWindow);
if (chromeWindow) {
chromeWindow.close();
}
this.editors.delete(aContentWindow);
this.refreshCommand();
},
/**
* Update the status of tool's menuitems and buttons.
*/
refreshCommand: function SEM_refreshCommand() {
let contentWindow = this.chromeWindow.gBrowser.contentWindow;
let command = this.chromeWindow.document.getElementById("Tools:StyleEditor");
let win = this.getEditorForWindow(contentWindow);
if (win) {
command.setAttribute("checked", "true");
} else {
command.setAttribute("checked", "false");
}
},
/**
* Trigger refreshCommand when needed.
*/
listenToTabs: function SEM_listenToTabs() {
let win = this.chromeWindow;
let tabs = win.gBrowser.tabContainer;
let bound_refreshCommand = this.refreshCommand.bind(this);
tabs.addEventListener("TabSelect", bound_refreshCommand, true);
win.addEventListener("unload", function onClose(aEvent) {
tabs.removeEventListener("TabSelect", bound_refreshCommand, true);
win.removeEventListener("unload", onClose, false);
}, false);
},
}