element picker improvement: to not discard class information when an …

…id is available

Use class(es) whenever available instead of the id when selecting a
broad cosmetic filter (ctrl-click).
When asking for a broad cosmetic filter, using the id instead of
whatever available class(es) is limiting usefulness. The change
here address this.
Example of use case: open
<http://forums.mozillazine.org/viewtopic.php?f=38&t=3027325>.
Now how to remove all signature widgets from all posts?
Without the change here, this was not possible without opening the
browser's inspector, finding out and manually typing whatever class
is used to identify the signature's root element.
With this commit, ctrl-click will now use whatever class information
exist instead of the id.

src/js/scriptlets/element-picker.js

@@ -489,13 +489,11 @@ var cosmeticFilterFromElement = function(elem) {
     }
 
     // Class(es)
-    if ( selector === '' ) {
-        v = elem.classList;
-        if ( v ) {
-            i = v.length || 0;
-            while ( i-- ) {
-                selector += '.' + CSS.escape(v.item(i));
-            }
+    v = elem.classList;
+    if ( v ) {
+        i = v.length || 0;
+        while ( i-- ) {
+            selector += '.' + CSS.escape(v.item(i));
         }
     }
 
@@ -1036,13 +1034,22 @@ var candidateFromFilterChoice = function(filterChoice) {
     // - Do not compute exact path.
     // - Discard narrowing directives.
     if ( filterChoice.modifier ) {
-        return filter.replace(/:nth-of-type\(\d+\)/, '');
+        filter = filter.replace(/:nth-of-type\(\d+\)/, '');
+        // Remove the id if one or more classes exist.
+        if ( filter.charAt(2) === '#' && filter.indexOf('.') !== -1 ) {
+            filter = filter.replace(/#[^#.]+/, '');
+        }
+        return filter;
     }
 
     // Return path: the target element, then all siblings prepended
     var selector = '', joiner = '';
     for ( ; slot < filters.length; slot++ ) {
         filter = filters[slot];
+        // Remove all classes when an id exists.
+        if ( filter.charAt(2) === '#' ) {
+            filter = filter.replace(/\..+$/, '');
+        }
         selector = filter.slice(2) + joiner + selector;
         // Stop at any element with an id: these are unique in a web page
         if ( filter.lastIndexOf('###', 0) === 0 ) {