diff --git a/browser/devtools/highlighter/TreePanel.jsm b/browser/devtools/highlighter/TreePanel.jsm index e18196b0c8e..4a3b39f57d8 100644 --- a/browser/devtools/highlighter/TreePanel.jsm +++ b/browser/devtools/highlighter/TreePanel.jsm @@ -141,7 +141,7 @@ TreePanel.prototype = { this.treeLoaded = true; this.treeIFrame.addEventListener("click", this.onTreeClick.bind(this), false); this.treeIFrame.addEventListener("dblclick", this.onTreeDblClick.bind(this), false); - this.treeIFrame.addEventListener("keypress", this.IUI, false); + this.treeIFrame.focus(); delete this.initializingTreePanel; Services.obs.notifyObservers(null, this.IUI.INSPECTOR_NOTIFICATIONS.TREEPANELREADY, null); @@ -233,7 +233,7 @@ TreePanel.prototype = { } catch(e) { treeBox.height = 112; } - + treeBox.minHeight = 64; treeBox.flex = 1; toolbarParent.insertBefore(treeBox, toolbar); @@ -466,9 +466,6 @@ TreePanel.prototype = { editorInput.value = aAttrVal; editorInput.select(); - // remove tree key navigation events - this.treeIFrame.removeEventListener("keypress", this.IUI, false); - // listen for editor specific events this.bindEditorEvent(editor, "click", function(aEvent) { aEvent.stopPropagation(); @@ -561,9 +558,6 @@ TreePanel.prototype = { this.editingContext = null; this.editingEvents = {}; - // re-add navigation listener - this.treeIFrame.addEventListener("keypress", this.IUI, false); - // event notification Services.obs.notifyObservers(null, this.IUI.INSPECTOR_NOTIFICATIONS.EDITOR_CLOSED, null); @@ -700,7 +694,6 @@ TreePanel.prototype = { } if (this.treeIFrame) { - this.treeIFrame.removeEventListener("keypress", this.IUI, false); this.treeIFrame.removeEventListener("dblclick", this.onTreeDblClick, false); this.treeIFrame.removeEventListener("click", this.onTreeClick, false); let parent = this.treeIFrame.parentNode; diff --git a/browser/devtools/highlighter/highlighter.jsm b/browser/devtools/highlighter/highlighter.jsm index c3e3fd616de..0dbf9da9020 100644 --- a/browser/devtools/highlighter/highlighter.jsm +++ b/browser/devtools/highlighter/highlighter.jsm @@ -756,69 +756,6 @@ Highlighter.prototype = { aEvent.preventDefault(); aEvent.stopPropagation(); break; - case this.chromeWin.KeyEvent.DOM_VK_LEFT: - let node; - if (this.node) { - node = this.node.parentNode; - } else { - node = this.defaultSelection; - } - if (node && this.isNodeHighlightable(node)) { - this.highlight(node); - } - aEvent.preventDefault(); - aEvent.stopPropagation(); - break; - case this.chromeWin.KeyEvent.DOM_VK_RIGHT: - if (this.node) { - // Find the first child that is highlightable. - for (let i = 0; i < this.node.childNodes.length; i++) { - node = this.node.childNodes[i]; - if (node && this.isNodeHighlightable(node)) { - break; - } - } - } else { - node = this.defaultSelection; - } - if (node && this.isNodeHighlightable(node)) { - this.highlight(node, true); - } - aEvent.preventDefault(); - aEvent.stopPropagation(); - break; - case this.chromeWin.KeyEvent.DOM_VK_UP: - if (this.node) { - // Find a previous sibling that is highlightable. - node = this.node.previousSibling; - while (node && !this.isNodeHighlightable(node)) { - node = node.previousSibling; - } - } else { - node = this.defaultSelection; - } - if (node && this.isNodeHighlightable(node)) { - this.highlight(node, true); - } - aEvent.preventDefault(); - aEvent.stopPropagation(); - break; - case this.chromeWin.KeyEvent.DOM_VK_DOWN: - if (this.node) { - // Find a next sibling that is highlightable. - node = this.node.nextSibling; - while (node && !this.isNodeHighlightable(node)) { - node = node.nextSibling; - } - } else { - node = this.defaultSelection; - } - if (node && this.isNodeHighlightable(node)) { - this.highlight(node, true); - } - aEvent.preventDefault(); - aEvent.stopPropagation(); - break; } } }, diff --git a/browser/devtools/highlighter/inspector.jsm b/browser/devtools/highlighter/inspector.jsm index 1fe6d54f9c0..e851b8598fa 100644 --- a/browser/devtools/highlighter/inspector.jsm +++ b/browser/devtools/highlighter/inspector.jsm @@ -286,6 +286,8 @@ InspectorUI.prototype = { // initialize the highlighter this.highlighter = new Highlighter(this.chromeWin); + + this.setupNavigationKeys(); this.highlighterReady(); }, @@ -349,6 +351,36 @@ InspectorUI.prototype = { } }, + /** + * Browse nodes according to the breadcrumbs layout, only for some specific + * elements of the UI. + */ + setupNavigationKeys: function IUI_setupNavigationKeys() + { + // UI elements that are arrow keys sensitive: + // - highlighter veil; + // - content window (when the highlighter `veil is pointer-events:none`; + // - the Inspector toolbar. + + this.onKeypress = this.onKeypress.bind(this); + + this.highlighter.highlighterContainer.addEventListener("keypress", + this.onKeypress, true); + this.win.addEventListener("keypress", this.onKeypress, true); + this.toolbar.addEventListener("keypress", this.onKeypress, true); + }, + + /** + * Remove the event listeners for the arrowkeys. + */ + removeNavigationKeys: function IUI_removeNavigationKeys() + { + this.highlighter.highlighterContainer.removeEventListener("keypress", + this.onKeypress, true); + this.win.removeEventListener("keypress", this.onKeypress, true); + this.toolbar.removeEventListener("keypress", this.onKeypress, true); + }, + /** * Close inspector UI and associated panels. Unhighlight and stop inspecting. * Remove event listeners for document scrolling, resize, @@ -375,6 +407,8 @@ InspectorUI.prototype = { this.closing = true; this.toolbar.hidden = true; + this.removeNavigationKeys(); + this.progressListener.destroy(); delete this.progressListener; @@ -592,6 +626,14 @@ InspectorUI.prototype = { false); } break; + case "keypress": + switch (event.keyCode) { + case this.chromeWin.KeyEvent.DOM_VK_ESCAPE: + this.closeInspectorUI(false); + event.preventDefault(); + event.stopPropagation(); + break; + } case "pagehide": win = event.originalTarget.defaultView; // Skip iframes/frames. @@ -611,18 +653,66 @@ InspectorUI.prototype = { false); } break; - case "keypress": - switch (event.keyCode) { - case this.chromeWin.KeyEvent.DOM_VK_ESCAPE: - this.closeInspectorUI(false); - event.preventDefault(); - event.stopPropagation(); - break; + } + }, + + /* + * handles "keypress" events. + */ + onKeypress: function IUI_onKeypress(event) + { + let node = null; + let bc = this.breadcrumbs; + switch (event.keyCode) { + case this.chromeWin.KeyEvent.DOM_VK_LEFT: + if (bc.currentIndex != 0) + node = bc.nodeHierarchy[bc.currentIndex - 1].node; + if (node && this.highlighter.isNodeHighlightable(node)) + this.highlighter.highlight(node); + event.preventDefault(); + event.stopPropagation(); + break; + case this.chromeWin.KeyEvent.DOM_VK_RIGHT: + if (bc.currentIndex < bc.nodeHierarchy.length - 1) + node = bc.nodeHierarchy[bc.currentIndex + 1].node; + if (node && this.highlighter.isNodeHighlightable(node)) { + this.highlighter.highlight(node); } + event.preventDefault(); + event.stopPropagation(); + break; + case this.chromeWin.KeyEvent.DOM_VK_UP: + if (this.selection) { + // Find a previous sibling that is highlightable. + node = this.selection.previousSibling; + while (node && !this.highlighter.isNodeHighlightable(node)) { + node = node.previousSibling; + } + } + if (node && this.highlighter.isNodeHighlightable(node)) { + this.highlighter.highlight(node, true); + } + event.preventDefault(); + event.stopPropagation(); + break; + case this.chromeWin.KeyEvent.DOM_VK_DOWN: + if (this.selection) { + // Find a next sibling that is highlightable. + node = this.selection.nextSibling; + while (node && !this.highlighter.isNodeHighlightable(node)) { + node = node.nextSibling; + } + } + if (node && this.highlighter.isNodeHighlightable(node)) { + this.highlighter.highlight(node, true); + } + event.preventDefault(); + event.stopPropagation(); break; } }, + ///////////////////////////////////////////////////////////////////////// //// CssRuleView methods @@ -1720,6 +1810,8 @@ HTMLBreadcrumbs.prototype = { } if (aIdx > -1) { this.nodeHierarchy[aIdx].button.setAttribute("checked", "true"); + if (this.hadFocus) + this.nodeHierarchy[aIdx].button.focus(); } this.currentIndex = aIdx; }, @@ -1895,6 +1987,10 @@ HTMLBreadcrumbs.prototype = { { this.menu.hidePopup(); + let cmdDispatcher = this.IUI.chromeDoc.commandDispatcher; + this.hadFocus = (cmdDispatcher.focusedElement && + cmdDispatcher.focusedElement.parentNode == this.container); + let selection = this.IUI.selection; let idx = this.indexOf(selection); @@ -1924,7 +2020,8 @@ HTMLBreadcrumbs.prototype = { // Make sure the selected node and its neighbours are visible. this.scroll(); - } + }, + } ///////////////////////////////////////////////////////////////////////// diff --git a/browser/devtools/shared/SplitView.jsm b/browser/devtools/shared/SplitView.jsm index 6262ed71331..0aea4c7b169 100644 --- a/browser/devtools/shared/SplitView.jsm +++ b/browser/devtools/shared/SplitView.jsm @@ -69,11 +69,6 @@ function SplitView(aRoot) this._mql = aRoot.ownerDocument.defaultView.matchMedia(LANDSCAPE_MEDIA_QUERY); - this._filter = aRoot.querySelector(".splitview-filter"); - if (this._filter) { - this._setupFilterBox(); - } - // items list focus and search-on-type handling this._nav.addEventListener("keydown", function onKeyCatchAll(aEvent) { function getFocusedItemWithin(nav) { @@ -116,13 +111,6 @@ function SplitView(aRoot) } return false; } - - // search-on-type when any non-whitespace character is pressed while list - // has the focus - if (this._filter && - !/\s/.test(String.fromCharCode(aEvent.which))) { - this._filter.focus(); - } }.bind(this), false); } @@ -227,10 +215,6 @@ SplitView.prototype = { * Called when the item is hidden/inactive. * - function(summary, details, data) onDestroy * Called when the item has been removed. - * - function(summary, details, data, query) onFilterBy - * Called when the user performs a filtering search. - * If the function returns false, the item does not match query - * string and will be hidden. * - object data * Object to pass to the callbacks above. * - number ordinal @@ -327,71 +311,6 @@ SplitView.prototype = { } }, - /** - * Filter items by given string. - * Matching is performed on every item by calling onFilterBy when defined - * and then by searching aQuery in the summary element's text item. - * Non-matching item is hidden. - * - * If no item matches, 'splitview-all-filtered' class is set on the filter - * input element and the splitview-nav element. - * - * @param string aQuery - * The query string. Use null to reset (no filter). - * @return number - * The number of filtered (non-matching) item. - */ - filterItemsBy: function ASV_filterItemsBy(aQuery) - { - if (!this._nav.hasChildNodes()) { - return 0; - } - if (aQuery) { - aQuery = aQuery.trim(); - } - if (!aQuery) { - for (let i = 0; i < this._nav.childNodes.length; ++i) { - this._nav.childNodes[i].classList.remove("splitview-filtered"); - } - this._filter.classList.remove("splitview-all-filtered"); - this._nav.classList.remove("splitview-all-filtered"); - return 0; - } - - let count = 0; - let filteredCount = 0; - for (let i = 0; i < this._nav.childNodes.length; ++i) { - let summary = this._nav.childNodes[i]; - - let matches = false; - let binding = summary.getUserData(BINDING_USERDATA); - if (binding.onFilterBy) { - matches = binding.onFilterBy(summary, binding._details, binding.data, aQuery); - } - if (!matches) { // try text content - let content = summary.textContent.toUpperCase(); - matches = (content.indexOf(aQuery.toUpperCase()) > -1); - } - - count++; - if (!matches) { - summary.classList.add("splitview-filtered"); - filteredCount++; - } else { - summary.classList.remove("splitview-filtered"); - } - } - - if (count > 0 && filteredCount == count) { - this._filter.classList.add("splitview-all-filtered"); - this._nav.classList.add("splitview-all-filtered"); - } else { - this._filter.classList.remove("splitview-all-filtered"); - this._nav.classList.remove("splitview-all-filtered"); - } - return filteredCount; - }, - /** * Set the item's CSS class name. * This sets the class on both the summary and details elements, retaining @@ -415,39 +334,4 @@ SplitView.prototype = { viewSpecific = viewSpecific ? viewSpecific.join(" ") : ""; binding._details.className = viewSpecific + " " + aClassName; }, - - /** - * Set up filter search box. - */ - _setupFilterBox: function ASV__setupFilterBox() - { - let clearFilter = function clearFilter(aEvent) { - this._filter.value = ""; - this.filterItemsBy(""); - return false; - }.bind(this); - - this._filter.addEventListener("command", function onFilterInput(aEvent) { - this.filterItemsBy(this._filter.value); - }.bind(this), false); - - this._filter.addEventListener("keyup", function onFilterKeyUp(aEvent) { - if (aEvent.keyCode == aEvent.DOM_VK_ESCAPE) { - clearFilter(); - } - if (aEvent.keyCode == aEvent.DOM_VK_ENTER || - aEvent.keyCode == aEvent.DOM_VK_RETURN) { - // autofocus matching item if there is only one - let matches = this._nav.querySelectorAll("* > li:not(.splitview-filtered)"); - if (matches.length == 1) { - this.activeSummary = matches[0]; - } - } - }.bind(this), false); - - let clearButtons = this._root.querySelectorAll(".splitview-filter-clearButton"); - for (let i = 0; i < clearButtons.length; ++i) { - clearButtons[i].addEventListener("click", clearFilter, false); - } - } }; diff --git a/browser/devtools/shared/splitview.css b/browser/devtools/shared/splitview.css index 1bc27022510..4a6822d3a52 100644 --- a/browser/devtools/shared/splitview.css +++ b/browser/devtools/shared/splitview.css @@ -58,6 +58,7 @@ box, .splitview-controller { min-height: 3em; max-height: 14em; + max-width: 400px; } .splitview-nav { @@ -123,4 +124,8 @@ ol.splitview-nav > li.splitview-filtered { .splitview-portrait-resizer { display: -moz-box; } + + .splitview-controller { + max-width: none; + } } diff --git a/browser/devtools/sourceeditor/orion/README b/browser/devtools/sourceeditor/orion/README index dc332229479..8b962c00848 100644 --- a/browser/devtools/sourceeditor/orion/README +++ b/browser/devtools/sourceeditor/orion/README @@ -15,6 +15,8 @@ Orion version: git clone from 2011-12-09 see https://bugs.eclipse.org/bugs/show_bug.cgi?id=366312 + patch for Mozilla Bug 711737 - Orion should support all the CSS properties from CSS1, CSS2, CSS2.1 and CSS3 https://bugzilla.mozilla.org/show_bug.cgi?id=711737 + + patch for Mozilla Bug 719028 - Style Editor does not highlight a few CSS2.0 and CSS3 properties + https://bugzilla.mozilla.org/show_bug.cgi?id=719028 # License diff --git a/browser/devtools/sourceeditor/orion/orion.js b/browser/devtools/sourceeditor/orion/orion.js index d46b257a3c4..c968b036ac1 100644 --- a/browser/devtools/sourceeditor/orion/orion.js +++ b/browser/devtools/sourceeditor/orion/orion.js @@ -10,6 +10,7 @@ * Felipe Heidrich (IBM Corporation) - initial API and implementation * Silenio Quarti (IBM Corporation) - initial API and implementation * Mihai Sucan (Mozilla Foundation) - fix for Bug#364214 + * Alex Lakatos (Mozilla Contributor) - fix for Mozilla Bug#719028 */ /*global window */ @@ -10488,13 +10489,14 @@ define(['orion/textview/annotations'], function(mAnnotations) { "column-rule-color", "column-rule-style", "column-rule-width", "column-span", "column-width", "columns", "content", "counter-increment", "counter-reset", "crop", "cue", "cue-after", "cue-before", "cursor", "direction", "display", "dominant-baseline", "drop-initial-after-adjust", "drop-initial-after-align", "drop-initial-before-adjust", "drop-initial-before-align", "drop-initial-size", - "drop-initial-value", "elevation", "empty-cells", "fit", "fit-position", "float", "float-offset", "font", "font-family", "font-size", - "font-size-adjust", "font-stretch", "font-style", "font-variant", "font-weight", "grid-columns", "grid-rows", "hanging-punctuation", - "height", "hyphenate-after", "hyphenate-before", "hyphenate-character", "hyphenate-lines", "hyphenate-resource", "hyphens", "icon", - "image-orientation", "image-rendering", "image-resolution", "inline-box-align", "left", "letter-spacing", "line-height", - "line-stacking", "line-stacking-ruby", "line-stacking-shift", "line-stacking-strategy", "list-style", "list-style-image", - "list-style-position", "list-style-type", "margin", "margin-bottom", "margin-left", "margin-right", "margin-top", "mark", "mark-after", - "mark-before", "marks", "marquee-direction", "marquee-loop", "marquee-play-count", "marquee-speed", "marquee-style", "max-height", + "drop-initial-value", "elevation", "empty-cells", "fit", "fit-position", "flex-align", "flex-flow", "flex-inline-pack", "flex-order", + "flex-pack", "float", "float-offset", "font", "font-family", "font-size", "font-size-adjust", "font-stretch", "font-style", + "font-variant", "font-weight", "grid-columns", "grid-rows", "hanging-punctuation", "height", "hyphenate-after", + "hyphenate-before", "hyphenate-character", "hyphenate-lines", "hyphenate-resource", "hyphens", "icon", "image-orientation", + "image-rendering", "image-resolution", "inline-box-align", "left", "letter-spacing", "line-height", "line-stacking", + "line-stacking-ruby", "line-stacking-shift", "line-stacking-strategy", "list-style", "list-style-image", "list-style-position", + "list-style-type", "margin", "margin-bottom", "margin-left", "margin-right", "margin-top", "mark", "mark-after", "mark-before", + "marker-offset", "marks", "marquee-direction", "marquee-loop", "marquee-play-count", "marquee-speed", "marquee-style", "max-height", "max-width", "min-height", "min-width", "move-to", "nav-down", "nav-index", "nav-left", "nav-right", "nav-up", "opacity", "orphans", "outline", "outline-color", "outline-offset", "outline-style", "outline-width", "overflow", "overflow-style", "overflow-x", "overflow-y", "padding", "padding-bottom", "padding-left", "padding-right", "padding-top", "page", "page-break-after", "page-break-before", diff --git a/browser/devtools/styleeditor/StyleEditor.jsm b/browser/devtools/styleeditor/StyleEditor.jsm index 092e2bd8983..06cf249ae9d 100644 --- a/browser/devtools/styleeditor/StyleEditor.jsm +++ b/browser/devtools/styleeditor/StyleEditor.jsm @@ -229,6 +229,8 @@ StyleEditor.prototype = { }; sourceEditor.init(aElement, config, function onSourceEditorReady() { + setupBracketCompletion(sourceEditor); + sourceEditor.addEventListener(SourceEditor.EVENTS.TEXT_CHANGED, function onTextChanged(aEvent) { this.updateStyleSheet(); @@ -1132,3 +1134,48 @@ function repeat(aText, aCount) { return (new Array(aCount + 1)).join(aText); } + +/** + * Set up bracket completion on a given SourceEditor. + * This automatically closes the following CSS brackets: "{", "(", "[" + * + * @param SourceEditor aSourceEditor + */ +function setupBracketCompletion(aSourceEditor) +{ + let editorElement = aSourceEditor.editorElement; + let pairs = { + 123: { // { + closeString: "}", + closeKeyCode: Ci.nsIDOMKeyEvent.DOM_VK_CLOSE_BRACKET + }, + 40: { // ( + closeString: ")", + closeKeyCode: Ci.nsIDOMKeyEvent.DOM_VK_0 + }, + 91: { // [ + closeString: "]", + closeKeyCode: Ci.nsIDOMKeyEvent.DOM_VK_CLOSE_BRACKET + }, + }; + + editorElement.addEventListener("keypress", function onKeyPress(aEvent) { + let pair = pairs[aEvent.charCode]; + if (!pair) { + return true; + } + + // We detected an open bracket, sending closing character + let keyCode = pair.closeKeyCode; + let charCode = pair.closeString.charCodeAt(0); + let modifiers = 0; + let utils = editorElement.ownerDocument.defaultView. + QueryInterface(Ci.nsIInterfaceRequestor). + getInterface(Ci.nsIDOMWindowUtils); + let handled = utils.sendKeyEvent("keydown", keyCode, 0, modifiers); + utils.sendKeyEvent("keypress", 0, charCode, modifiers, !handled); + utils.sendKeyEvent("keyup", keyCode, 0, modifiers); + // and rewind caret + aSourceEditor.setCaretOffset(aSourceEditor.getCaretOffset() - 1); + }, false); +} diff --git a/browser/devtools/styleeditor/StyleEditorChrome.jsm b/browser/devtools/styleeditor/StyleEditorChrome.jsm index 097fda5746b..ca57f0208ce 100644 --- a/browser/devtools/styleeditor/StyleEditorChrome.jsm +++ b/browser/devtools/styleeditor/StyleEditorChrome.jsm @@ -402,7 +402,9 @@ StyleEditorChrome.prototype = { this._view.setItemClassName(summary, aEditor.flags); - text(summary, ".stylesheet-name", aEditor.getFriendlyName()); + let label = summary.querySelector(".stylesheet-name > label"); + label.setAttribute("value", aEditor.getFriendlyName()); + text(summary, ".stylesheet-title", aEditor.styleSheet.title || ""); text(summary, ".stylesheet-rule-count", PluralForm.get(ruleCount, _("ruleCount.label")).replace("#1", ruleCount)); diff --git a/browser/devtools/styleeditor/styleeditor.css b/browser/devtools/styleeditor/styleeditor.css index 64c7ae4b420..b255ba7e9ff 100644 --- a/browser/devtools/styleeditor/styleeditor.css +++ b/browser/devtools/styleeditor/styleeditor.css @@ -20,6 +20,7 @@ * * Contributor(s): * Cedric Vivier (original author) + * Paul Rouget * * Alternatively, the contents of this file may be used under the terms of * either the GNU General Public License Version 2 or later (the "GPL"), or @@ -64,22 +65,17 @@ li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message { } .stylesheet-name { - /* clip the text at the beginning */ - display: -moz-box; - direction: rtl; - text-align: left; - overflow: hidden; + outline: none; +} + +.stylesheet-name > label { + cursor: pointer; } .splitview-nav > li > hgroup.stylesheet-info { -moz-box-pack: center; } -.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before, -.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after { - content: "* "; -} - .stylesheet-enabled { display: -moz-box; } @@ -107,7 +103,7 @@ li:hover > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton { .stylesheet-more { -moz-box-flex: 1; - -moz-box-direction: reverse; + -moz-box-pack: end; } .splitview-nav > li > hgroup.stylesheet-info { diff --git a/browser/devtools/styleeditor/styleeditor.xul b/browser/devtools/styleeditor/styleeditor.xul index b29f64d4079..f10ae6deda2 100644 --- a/browser/devtools/styleeditor/styleeditor.xul +++ b/browser/devtools/styleeditor/styleeditor.xul @@ -54,8 +54,19 @@ persist="screenX screenY width height sizemode"> + + + + + + + + - + - - - +

    &noStyleSheet.label;

    @@ -84,13 +91,6 @@ class="style-editor-newButton">&noStyleSheet-tip-action.label; &noStyleSheet-tip-end.label;

    -
    -

    &searchNoResults.label;

    -

    - &searchClearButton.label; -

    -
    @@ -101,7 +101,7 @@ title="&visibilityToggle.tooltip;" accesskey="&saveButton.accesskey;">
    -

    +

    @@ -116,12 +116,12 @@ + dir="bottom" + element="splitview-resizer-target"/> + element="splitview-resizer-target"/> diff --git a/browser/devtools/styleeditor/test/Makefile.in b/browser/devtools/styleeditor/test/Makefile.in index 28db3bfd027..c739ca0e743 100644 --- a/browser/devtools/styleeditor/test/Makefile.in +++ b/browser/devtools/styleeditor/test/Makefile.in @@ -53,7 +53,6 @@ _BROWSER_TEST_FILES = \ browser_styleeditor_pretty.js \ browser_styleeditor_readonly.js \ browser_styleeditor_reopen.js \ - browser_styleeditor_sv_filter.js \ browser_styleeditor_sv_keynav.js \ browser_styleeditor_sv_resize.js \ four.html \ diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_init.js b/browser/devtools/styleeditor/test/browser_styleeditor_init.js index f810b85d6d4..da9c4115a8d 100644 --- a/browser/devtools/styleeditor/test/browser_styleeditor_init.js +++ b/browser/devtools/styleeditor/test/browser_styleeditor_init.js @@ -85,7 +85,7 @@ function testFirstStyleSheetEditor(aChrome, aEditor) ok(!summary.classList.contains("inline"), "first stylesheet UI does not have INLINE class"); - let name = summary.querySelector(".stylesheet-name").textContent; + let name = summary.querySelector(".stylesheet-name > label").getAttribute("value"); is(name, "simple.css", "first stylesheet's name is `simple.css`"); @@ -113,7 +113,7 @@ function testSecondStyleSheetEditor(aChrome, aEditor) ok(summary.classList.contains("inline"), "second stylesheet UI has INLINE class"); - let name = summary.querySelector(".stylesheet-name").textContent; + let name = summary.querySelector(".stylesheet-name > label").getAttribute("value"); ok(/^<.*>$/.test(name), "second stylesheet's name is surrounded by `<>`"); diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_new.js b/browser/devtools/styleeditor/test/browser_styleeditor_new.js index c40215d0bdb..fea602970b6 100644 --- a/browser/devtools/styleeditor/test/browser_styleeditor_new.js +++ b/browser/devtools/styleeditor/test/browser_styleeditor_new.js @@ -5,7 +5,7 @@ const TESTCASE_URI = TEST_BASE + "simple.html"; const TRANSITION_CLASS = "moz-styleeditor-transitioning"; - +const TESTCASE_CSS_SOURCE = "body{background-color:red;"; function test() { @@ -79,9 +79,13 @@ function testEditorAdded(aChrome, aEditor) is(computedStyle.backgroundColor, "rgb(255, 255, 255)", "content's background color is initially white"); - for each (let c in "body{background-color:red;}") { + for each (let c in TESTCASE_CSS_SOURCE) { EventUtils.synthesizeKey(c, {}, gChromeWindow); } + + is(aEditor.sourceEditor.getText(), TESTCASE_CSS_SOURCE + "}", + "rule bracket has been auto-closed"); + }, gChromeWindow) ; }, diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_sv_filter.js b/browser/devtools/styleeditor/test/browser_styleeditor_sv_filter.js deleted file mode 100644 index c41feb6a9b7..00000000000 --- a/browser/devtools/styleeditor/test/browser_styleeditor_sv_filter.js +++ /dev/null @@ -1,101 +0,0 @@ -/* vim: set ts=2 et sw=2 tw=80: */ -/* Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ */ - -const TESTCASE_URI = TEST_BASE + "simple.html"; - - -function test() -{ - waitForExplicitFinish(); - - addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) { - aChrome.addChromeListener({ - onContentAttach: run - }); - if (aChrome.isContentAttached) { - run(aChrome); - } - }); - - content.location = TESTCASE_URI; -} - -function getFilteredItemsCount(nav) -{ - let matches = nav.querySelectorAll("*.splitview-filtered"); - return matches ? matches.length : 0; -} - -function run(aChrome) -{ - aChrome.editors[0].addActionListener({onAttach: onFirstEditorAttach}); - aChrome.editors[1].addActionListener({onAttach: onSecondEditorAttach}); -} - -function onFirstEditorAttach(aEditor) -{ - let filter = gChromeWindow.document.querySelector(".splitview-filter"); - // force the command event on input since it is not possible to disable - // the search textbox's timeout. - let forceCommandEvent = function forceCommandEvent() { - let evt = gChromeWindow.document.createEvent("XULCommandEvent"); - evt.initCommandEvent("command", true, true, gChromeWindow, 0, false, false, - false, false, null); - filter.dispatchEvent(evt); - } - filter.addEventListener("input", forceCommandEvent, false); - - let nav = gChromeWindow.document.querySelector(".splitview-nav"); - nav.focus(); - - is(getFilteredItemsCount(nav), 0, - "there is 0 filtered item initially"); - - waitForFocus(function () { - // Search [s] (type-on-search since we focused nav above - not filter directly) - EventUtils.synthesizeKey("s", {}, gChromeWindow); - - // the search space is "simple.css" and "inline stylesheet #1" (2 sheets) - is(getFilteredItemsCount(nav), 0, - "there is 0 filtered item if searching for 's'"); - - EventUtils.synthesizeKey("i", {}, gChromeWindow); // Search [si] - - is(getFilteredItemsCount(nav), 1, // inline stylesheet is filtered - "there is 1 filtered item if searching for 's'"); - - // use uppercase to check that filtering is case-insensitive - EventUtils.synthesizeKey("X", {}, gChromeWindow); // Search [siX] - is(getFilteredItemsCount(nav), 2, - "there is 2 filtered items if searching for 's'"); // no match - - // clear the search - EventUtils.synthesizeKey("VK_ESCAPE", {}, gChromeWindow); - - is(filter.value, "", - "filter is back to empty"); - is(getFilteredItemsCount(nav), 0, - "there is 0 filtered item when filter is empty again"); - - for each (let c in "inline") { - EventUtils.synthesizeKey(c, {}, gChromeWindow); - } - - is(getFilteredItemsCount(nav), 1, // simple.css is filtered - "there is 1 filtered item if searching for 'inline'"); - - // auto-select the only result (enter the editor) - EventUtils.synthesizeKey("VK_ENTER", {}, gChromeWindow); - - filter.removeEventListener("input", forceCommandEvent, false); - }, gChromeWindow); -} - -function onSecondEditorAttach(aEditor) -{ - ok(aEditor.sourceEditor.hasFocus(), - "second editor has been selected and focused automatically."); - - finish(); -} diff --git a/browser/devtools/styleinspector/CssRuleView.jsm b/browser/devtools/styleinspector/CssRuleView.jsm index 50d28596b68..c12a160e216 100644 --- a/browser/devtools/styleinspector/CssRuleView.jsm +++ b/browser/devtools/styleinspector/CssRuleView.jsm @@ -1310,6 +1310,7 @@ InplaceEditor.prototype = { prevent = true; this.cancelled = true; this.input.blur(); + aEvent.stopPropagation(); } else if (aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_SPACE) { // No need for leading spaces here. This is particularly // noticable when adding a property: it's very natural to type diff --git a/browser/locales/en-US/chrome/browser/devtools/styleeditor.dtd b/browser/locales/en-US/chrome/browser/devtools/styleeditor.dtd index 2fcdfbec888..7dd55a21a89 100644 --- a/browser/locales/en-US/chrome/browser/devtools/styleeditor.dtd +++ b/browser/locales/en-US/chrome/browser/devtools/styleeditor.dtd @@ -22,17 +22,6 @@ - - - - - - - - - @@ -60,3 +49,6 @@ + + +