Closed Bug 1514766 Opened 11 months ago Closed 7 months ago

Autocomplete result matching the input should be first

Categories

(DevTools :: Console, defect, P3)

65 Branch
defect

Tracking

(firefox68 fixed)

RESOLVED FIXED
Firefox 68
Tracking Status
firefox68 --- fixed

People

(Reporter: nchevobbe, Assigned: toms, Mentored)

References

Details

Attachments

(1 file)

**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
Duplicate of this bug: 1514789

Hi Nicolas! Can I work on this bug?

Flags: needinfo?(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.

Flags: needinfo?(nchevobbe)

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.

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.

(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

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

(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

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

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

Assignee: nobody → causality1
Status: NEW → ASSIGNED

(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

Attachment #9042884 - Attachment description: Change the order of the autocomplete popup to display lowercase items and perfect matches first. → Change the order of the autocomplete popup to display lowercase items and perfect matches first. r=nchevobbe.
Attachment #9042884 - Attachment description: Change the order of the autocomplete popup to display lowercase items and perfect matches first. r=nchevobbe. → Bug 1514766 - Change the order of the autocomplete popup to display lowercase items and perfect matches first. r=nchevobbe.
Pushed by nchevobbe@mozilla.com:
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.
Status: ASSIGNED → RESOLVED
Closed: 7 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68
You need to log in before you can comment on or make changes to this bug.