Closed Bug 1330827 Opened 3 years ago Closed 3 years ago

"JSON", "Raw Data", and "Headers" buttons have incorrect hover styling

Categories

(DevTools :: JSON Viewer, defect)

53 Branch
defect
Not set

Tracking

(firefox50 wontfix, firefox51- wontfix, firefox52+ verified, firefox53+ verified, firefox54 verified)

VERIFIED FIXED
Firefox 54
Tracking Status
firefox50 --- wontfix
firefox51 - wontfix
firefox52 + verified
firefox53 + verified
firefox54 --- verified

People

(Reporter: iewueffu, Assigned: Honza)

References

Details

(Keywords: regression)

Attachments

(2 files)

When you hover over the "JSON", "Raw Data", and "Headers" buttons, the following styling issues apply:
1) the cursor is changed to the text cursor, rather than the default cursor
2) the background color of non-selected buttons does not change to gray

to be consistent with the buttons in developer tools, the above 2 items should be addressed.

I am attaching a screen capture which shows how the hover state appears (correctly) in developer tools. I have not included a screen capture of how this looks in json viewer because for some reason when I take a screen capture it shows my cursor differently from how my cursor actually appears when hovering the json viewer buttons.
As the JSON Viewer is going to be released by default in FF53, let's track this bug to finish polishing.

> 1) the cursor is changed to the text cursor, rather than the default cursor

It's a side effect of Bug 1287389:
https://hg.mozilla.org/integration/fx-team/pushloghtml?fromchange=c0e4639e98b00f4fdb47fdbdbb6434557e7d9db7&tochange=5e045cadaa9fef76f5b5dc61a25cdd927e425486

> 2) the background color of non-selected buttons does not change to gray

It's due to Gabriel Luong — Bug 1241720 - Modal to promote devices from larger DB r=jyrans
Reg range: https://hg.mozilla.org/integration/fx-team/pushloghtml?fromchange=c1a9497a212d54fda334e9174aac33926196df8e&tochange=be1fd1c7e43f3969243b8c768d5dbe6de17f4f7c
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(jryans)
Keywords: regression
OS: Unspecified → All
Hardware: Unspecified → All
Too late for a fix in 51 but we could still take a patch for 52/53.
I defer to Honza's judgement on the priority of fixing this in 53.
Flags: needinfo?(jryans) → needinfo?(odvarko)
Flags: needinfo?(odvarko)
Assignee: nobody → odvarko
Status: NEW → ASSIGNED
Comment on attachment 8828305 [details]
Bug 1330827 - Fix CSS for Tab's cursor and background;

https://reviewboard.mozilla.org/r/105768/#review106792

Looks reasonable to me, thanks!
Attachment #8828305 - Flags: review?(jryans) → review+
Pushed by jodvarko@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/cf116f73a2d2
Fix CSS for Tab's cursor and background; r=jryans
[task 2017-01-20T07:33:16.648646Z] 07:33:16     INFO -  ERROR: The following duplicated files are not allowed:
[task 2017-01-20T07:33:16.648841Z] 07:33:16     INFO -  browser/chrome/devtools/modules/devtools/client/themes/toolbars.css
[task 2017-01-20T07:33:16.649018Z] 07:33:16     INFO -  browser/chrome/devtools/skin/toolbars.css

is the reason for the bustage/backout in case it helps
@jryans: any tips how to fix this? Can I somehow change the target name for 'toolbars.css'?

Honza
Flags: needinfo?(odvarko) → needinfo?(jryans)
I think the quick fix for now is to accept the duplicate by listing those entries in allowed-dupes.mn[1].  Switching our CSS references to resource:// will remove the duplication, but that's a larger effort tracked in bug 1311541.

[1]: http://searchfox.org/mozilla-central/source/browser/installer/allowed-dupes.mn
Flags: needinfo?(jryans)
Pushed by jodvarko@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/43484a1523e0
Fix CSS for Tab's cursor and background; r=jryans
Backed out for build bustage:

https://hg.mozilla.org/integration/autoland/rev/7a028e8ce38da08bafce87c21a471608596d0fd0

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&revision=43484a1523e01a71a67a9a1abeeb96222f7d0245
Failure log: https://treeherder.mozilla.org/logviewer.html#?job_id=71177632&repo=autoland

[task 2017-01-23T15:17:00.224277Z] 15:17:00     INFO -  ERROR: The following duplicated files are not allowed:
[task 2017-01-23T15:17:00.224417Z] 15:17:00     INFO -  browser/chrome/devtools/skin/toolbars.css
[task 2017-01-23T15:17:00.224584Z] 15:17:00     INFO -  /home/worker/workspace/build/src/toolkit/mozapps/installer/packager.mk:41: recipe for target 'stage-package' failed
Flags: needinfo?(odvarko)
Sorry about this, I'll re-land updated patch in a minute.

Honza
Flags: needinfo?(odvarko)
Pushed by jodvarko@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/9cc3519d91b8
Fix CSS for Tab's cursor and background; r=jryans
https://hg.mozilla.org/mozilla-central/rev/9cc3519d91b8
Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 54
Please request Aurora/Beta approval on this when you get a chance.
Flags: needinfo?(odvarko)
Comment on attachment 8828305 [details]
Bug 1330827 - Fix CSS for Tab's cursor and background;

Approval Request Comment
[Feature/Bug causing the regression]: Bug 1287389, Bug 1241720
[User impact if declined]: Wrong back highlighting on mouse hover and cursor
[Is this code covered by automated tests?]: no
[Has the fix been verified in Nightly?]: yes
[Needs manual test from QE? If yes, steps to reproduce]: 
When you hover over the "JSON", "Raw Data", and "Headers" buttons, the following styling issues apply:
1) the cursor is changed to the text cursor, rather than the default cursor
2) the background color of non-selected buttons does not change to gray

[List of other uplifts needed for the feature/fix]: n/a
[Is the change risky?]: Low risk
[Why is the change risky/not risky?]: mostly CSS changes
[String changes made/needed]: n/a
Flags: needinfo?(odvarko)
Attachment #8828305 - Flags: approval-mozilla-aurora?
Comment on attachment 8828305 [details]
Bug 1330827 - Fix CSS for Tab's cursor and background;

Approval Request Comment
[Feature/Bug causing the regression]: Bug 1287389, Bug 1241720
[User impact if declined]: Wrong back highlighting on mouse hover and cursor
[Is this code covered by automated tests?]: no
[Has the fix been verified in Nightly?]: yes
[Needs manual test from QE? If yes, steps to reproduce]: 
When you hover over the "JSON", "Raw Data", and "Headers" buttons, the following styling issues apply:
1) the cursor is changed to the text cursor, rather than the default cursor
2) the background color of non-selected buttons does not change to gray

[List of other uplifts needed for the feature/fix]: n/a
[Is the change risky?]: Low risk
[Why is the change risky/not risky?]: mostly CSS changes
[String changes made/needed]: n/a
Attachment #8828305 - Flags: approval-mozilla-beta?
Comment on attachment 8828305 [details]
Bug 1330827 - Fix CSS for Tab's cursor and background;

devtools json viewer fix for aurora53 and beta52
Attachment #8828305 - Flags: approval-mozilla-beta?
Attachment #8828305 - Flags: approval-mozilla-beta+
Attachment #8828305 - Flags: approval-mozilla-aurora?
Attachment #8828305 - Flags: approval-mozilla-aurora+
I reproduced this issue using 53.0a1, build ID: 20170112030301, on Windows 10 x64.
I can confirm this issue is fixed, I verified on Fx 53.0a2, build ID: 20170126004004 and Fx54.0a1, build ID: 20170126030209.
However this issue is still reproducible on Fx 52.0b1, build ID: 20170124094647.

Cheers!
Flagging this for verification on beta, instructions in Comment 20.
Flags: qe-verify+
I reproduced the issue using Fx 52.0b1 on Windows 10 x64.
I can confirm it is fixed, I verified using Fx 52.0b2, on Windows 10 x64, Ubuntu 14.04 LTS and Mac OS X 10.11.

Note that this is default-off (devtools.jsonview.enabled;false) on 52.
Status: RESOLVED → VERIFIED
Flags: qe-verify+
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.