From abb431e0cad2a671c251cd75020eb430f5a14d7e Mon Sep 17 00:00:00 2001 From: Nicolas Chevobbe Date: Fri, 26 Feb 2016 23:40:14 +0100 Subject: [PATCH] Bug 1246514 - Switch toolbox-options.xul to HTML. r=bgrins Change the XUL label + vbox to fieldset + legend as it's the most relevant element for describing form sections. Moreover, we don't have to look for a previous label when we hide a fieldset. Edit scripts and tests files to adapt them to the HTML file structure. MozReview-Commit-ID: LBfXfLRX6aj --HG-- rename : devtools/client/framework/toolbox-options.xul => devtools/client/framework/toolbox-options.xhtml extra : rebase_source : 4343dd55c3be9de6a09c39819959be4ad4642edc --- devtools/client/definitions.js | 2 +- devtools/client/framework/options-panel.css | 81 +++++--- .../framework/test/browser_toolbox_options.js | 38 ++-- ...browser_toolbox_options_disable_buttons.js | 13 +- .../browser_toolbox_theme_registration.js | 35 ++-- devtools/client/framework/test/doc_theme.css | 2 +- devtools/client/framework/toolbox-options.js | 190 ++++++++++------- .../client/framework/toolbox-options.xhtml | 191 ++++++++++++++++++ devtools/client/framework/toolbox-options.xul | 175 ---------------- devtools/client/jar.mn | 2 +- 10 files changed, 406 insertions(+), 323 deletions(-) create mode 100644 devtools/client/framework/toolbox-options.xhtml delete mode 100644 devtools/client/framework/toolbox-options.xul diff --git a/devtools/client/definitions.js b/devtools/client/definitions.js index 1f7949544de5..6c3f2af10780 100644 --- a/devtools/client/definitions.js +++ b/devtools/client/definitions.js @@ -60,7 +60,7 @@ exports.Tools = Tools; Tools.options = { id: "options", ordinal: 0, - url: "chrome://devtools/content/framework/toolbox-options.xul", + url: "chrome://devtools/content/framework/toolbox-options.xhtml", icon: "chrome://devtools/skin/images/tool-options.svg", invertIconForLightTheme: true, bgTheme: "theme-body", diff --git a/devtools/client/framework/options-panel.css b/devtools/client/framework/options-panel.css index df8d128e1e3d..e755c9da5519 100644 --- a/devtools/client/framework/options-panel.css +++ b/devtools/client/framework/options-panel.css @@ -1,6 +1,9 @@ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +:root{ + -moz-user-select: none; +} #options-panel-container { overflow: auto; @@ -15,20 +18,12 @@ float: left; } -.options-vertical-pane > label { - display: block; -} - .options-vertical-pane { margin: 5px; - width: calc(100%/3 - 30px); + width: calc(100%/3 - 10px); min-width: 320px; - -moz-padding-start: 5px; -} - -#devtools-theme-box { - margin-left: 0px; - padding-left: 0px; + padding-inline-start: 5px; + box-sizing: border-box; } /* Snap to 50% width once there is not room for 3 columns anymore. @@ -36,20 +31,55 @@ only ~66% of the available space. */ @media (max-width: 1000px) { .options-vertical-pane { - width: calc(100%/2 - 30px); + width: calc(100%/2 - 10px); } } -.options-vertical-pane > label { - padding: 2px 0; +.options-vertical-pane fieldset { + border: none; +} + +.options-vertical-pane fieldset legend { font-size: 1.4rem; + margin-inline-start: -15px; + margin-bottom: 3px; + cursor: default; +} + +.options-vertical-pane fieldset + fieldset { + margin-top: 1rem; } .options-groupbox { - -moz-margin-start: 15px; + margin-inline-start: 15px; padding: 2px; } +.options-groupbox label { + display: flex; + padding: 4px 0; + align-items: center; +} + +/* Add padding for label of select inputs in order to + align it with surrounding checkboxes */ +.options-groupbox label span:first-child { + padding-inline-start: 5px; +} + +.options-groupbox label span + select { + margin-inline-start: 4px; +} + +.options-groupbox.horizontal-options-groupbox label { + display: inline-flex; + align-items: baseline; +} + +.options-groupbox.horizontal-options-groupbox label + label { + margin-inline-start: 4px; +} + .options-groupbox > *, .options-groupbox > .hidden-labels-box > checkbox { padding: 2px; @@ -60,21 +90,18 @@ } .options-citation-label { - font-size: 1rem !important; - /* !important is required otherwise font-size will still be 1.4rem */ + display: inline-block; + font-size: 1rem; font-style: italic; - padding: 4px 0 0; /* To align it with the checkbox */ + /* To align it with the checkbox */ + padding: 4px 0 0; + padding-inline-end: 4px; } -.hidden-labels-box:not(.visible) > label, -.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child { - display: none; +#devtools-sourceeditor-keybinding-select { + min-width: 130px; } -#devtools-sourceeditor-keybinding-menulist { - min-width: 100px; -} - -#devtools-sourceeditor-tabsize-menulist { - min-width: 50px; +#devtools-sourceeditor-tabsize-select { + min-width: 80px; } diff --git a/devtools/client/framework/test/browser_toolbox_options.js b/devtools/client/framework/test/browser_toolbox_options.js index a8aa5c924a84..d9ebaa37d183 100644 --- a/devtools/client/framework/test/browser_toolbox_options.js +++ b/devtools/client/framework/test/browser_toolbox_options.js @@ -72,7 +72,8 @@ function* testOptionsShortcut() { function* testOptions() { let tool = toolbox.getPanel("options"); panelWin = tool.panelWin; - let prefNodes = tool.panelDoc.querySelectorAll("checkbox[data-pref]"); + let prefNodes = tool.panelDoc.querySelectorAll( + "input[type=checkbox][data-pref]"); // Store modified pref names so that they can be cleared on error. for (let node of tool.panelDoc.querySelectorAll("[data-pref]")) { @@ -90,21 +91,22 @@ function* testOptions() { yield testMouseClick(node, !prefValue); } - let prefDropdowns = tool.panelDoc.querySelectorAll("menulist[data-pref]"); - for (let node of prefDropdowns) { - yield testMenuList(node); + let prefSelects = tool.panelDoc.querySelectorAll("select[data-pref]"); + for (let node of prefSelects) { + yield testSelect(node); } } -function* testMenuList(menulist) { - let pref = menulist.getAttribute("data-pref"); - let menuitems = menulist.querySelectorAll("menuitem"); - info ("Checking menu list for: " + pref); +function* testSelect(select) { + let pref = select.getAttribute("data-pref"); + let options = Array.from(select.options); + info("Checking select for: " + pref); - is (menulist.selectedItem.value, GetPref(pref), "Menu starts out selected"); + is(select.options[select.selectedIndex].value, GetPref(pref), + "select starts out selected"); - for (let menuitem of menuitems) { - if (menuitem === menulist.selectedItem) { + for (let option of options) { + if (options.indexOf(option) === select.selectedIndex) { continue; } @@ -112,18 +114,16 @@ function* testMenuList(menulist) { gDevTools.once("pref-changed", (event, data) => { if (data.pref == pref) { ok(true, "Correct pref was changed"); - is (GetPref(pref), menuitem.value, "Preference been switched for " + pref); + is (GetPref(pref), option.value, "Preference been switched for " + pref); } else { ok(false, "Pref " + pref + " was not changed correctly"); } deferred.resolve(); }); - menulist.selectedItem = menuitem; - let commandEvent = menulist.ownerDocument.createEvent("XULCommandEvent"); - commandEvent.initCommandEvent("command", true, true, window, 0, false, false, - false, false, null); - menulist.dispatchEvent(commandEvent); + select.selectedIndex = options.indexOf(option); + let changeEvent = new Event("change"); + select.dispatchEvent(changeEvent); yield deferred.promise; } @@ -157,7 +157,9 @@ function* testMouseClick(node, prefValue) { } function* testToggleTools() { - let toolNodes = panelWin.document.querySelectorAll("#default-tools-box > checkbox:not([unsupported]), #additional-tools-box > checkbox:not([unsupported])"); + let toolNodes = panelWin.document.querySelectorAll( + "#default-tools-box input[type=checkbox]:not([data-unsupported])," + + "#additional-tools-box input[type=checkbox]:not([data-unsupported])"); let enabledTools = [...toolNodes].filter(node => node.checked); let toggleableTools = gDevTools.getDefaultTools().filter(tool => { diff --git a/devtools/client/framework/test/browser_toolbox_options_disable_buttons.js b/devtools/client/framework/test/browser_toolbox_options_disable_buttons.js index 729405cb9e5f..8527d2b7d449 100644 --- a/devtools/client/framework/test/browser_toolbox_options_disable_buttons.js +++ b/devtools/client/framework/test/browser_toolbox_options_disable_buttons.js @@ -57,7 +57,7 @@ function testSelectTool(aToolbox) { } function testPreferenceAndUIStateIsConsistent() { - let checkNodes = [...panelWin.document.querySelectorAll("#enabled-toolbox-buttons-box > checkbox")]; + let checkNodes = [...panelWin.document.querySelectorAll("#enabled-toolbox-buttons-box input[type=checkbox]")]; let toolboxButtonNodes = [...doc.querySelectorAll(".command-button")]; toolboxButtonNodes.push(doc.getElementById("command-button-frames")); let toggleableTools = toolbox.toolboxButtons; @@ -77,7 +77,7 @@ function testPreferenceAndUIStateIsConsistent() { } function testToggleToolboxButtons() { - let checkNodes = [...panelWin.document.querySelectorAll("#enabled-toolbox-buttons-box > checkbox")]; + let checkNodes = [...panelWin.document.querySelectorAll("#enabled-toolbox-buttons-box input[type=checkbox]")]; let toolboxButtonNodes = [...doc.querySelectorAll(".command-button")]; let toggleableTools = toolbox.toolboxButtons; @@ -99,7 +99,7 @@ function testToggleToolboxButtons() { is (matchedButtons[0], tool.button, "DOM buttons should match for: " + id); - is (matchedCheckboxes[0].getAttribute("label"), tool.label, + is (matchedCheckboxes[0].nextSibling.textContent, tool.label, "The label for checkbox matches the tool definition."); is (matchedButtons[0].getAttribute("tooltiptext"), tool.label, "The tooltip for button matches the tool definition."); @@ -117,7 +117,7 @@ function testToggleToolboxButtons() { let isVisible = getBoolPref(tool.visibilityswitch); testPreferenceAndUIStateIsConsistent(); - toggleButton(node); + node.click(); testPreferenceAndUIStateIsConsistent(); let isVisibleAfterClick = getBoolPref(tool.visibilityswitch); @@ -133,11 +133,6 @@ function getBoolPref(key) { return Services.prefs.getBoolPref(key); } -function toggleButton(node) { - node.scrollIntoView(); - EventUtils.synthesizeMouseAtCenter(node, {}, panelWin); -} - function cleanup() { toolbox.destroy().then(function() { gBrowser.removeCurrentTab(); diff --git a/devtools/client/framework/test/browser_toolbox_theme_registration.js b/devtools/client/framework/test/browser_toolbox_theme_registration.js index c61ed623c9d7..9b49d2c63139 100644 --- a/devtools/client/framework/test/browser_toolbox_theme_registration.js +++ b/devtools/client/framework/test/browser_toolbox_theme_registration.js @@ -32,53 +32,62 @@ add_task(function* themeRegistration() { }); add_task(function* themeInOptionsPanel() { - let panel = toolbox.getCurrentPanel(); let panelWin = toolbox.getCurrentPanel().panelWin; let doc = panelWin.frameElement.contentDocument; - let themeOption = doc.querySelector("#devtools-theme-box > radio[value=test-theme]"); + let themeBox = doc.getElementById("devtools-theme-box"); + let testThemeOption = themeBox.querySelector( + "input[type=radio][value=test-theme]"); - ok(themeOption, "new theme exists in the Options panel"); + ok(testThemeOption, "new theme exists in the Options panel"); - let testThemeOption = doc.querySelector("#devtools-theme-box > radio[value=test-theme]"); - let lightThemeOption = doc.querySelector("#devtools-theme-box > radio[value=light]"); + let lightThemeOption = themeBox.querySelector( + "input[type=radio][value=light]"); - let color = panelWin.getComputedStyle(testThemeOption).color; + let color = panelWin.getComputedStyle(themeBox).color; isnot(color, "rgb(255, 0, 0)", "style unapplied"); + let onThemeSwithComplete = once(panelWin, "theme-switch-complete"); + // Select test theme. testThemeOption.click(); info("Waiting for theme to finish loading"); - yield once(panelWin, "theme-switch-complete"); + yield onThemeSwithComplete; - color = panelWin.getComputedStyle(testThemeOption).color; + color = panelWin.getComputedStyle(themeBox).color; is(color, "rgb(255, 0, 0)", "style applied"); + onThemeSwithComplete = once(panelWin, "theme-switch-complete"); + // Select light theme lightThemeOption.click(); info("Waiting for theme to finish loading"); - yield once(panelWin, "theme-switch-complete"); + yield onThemeSwithComplete; - color = panelWin.getComputedStyle(testThemeOption).color; + color = panelWin.getComputedStyle(themeBox).color; isnot(color, "rgb(255, 0, 0)", "style unapplied"); + onThemeSwithComplete = once(panelWin, "theme-switch-complete"); // Select test theme again. testThemeOption.click(); + yield onThemeSwithComplete; }); add_task(function* themeUnregistration() { + let onUnRegisteredTheme = once(gDevTools, "theme-unregistered"); gDevTools.unregisterTheme("test-theme"); + yield onUnRegisteredTheme; ok(!gDevTools.getThemeDefinitionMap().has("test-theme"), "theme removed from map"); let panelWin = toolbox.getCurrentPanel().panelWin; let doc = panelWin.frameElement.contentDocument; - let themeBox = doc.querySelector("#devtools-theme-box"); + let themeBox = doc.getElementById("devtools-theme-box"); // The default light theme must be selected now. - is(themeBox.selectedItem, themeBox.querySelector("[value=light]"), - "theme light must be selected"); + is(themeBox.querySelector("#devtools-theme-box [value=light]").checked, true, + "light theme must be selected"); }); add_task(function* cleanup() { diff --git a/devtools/client/framework/test/doc_theme.css b/devtools/client/framework/test/doc_theme.css index 392077010585..5ed6e866a029 100644 --- a/devtools/client/framework/test/doc_theme.css +++ b/devtools/client/framework/test/doc_theme.css @@ -1,3 +1,3 @@ -.theme-test #devtools-theme-box radio { +.theme-test #devtools-theme-box { color: red !important; } diff --git a/devtools/client/framework/toolbox-options.js b/devtools/client/framework/toolbox-options.js index 66b3aa0a5864..bd0b4eb08fbd 100644 --- a/devtools/client/framework/toolbox-options.js +++ b/devtools/client/framework/toolbox-options.js @@ -106,7 +106,6 @@ OptionsPanel.prototype = { this.setupToolsList(); this.setupToolbarButtonsList(); this.setupThemeList(); - this.updateDefaultTheme(); yield this.populatePreferences(); this.isReady = true; this.emit("ready"); @@ -143,16 +142,16 @@ OptionsPanel.prototype = { _themeUnregistered: function(event, theme) { let themeBox = this.panelDoc.getElementById("devtools-theme-box"); - let themeOption = themeBox.querySelector("[value=" + theme.id + "]"); + let themeInput = themeBox.querySelector(`[value=${theme.id}]`); - if (themeOption) { - themeBox.removeChild(themeOption); + if (themeInput) { + themeInput.parentNode.remove(); } }, setupToolbarButtonsList: function() { - let enabledToolbarButtonsBox = this.panelDoc.getElementById("enabled-toolbox-buttons-box"); - enabledToolbarButtonsBox.textContent = ""; + let enabledToolbarButtonsBox = this.panelDoc.getElementById( + "enabled-toolbox-buttons-box"); let toggleableButtons = this.toolbox.toolboxButtons; let setToolboxButtonsVisibility = @@ -165,12 +164,21 @@ OptionsPanel.prototype = { }; let createCommandCheckbox = tool => { - let checkbox = this.panelDoc.createElement("checkbox"); - checkbox.setAttribute("id", tool.id); - checkbox.setAttribute("label", tool.label); - checkbox.setAttribute("checked", InfallibleGetBoolPref(tool.visibilityswitch)); - checkbox.addEventListener("command", onCheckboxClick.bind(this, checkbox)); - return checkbox; + let checkboxLabel = this.panelDoc.createElement("label"); + let checkboxSpanLabel = this.panelDoc.createElement("span"); + checkboxSpanLabel.textContent = tool.label; + let checkboxInput = this.panelDoc.createElement("input"); + checkboxInput.setAttribute("type", "checkbox"); + checkboxInput.setAttribute("id", tool.id); + if (InfallibleGetBoolPref(tool.visibilityswitch)) { + checkboxInput.setAttribute("checked", true); + } + checkboxInput.addEventListener("change", + onCheckboxClick.bind(this, checkboxInput)); + + checkboxLabel.appendChild(checkboxInput); + checkboxLabel.appendChild(checkboxSpanLabel); + return checkboxLabel; }; for (let tool of toggleableButtons) { @@ -188,9 +196,6 @@ OptionsPanel.prototype = { let toolsNotSupportedLabel = this.panelDoc.getElementById("tools-not-supported-label"); let atleastOneToolNotSupported = false; - defaultToolsBox.textContent = ""; - additionalToolsBox.textContent = ""; - let onCheckboxClick = function(id) { let toolDefinition = gDevTools._tools.get(id); // Set the kill switch pref boolean to true @@ -204,21 +209,34 @@ OptionsPanel.prototype = { }; let createToolCheckbox = tool => { - let checkbox = this.panelDoc.createElement("checkbox"); - checkbox.setAttribute("id", tool.id); - checkbox.setAttribute("tooltiptext", tool.tooltip || ""); + let checkboxLabel = this.panelDoc.createElement("label"); + let checkboxInput = this.panelDoc.createElement("input"); + checkboxInput.setAttribute("type", "checkbox"); + checkboxInput.setAttribute("id", tool.id); + checkboxInput.setAttribute("title", tool.tooltip || ""); + + let checkboxSpanLabel = this.panelDoc.createElement("span"); if (tool.isTargetSupported(this.target)) { - checkbox.setAttribute("label", tool.label); + checkboxSpanLabel.textContent = tool.label; } else { atleastOneToolNotSupported = true; - checkbox.setAttribute("label", - l10n("options.toolNotSupportedMarker", tool.label)); - checkbox.setAttribute("unsupported", ""); + checkboxSpanLabel.textContent = l10n( + "options.toolNotSupportedMarker", tool.label); + checkboxInput.setAttribute("data-unsupported", "true"); + checkboxInput.setAttribute("disabled", "true"); } - checkbox.setAttribute("checked", InfallibleGetBoolPref(tool.visibilityswitch)); - checkbox.addEventListener("command", onCheckboxClick.bind(checkbox, tool.id)); - return checkbox; + + if (InfallibleGetBoolPref(tool.visibilityswitch)) { + checkboxInput.setAttribute("checked", "true"); + } + + checkboxInput.addEventListener("change", + onCheckboxClick.bind(checkboxInput, tool.id)); + + checkboxLabel.appendChild(checkboxInput); + checkboxLabel.appendChild(checkboxSpanLabel); + return checkboxLabel; }; // Populating the default tools lists @@ -239,7 +257,6 @@ OptionsPanel.prototype = { if (!atleastOneAddon) { additionalToolsBox.style.display = "none"; - additionalToolsBox.previousSibling.style.display = "none"; } if (!atleastOneToolNotSupported) { @@ -251,13 +268,24 @@ OptionsPanel.prototype = { setupThemeList: function() { let themeBox = this.panelDoc.getElementById("devtools-theme-box"); - themeBox.textContent = ""; let createThemeOption = theme => { - let radio = this.panelDoc.createElement("radio"); - radio.setAttribute("value", theme.id); - radio.setAttribute("label", theme.label); - return radio; + let inputLabel = this.panelDoc.createElement("label"); + let inputRadio = this.panelDoc.createElement("input"); + inputRadio.setAttribute("type", "radio"); + inputRadio.setAttribute("value", theme.id); + inputRadio.setAttribute("name", "devtools-theme-item"); + inputRadio.addEventListener("change", function(e) { + setPrefAndEmit(themeBox.getAttribute("data-pref"), + e.target.value); + }); + + let inputSpanLabel = this.panelDoc.createElement("span"); + inputSpanLabel.textContent = theme.label; + inputLabel.appendChild(inputRadio); + inputLabel.appendChild(inputSpanLabel); + + return inputLabel; }; // Populating the default theme list @@ -270,70 +298,76 @@ OptionsPanel.prototype = { }, populatePreferences: function() { - let prefCheckboxes = this.panelDoc.querySelectorAll("checkbox[data-pref]"); - for (let checkbox of prefCheckboxes) { - checkbox.checked = GetPref(checkbox.getAttribute("data-pref")); - checkbox.addEventListener("command", function() { - setPrefAndEmit(this.getAttribute("data-pref"), this.checked); - }.bind(checkbox)); - } - let prefRadiogroups = this.panelDoc.querySelectorAll("radiogroup[data-pref]"); - for (let radiogroup of prefRadiogroups) { - let selectedValue = GetPref(radiogroup.getAttribute("data-pref")); - for (let radio of radiogroup.childNodes) { - radiogroup.selectedIndex = -1; - if (radio.getAttribute("value") == selectedValue) { - radiogroup.selectedItem = radio; - break; - } + let prefCheckboxes = this.panelDoc.querySelectorAll( + "input[type=checkbox][data-pref]"); + for (let prefCheckbox of prefCheckboxes) { + if (GetPref(prefCheckbox.getAttribute("data-pref"))) { + prefCheckbox.setAttribute("checked", true); } - radiogroup.addEventListener("select", function() { - setPrefAndEmit(this.getAttribute("data-pref"), this.selectedItem.getAttribute("value")); - }.bind(radiogroup)); + prefCheckbox.addEventListener("change", function(e) { + let checkbox = e.target; + setPrefAndEmit(checkbox.getAttribute("data-pref"), checkbox.checked); + }); } - let prefMenulists = this.panelDoc.querySelectorAll("menulist[data-pref]"); - for (let menulist of prefMenulists) { - let pref = GetPref(menulist.getAttribute("data-pref")); - let menuitems = menulist.querySelectorAll("menuitem"); - for (let menuitem of menuitems) { - let value = menuitem.value; - if (value == pref) { // non strict check to allow int values. - menulist.selectedItem = menuitem; - break; + // Themes radio inputs are handled in setupThemeList + let prefRadiogroups = this.panelDoc.querySelectorAll( + ".radiogroup[data-pref]:not(#devtools-theme-box)"); + for (let radioGroup of prefRadiogroups) { + let selectedValue = GetPref(radioGroup.getAttribute("data-pref")); + + for (let radioInput of radioGroup.querySelectorAll("input[type=radio]")) { + if (radioInput.getAttribute("value") == selectedValue) { + radioInput.setAttribute("checked", true); } + + radioInput.addEventListener("change", function(e) { + setPrefAndEmit(radioGroup.getAttribute("data-pref"), + e.target.value); + }); } - menulist.addEventListener("command", function() { - setPrefAndEmit(this.getAttribute("data-pref"), this.value); - }.bind(menulist)); + } + let prefSelects = this.panelDoc.querySelectorAll("select[data-pref]"); + for (let prefSelect of prefSelects) { + let pref = GetPref(prefSelect.getAttribute("data-pref")); + let options = [...prefSelect.options]; + options.some(function(option) { + let value = option.value; + // non strict check to allow int values. + if (value == pref) { + prefSelect.selectedIndex = options.indexOf(option); + return true; + } + }); + + prefSelect.addEventListener("change", function(e) { + let select = e.target; + setPrefAndEmit(select.getAttribute("data-pref"), + select.options[select.selectedIndex].value); + }); } if (this.target.activeTab) { - return this.target.client.attachTab(this.target.activeTab._actor).then(([response,client]) => { + return this.target.client.attachTab(this.target.activeTab._actor).then(([response, client]) => { this._origJavascriptEnabled = !response.javascriptEnabled; this.disableJSNode.checked = this._origJavascriptEnabled; - this.disableJSNode.addEventListener("click", this._disableJSClicked, false); + this.disableJSNode.addEventListener("click", + this._disableJSClicked, false); }); - } else { - this.disableJSNode.hidden = true; - } - }, - - updateDefaultTheme: function() { - // Make sure a theme is set in case the previous one coming from - // an extension isn't available anymore. - let themeBox = this.panelDoc.getElementById("devtools-theme-box"); - if (themeBox.selectedIndex == -1) { - themeBox.selectedItem = themeBox.querySelector("[value=light]"); } + this.disableJSNode.hidden = true; }, updateCurrentTheme: function() { let currentTheme = GetPref("devtools.theme"); let themeBox = this.panelDoc.getElementById("devtools-theme-box"); - let themeOption = themeBox.querySelector("[value=" + currentTheme + "]"); + let themeRadioInput = themeBox.querySelector(`[value=${currentTheme}]`); - if (themeOption) { - themeBox.selectedItem = themeOption; + if (themeRadioInput) { + themeRadioInput.click(); + } else { + // If the current theme does not exist anymore, switch to light theme + let lightThemeInputRadio = themeBox.querySelector("[value=light]"); + lightThemeInputRadio.click(); } }, diff --git a/devtools/client/framework/toolbox-options.xhtml b/devtools/client/framework/toolbox-options.xhtml new file mode 100644 index 000000000000..84103618312b --- /dev/null +++ b/devtools/client/framework/toolbox-options.xhtml @@ -0,0 +1,191 @@ + + + + %toolboxDTD; +]> + + + Toolbox option + + +