1565962 - Place console sidebar in the same Grid as other webconsole main components

Status: RESOLVED FIXED

(DevTools :: Console, task, P1)

Description

[Nicolas Chevobbe [:nchevobbe]]

With Bug 1521452 landed, we should be able to get rid of the splitbox and place the sidebar in the main CSS grid we use for the console layout.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1565962 - Refactor webconsole layout. r=Honza.

Since we now have a GridElementWidthResizer element, we can
get rid of the SplitBox wrapping the SideBar, and have all
major elements as child of the App element, controlled by
a CSS Grid.

This makes it easy to change the console layout when toggling
the editor mode (re-ordering element in JS, changing the CSS
grid templates, and placing the element in different areas).
This also means we can take advantage of subgrid to align
the sidebar toolbar with the filter bar for example.

As the part of the stylesheet dedicated to layout grew, it
made sense to have it all in a separate stylesheet, App.css,
that lives next to the App component.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5b3664109ecc
Refactor webconsole layout. r=Honza.

Comment 3

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/5b3664109ecc