Style the buttons in the panel contents

[fflorent]

The buttons inside the panels (such as in the Network or the Performance panel) should be restyled to conform the Firebug style.

Florent

[fflorent]

I played a few minutes with this issue, although I am not very good at CSS / Design in general.

element {
  box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6) inset, 0px 0px 1px rgba(255, 255, 255, 0.6) inset, 0px 0px 2px rgba(0, 0, 0, 0.05);
  margin-right: 1px;
  width: auto;
  border: 1px solid rgb(219, 219, 219);
  border-radius: 2px;
  -moz-appearance: none;
}

How it is rendered (the reload button here):

Yeah, lots of progress to be done... My purpose is that they look like the filters' 's with their borders.

Florent

[SebastianZ]

@fflorent Do you actively work on this? If so, you should set yourself as assignee.

Sebastian

[fflorent]

Not actively. I will first rather work on issue #124. I don't mind if you
want to take it (I am not very good at CSS and at design).

Florent

[aakashtyg]

I can work on this one if it's okay? If I can't figure it out, I'll tell.

Aakash

[fflorent]

I don't have any objection. Just make sure you don't have too many tasks at
the same time.

Florent

[janodvarko]

OK, for me too.

The first step should be attaching a mockup showing how the buttons should look like in the end.

Honza

[janodvarko]

Btw. here is how it currently looks on windows:

[fflorent]

That's much nicer than on Linux. I even wonder if we shouldn't leave it as is on Windows. What do you think?

Florent

[janodvarko]

That's much nicer than on Linux. I even wonder if we shouldn't leave it as is on Windows.
What do you think?

Exactly, that's my feeling too.
We might improve only Linux and leave windows as it is (at least for now, since I think there are more important things to fix).

Honza

[janodvarko]

Btw. linux specific styles should go into a linux specific stylesheet:
skin/classic/linux/netmonitor.css
(we might want to generalize these styles later - into something like toolbox.css, but let's wait)

That stylesheet should be included in network-monitor.js module together with the shared/netmonitor.css as follows:

loadSheet(win, "chrome://firebug/skin/netmonitor.css", "author");
loadSheet(win, "chrome://firebug-os/skin/netmonitor.css", "author");

and removed as soon as Firebug theme is unapplied (won't happen often :), but):

removeSheet(win, "chrome://firebug/skin/netmonitor.css", "author");
removeSheet(win, "chrome://firebug-os/skin/netmonitor.css", "author");

Honza

[aakashtyg]

(we might want to generalize these styles later - into something like toolbox.css, but let's wait)

I didn't understand.
In the linux folder, netmonitor.css is not present. So I should make one or wait till you create toolbox.css?

Aakash