Bug 1280121 - Move the font panel to last position in the sidebar
MozReview-Commit-ID: BqBE4Wj8pN9
--- a/devtools/client/framework/sidebar.js
+++ b/devtools/client/framework/sidebar.js
@@ -174,66 +174,84 @@ ToolSidebar.prototype = {
_onTabBoxUnderflow: function () {
this._allTabsBtn.setAttribute("hidden", "true");
},
/**
* Add an item in the allTabs menu for a given tab.
*/
- _addItemToAllTabsMenu: function (id, tab, selected = false) {
+ _addItemToAllTabsMenu: function (id, tab, selected = false, insertionIndex = -1) {
if (!this._allTabsBtn) {
return;
}
let item = this._panelDoc.createElementNS(XULNS, "menuitem");
item.setAttribute("id", "sidebar-alltabs-item-" + id);
item.setAttribute("label", tab.getAttribute("label"));
item.setAttribute("type", "checkbox");
if (selected) {
item.setAttribute("checked", true);
}
// The auto-checking of menuitems in this menu doesn't work, so let's do
// it manually
item.setAttribute("autocheck", false);
- this._allTabsBtn.querySelector("menupopup").appendChild(item);
+ let relativeTo = this._allTabsBtn.querySelector("menupopup");
+ let position = "beforeend";
+ if (insertionIndex >= 0) {
+ relativeTo = this._allTabsBtn.querySelector("menupopup").children[insertionIndex];
+ position = "beforebegin";
+ }
+ relativeTo.insertAdjacentElement(position, item);
item.addEventListener("click", () => {
this._tabbox.selectedTab = tab;
}, false);
tab.allTabsMenuItem = item;
return item;
},
/**
* Register a tab. A tab is a document.
* The document must have a title, which will be used as the name of the tab.
*
- * @param {string} tab uniq id
- * @param {string} url
+ * @param {string} id The unique id for this tab.
+ * @param {string} url The URL of the document to load in this new tab.
+ * @param {Boolean} selected Set to true to make this new tab selected by default.
+ * @param {Number} insertionIndex By default, the new tab is appended at the end of the
+ * tabbox, use this index to insert it somewhere else.
*/
- addTab: function (id, url, selected = false) {
+ addTab: function (id, url, selected = false, insertionIndex = -1) {
let iframe = this._panelDoc.createElementNS(XULNS, "iframe");
iframe.className = "iframe-" + id;
iframe.setAttribute("flex", "1");
iframe.setAttribute("src", url);
iframe.tooltip = "aHTMLTooltip";
// Creating the tab and adding it to the tabbox
let tab = this._panelDoc.createElementNS(XULNS, "tab");
- this._tabbox.tabs.appendChild(tab);
- tab.setAttribute("label", ""); // Avoid showing "undefined" while the tab is loading
+
tab.setAttribute("id", this.TAB_ID_PREFIX + id);
tab.setAttribute("crop", "end");
+ // Avoid showing "undefined" while the tab is loading
+ tab.setAttribute("label", "");
+
+ let relativeTo = this._tabbox.tabs;
+ let position = "beforeend";
+ if (insertionIndex >= 0) {
+ relativeTo = this._tabbox.tabs.children[insertionIndex];
+ position = "beforebegin";
+ }
+ relativeTo.insertAdjacentElement(position, tab);
// Add the tab to the allTabs menu if exists
- let allTabsItem = this._addItemToAllTabsMenu(id, tab, selected);
+ let allTabsItem = this._addItemToAllTabsMenu(id, tab, selected, insertionIndex);
let onIFrameLoaded = (event) => {
let doc = event.target;
let win = doc.defaultView;
tab.setAttribute("label", doc.title);
if (allTabsItem) {
allTabsItem.setAttribute("label", doc.title);
@@ -246,17 +264,22 @@ ToolSidebar.prototype = {
this.emit(id + "-ready");
};
iframe.addEventListener("load", onIFrameLoaded, true);
let tabpanel = this._panelDoc.createElementNS(XULNS, "tabpanel");
tabpanel.setAttribute("id", this.TABPANEL_ID_PREFIX + id);
tabpanel.appendChild(iframe);
- this._tabbox.tabpanels.appendChild(tabpanel);
+
+ relativeTo = this._tabbox.tabpanels;
+ if (insertionIndex >= 0) {
+ relativeTo = this._tabbox.tabpanels.children[insertionIndex];
+ }
+ relativeTo.insertAdjacentElement(position, tabpanel);
this._tooltip = this._panelDoc.createElementNS(XULNS, "tooltip");
this._tooltip.id = "aHTMLTooltip";
tabpanel.appendChild(this._tooltip);
this._tooltip.page = true;
tab.linkedPanel = this.TABPANEL_ID_PREFIX + id;
--- a/devtools/client/inspector/inspector-panel.js
+++ b/devtools/client/inspector/inspector-panel.js
@@ -402,31 +402,30 @@ InspectorPanel.prototype = {
this._setDefaultSidebar = (event, toolId) => {
Services.prefs.setCharPref("devtools.inspector.activeSidebar", toolId);
};
this.sidebar.on("select", this._setDefaultSidebar);
this.ruleview = new RuleViewTool(this, this.panelWin);
this.computedview = new ComputedViewTool(this, this.panelWin);
+ this.layoutview = new LayoutView(this, this.panelWin);
+
+ if (this.target.form.animationsActor) {
+ this.sidebar.addTab("animationinspector",
+ "chrome://devtools/content/animationinspector/animation-inspector.xhtml",
+ defaultTab == "animationinspector", 3);
+ }
if (Services.prefs.getBoolPref("devtools.fontinspector.enabled") &&
this.canGetUsedFontFaces) {
this.fontInspector = new FontInspector(this, this.panelWin);
this.sidebar.toggleTab(true, "fontinspector");
}
- this.layoutview = new LayoutView(this, this.panelWin);
-
- if (this.target.form.animationsActor) {
- this.sidebar.addTab("animationinspector",
- "chrome://devtools/content/animationinspector/animation-inspector.xhtml",
- defaultTab == "animationinspector");
- }
-
this.sidebar.show(defaultTab);
this.setupSidebarToggle();
},
/**
* Add the expand/collapse behavior for the sidebar panel.
*/
--- a/devtools/client/inspector/inspector.xul
+++ b/devtools/client/inspector/inspector.xul
@@ -53,23 +53,23 @@
<tabbox id="inspector-sidebar" handleCtrlTab="false" class="devtools-sidebar-tabs" hidden="true">
<tabs>
<tab id="sidebar-tab-ruleview"
label="&ruleViewTitle;"
crop="end"/>
<tab id="sidebar-tab-computedview"
label="&computedViewTitle;"
crop="end"/>
+ <tab id="sidebar-tab-layoutview"
+ label="&layoutViewTitle;"
+ crop="end"/>
<tab id="sidebar-tab-fontinspector"
label="&fontInspectorTitle;"
crop="end"
hidden="true"/>
- <tab id="sidebar-tab-layoutview"
- label="&layoutViewTitle;"
- crop="end"/>
</tabs>
<tabpanels flex="1">
<tabpanel id="sidebar-panel-ruleview" class="devtools-monospace theme-sidebar inspector-tabpanel">
<html:div id="ruleview-toolbar-container" class="devtools-toolbar">
<html:div id="ruleview-toolbar">
<html:div class="devtools-searchbox">
<html:input id="ruleview-searchbox"
class="devtools-searchinput devtools-rule-searchbox"
@@ -111,51 +111,16 @@
<html:div id="propertyContainer">
</html:div>
<html:div id="noResults" hidden="">
&noPropertiesFound;
</html:div>
</tabpanel>
- <tabpanel id="sidebar-panel-fontinspector" class="devtools-monospace theme-sidebar inspector-tabpanel">
- <html:div class="devtools-toolbar">
- <html:div class="devtools-searchbox">
- <html:input id="font-preview-text-input"
- class="devtools-textinput"
- type="search"
- placeholder="&previewHint;"/>
- </html:div>
- </html:div>
-
- <html:div id="font-container">
- <html:ul id="all-fonts"></html:ul>
- <html:button id="font-showall">&showAllFonts;</html:button>
- </html:div>
-
- <html:div id="font-template">
- <html:section class="font">
- <html:div class="font-preview-container">
- <html:img class="font-preview"></html:img>
- </html:div>
- <html:div class="font-info">
- <html:h1 class="font-name"></html:h1>
- <html:span class="font-is-local">&system;</html:span>
- <html:span class="font-is-remote">&remote;</html:span>
- <html:p class="font-format-url">
- <html:input readonly="readonly" class="font-url"></html:input>
- <html:span class="font-format"></html:span>
- </html:p>
- <html:p class="font-css">&usedAs; "<html:span class="font-css-name"></html:span>"</html:p>
- <html:pre class="font-css-code"></html:pre>
- </html:div>
- </html:section>
- </html:div>
- </tabpanel>
-
<tabpanel id="sidebar-panel-layoutview" class="devtools-monospace theme-sidebar inspector-tabpanel">
<html:div id="layout-wrapper">
<html:div id="layout-container">
<html:p id="layout-header">
<html:span id="layout-element-size"></html:span>
<html:section id="layout-position-group">
<html:button class="devtools-button" id="layout-geometry-editor" title="&geometry.button.tooltip;"></html:button>
<html:span id="layout-element-position"></html:span>
@@ -194,12 +159,47 @@
</html:div>
<html:div style="display: none">
<html:p id="layout-dummy"></html:p>
</html:div>
</html:div>
</html:div>
</tabpanel>
+
+ <tabpanel id="sidebar-panel-fontinspector" class="devtools-monospace theme-sidebar inspector-tabpanel">
+ <html:div class="devtools-toolbar">
+ <html:div class="devtools-searchbox">
+ <html:input id="font-preview-text-input"
+ class="devtools-textinput"
+ type="search"
+ placeholder="&previewHint;"/>
+ </html:div>
+ </html:div>
+
+ <html:div id="font-container">
+ <html:ul id="all-fonts"></html:ul>
+ <html:button id="font-showall">&showAllFonts;</html:button>
+ </html:div>
+
+ <html:div id="font-template">
+ <html:section class="font">
+ <html:div class="font-preview-container">
+ <html:img class="font-preview"></html:img>
+ </html:div>
+ <html:div class="font-info">
+ <html:h1 class="font-name"></html:h1>
+ <html:span class="font-is-local">&system;</html:span>
+ <html:span class="font-is-remote">&remote;</html:span>
+ <html:p class="font-format-url">
+ <html:input readonly="readonly" class="font-url"></html:input>
+ <html:span class="font-format"></html:span>
+ </html:p>
+ <html:p class="font-css">&usedAs; "<html:span class="font-css-name"></html:span>"</html:p>
+ <html:pre class="font-css-code"></html:pre>
+ </html:div>
+ </html:section>
+ </html:div>
+ </tabpanel>
</tabpanels>
</tabbox>
</box>
</window>