[Inactive CSS] Display a warning when z-index, top, right, bottom or left is used on a non-positioned element
Categories
(DevTools :: Inspector: Rules, enhancement, P3)
Tracking
(firefox74 fixed)
| Tracking | Status | |
|---|---|---|
| firefox74 | --- | fixed |
People
(Reporter: miker, Assigned: pbro)
References
(Blocks 1 open bug)
Details
(Whiteboard: [Importance: 84.1%])
Attachments
(1 file)
Only positioned elements:
[
"bottom",
"left",
"right",
"top",
"z-index",
]
[This property] doesn't have an effect because it only applies to positioned elements. Try adding properties like position:absolute or position:relative
|
||
Comment 1•5 years ago
|
||
Hi! Can I work on this issue? I'm new in contributing to DevTools so maybe I would reach out if I get stuck :)
|
Assignee | |
Comment 2•5 years ago
|
||
Yes you can! Thank you for wanting to help us make this better for everyone.
I'll assign the bug to you now.
The very first thing you need to figure out is exactly when the CSS properties listed in comment 0 do not apply to elements.
Once you have the right conditions for this, you can go ahead and add a new validator for it.
To set up your dev environment and know how to make changes and test them in Firefox, please go through: https://docs.firefox-dev.tools/
Most of the code you need to change is in 1 file https://searchfox.org/mozilla-central/source/devtools/server/actors/utils/inactive-property-helper.js
You will need to add a new validator like this one https://searchfox.org/mozilla-central/source/devtools/server/actors/utils/inactive-property-helper.js#55-63
The localized text strings need to be added in this file https://searchfox.org/mozilla-central/source/devtools/client/locales/en-US/tooltips.ftl
And finally, you need to add a test case for it. We have a unit test in devtools/server/tests/browser/browser_inspector-inactive-property-helper.js, where you can check your validator is doing the right thing.
|
|
Assignee | |
Updated•5 years ago
|
|
|
Assignee | |
Comment 3•5 years ago
|
||
Hi Shafiya, I'm wondering if you are still interested in this bug? If so and you need more time, that's fine, no urgency.
But if you don't plan on working on it anymore, please let me know so we can make it available to others.
|
|
Assignee | |
Updated•5 years ago
|
|
|
Assignee | |
Updated•5 years ago
|
|
Reporter | |
Updated•5 years ago
|
|
|
Assignee | |
Comment 4•4 years ago
|
||
top, right, bottom, left and z-index can only be used on elements that are positioned.
Positioned elements are those that have a computed position value that is not static.
This patch adds a new simple validator for this, as well as a test that checks all
cases we care about it.
|
||
Updated•4 years ago
|
Pushed by pbrosset@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/689b500d4328 InactiveCSS warning for some properties on unpositioned elements r=rcaliman,fluent-reviewers,flod
|
||
Comment 6•4 years ago
|
||
| bugherder | ||
Description
•