Closed Bug 1653290 Opened 4 years ago Closed 4 years ago

Implement overflow badge for every overflowing causing node

Categories

(DevTools :: Inspector, task, P3)

Product:
DevTools
Component:
Inspector
Type:
task

Tracking

(firefox81 fixed)

Status:
RESOLVED FIXED
Milestone:
81 Branch
Tracking Flags:
Tracking Status
firefox81 --- fixed

People

(Reporter: gl, Assigned: manas.khurana20)

References

(Blocks 1 open bug)

Details

Attachments

(2 files)

Bug 1653290 - Add overflow badge and show an overflow badge for every scroll causing element dynamically and a test to check its working. r=gl
(deleted), text/x-phabricator-request
Details
This is the diff of the code I've added locally to the above patch which constitutes my approach to add the properties to the actor intead of rawNode
(deleted), application/octet-stream
Details

This is an incremental change to utilize the newly added InspectorUtils.getOverflowingChildrenOfElement to add an overflow badge for every overflowing causing node and put this behind an existing pref such as “devtools.overflow.debugging.enabled”.

Blocks: overflow-debugging
Severity: -- → S3
Priority: -- → P3
Assignee: nobody → manas.khurana20
Attachment #9165009 - Attachment description: Bug 1653290 - Add overflow badge and show an overflow badge for every scroll causing element. r=gl → Bug 1653290 - Add overflow badge and show an overflow badge for every scroll causing element dynamically and a test to check its working. r=gl

When I'm using the actor instead of the rawNode to store the data, I have to call attachElement in updateOverflowCausingElements. When attachElement is called, it ends up calling NodeActor.initialize, which is where the call to attachElement is present in the first place. So this creates a series of callbacks all the way to the deepest node, which is causing the "too much recursion" error. If I remove attachElement, this.walker.getNode is returning undefined. So if the actor needs to be used, updateOverflowCausingElements must not be called in NodeActor.initialize but somewhere else perhaps.

Pushed by gluong@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/2d126d9f7ef8 Add overflow badge and show an overflow badge for every scroll causing element dynamically and a test to check its working. r=gl,devtools-backward-compat-reviewers,jdescottes

Backed out changeset 2d126d9f7ef8 (bug 1653290) for /browser_markup_overflow_badge.js failures

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&group_state=expanded&selectedTaskRun=DaUZOWekS3CK9rR2iAUkDA.0&searchStr=mochitest-devtools-chrome-e10s%2Cdt&fromchange=08c512440c1b8aa80a4483fca59c888e8c88a903&tochange=a518405abe4c93e6d8df622f59d5f01c4766e1d5

Backout link: https://hg.mozilla.org/integration/autoland/rev/a518405abe4c93e6d8df622f59d5f01c4766e1d5

Failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=312030698&repo=autoland&lineNumber=12886

task 2020-08-04T19:16:43.325Z] 19:16:43     INFO - TEST-START | devtools/client/inspector/markup/test/browser_markup_overflow_badge.js
[task 2020-08-04T19:16:43.328Z] 19:16:43     INFO - Entering test bound 
[task 2020-08-04T19:16:43.339Z] 19:16:43     INFO - Adding a new tab with URL: data:text/html;charset=utf-8,%0A%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%20%20.parent%20%7B%0A%20%20%20%20%20%20%20%20width%3A%20200px%3B%0A%20%20%20%20%20%20%20%20height%3A%20200px%3B%0A%20%20%20%20%20%20%20%20overflow%3A%20scroll%3B%0A%20%20%20%20%7D%0A%20%20%20%20.fixed%20%7B%0A%20%20%20%20%20%20%20%20width%3A%2050px%3B%0A%20%20%20%20%20%20%20%20height%3A%2050px%3B%0A%20%20%20%20%7D%0A%20%20%20%20.shift%20%7B%0A%20%20%20%20%20%20%20%20margin-left%3A%20300px%3B%0A%20%20%20%20%7D%0A%20%20%3C%2Fstyle%3E%0A%20%20%3Cdiv%20id%3D%22top%22%20class%3D%22parent%22%3E%0A%20%20%20%20%3Cdiv%20id%3D%22child1%22%20class%3D%22fixed%20shift%22%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20id%3D%22child2%22%20class%3D%22fixed%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20id%3D%22child3%22%20class%3D%22shift%22%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20id%3D%22child4%22%20class%3D%22fixed%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A
[task 2020-08-04T19:16:43.407Z] 19:16:43     INFO - Tab added and finished loading
[task 2020-08-04T19:16:43.407Z] 19:16:43     INFO - Opening the inspector
[task 2020-08-04T19:16:43.407Z] 19:16:43     INFO - Opening the toolbox
[task 2020-08-04T19:16:43.811Z] 19:16:43     INFO - GECKO(3321) | console.log: "[DISPATCH] action type:" "UPDATE_GRIDS"
[task 2020-08-04T19:16:43.852Z] 19:16:43     INFO - GECKO(3321) | console.log: "[DISPATCH] action type:" "CLEAR_FLEXBOX"
[task 2020-08-04T19:16:43.876Z] 19:16:43     INFO - GECKO(3321) | console.log: "[DISPATCH] action type:" "UPDATE_GRIDS"
[task 2020-08-04T19:16:43.884Z] 19:16:43     INFO - GECKO(3321) | console.log: "[DISPATCH] action type:" "CLEAR_FLEXBOX"
[task 2020-08-04T19:16:43.884Z] 19:16:43     INFO - Toolbox opened and focused
[task 2020-08-04T19:16:43.884Z] 19:16:43     INFO - Getting the markup-container for node #top
[task 2020-08-04T19:16:43.884Z] 19:16:43     INFO - GECKO(3321) | console.log: "[DISPATCH] action type:" "UPDATE_OFFSET_PARENT"
[task 2020-08-04T19:16:43.902Z] 19:16:43     INFO - GECKO(3321) | console.log: "[DISPATCH] action type:" "UPDATE_LAYOUT"
[task 2020-08-04T19:16:43.918Z] 19:16:43     INFO - TEST-PASS | devtools/client/inspector/markup/test/browser_markup_overflow_badge.js | Found markup-container for selector: #top - 
[task 2020-08-04T19:16:43.934Z] 19:16:43     INFO - Getting the markup-container for node #child1
[task 2020-08-04T19:16:43.934Z] 19:16:43     INFO - TEST-PASS | devtools/client/inspector/markup/test/browser_markup_overflow_badge.js | Found markup-container for selector: #child1 - 
[task 2020-08-04T19:16:43.934Z] 19:16:43     INFO - Getting the markup-container for node #child2
[task 2020-08-04T19:16:43.953Z] 19:16:43     INFO - TEST-PASS | devtools/client/inspector/markup/test/browser_markup_overflow_badge.js | Found markup-container for selector: #child2 - 
[task 2020-08-04T19:16:43.953Z] 19:16:43     INFO - Getting the markup-container for node #child3
[task 2020-08-04T19:16:43.961Z] 19:16:43     INFO - TEST-PASS | devtools/client/inspector/markup/test/browser_markup_overflow_badge.js | Found markup-container for selector: #child3 - 
[task 2020-08-04T19:16:43.961Z] 19:16:43     INFO - Getting the markup-container for node #child4
[task 2020-08-04T19:16:43.961Z] 19:16:43     INFO - GECKO(3321) | console.log: "[DISPATCH] action type:" "CLEAR_FLEXBOX"
[task 2020-08-04T19:16:43.966Z] 19:16:43     INFO - TEST-PASS | devtools/client/inspector/markup/test/browser_markup_overflow_badge.js | Found markup-container for selector: #child4 - 
[task 2020-08-04T19:16:43.966Z] 19:16:43     INFO - Checking if overflow badges appear correctly right after the markup-view is loaded
[task 2020-08-04T19:16:43.966Z] 19:16:43     INFO - TEST-INFO | started process screentopng
[task 2020-08-04T19:16:44.132Z] 19:16:44     INFO - TEST-INFO | screentopng: exit 0
[task 2020-08-04T19:16:44.133Z] 19:16:44     INFO - TEST-UNEXPECTED-FAIL | devtools/client/inspector/markup/test/browser_markup_overflow_badge.js | Overflow badge exists in child1 - 
[task 2020-08-04T19:16:44.133Z] 19:16:44     INFO - Stack trace:
[task 2020-08-04T19:16:44.134Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:test_ok:1299
[task 2020-08-04T19:16:44.135Z] 19:16:44     INFO - chrome://mochitests/content/browser/devtools/client/inspector/markup/test/browser_markup_overflow_badge.js:checkBadges:97
[task 2020-08-04T19:16:44.135Z] 19:16:44     INFO - chrome://mochitests/content/browser/devtools/client/inspector/markup/test/browser_markup_overflow_badge.js:null:53
[task 2020-08-04T19:16:44.135Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1064
[task 2020-08-04T19:16:44.135Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1104
[task 2020-08-04T19:16:44.135Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:927
[task 2020-08-04T19:16:44.136Z] 19:16:44     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:1032
[task 2020-08-04T19:16:44.136Z] 19:16:44     INFO - Not taking screenshot here: see the one that was previously logged
[task 2020-08-04T19:16:44.136Z] 19:16:44     INFO - TEST-UNEXPECTED-FAIL | devtools/client/inspector/markup/test/browser_markup_overflow_badge.js | Overflow badge exists in child4 - 
[task 2020-08-04T19:16:44.137Z] 19:16:44     INFO - Stack trace:
[task 2020-08-04T19:16:44.137Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:test_ok:1299
[task 2020-08-04T19:16:44.137Z] 19:16:44     INFO - chrome://mochitests/content/browser/devtools/client/inspector/markup/test/browser_markup_overflow_badge.js:checkBadges:97
[task 2020-08-04T19:16:44.137Z] 19:16:44     INFO - chrome://mochitests/content/browser/devtools/client/inspector/markup/test/browser_markup_overflow_badge.js:null:53
[task 2020-08-04T19:16:44.137Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1064
[task 2020-08-04T19:16:44.137Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1104
[task 2020-08-04T19:16:44.137Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:927
[task 2020-08-04T19:16:44.137Z] 19:16:44     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:1032
[task 2020-08-04T19:16:44.137Z] 19:16:44     INFO - TEST-PASS | devtools/client/inspector/markup/test/browser_markup_overflow_badge.js | Overflow badge does not exist in child2 - 
[task 2020-08-04T19:16:44.138Z] 19:16:44     INFO - TEST-PASS | devtools/client/inspector/markup/test/browser_markup_overflow_badge.js | Overflow badge does not exist in child3 - 
[task 2020-08-04T19:16:44.138Z] 19:16:44     INFO - Changing the elements to check whether the badge updates correctly
[task 2020-08-04T19:16:44.138Z] 19:16:44     INFO - GECKO(3321) | console.log: "[DISPATCH] action type:" "UPDATE_OFFSET_PARENT"
[task 2020-08-04T19:16:44.139Z] 19:16:44     INFO - GECKO(3321) | console.log: "[DISPATCH] action type:" "UPDATE_LAYOUT"
[task 2020-08-04T19:16:44.240Z] 19:16:44     INFO - Not taking screenshot here: see the one that was previously logged
[task 2020-08-04T19:16:44.241Z] 19:16:44     INFO - TEST-UNEXPECTED-FAIL | devtools/client/inspector/markup/test/browser_markup_overflow_badge.js | Overflow badge exists in child2 - 
[task 2020-08-04T19:16:44.242Z] 19:16:44     INFO - Stack trace:
[task 2020-08-04T19:16:44.242Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:test_ok:1299
[task 2020-08-04T19:16:44.243Z] 19:16:44     INFO - chrome://mochitests/content/browser/devtools/client/inspector/markup/test/browser_markup_overflow_badge.js:checkBadges:97
[task 2020-08-04T19:16:44.244Z] 19:16:44     INFO - chrome://mochitests/content/browser/devtools/client/inspector/markup/test/browser_markup_overflow_badge.js:null:59
[task 2020-08-04T19:16:44.244Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1064
[task 2020-08-04T19:16:44.244Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1104
[task 2020-08-04T19:16:44.244Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:927
[task 2020-08-04T19:16:44.245Z] 19:16:44     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:1032
[task 2020-08-04T19:16:44.246Z] 19:16:44     INFO - Not taking screenshot here: see the one that was previously logged
[task 2020-08-04T19:16:44.247Z] 19:16:44     INFO - TEST-UNEXPECTED-FAIL | devtools/client/inspector/markup/test/browser_markup_overflow_badge.js | Overflow badge exists in child3 - 
[task 2020-08-04T19:16:44.247Z] 19:16:44     INFO - Stack trace:
[task 2020-08-04T19:16:44.247Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:test_ok:1299
[task 2020-08-04T19:16:44.248Z] 19:16:44     INFO - chrome://mochitests/content/browser/devtools/client/inspector/markup/test/browser_markup_overflow_badge.js:checkBadges:97
[task 2020-08-04T19:16:44.248Z] 19:16:44     INFO - chrome://mochitests/content/browser/devtools/client/inspector/markup/test/browser_markup_overflow_badge.js:null:59
[task 2020-08-04T19:16:44.248Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1064
[task 2020-08-04T19:16:44.249Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1104
[task 2020-08-04T19:16:44.249Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:927
[task 2020-08-04T19:16:44.251Z] 19:16:44     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:1032
[task 2020-08-04T19:16:44.251Z] 19:16:44     INFO - TEST-PASS | devtools/client/inspector/markup/test/browser_markup_overflow_badge.js | Overflow badge does not exist in child1 - 
[task 2020-08-04T19:16:44.252Z] 19:16:44     INFO - TEST-PASS | devtools/client/inspector/markup/test/browser_markup_overflow_badge.js | Overflow badge does not exist in child4 - 
[task 2020-08-04T19:16:44.253Z] 19:16:44     INFO - Once again, changing the elements to check whether the badge updates correctly
[task 2020-08-04T19:16:44.268Z] 19:16:44     INFO - GECKO(3321) | console.log: "[DISPATCH] action type:" "UPDATE_OFFSET_PARENT"
[task 2020-08-04T19:16:44.268Z] 19:16:44     INFO - GECKO(3321) | console.log: "[DISPATCH] action type:" "UPDATE_LAYOUT"
[task 2020-08-04T19:16:44.436Z] 19:16:44     INFO - GECKO(3321) | console.log: "[DISPATCH] action type:" "CLEAR_FLEXBOX"
[task 2020-08-04T19:16:44.544Z] 19:16:44     INFO - Not taking screenshot here: see the one that was previously logged
[task 2020-08-04T19:16:44.547Z] 19:16:44     INFO - TEST-UNEXPECTED-FAIL | devtools/client/inspector/markup/test/browser_markup_overflow_badge.js | Overflow badge exists in child1 - 
[task 2020-08-04T19:16:44.547Z] 19:16:44     INFO - Stack trace:
[task 2020-08-04T19:16:44.547Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:test_ok:1299
[task 2020-08-04T19:16:44.547Z] 19:16:44     INFO - chrome://mochitests/content/browser/devtools/client/inspector/markup/test/browser_markup_overflow_badge.js:checkBadges:97
[task 2020-08-04T19:16:44.549Z] 19:16:44     INFO - chrome://mochitests/content/browser/devtools/client/inspector/markup/test/browser_markup_overflow_badge.js:null:67
[task 2020-08-04T19:16:44.549Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1064
[task 2020-08-04T19:16:44.549Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1104
[task 2020-08-04T19:16:44.549Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:927
[task 2020-08-04T19:16:44.549Z] 19:16:44     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:1032
[task 2020-08-04T19:16:44.549Z] 19:16:44     INFO - Not taking screenshot here: see the one that was previously logged
[task 2020-08-04T19:16:44.549Z] 19:16:44     INFO - TEST-UNEXPECTED-FAIL | devtools/client/inspector/markup/test/browser_markup_overflow_badge.js | Overflow badge exists in child4 - 
[task 2020-08-04T19:16:44.549Z] 19:16:44     INFO - Stack trace:
[task 2020-08-04T19:16:44.549Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:test_ok:1299
[task 2020-08-04T19:16:44.550Z] 19:16:44     INFO - chrome://mochitests/content/browser/devtools/client/inspector/markup/test/browser_markup_overflow_badge.js:checkBadges:97
[task 2020-08-04T19:16:44.550Z] 19:16:44     INFO - chrome://mochitests/content/browser/devtools/client/inspector/markup/test/browser_markup_overflow_badge.js:null:67
[task 2020-08-04T19:16:44.550Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1064
[task 2020-08-04T19:16:44.550Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1104
[task 2020-08-04T19:16:44.550Z] 19:16:44     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:927
[task 2020-08-04T19:16:44.550Z] 19:16:44     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:1032
[task 2020-08-04T19:16:44.550Z] 19:16:44     INFO - TEST-PASS | devtools/client/inspector/markup/test/browser_markup_overflow_badge.js | Overflow badge does not exist in child2 - 
[task 2020-08-04T19:16:44.550Z] 19:16:44     INFO - TEST-PASS | devtools/client/inspector/markup/test/browser_markup_overflow_badge.js | Overflow badge does not exist in child3 - 
[task 2020-08-04T19:16:44.550Z] 19:16:44     INFO - Leaving test bound 
[task 2020-08-04T19:16:44.750Z] 19:16:44     INFO - Removing tab.
[task 2020-08-04T19:16:44.751Z] 19:16:44     INFO - Waiting for event: 'TabClose' on [object XULElement].
[task 2020-08-04T19:16:44.759Z] 19:16:44     INFO - Got event: 'TabClose' on [object XULElement].
[task 2020-08-04T19:16:44.775Z] 19:16:44     INFO - Tab removed and finished closing
[task 2020-08-04T19:16:44.779Z] 19:16:44     INFO - TEST-PASS | devtools/client/inspector/markup/test/browser_markup_overflow_badge.js | The main process DevToolsServer has no pending connection when the test ends - 
[task 2020-08-04T19:16:44.788Z] 19:16:44     INFO - GECKO(3321) | MEMORY STAT | vsize 3653MB | residentFast 443MB | heapAllocated 146MB
[task 2020-08-04T19:16:44.788Z] 19:16:44     INFO - TEST-OK | devtools/client/inspector/markup/test/browser_markup_overflow_badge.js | took 1467ms
Flags: needinfo?(manas.khurana20)
Pushed by gluong@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/541f7b1168b3 Add overflow badge and show an overflow badge for every scroll causing element dynamically and a test to check its working. r=gl,devtools-backward-compat-reviewers,jdescottes
Flags: needinfo?(manas.khurana20)

https://hg.mozilla.org/mozilla-central/rev/541f7b1168b3

Status: NEW → RESOLVED
Closed: 4 years ago
status-firefox81: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → 81 Branch
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: