1514766 - Autocomplete result matching the input should be first

Status: RESOLVED FIXED

(DevTools :: Console, defect, P3)

Description

[Nicolas Chevobbe [:nchevobbe]]

**Steps to reproduce**
1. In any page, open the console
2. Type (or paste) `document.styleSheets`


**Expected results**

The autocomplete popup is displayed and shows: 

- styleSheets
- styleSheetSet


**Actual results**

The autocomplete popup is displayed and shows: 

- styleSheetSet
- styleSheets

making the default selected element `styleSheetSet`, which is not the natural choice

Comment 2

[TomS [:toms]]

Hi Nicolas! Can I work on this bug?

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Hello Tom, sure you can! Thanks for asking :)

It looks like you're new to Bugzilla, so maybe it's your first bug. If it's not, you can jump to the end to see where the issue is.

I suggest you to read https://docs.firefox-dev.tools/getting-started/ , it will help you setting up the work environment for devtools. When asked, remember to use Artifact Builds.
Also, since the work will happen on the server, if you want to use the debugger, you will have to use the Browser Content Toolbox.

---

So most of the work should happen in devtools/server/actors/webconsole.js. Here, we are changing the order to display lowercased item first. We should also check that if one item in the list equals matchProp, it should be displayed first.
Then we'll have to add a test to make sure this work as intended.

If you have any questions or struggles, don't hesitate to ask here, or directly in Slack.

Comment 4

[TomS [:toms]]

Ok thanks. Looking at this, there seems to be some conflict with the sorting of the lowercase items first. It's already been sorted to display "document" before "Document." But it also displays "dispatchEvent" before "Directory", "updateCommands" before "UIEvent" and so on.

Comment 5

[TomS [:toms]]

So the existing code that sorted items beginning with lowercase letters first was causing that behavior. I got rid of it which fixed that issue and this bug also seems to be fixed.

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

(In reply to TomS [:toms] from comment #5)

So the existing code that sorted items beginning with lowercase letters first was causing that behavior. I got rid of it which fixed that issue and this bug also seems to be fixed.

TomS, we do want to have lowercased items first. The reasoning is that if you type docume, you probably want document, and not Document.

Here's an example of what the sort function could look like: https://jsbin.com/vijililudo/edit?js,output

Comment 7

[TomS [:toms]]

I know what you mean. The lowercase items are naturally showing up first. These are examples of the results I'm getting now

https://imgur.com/sOKN07N

https://imgur.com/QAbKBVm

Comment 8

[TomS [:toms]]

(In reply to Nicolas Chevobbe from comment #6)

TomS, we do want to have lowercased items first. The reasoning is that if you type docume, you probably want document, and not Document.

Here's an example of what the sort function could look like: https://jsbin.com/vijililudo/edit?js,output

That type of function sorts the matches in the way you described but only if the expression is typed out in full. Starting with "sty" etc still sorts the matches in the wrong way: https://imgur.com/a/2pRi7tV

I might have solved the first part by sorting them with lowercase items first but I'm just having some trouble now implementing the sort by perfect match

  matches = Array.from(matches).sort((a, b) => {
          if (a[0] === a[0].toLocaleLowerCase() && b[0] === b[0].toLocaleLowerCase() ||
              a[0] === a[0].toLocaleUpperCase() && b[0] === b[0].toLocaleUpperCase()) {
              return a.localeCompare(b);
          }
          if (a[0] === a[0].toLocaleLowerCase()) {
                return -1;
          }
              return 1;
      });
    }
    return {
      from: this.actorID,
      matches,
      matchProp,
      isElementAccess: isElementAccess === true,
    };
  },

Or if I'm way off here let me know

Comment 9

[TomS [:toms]]

Attachment: Bug 1514766 - Change the order of the autocomplete popup to display lowercase items and perfect matches first. r=nchevobbe.

The autocomplete popup in the web console now favours matches
with the user input in alphabetical order with lowercase letters and
perfect matches brought to the top of the list.
e.g.

Typing 'document.styleSheets' brings up the result:

-styleSheets
-styleSheetSets

Comment 10

[Nicolas Chevobbe [:nchevobbe]]

Hello Tom, is there anything blocking you for this bug?

Comment 11

[TomS [:toms]]

(In reply to Nicolas Chevobbe from comment #10)

Hello Tom, is there anything blocking you for this bug?

Sorry for the delay. I just sent a revision

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0fab2cc0f44d
Change the order of the autocomplete popup to display lowercase items and perfect matches first. r=nchevobbe.

Comment 13

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/0fab2cc0f44d