Issue #848 - improve layout CSSFixme

[magsout]

Added some improvement:

• Issue #848 - Add style to cssfixme service #887 (comment)
• Issue #848 - Add style to cssfixme service #887 (comment)

r? @karlcow @hallvors

[hallvors]

@magsout what does code that has been modified look like? See http://hallvord.com/temp/moz/cssfixme.php?url=http%3A%2F%2Fhallvord.com%2Ftemp%2Fmoz%2FcompatTesterTesting%2Fstyle.css for an example.

[hallvors]

Very minor language point: I wonder if "CSS code" will be easier to understand than "CSS instructions"..?

[magsout]

@hallvors aaaaahh, ok, 👎 my bad... So, I return to the previous style for the <pre>, and I only highlights the strong elements

[magsout]

@hallvors @karlcow @miketaylr Which one do you prefer ?

[karlcow]

@magsout The 1st one (at the top). Many thanks. Super travail!

[magsout]

@hallvors is it possible to detect if there is content in the <pre> element? If so, you could add a class is-active because by default, when there is no content we still see the style of the <pre> because of padding (which I can delete it, but it's less pretty)

[hallvors]

We can certainly set an is-active style from the JS when inserting the generated code. Or just generate the PRE element too on the fly..? You can just add a DIV id=result-parent or something to put the generated PRE inside, I think that may be cleaner than toggling PRE style based on a class :)

[hallvors]

(I also vote for the 1st one - much of the point is to show very clearly what we're changing and it's more obvious that way)

[magsout]

Or just generate the PRE element too on the fly..? You can just add a DIV id=result-parent or something to put the generated PRE inside, I think that may be cleaner than toggling PRE style based on a class :)

@hallvors looks good 👍

[magsout]

Ok, updated with the style for pre

[magsout]

build passed

[miketaylr]

Same, top style looks great.

[hallvors]

I sort of liked the way the code in the second screenshot stands out with the yellow background though.. I'm testing the JS changes now, when the background is plain it is too much a part of the page, somehow. What about adding for example

.wc-CSSFixme-resultat{
  border-left: 8px solid var(--wc-background-dark);
  padding-left: 5px;
}

To make it stand out a bit more?
/me dabbling in designy stuff - feel free to ignore suggestions that betray my lack of taste :p

[hallvors]

@magsout I hope you're happy with me pushing directly here..?

[magsout]

@hallvors I added the changes to the style. What makes good

@magsout I hope you're happy with me pushing directly here..?

it's fine to like that .. 👍

I'm reading your email and try to understand the issue

[miketaylr]

It's only a global because the script for some reason is included twice in the page

I'm about to push a fix for that. I don't understand 100%, but the extrascripts template block was included inside the body template block, and I guess it looped over itself... twice? I don't know. But moving extrascripts outside of body (like all the other templates) fixes it. Pushing fix now.

[magsout]

👍 @miketaylr

[magsout]

👍 @miketaylr

[miketaylr]

👍 👍 ^_^

[magsout]

oups .. ;)

[magsout]

Awesome.

@hallvors or @karlcow if everything looks good;)

[hallvors]

Great, now we can undo the global-ness of that variable. If I do that quickly enough perhaps I can make it before Mike merges ;)

[hallvors]

and @magsout 👍 to the extra styling - stands out now

[miketaylr]

Heh, I'll let you pull the merge trigger @hallvors -- and I can deploy this afternoon as well.

[miketaylr]

Great work @magsout and @hallvors!