1405339 - Turn on CSS shapes highlighter by default for for clip-path only

Status: VERIFIED FIXED

(DevTools :: Inspector, enhancement, P3)

Description

[Mike Park [:mparkms]]

Turn on the CSS shapes highlighter by default, but it should only display for clip-path and not shape-outside unless the config "layout.css.shape-outside.enabled" is set to true (false by default).

Comment 1

[Mike Park [:mparkms]]

Attachment: Bug 1405339 - Turn on CSS shapes highlighter by default for clip-path only.

Review commit: https://reviewboard.mozilla.org/r/186080/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/186080/

Comment 2

[Gabriel Luong [:gl] (ΦωΦ)]

Comment on attachment 8914813 [details]
Bug 1405339 - Turn on CSS shapes highlighter by default for clip-path only.

https://reviewboard.mozilla.org/r/186080/#review191100

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/8b8f7f91765a
Turn on CSS shapes highlighter by default for clip-path only. r=gl

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/5537f731d4ad
Part 2: Enable the CSS shapes highlighter. r=me

Comment 5

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

Backed out because backed out bug 1383870 also touches shapes highlighter:

https://hg.mozilla.org/integration/mozilla-inbound/rev/8a05dc038f20f7106aee2a25ad279711e8a77ef0
https://hg.mozilla.org/integration/mozilla-inbound/rev/45c077e4ed67f73e459dfd6188c37aab20ca8d1a

Comment 6

[Mike Park [:mparkms]]

Comment on attachment 8914813 [details]
Bug 1405339 - Turn on CSS shapes highlighter by default for clip-path only.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/186080/diff/1-2/

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/69ce595533cd
Turn on CSS shapes highlighter by default for clip-path only. r=gl

Comment 8

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

Backed out bug 1405339 and bug 1383870 for failing devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js:

bug 1405339: https://hg.mozilla.org/integration/mozilla-inbound/rev/e81b9a208105128fbe23823beebb49a75012a711

bug 1383870: https://hg.mozilla.org/integration/mozilla-inbound/rev/2765b3d82a3665f8d5875d3729ca1cdc178a5ccd

Push which ran failing test: https://treeherder.mozilla.org/#/jobs?repo=mozilla-inbound&revision=8fd34c0fa84ad13f137ed292e9cb4a25fdfa4b26&filter-resultStatus=testfailed&filter-resultStatus=busted&filter-resultStatus=exception&filter-resultStatus=retry&filter-resultStatus=usercancel&filter-resultStatus=runnable
Failure log: https://treeherder.mozilla.org/logviewer.html#?job_id=134997546&repo=mozilla-inbound

[task 2017-10-04T21:42:37.402Z] 21:42:37     INFO - Entering test bound 
[task 2017-10-04T21:42:37.404Z] 21:42:37     INFO - Adding a new tab with URL: http://example.com/browser/devtools/client/inspector/test/doc_inspector_highlighter_cssshapes.html
[task 2017-10-04T21:42:37.405Z] 21:42:37     INFO - Buffered messages logged at 21:41:08
[task 2017-10-04T21:42:37.407Z] 21:42:37     INFO - Tab added and finished loading
[task 2017-10-04T21:42:37.409Z] 21:42:37     INFO - Opening the inspector
[task 2017-10-04T21:42:37.413Z] 21:42:37     INFO - Opening the toolbox
[task 2017-10-04T21:42:37.415Z] 21:42:37     INFO - Console message: [JavaScript Warning: "Unknown pseudo-class or pseudo-element ‘-moz-tree-line’.  Ruleset ignored due to bad selector." {file: "chrome://global/content/xul.css" line: 628}]
[task 2017-10-04T21:42:37.416Z] 21:42:37     INFO - Buffered messages logged at 21:41:10
[task 2017-10-04T21:42:37.419Z] 21:42:37     INFO - Console message: [JavaScript Warning: "Unknown property ‘user-select’.  Declaration dropped." {file: "resource://devtools/client/shared/components/reps/reps.css" line: 251 column: 13 source: "  user-select: none;"}]
[task 2017-10-04T21:42:37.423Z] 21:42:37     INFO - Console message: [JavaScript Warning: "Unknown property ‘user-select’.  Declaration dropped." {file: "resource://devtools/client/shared/components/reps/reps.css" line: 251 column: 13 source: "  user-select: none;"}]
[task 2017-10-04T21:42:37.424Z] 21:42:37     INFO - Buffered messages logged at 21:41:15
[task 2017-10-04T21:42:37.428Z] 21:42:37     INFO - Toolbox opened and focused
[task 2017-10-04T21:42:37.431Z] 21:42:37     INFO - Waiting for actor features to be detected
[task 2017-10-04T21:42:37.434Z] 21:42:37     INFO - Buffered messages logged at 21:41:16
[task 2017-10-04T21:42:37.436Z] 21:42:37     INFO - Selecting the node for '#polygon'
[task 2017-10-04T21:42:37.441Z] 21:42:37     INFO - Toggle shapes highlighter
[task 2017-10-04T21:42:37.443Z] 21:42:37     INFO - Buffered messages logged at 21:41:17
[task 2017-10-04T21:42:37.447Z] 21:42:37     INFO - TEST-PASS | devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js | Hover marker on highlighter is not visible - 
[task 2017-10-04T21:42:37.454Z] 21:42:37     INFO - Hover over point 0 in rule view
[task 2017-10-04T21:42:37.454Z] 21:42:37     INFO - TEST-PASS | devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js | Hovered span is active - 
[task 2017-10-04T21:42:37.455Z] 21:42:37     INFO - TEST-PASS | devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js | Hovered point is saved to state - 
[task 2017-10-04T21:42:37.455Z] 21:42:37     INFO - TEST-PASS | devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js | Marker on highlighter is visible - 
[task 2017-10-04T21:42:37.456Z] 21:42:37     INFO - Move mouse off point
[task 2017-10-04T21:42:37.457Z] 21:42:37     INFO - TEST-PASS | devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js | Hovered span is no longer active - 
[task 2017-10-04T21:42:37.457Z] 21:42:37     INFO - TEST-PASS | devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js | Hovered point is null - 
[task 2017-10-04T21:42:37.458Z] 21:42:37     INFO - TEST-PASS | devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js | Marker on highlighter is not visible - 
[task 2017-10-04T21:42:37.458Z] 21:42:37     INFO - Hide shapes highlighter
[task 2017-10-04T21:42:37.459Z] 21:42:37     INFO - Toggle shapes highlighter
[task 2017-10-04T21:42:37.459Z] 21:42:37     INFO - Buffered messages logged at 21:41:18
[task 2017-10-04T21:42:37.460Z] 21:42:37     INFO - Toggle shapes highlighter
[task 2017-10-04T21:42:37.462Z] 21:42:37     INFO - Hover over first point in highlighter
[task 2017-10-04T21:42:37.463Z] 21:42:37     INFO - Buffered messages finished
[task 2017-10-04T21:42:37.465Z] 21:42:37     INFO - TEST-UNEXPECTED-FAIL | devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js | Test timed out -

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/4a84d687f1d2
Turn on CSS shapes highlighter by default for clip-path only. r=gl

Comment 10

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/mozilla-central/rev/4a84d687f1d2

Comment 11

[Chris Mills [:cmills]]

I have documented this:

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes

I've also added a note to the Fx58 rel notes:

https://developer.mozilla.org/en-US/Firefox/Releases/58#Developer_Tools

Let me know if that's OK, or if you think anything else is needed. Thanks!

Comment 12

[Rares Doghi, Desktop QA]

Hi everyone, i have retested this issue on Windows 10 , Windows 7 , Mac OSx and Linux using the latest version of nightly 62.0a1 (2018-05-28) and i can Confirm it as Fixed.
I will mark it accordingly.