LibJS+WebContent: Implement console.table

[GasimGasimzada]

Description

Implement console.table similar to how it is handled in other browsers. In this case, the Console creates a data structure and passed that structure to the Printer. In the printer side, unlike in other browsers, I decided to allow expanding arrays and objects in the table instead of just saying that the element is an array or object:

Algorithm

Below is the detailed explanation of the algorithm:

There are two parts to this algorithm -- First one is about choosing the column that represents indices and the second one is assigning properties to columns.

Setting the index column:

The index column's name is represented as "(index)" (parentheses are part of the column name).

• If the first argument (let's call it tabularData) is a array, we iterate over the array and assign it to "(index)" column.

Example:

console.table(["a", "b", "c"]);

outputs

(index)	Value
0	"a"
1	"b"
2	"c

• If the first argument is an object, we iterate over all the enumerable keys and assign the key to the "(index)" column.

  Example:

  console.table({ a: "10", b: 20, c: 30 });

  outputs

  (index)	Value
  a	10
  b	20
  c	30

Assigning properties to columns:

As we iterate over each item of the object/array, we check the type of each item (array element or object property):

• If the item is an array, iterate over the array, create a column that's named as the array element index and assign the value at the index to the column value.

  Example:

  console.table([
    ["hello", "world"]
    ["a", "b", "c"]
  ]);

  outputs

  (index)	0	1	2
  0	"hello"	"world"
  1	"a"	"b"	"c"

• If the item is an object, enumerate over the object propreties, create a column that's named as the property key and assign the value at the key to the the property value.

  Example:

  console.table([
    {firstName: "hello", lastName: "world"}
    {a: 10, b: 20, c: 30]
  ]);

  outputs

  (index)	firstName	lastName	a	b	c
  0	"hello"	"world"
  1			10	20	30

• If item is neither array, nor object, assign the object to column named "Value".

  Example:

  console.table([10, 20, 30]);

  outputs

  (index)	Value
  0	10
  1	20
  2	30

• When the second argument (let's call it properties) is passed, we show "(index)", "Value", the the columns defined in properties.

  Example:

  console.table([
    {firstName: "hello", lastName: "world"}
    {a: 10, b: 20, c: 30],
    "hello"
  ], ["firstName", "lastName"]);

  outputs

  (index)	firstName	b	Value
  0	"hello"
  1		20
  2			"hello"

Considerations:

• The creation of columns based on the item type is only done one level. If there is an array or object after first level, we just print it without creating new columns.

  Example:

  console.table([
    [{ a: 10 }, { b:  20 }]
    { c: [10, 20], d: [30, 40] }
  ])

  Outputs:

  (index)	0	1	c	d
  0	{ a: 10 }	{ b: 20 }
  1			[10, 20]	[30, 40]

• The order of elements can affect the order the columns, including the "Value" column, because columns are populated as we iterate over rows.

  Example:

  console.table([
    {firstName: "hello", lastName: "world"}
    {a: 10, b: 20, c: 30],
    "test"
  ]);

  outputs

  (index)	firstName	lastName	a	b	c	Value
  0	"hello"	"world"
  1			10	20	30
  2	"hello"	"world"				test

  while

  console.table([
    {a: 10, b: 20, c: 30]
    "test",
    {firstName: "hello", lastName: "world"}
  ]);

  outputs

  (index)	a	b	c	Value	firstName	lastName
  0	10	20	30
  1				test
  2					"hello"	"world"

• "(index)" is always the first column

• "(index)" and "Value" columns are NOT affected by the properties argument

Spec Steps

Spec PR: whatwg/console#237 (still in progress)

Changes

• Expose table from console object
• Add new Table log level
• Create a JS object that represents table rows and columns
• Print table as HTML using WebContentConsoleClient

[circl-lastname]

Commit should be titled LibJS+WebContent

[AtkinsSJ]

Thanks for doing this! A couple of general comments besides the CSS ones:

I saw you made a PR to the console spec, that's great! Can you please include the spec steps you added as comments in this code? Put a note that links to the PR and says it's not yet in the actual spec. That'll make it easier to follow what's going on. (And help to verify that your algorithm works as intended.)

Also, the way the properties parameter works doesn't match what I see in Firefox or Chrome:

(Ladybird on left, Firefox on right. Chrome output was the same as Firefox.)

[GasimGasimzada]

I saw you made a PR to the console spec, that's great! Can you please include the spec steps you added as comments in this code? Put a note that links to the PR and says it's not yet in the actual spec. That'll make it easier to follow what's going on. (And help to verify that your algorithm works as intended.)

I added a link to the PR for the spec.

Thanks for doing this! A couple of general comments besides the CSS ones:

I saw you made a PR to the console spec, that's great! Can you please include the spec steps you added as comments in this code? Put a note that links to the PR and says it's not yet in the actual spec. That'll make it easier to follow what's going on. (And help to verify that your algorithm works as intended.)

Also, the way the properties parameter works doesn't match what I see in Firefox or Chrome: (Ladybird on left, Firefox on right. Chrome output was the same as Firefox.)

Thank you for noticing this. Let me see if I can figure out what's going on here.

[ladybird-bot]

Hello!

One or more of the commit messages in this PR do not match the Ladybird code submission policy, please check the lint_commits CI job for more details on which commits were flagged and why.
Please do not close this PR and open another, instead modify your commit message(s) with git commit --amend and force push those changes to update this PR.

[GasimGasimzada]

@AtkinsSJ You are passing two different values between browsers:

On the left screenshot, the first argument is an object while on the right screenshot, the first argument is an array that contains an object (highlighted them with orange marker):

[AtkinsSJ]

Ah whoops! I'm glad it's me and not your code. 😆

[AtkinsSJ]

OK, I think I wasn't clear with what I meant.

If you look at the other console methods, our code has the steps from the spec quoted exactly, then the code that implements them. For example, our Console::count() code looks like:

    // 1. Let map be the associated count map.
    auto& map = m_counters;

    // 2. If map[label] exists, set map[label] to map[label] + 1.
    if (auto found = map.find(label); found != map.end()) {
        map.set(label, found->value + 1);
    }
    // 3. Otherwise, set map[label] to 1.
    else {
        map.set(label, 1);
    }

	// ...

We like doing this for a few reasons: It makes it clear that the code matches the spec; it's easier to spot errors; and if the spec changes in the future, it's easier to see what needs changing. (I think someone was working on an automated way to check this, at some point...) As an added bonus it helps us spot any problems in the spec itself.

If you could do the same with your draft spec's steps, with a note at the top to say it's based on changes that aren't in the official spec yet, that would be good.

Also, your commit title still says "JSLib" when it should say "LibJS". 😅

[GasimGasimzada]

If you could do the same with your draft spec's steps, with a note at the top to say it's based on changes that aren't in the official spec yet, that would be good.

Makes sense. I'll add the steps in the code 😊

Also, your commit title still says "JSLib" when it should say "LibJS". 😅

I'll fix that too. I thought this was about the PR title, not commit message title :D

[GasimGasimzada]

@AtkinsSJ I fixed the commit message and also added steps of the algorithm, and also added "WIP" next to the table function's comment. Let me know what you think.

[AtkinsSJ]

Thank you, it's a lot easier to examine the code when it's right next to the spec algorithm. (Even if it's a WIP algorithm.)

Someone else who's more familiar with LibJS will need to give this a look too, but overall this looks fine, just a few small things.

[AtkinsSJ]

Great! I'm happy to merge this now, and if we do find any issues we can fix them later. Hopefully this will help demonstrate that the algorithm you wrote is correct, too. :^)

Oh, and in future, whenever you've pushed changes that resolve a review comment, click the [Resolve conversation] button. That makes it clear to maintainers that it's ready for another review or merge.