865684 - [markup view] Higher Contrast for selected node

Status: RESOLVED FIXED

(DevTools :: Inspector, defect)

Description

[Rob Campbell [:rc] (:robcee)]

The selected node in the Inspector's markup view is too hard to spot in both Light and Dark themes.

Comment 1

[toman22]

Hi, I'm new here,
How can I start to work on this??

Comment 2

[MikeLing]

Hi,I am interested in working on this bug,but it's my first time to work on with debug,can anybody guide me on how to get started with it?Thanks a lot.

Comment 3

[Sanchit Garg]

Hey Rob,
I am interested in fixing it. Please tell me how to start.
Thank You

Comment 4

[Prannoy]

Hi,
I want to work on this bug.Can someone guide me on how to get started?

Thanks,
Prannoy

Comment 5

[Rob Campbell [:rc] (:robcee)]

Mike? Halp!

Comment 6

[MikeLing]

(In reply to Rob Campbell [:rc] (:robcee) from comment #5)
> Mike? Halp!

Well,Can you tell me more detail about that?Thanks

Comment 7

[Paul Rouget [:paul]]

The CSS code for the selected node is here:

https://mxr.mozilla.org/mozilla-central/source/browser/themes/osx/devtools/dark-theme.css#52

and here:

https://mxr.mozilla.org/mozilla-central/source/browser/themes/osx/devtools/light-theme.css#52

Comment 8

[Leon Cheung [:retrecal]]

Attachment: Node selection in dark theme proposed change

Made the highlight color slightly lighter. However, in my opinion, it does not seem like the current color needs a change. Please advise.

Comment 9

[Leon Cheung [:retrecal]]

Attachment: Node selection in light theme proposed change

Made the highlight color slightly darker. Again, it doesn't seem like the current color needs a change. It is perfectly visible on my monitor.

Comment 10

[Rob Campbell [:rc] (:robcee)]

These don't appear to be that different from what we have currently. I wonder if adding some color to the selection could help rather than a different level of gray?

You could try using the system-defined Highlight color for the selection's background color.

e.g., 

http://mxr.mozilla.org/mozilla-central/source/browser/themes/osx/browser.css#2913

That should work for the light theme, at least.

Comment 11

[Rob Campbell [:rc] (:robcee)]

Comment on attachment 761278 [details]
Node selection in dark theme proposed change

This doesn't look very different to my eyes. Same contrast.

Comment 12

[Rob Campbell [:rc] (:robcee)]

Comment on attachment 761279 [details]
Node selection in light theme proposed change

still similar. See comment 11.

Comment 13

[Stephen Horlander [:shorlander] (If you're waiting on a response please ping me on Slack or IRC)]

Attachment: Increase Selection Contrast Ideas - i01

A few ideas here:

1) Keep roughly what we have but add a border to make it stand out more
2) Invert the text and use a more solid background
3) Use a different more obvious color

Approach 1 lets you keep syntax highlighting but 2 or 3 are more contrasty and obvious.

Comment 14

[Paul Rouget [:paul]]

Voting for 1).

Comment 15

[Paul Rouget [:paul]]

Leon, still working on this?

Comment 16

[Blake Buchanan]

I'll pick this one up!

Comment 17

[Blake Buchanan]

I adjusted the color a bit and provided a nice rounded border to the selection border for the dark theme. Was looking to have someone check this one out for review and possible submission but I updated my nightly source and looks like some of the dev tools have been disabled. It looks like this is typical from what I have read about the development process. Am I right?

Comment 18

[Chirag Bhatia]

Hi,

I would like to try this out as a first timer.

I made changes to the file marked by Paul Rouget (in the linux directory instead of osx since i'm using linux), but the change did not get reflected. Am I supposed to re-compile firefox for the changes to take effect?

Comment 19

[Panos Astithas (he/him) [:past] (please ni?)]

(In reply to Blake Buchanan from comment #17)
> I adjusted the color a bit and provided a nice rounded border to the
> selection border for the dark theme. Was looking to have someone check this
> one out for review and possible submission but I updated my nightly source
> and looks like some of the dev tools have been disabled. It looks like this
> is typical from what I have read about the development process. Am I right?

No tools were recently disabled. Can you describe the problem you are facing in more detail? Do you see any errors in the Browser Console?

(In reply to Chirag Bhatia from comment #18)
> I made changes to the file marked by Paul Rouget (in the linux directory
> instead of osx since i'm using linux), but the change did not get reflected.
> Am I supposed to re-compile firefox for the changes to take effect?

You shouldn't, as symlinks are used by default on Linux. Try adding the "-purgecaches" option to your firefox binary execution, and if that doesn't work, do a "./mach build" to make sure your changes are actually working.

Comment 20

[Blake Buchanan]

Sure, I can. Whenever launching nightly with ./mach run the app loads fine but it appears that very few of the dev tools are working now that I have tested it thoroughly. My standard firefox collection of dev tools consists of Web Console, Debugger, Inspector, Style Editor and Profiler. These aren't appearing in my Nightly build at all. The Browser console unfortunately fails to load as well.

Comment 21

[Panos Astithas (he/him) [:past] (please ni?)]

See if setting devtools.debugger.log = true (and restarting) shows any useful error messages in your terminal.

Comment 22

[Blake Buchanan]

It was set to false. I set to true and restarted Nightly but no erros were logged in the terminal.

Comment 23

[Paul Rouget [:paul]]

(In reply to Blake Buchanan from comment #22)
> It was set to false. I set to true and restarted Nightly but no erros were
> logged in the terminal.

Use: `./mach run -jsconsole` to see potential errors.

Comment 24

[Blake Buchanan]

Thanks Paul. It does look like I have a few errors. One that stands out is |10n error with open.commandkey referencing devtools/main.js.

Comment 25

[Paul Rouget [:paul]]

@Blake: attach your patch here. But I think it's a problem with your build. Make sure to pull and build the current tree.

Comment 26

[Paul Rouget [:paul]]

Attachment: Patch v1

Using shorlander's colors. I didn't add the borders because the line can wrap, and then we see a double border in the middle of the line.

Comment 27

[Paul Rouget [:paul]]

Attachment: screenshot

Comment 28

[Paul Rouget [:paul]]

https://hg.mozilla.org/integration/fx-team/rev/9ff218b84720

Comment 29

[Tim Taubert [:ttaubert] (inactive)]

https://hg.mozilla.org/mozilla-central/rev/9ff218b84720