Issue 4510 - Filter preferences: replace the built-in findbar widget by our own look-alike

chrome/content/ui/filters.xul

 <?xml version="1.0"?>
 
 <!--
   - This file is part of Adblock Plus <https://adblockplus.org/>,
   - Copyright (C) 2006-2016 Eyeo GmbH
   -
   - Adblock Plus is free software: you can redistribute it and/or modify
   - it under the terms of the GNU General Public License version 3 as
   - published by the Free Software Foundation.
   -
@@ skipping 68 matching lines @@
   <command id="filters-selectAll-command" oncommand="FilterActions.selectAll();"/>
   <command id="filters-edit-command" oncommand="FilterActions.startEditing();"/>
   <command id="filters-add-command" oncommand="FilterActions.insertFilter();"/>
   <command id="filters-delete-command" oncommand="FilterActions.deleteSelected();"/>
   <command id="filters-resetHitCounts-command" oncommand="FilterActions.resetHitCounts();"/>
   <command id="filters-moveUp-command" oncommand="FilterActions.moveUp();"/>
   <command id="filters-moveDown-command" oncommand="FilterActions.moveDown();"/>
   <command id="filters-copy-command" oncommand="FilterActions.copySelected(true);"/>
   <command id="filters-cut-command" oncommand="FilterActions.copySelected(false);"/>
   <command id="filters-paste-command" oncommand="FilterActions.paste();"/>
-  <command id="find-command" oncommand="E('findbar').startFind(E('findbar').FIND_NORMAL)"/>
-  <command id="find-again-command" oncommand="E('findbar').onFindAgainCommand(false)"/>
-  <command id="find-previous-command" oncommand="E('findbar').onFindAgainCommand(true)"/>
+  <command id="find-command" oncommand="FilterSearch.open();"/>
+  <command id="find-again-command" oncommand="FilterSearch.search(1);"/>
+  <command id="find-previous-command" oncommand="FilterSearch.search(-1);"/>
 </commandset>
 
 <popupset id="filtersPopupset">
   <menupopup id="filters-view-menu1" onpopupshowing="FilterActions.fillColumnPopup(this);">
     <menuitem id="filters-view-filter1" label="&filter.column;" type="checkbox" disabled="true"/>
     <menuitem id="filters-view-slow1" label="&slow.column;" type="checkbox" oncommand="FilterActions.toggleColumn('col-slow')"/>
     <menuitem id="filters-view-enabled1" label="&enabled.column;" type="checkbox" oncommand="FilterActions.toggleColumn('col-enabled')"/>
     <menuitem id="filters-view-hitcount1" label="&hitcount.column;" type="checkbox" oncommand="FilterActions.toggleColumn('col-hitcount')"/>
     <menuitem id="filters-view-lasthit1" label="&lasthit.column;" type="checkbox" oncommand="FilterActions.toggleColumn('col-lasthit')"/>
     <menuseparator/>
@@ skipping 234 matching lines @@
           <menuitem label="&filter.resetHitCounts.label;" command="filters-resetHitCounts-command"/>
           <menuseparator/>
           <menuitem label="&filter.moveUp.label;" key="moveUp-key" command="filters-moveUp-command"/>
           <menuitem label="&filter.moveDown.label;" key="moveDown-key" command="filters-moveDown-command"/>
           <menuseparator/>
           <menu id="viewMenu" label="&viewMenu.label;"/>
         </menupopup>
       </button>
       <button id="addFilterButton" label="&addFilter.label;" command="filters-add-command"/>
     </hbox>
+
     <tree id="filtersTree"
         flex="1"
         editable="true"
         seltype="multiple"
         enableColumnDrag="true"
         hidecolumnpicker="true"
         _removewarning="&filters.remove.warning;">
       <treecols context="filters-view-menu1">
         <treecol id="col-enabled" label="&enabled.column;" cycler="true" flex="0" persist="width ordinal sortDirection hidden"/>
         <splitter class="tree-splitter"/>
         <treecol id="col-filter" label="&filter.column;" flex="10" persist="width ordinal sortDirection hidden"/>
         <splitter class="tree-splitter"/>
         <treecol id="col-slow" label="!" display="&slow.column;" tooltiptext="&slow.column;" flex="0" width="16" persist="width ordinal sortDirection hidden"/>
         <splitter class="tree-splitter"/>
         <treecol id="col-hitcount" label="&hitcount.column;" flex="0" persist="width ordinal sortDirection hidden"/>
         <splitter class="tree-splitter"/>
         <treecol id="col-lasthit" label="&lasthit.column;" hidden="true" flex="4" persist="width ordinal sortDirection hidden"/>
       </treecols>
 
       <treechildren id="filtersTreeChildren"
           oncontextmenu="E('filterActionMenu').openPopupAtScreen(event.screenX, event.screenY, true);"
           tooltip="filtersTooltip"
           noGroupText="&noGroupSelected.text;"
           noFiltersText="&noFiltersInGroup.text;"
           ondragstart="FilterActions.startDrag(event);"
           ondragend="FilterActions.endDrag(event);"/>
     </tree>
+
+    <hbox id="findbar" hidden="true" align="center" onkeypress="FilterSearch.keyPress(event);">

[Thomas Greiner, 2016/10/12 14:03:14]

Detail: "hidden" is a boolean attribute so it doesn't have a value. Therefore
valid variants are `hidden="hidden"`, `hidden=""` and `hidden` according to
https://www.w3.org/TR/html-markup/global-attributes.html#common.attrs.hidden.

[Wladimir Palant, 2016/10/12 15:22:00]

This is not HTML ;)

See https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/hidden

[Thomas Greiner, 2016/10/12 17:18:10]

Unfortunately, the page you mentioned is quite ambiguous about that but I get
your point.

[Wladimir Palant, 2016/10/12 17:53:30]

The text seems to have been imported from XULPlanet.com (© 1999 - 2004) and
never changed - it could definitely use some improvement. The same thing is more
obvious on
https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/Firefox_addons...

+      <toolbarbutton id="findbar-closebutton" tooltiptext="&findbar.close;" oncommand="FilterSearch.close();"/>
+      <textbox id="findbar-textbox" type="search" placeholder="&findbar.placeholder;" flex="1" oncommand="FilterSearch.search();"/>
+      <spinbuttons id="findbar-findAgain" onup="FilterSearch.search(-1);" ondown="FilterSearch.search(1);"/>
+      <button id="findbar-case-sensitive" type="checkbox" label="&findbar.caseSensitive;" oncommand="FilterSearch.search(0);"/>
+      <stack>
+        <label id="findbar-status-wrappedStart" class="findbar-status" value="&findbar.statusWrappedStart;" hidden="true"/>
+        <label id="findbar-status-wrappedEnd" class="findbar-status" value="&findbar.statusWrappedEnd;" hidden="true"/>
+        <label id="findbar-status-notFound" class="findbar-status" value="&findbar.statusNotFound;" hidden="true"/>
+      </stack>
+    </hbox>
   </vbox>
 </hbox>
 
-<findbar id="findbar"/>
-
 <hbox id="buttons">
   <button id="backupButton" type="menu"
       label="&backupButton.label;"
       _backupDialogTitle="&backup.label;" _restoreDialogTitle="&restore.own.label;"
       _fileFilterComplete="&backup.complete.title;" _fileFilterCustom="&backup.custom.title;"
       _backupError="&backup.error;" _restoreError="&restore.error;"
       _restoreCompleteWarning="&restore.complete.warning;" _restoreCustomWarning="&restore.custom.warning;"
       _restoreVersionWarning="&restore.minVersion.warning;"
       oncommand="if (event.target == this) Utils.runAsync(() => this.open = true);">
     <menupopup onpopupshowing="Backup.fillRestorePopup();">
       <menuitem id="backup" key="backup-key" label="&backup.label;…" oncommand="Backup.backupToFile();"/>
       <menuseparator/>
       <menuitem id="restoreBackupTemplate" label="&restore.default.label;" hidden="true"/>
       <menuitem id="restoreOwnBackup" key="restore-key" label="&restore.own.label;…" oncommand="Backup.restoreFromFile();"/>
     </menupopup>
   </button>
 
   <spacer flex="1"/>
 
   <button id="close" dlgtype="accept" label="&close.label;"/>
 </hbox>
 
 </dialog>