Properly style tooltips

[SebastianZ]

The tooltips shown for different items in the UI should look more Firebug-ish.

Looks like:

Should look more like:

Tasks:

• Change the font family, size and color
• Change the background color
• Change the border style
• Add a drop shadow (maybe via the drop-shadow() filter)
• Sizes like for the image tooltip need to be adjusted

What should be kept:

• The arrow indicating for which item the tooltip is shown
• Special tooltip functionality like the cubic Bézier tooltip

Sebastian

[farshidbeheshti]

• Change the background color

If the Inline color preview (As stated on #46) should be kept, then there won't be such tooltip. Although, Since of a slow network connection the last night, I didn't notice the agreement for remaining part here: https://github.com/firebug/firebug.next/issues/46#issuecomment-58872376

Farshid

[SebastianZ]

• Change the background color

If the Inline color preview (As stated on #46) should be kept, then there won't be such tooltip.

There won't be a tooltip for colors, but for everything else, e.g. images, fonts, Bézier curves, etc. And their background color needs to be changed.

Sebastian

[farshidbeheshti]

And their background color needs to be changed.

Ah, right! I thought you mean where a tooltip is show for, like background-color, font e.g.

Farshid

[SebastianZ]

Tooltips containing a font family preview are rendered on a canvas. Unfortunately white text color is used for themes other than 'light'. So I created bug 1088305 to allow individual styling.

Sebastian

[farshidbeheshti]

Unfortunately white text color is used for themes other than 'light'

Thanks Sebastian, It saved my time!

As it's a blocker for the Firebug theme, not just this issue, let's create another issue for that, so that I could get on with this issue and will close until the next milestone.

Farshid

[janodvarko]

@farshidbeheshti: any progress on this?

Honza