830344 - Implement pagination when expanding objects with lots of properties

Status: RESOLVED FIXED

(DevTools :: Object Inspector, defect, P3)

Description

[Victor Porof [:vporof][:vp]]

Performance considerations were taken care of in bug 828664, but a few UX problems remain:

1. Although the browser remains responsive, building the UI when inspecting an object with a very large number of properties may take tens of seconds. If you'd want to inspect the *last* property on an object, you're gonna' have to wait.

2. Searching for properties is easier because of bug 798874, but sometimes analyzing a subset (chunk) of needles in the haystack (at the same time) may be desirable.

Pagination would work by grouping large sets of properties under a single expando pseudo-property. I think the most optimal solution is to have inspectable "quarters" when dealing with more than a certain number of properties (1000?). For example, when inspecting arrays with 100,000 elements, you'd have

myVariable [object Array] 
  > 0 ... 25,000
  > 25,000 ... 50,000
  > 50,000 ... 75,000
  > 75,000 ... 100,000

Expanding the first set would further reveal 4 sub-chunks between 0 and 25,000  and so on:

myVariable [object Array] 
  > 0 ... 25,000
    > 0 ... 6,250
    > 6,250 ... 12,500
    > 12,500 ... 18,750
    > 18,750 ... 25,000
  > 25,000 ... 50,000
  > 50,000 ... 75,000
  > 75,000 ... 100,000

This process is repeated until a subset contains less than than a certain number of properties.

When dealing with objects and not arrays, properties can be grouped alphabetically: $ and _, A-G, H-M, N-S, T-Z, then other utf symbols.


I don't think optimizing the protocol itself to handle fetching such chunks is really necessary. This is mostly a frontend UX problem.

Comment 1

[Victor Porof [:vporof][:vp]]

Moving stuff to the Object Inspector component.
Filter on COSMICMIGRAINE.

Comment 2

[Victor Porof [:vporof][:vp]]

Attachment: screencast.gif

Started working on this again. Here's how it looks so far.

Comment 3

[Victor Porof [:vporof][:vp]]

Attachment: test.html

Handy test page.

Comment 5

[Victor Porof [:vporof][:vp]]

Attachment: Part 1: Remove the lazy append mechanism in the variables view

Comment 6

[Victor Porof [:vporof][:vp]]

Attachment: Part 2: Implement pagination when expanding objects with lots of properties

Comment 7

[Panos Astithas (he/him) [:past] (please ni?)]

Needs some rebasing.

Comment 8

[Victor Porof [:vporof][:vp]]

Attachment: Part 1: Remove the lazy append mechanism in the variables view

Well, if you insist!

Comment 9

[Victor Porof [:vporof][:vp]]

Attachment: Part 2: Implement pagination when expanding objects with lots of properties

Comment 10

[Panos Astithas (he/him) [:past] (please ni?)]

Comment on attachment 8347598 [details] [diff] [review]
Part 2: Implement pagination when expanding objects with lots of properties

Review of attachment 8347598 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/devtools/shared/widgets/VariablesView.jsm
@@ +1305,5 @@
>     *        - sorted: true to sort all the properties before adding them
>     *        - callback: function invoked after each item is added
> +   * @param string aKeysType [optional]
> +   *        Helper argument in the case of paginated items. Can be either
> +   *        "numbers" or "strings".

Why not just add an option numberKeys or keysAreNumbers to aOptions instead of an additional parameter? Cleaner, faster, better! Call 1-800-B00LEAN now for a free sample!

Comment 11

[Victor Porof [:vporof][:vp]]

https://hg.mozilla.org/integration/fx-team/rev/e472c39cc2bb
https://hg.mozilla.org/integration/fx-team/rev/b48f948547ef

Comment 12

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/e472c39cc2bb
https://hg.mozilla.org/mozilla-central/rev/b48f948547ef