Closed Bug 982456 Opened 8 years ago Closed 7 years ago

When hovering a line of the console, highlight the line

Categories

(DevTools :: Console, defect, P3)

x86
macOS
defect

Tracking

(Not tracked)

RESOLVED FIXED
Firefox 33

People

(Reporter: karlcow, Assigned: gl)

References

Details

Attachments

(6 files, 1 obsolete file)

Attached image console.png
when the window is large, the connection in between the error and the line number is not obvious. Highlighting the line by hovering it with the pointer would solve the issue.

It's helpful when you need to click the right line number to access the code in the CSS for example.
Priority: -- → P3
Attached patch 982456.patch (obsolete) — Splinter Review
Added background colours for line hovers in the console. Got some feedback that this would be very helpful from the other interns.
Attachment #8451759 - Flags: feedback?(rcampbell)
On a related note (for which there may be a different bug filed already), can we add a (very subtle) border between each console entry (much like the old Browser Console used to have)? It's sometimes very hard to distinguish where a message starts and were it ends, especially when there's a lot of text per message (spanning across multiple lines). Fixing this bug obviously helps a lot with that, but I wouldn't want to constantly hover over messages to make sense of the output.
Comment on attachment 8451759 [details] [diff] [review]
982456.patch

I'm going to pass this request to Victor for reasons he will understand.
Attachment #8451759 - Flags: feedback?(rcampbell) → feedback?(vporof)
Comment on attachment 8451759 [details] [diff] [review]
982456.patch

Review of attachment 8451759 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/themes/shared/devtools/webconsole.inc.css
@@ +203,5 @@
> +  background-color: #f0f8ff !important;
> +}
> +
> +.theme-dark .message:hover {
> +  background-color: #283B4B !important;

Can we please use colors from the palette instead? A common practice at this point is even using the `rgba` values and playing with the opacity.
Attachment #8451759 - Flags: feedback?(vporof) → feedback+
Attached patch 982456.patchSplinter Review
Updated colours using palettes from https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors
Assignee: nobody → gabriel.luong
Attachment #8451759 - Attachment is obsolete: true
Status: NEW → ASSIGNED
Attachment #8451789 - Flags: review?(vporof)
Comment on attachment 8451789 [details] [diff] [review]
982456.patch

Review of attachment 8451789 [details] [diff] [review]:
-----------------------------------------------------------------

Looks pretty. I would also try to get some ui feedback on this. Maybe :darrin.
Attachment #8451789 - Flags: review?(vporof) → review+
Attachment #8451789 - Flags: ui-review?(dhenein)
If possible can you post screenshots of the various states to be reviewed? Easier for designers and also lets us have a visual record of nits, etc. At that point, I'd be more than happy to review :) Thanks!
Flags: needinfo?(gabriel.luong)
Flags: needinfo?(gabriel.luong)
Attached image dark-theme console line
Comment on attachment 8451789 [details] [diff] [review]
982456.patch

Looks awesome, thanks!
Attachment #8451789 - Flags: ui-review?(dhenein) → ui-review+
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/e23a86020a70
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 33
QA Whiteboard: [good first verify]
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.