Closed Bug 1383870 Opened 2 years ago Closed 2 years ago

CSS shapes highlighter does not handle mouse events properly on elements inside iframe

Categories

(DevTools :: Inspector, defect, P3)

defect

Tracking

(Not tracked)

VERIFIED FIXED
Firefox 58

People

(Reporter: mpark, Assigned: mpark)

References

(Blocks 1 open bug)

Details

Attachments

(1 file)

The CSS shapes highlighter does not appear to be correctly handling mouse events when the highlighter is active on an element inside an iframe. It seems that the iframe's offset within the page are not taken into account, as the mouse must be offset from the actual point by the same amount the iframe is offset within the page for the mouse event to be handled properly.
Priority: -- → P3
Blocks: 1242029
Severity: normal → enhancement
Attachment #8889903 - Flags: review?(gl)
Comment on attachment 8889903 [details]
Bug 1383870 - CSS shapes highlighter incorrectly handles mouse events on elements in iframe.

https://reviewboard.mozilla.org/r/160956/#review191054

::: devtools/server/actors/highlighters/shapes.js:196
(Diff revision 2)
> +        getComputedStyle(this.currentNode).stroke !== "none" && !this.useStrokeBox) {
> +      dims = getObjectBoundingBox(dims.top, dims.left,
> +        dims.width, dims.height, this.currentNode);
> +    }
> +
> +    let zoom = getCurrentZoom(this.win);

Let's move this after dims variable declaration.
Attachment #8889903 - Flags: review?(gl) → review+
Keywords: checkin-needed
Assignee: nobody → mpark
This patch doesn't meet the MozReview review requirements necessary for Autoland to push it.
http://mozilla-version-control-tools.readthedocs.io/en/latest/mozreview/autoland.html#landing-commits
Keywords: checkin-needed
Pushed by gabriel.luong@gmail.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/118ce2fecfca
CSS shapes highlighter incorrectly handles mouse events on elements in iframe. r=gl
Backed out for failing devtools' devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js:

https://hg.mozilla.org/integration/mozilla-inbound/rev/dd1cbaf48f9a7e495fdd6d5da3c65be595956b8d

Push with failure: https://treeherder.mozilla.org/#/jobs?repo=mozilla-inbound&revision=118ce2fecfcae29c20ae34918efd772a4a2fe1bd&filter-resultStatus=testfailed&filter-resultStatus=busted&filter-resultStatus=exception&filter-resultStatus=retry&filter-resultStatus=usercancel&filter-resultStatus=runnable
Later push which ran failing tests on more platforms: https://treeherder.mozilla.org/#/jobs?repo=mozilla-inbound&revision=b87f7d3fddff6ad5ef36ca5d8127a337a749ea03&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=134688216&repo=mozilla-inbound

18:07:04     INFO -  183 INFO Entering test bound
18:07:04     INFO -  184 INFO Adding a new tab with URL: http://example.com/browser/devtools/client/inspector/test/doc_inspector_highlighter_cssshapes.html
18:07:04     INFO -  185 INFO Tab added and finished loading
18:07:04     INFO -  186 INFO Opening the inspector
18:07:04     INFO -  187 INFO Opening the toolbox
18:07:04     INFO -  Buffered messages logged at 18:07:01
18:07:04     INFO -  188 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;"}]
18:07:04     INFO -  189 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;"}]
18:07:04     INFO -  Buffered messages logged at 18:07:02
18:07:04     INFO -  190 INFO Toolbox opened and focused
18:07:04     INFO -  191 INFO Waiting for actor features to be detected
18:07:04     INFO -  Buffered messages logged at 18:07:03
18:07:04     INFO -  192 INFO Selecting the node for '#polygon'
18:07:04     INFO -  193 INFO Toggle shapes highlighter
18:07:04     INFO -  194 INFO TEST-PASS | devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js | Hover marker on highlighter is not visible -
18:07:04     INFO -  195 INFO Hover over point 0 in rule view
18:07:04     INFO -  Buffered messages logged at 18:07:04
18:07:04     INFO -  196 INFO TEST-PASS | devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js | Hovered span is active -
18:07:04     INFO -  197 INFO TEST-PASS | devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js | Hovered point is saved to state -
18:07:04     INFO -  198 INFO TEST-PASS | devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js | Marker on highlighter is visible -
18:07:04     INFO -  199 INFO Move mouse off point
18:07:04     INFO -  200 INFO TEST-PASS | devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js | Hovered span is no longer active -
18:07:04     INFO -  201 INFO TEST-PASS | devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js | Hovered point is null -
18:07:04     INFO -  202 INFO TEST-PASS | devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js | Marker on highlighter is not visible -
18:07:04     INFO -  203 INFO Hide shapes highlighter
18:07:04     INFO -  204 INFO Toggle shapes highlighter
18:07:04     INFO -  205 INFO Toggle shapes highlighter
18:07:04     INFO -  206 INFO Hover over first point in highlighter
18:07:04     INFO -  207 INFO TEST-PASS | devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js | Marker on highlighter is visible -
18:07:04     INFO -  Buffered messages finished
18:07:04    ERROR -  208 INFO TEST-UNEXPECTED-FAIL | devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js | Span for point 0 is active -
18:07:04     INFO -  Stack trace:
18:07:04     INFO -      chrome://mochitests/content/browser/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js:highlightFromHighlighter:83
18:07:04     INFO -      Promise*scheduleWalkerLoop@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:739:11
18:07:04     INFO -      schedulePromise@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:770:7
18:07:04     INFO -      completePromise@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:707:7
18:07:04     INFO -      onPacket/<@resource://devtools/shared/base-loader.js -> resource://devtools/shared/protocol.js:1356:9
18:07:04     INFO -      DevTools RDP*request@resource://devtools/shared/base-loader.js -> resource://devtools/shared/protocol.js:1296:14
18:07:04     INFO -      generateRequestMethods/</frontProto[name]@resource://devtools/shared/base-loader.js -> resource://devtools/shared/protocol.js:1454:14
18:07:04     INFO -      getHighlighterHelperFor/<@chrome://mochitests/content/browser/devtools/client/inspector/test/head.js:414:29
18:07:04     INFO -      _run@resource://devtools/shared/base-loader.js -> resource://devtools/shared/task.js:310:39
18:07:04     INFO -      TaskImpl@resource://devtools/shared/base-loader.js -> resource://devtools/shared/task.js:272:3
18:07:04     INFO -      asyncFunction@resource://devtools/shared/base-loader.js -> resource://devtools/shared/task.js:246:14
18:07:04     INFO -      @chrome://mochitests/content/browser/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js:17:22
18:07:04     INFO -      TaskImpl_run@resource://gre/modules/Task.jsm:331:42
18:07:04     INFO -      process@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:922:23
18:07:04     INFO -      walkerLoop@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:806:7
18:07:04     INFO -      Promise*scheduleWalkerLoop@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:739:11
18:07:04     INFO -      schedulePromise@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:770:7
18:07:04     INFO -      completePromise@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:707:7
18:07:04     INFO -      onResponse@resource://devtools/shared/base-loader.js -> resource://devtools/shared/DevToolsUtils.js:513:7
18:07:04     INFO -      onStopRequest@resource://gre/modules/NetUtil.jsm:131:17
Flags: needinfo?(mpark)
Pushed by gabriel.luong@gmail.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/135e50ccfd3c
CSS shapes highlighter incorrectly handles mouse events on elements in iframe. r=gl
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 -
Duplicate of this bug: 1405856
Pushed by gabriel.luong@gmail.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/3f196fc740be
CSS shapes highlighter incorrectly handles mouse events on elements in iframe. r=gl
Flags: needinfo?(mpark)
Pushed by gabriel.luong@gmail.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/9a8ce9a0f2c4
CSS shapes highlighter incorrectly handles mouse events on elements in iframe. r=gl
https://hg.mozilla.org/mozilla-central/rev/9a8ce9a0f2c4
Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 58
It's not ok for me. It's now impossible to drag point outside the iframe.
Depends on: 1408468
Product: Firefox → DevTools
I have reproduced this issue using Firefox 58.0a1 (2017.10.13) on Windows 10 x64.
I can confirm this issue is fixed, I verified using Firefox 58.0.2 on Ubuntu 16.04 x64, Windows 10 x64 and Mac OS X 10.13.5.
I mark this bug verified because there is another bug for scroll in iframe: https://bugzilla.mozilla.org/show_bug.cgi?id=1455538.
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.