Properly style console.table() output

[SebastianZ]

The output of console.table() calls should look more Firebug-ish.

Looks like:

Should look more like:

Tasks are:

• Change the column header styles
• Hide the separators between the columns
• Change the cell styles

What should be kept:

• Table width should not expand to the whole width of the Console panel
• Line background colors should not be altered (as in other parts of Firebug like e.g. the Net panel)
• The index column
• Resizing the columns should still work

Sebastian

[kartikmaji]

What behaviour is supposed if we hover over column header?

[janodvarko]

What behaviour is supposed is we hover over column header?

No special behavior required on mouse move, but the header should display an icon when sorted (there are two icons, pointing up or down, depending on the sorting ascending/descending). See the attached image:

Honza

[kartikmaji]

@janodvarko and @SebastianZ : Please review my fix bc9509c

[SebastianZ]

Looks like this for me with your patch:

So it's a little closer to the expected output, though there are still many things that need to be changed. Please have a look at how the tables are displayed in Firebug 2.

Things that still need to be adjusted:

• Column header height must be reduced
• Font family of the column header needs to be changed
• Column header needs a gradient background
• Column header should have a different or no hover effect
• Column header must look pressed when clicked and the sorting icon must be displayed
• Sorted column header must be in different color
• Rows should be separated by a thin gray line like inside the Network panel for example
• The column separator must be hidden (just inside the header there should be a little separator line shown; best would be if the separator is invisible, though still a few pixels wide, so people can easily drag them)

Sebastian

[kartikmaji]

• Column header height must be reduced
• Font family of the column header needs to be changed
• Column header needs a gradient background
• Column header should have a different or no hover effect
• Column header must look pressed when clicked and the sorting icon must be displayed
• Sorted column header must be in different color
• Rows should be separated by a thin gray line like inside the Network panel for example
• The column separator must be hidden (just inside the header there should be a little separator line shown; best would be if the separator is invisible, though still a few pixels wide, so people can easily drag them)

For the last two points, I need to make some changes in resource:///modules/devtools/shared/widgets/TableWidget.js. Here, in line number 464

this.splitter = this.document.createElementNS(XUL_NS, "splitter");
this.splitter.className = "devtools-side-splitter";
this.tbody.appendChild(this.splitter);

But, I cannot find a way to change it or Am I going wrong?

[SebastianZ]

For the last two points, I need to make some changes in resource:///modules/devtools/shared/widgets/TableWidget.js

I don' think you have to. Everything can be styled through CSS. The table cells are actually <label>s, which have a class named table-widget-cell assigned. So you can add the separator line via that.

And the column headers can be styled via the table-widget-column-header class. Please note that you should use the styles coming from Firebug 2. See https://github.com/firebug/firebug/blob/cbaf5cf15fc1316ec1ae03dd6f19e75d249c68fa/extension/skin/classic/console.css#L449-L488. You can also check for them using the Browser Toolbox and/or DOM Inspector. If you have any questions how to do that, please ask.

Sebastian