Bug 715892 - In the Style Editor, remove the stylesheet filter; r=paul; approval-aurora=akeybl
authorCedric Vivier <cedricv@neonux.com>
Wed, 25 Jan 2012 17:37:29 +0800
changeset 85073 a8d8390ebb5265ec46c3c72944160ea3aa76430d
parent 85072 230a7bf9aee65eb102cc57125b8966a4f96d08f4
child 85074 cc4219ead50bcf9e2c11cac8be7b29fe7e36566d
push id519
push userakeybl@mozilla.com
push dateWed, 01 Feb 2012 00:38:35 +0000
treeherdermozilla-beta@788ea1ef610b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspaul
bugs715892
milestone11.0a2
Bug 715892 - In the Style Editor, remove the stylesheet filter; r=paul; approval-aurora=akeybl
browser/devtools/styleeditor/SplitView.jsm
browser/devtools/styleeditor/styleeditor.xul
browser/devtools/styleeditor/test/Makefile.in
browser/devtools/styleeditor/test/browser_styleeditor_sv_filter.js
browser/locales/en-US/chrome/browser/devtools/styleeditor.dtd
--- a/browser/devtools/styleeditor/SplitView.jsm
+++ b/browser/devtools/styleeditor/SplitView.jsm
@@ -64,21 +64,16 @@ function SplitView(aRoot)
   this._root = aRoot;
   this._controller = aRoot.querySelector(".splitview-controller");
   this._nav = aRoot.querySelector(".splitview-nav");
   this._side = aRoot.querySelector(".splitview-side-details");
   this._activeSummary = null
 
   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) {
       let node = nav.ownerDocument.activeElement;
       while (node && node.parentNode != nav) {
         node = node.parentNode;
       }
       return node;
@@ -112,22 +107,16 @@ function SplitView(aRoot)
       aEvent.stopPropagation();
       let el = this.getSummaryElementByOrdinal(newFocusOrdinal);
       if (el) {
         el.focus();
       }
       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);
 }
 
 SplitView.prototype = {
   /**
     * Retrieve whether the UI currently has a landscape orientation.
     *
     * @return boolean
@@ -222,20 +211,16 @@ SplitView.prototype = {
    *     - function(DOMElement summary, DOMElement details, object data) onCreate
    *         Called when the item has been added.
    *     - function(summary, details, data) onShow
    *         Called when the item is shown/active.
    *     - function(summary, details, data) onHide
    *         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
    *         Items with a lower ordinal are displayed before those with a
    *         higher ordinal.
    */
   appendItem: function ASV_appendItem(aSummary, aDetails, aOptions)
   {
@@ -323,81 +308,16 @@ SplitView.prototype = {
   removeAll: function ASV_removeAll()
   {
     while (this._nav.hasChildNodes()) {
       this.removeItem(this._nav.firstChild);
     }
   },
 
   /**
-    * 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
    * any SplitView-specific classes.
    *
    * @param DOMElement aSummary
    *        Summary element of the item to set.
    * @param string aClassName
    *        One or more space-separated CSS classes.
@@ -410,44 +330,9 @@ SplitView.prototype = {
     viewSpecific = aSummary.className.match(/(splitview\-[\w-]+)/g);
     viewSpecific = viewSpecific ? viewSpecific.join(" ") : "";
     aSummary.className = viewSpecific + " " + aClassName;
 
     viewSpecific = binding._details.className.match(/(splitview\-[\w-]+)/g);
     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);
-    }
-  }
 };
--- a/browser/devtools/styleeditor/styleeditor.xul
+++ b/browser/devtools/styleeditor/styleeditor.xul
@@ -50,52 +50,41 @@
         id="style-editor-chrome-window"
         title="&window.title;"
         windowtype="Tools:StyleEditor"
         width="800" height="280"
         persist="screenX screenY width height sizemode">
 <xul:script type="application/javascript" src="chrome://global/content/globalOverlay.js"/>
 
 <xul:box id="style-editor-chrome" class="splitview-root loading">
-  <xul:box class="splitview-controller" id="stylesheets-controller" persist="width height">
+  <xul:box class="splitview-controller">
     <xul:box class="splitview-main">
       <xul:toolbar class="devtools-toolbar">
         <xul:toolbarbutton class="style-editor-newButton devtools-toolbarbutton"
                     accesskey="&newButton.accesskey;"
                     tooltiptext="&newButton.tooltip;"
                     label="&newButton.label;"
                     disabled="true"/>
         <xul:toolbarbutton class="style-editor-importButton devtools-toolbarbutton"
                     accesskey="&importButton.accesskey;"
                     tooltiptext="&importButton.tooltip;"
                     label="&importButton.label;"
                     disabled="true"/>
-        <xul:spacer flex="1"/>
-        <xul:textbox class="splitview-filter devtools-searchinput"
-                     type="search" flex="1"
-                     tooltiptext="&searchInput.tooltip;"
-                     placeholder="&searchInput.placeholder;"/>
       </xul:toolbar>
     </xul:box>
-    <xul:box class="splitview-nav-container">
+    <xul:box id="splitview-resizer-target" class="splitview-nav-container"
+             persist="width height">
       <ol class="splitview-nav" tabindex="0"></ol>
       <div class="splitview-nav placeholder empty">
         <p><strong>&noStyleSheet.label;</strong></p>
         <p>&noStyleSheet-tip-start.label;
           <a href="#"
              class="style-editor-newButton">&noStyleSheet-tip-action.label;</a>
           &noStyleSheet-tip-end.label;</p>
       </div>
-      <div class="splitview-nav placeholder all-filtered">
-        <p><strong>&searchNoResults.label;</strong></p>
-        <p>
-          <a href="#"
-             class="splitview-filter-clearButton">&searchClearButton.label;</a>
-        </p>
-      </div>
     </xul:box> <!-- .splitview-nav-container -->
   </xul:box>   <!-- .splitview-controller -->
   <xul:box class="splitview-side-details"/>
 
   <div id="splitview-templates" hidden="true">
     <li id="splitview-tpl-summary-stylesheet" tabindex="0">
       <a class="stylesheet-enabled" tabindex="0" href="#"
          title="&visibilityToggle.tooltip;"
@@ -111,22 +100,22 @@
                  title="&saveButton.tooltip;"
                  accesskey="&saveButton.accesskey;">&saveButton.label;</a></h3>
         </div>
       </hgroup>
     </li>
 
     <xul:box id="splitview-tpl-details-stylesheet" class="splitview-details">
       <xul:resizer class="splitview-portrait-resizer"
-               dir="bottom"
-               element="stylesheets-controller"/>
+                   dir="bottom"
+                   element="splitview-resizer-target"/>
       <xul:toolbar id="splitview-details-toolbar" class="devtools-toolbar">
         <xul:resizer class="splitview-landscape-resizer"
                      dir="bottomend"
-                     element="stylesheets-controller"/>
+                     element="splitview-resizer-target"/>
       </xul:toolbar>
       <xul:box class="stylesheet-editor-input textbox"
                data-placeholder="&editorTextbox.placeholder;"/>
     </xul:box>
   </div> <!-- #splitview-templates -->
 </xul:box>   <!-- .splitview-root -->
 
 <xul:script type="application/javascript"><![CDATA[
--- a/browser/devtools/styleeditor/test/Makefile.in
+++ b/browser/devtools/styleeditor/test/Makefile.in
@@ -48,17 +48,16 @@ include $(topsrcdir)/config/rules.mk
                  browser_styleeditor_enabled.js \
                  browser_styleeditor_import.js \
                  browser_styleeditor_init.js \
                  browser_styleeditor_loading.js \
                  browser_styleeditor_new.js \
                  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 \
                  head.js \
                  media.html \
                  media-small.css \
                  minified.html \
                  simple.css \
deleted file mode 100644
--- 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();
-}
--- a/browser/locales/en-US/chrome/browser/devtools/styleeditor.dtd
+++ b/browser/locales/en-US/chrome/browser/devtools/styleeditor.dtd
@@ -17,27 +17,16 @@
 <!ENTITY newButton.accesskey        "N">
 <!ENTITY newButton.commandkey       "n">
 
 <!ENTITY importButton.label         "Import…">
 <!ENTITY importButton.tooltip       "Import and append an existing style sheet to the document">
 <!ENTITY importButton.accesskey     "I">
 <!ENTITY importButton.commandkey    "i">
 
-<!ENTITY searchInput.tooltip        "Filter style sheets by name">
-<!ENTITY searchInput.placeholder    "Find style sheet">
-
-<!-- LOCALIZATION NOTE  (searchNoResults): This is shown when searching a term
-     that is not found in any stylesheet or stylesheet name. -->
-<!ENTITY searchNoResults.label      "No matching style sheet has been found.">
-
-<!-- LOCALIZATION NOTE  (searchClearButton): This button clears the search input
-     box and is visible only when a search term has been typed. -->
-<!ENTITY searchClearButton.label    "Clear">
-
 <!ENTITY visibilityToggle.tooltip   "Toggle style sheet visibility">
 <!ENTITY visibilityToggle.accesskey "V">
 
 <!ENTITY saveButton.label           "Save">
 <!ENTITY saveButton.tooltip         "Save this style sheet to a file">
 <!ENTITY saveButton.accesskey       "S">
 <!ENTITY saveButton.commandkey      "s">