1606161 - Avoid forced layout for laying out network table headers

Status: NEW

(DevTools :: Netmonitor, enhancement, P4)

Description

[:Harald Kirschner :digitarald]

See analysis from bug 1557862. Width should be calculated and not grabbed from the DOM.

Comment 1

[:Harald Kirschner :digitarald]

Attachment: Bug 1606161 - Avoid forced layouts in RequestListHeader r=honza

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/fce0a89353f1
Avoid forced layouts in RequestListHeader r=Honza

Comment 3

[Raul Gurzau (:RaulG)]

Backed out changeset fce0a89353f1 (bug 1606161) for failing at /browser_net_har_copy_all_as_har.js on a CLOSED TREE.

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

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception&revision=fce0a89353f1bdbb66fb94ffa9d0f9541e8cbf52&selectedJob=283264311

Log link 1: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=283264311&repo=autoland&lineNumber=12347

Log snippet 1:

[task 2020-01-02T22:25:19.252Z] 22:25:19 INFO - TEST-INFO | started process screentopng
[task 2020-01-02T22:25:19.703Z] 22:25:19 INFO - TEST-INFO | screentopng: exit 0
[task 2020-01-02T22:25:19.704Z] 22:25:19 INFO - Buffered messages logged at 22:23:49
[task 2020-01-02T22:25:19.704Z] 22:25:19 INFO - Entering test bound
[task 2020-01-02T22:25:19.704Z] 22:25:19 INFO - Initializing a network monitor pane.
[task 2020-01-02T22:25:19.705Z] 22:25:19 INFO - Adding a new tab with URL: http://example.com/browser/devtools/client/netmonitor/test/html_simple-test-page.html
[task 2020-01-02T22:25:19.705Z] 22:25:19 INFO - Buffered messages logged at 22:23:50
[task 2020-01-02T22:25:19.706Z] 22:25:19 INFO - Tab added and finished loading
[task 2020-01-02T22:25:19.706Z] 22:25:19 INFO - Net tab added successfully: http://example.com/browser/devtools/client/netmonitor/test/html_simple-test-page.html
[task 2020-01-02T22:25:19.707Z] 22:25:19 INFO - Buffered messages logged at 22:23:51
[task 2020-01-02T22:25:19.708Z] 22:25:19 INFO - Console message: [JavaScript Error: "Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”)." {file: "chrome://global/content/elements/panel.js" line: 62}]
[task 2020-01-02T22:25:19.708Z] 22:25:19 INFO - Buffered messages logged at 22:23:52
[task 2020-01-02T22:25:19.709Z] 22:25:19 INFO - Network monitor pane shown successfully.
[task 2020-01-02T22:25:19.709Z] 22:25:19 INFO - Disabling cache and reloading page.
[task 2020-01-02T22:25:19.709Z] 22:25:19 INFO - Buffered messages logged at 22:23:53
[task 2020-01-02T22:25:19.710Z] 22:25:19 INFO - Got marker: dom-interactive
[task 2020-01-02T22:25:19.710Z] 22:25:19 INFO - Console message: [JavaScript Warning: "Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect." {file: "resource://devtools/client/netmonitor/src/components/request-list/RequestListContent.js" line: 168}]
[task 2020-01-02T22:25:19.711Z] 22:25:19 INFO - Console message: [JavaScript Error: "TypeError: columnsData.get(...) is undefined" {file: "resource://devtools/client/netmonitor/src/components/request-list/RequestListHeader.js" line: 445}]
[task 2020-01-02T22:25:19.711Z] 22:25:19 INFO - Got marker: dom-complete
[task 2020-01-02T22:25:19.712Z] 22:25:19 INFO - Got two timeline markers, done waiting
[task 2020-01-02T22:25:19.712Z] 22:25:19 INFO - Buffered messages finished
[task 2020-01-02T22:25:19.713Z] 22:25:19 INFO - TEST-UNEXPECTED-FAIL | devtools/client/netmonitor/src/har/test/browser_net_har_copy_all_as_har.js | Test timed out -
[task 2020-01-02T22:25:19.713Z] 22:25:19 INFO - GECKO(2473) | console.error: "Task cancelled"
[task 2020-01-02T22:25:19.714Z] 22:25:19 INFO - GECKO(2473) | console.error: (new TypeError("this.dataProvider is null", "resource://devtools/client/netmonitor/src/connector/firefox-connector.js", 419))
[task 2020-01-02T22:25:19.714Z] 22:25:19 INFO - GECKO(2473) | TypeError: this.dataProvider is null: getNetworkRequest@resource://devtools/client/netmonitor/src/connector/firefox-connector.js:419:5
[task 2020-01-02T22:25:19.715Z] 22:25:19 INFO - GECKO(2473) | getNetworkRequest@resource://devtools/client/netmonitor/src/connector/index.js:88:27
[task 2020-01-02T22:25:19.716Z] 22:25:19 INFO - GECKO(2473) | onTimings@chrome://mochitests/content/browser/devtools/client/netmonitor/test/head.js:255:44
[task 2020-01-02T22:25:19.716Z] 22:25:19 INFO - GECKO(2473) | emit@resource://devtools/shared/event-emitter.js:195:24
[task 2020-01-02T22:25:19.717Z] 22:25:19 INFO - GECKO(2473) | emit@resource://devtools/shared/event-emitter.js:276:18
[task 2020-01-02T22:25:19.717Z] 22:25:19 INFO - GECKO(2473) | emit@resource://devtools/client/netmonitor/src/connector/firefox-data-provider.js:797:18

Log link 2: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=283269736&repo=autoland&lineNumber=5091

Log snippet 2:
[task 2020-01-02T22:42:19.461Z] 22:42:19 INFO - TEST-START | devtools/client/netmonitor/test/browser_net-ws-filter-freetext.js
[task 2020-01-02T22:42:20.861Z] 22:42:20 INFO - GECKO(1950) | console.error: (new TypeError("columnsData.get(...) is undefined", "resource://devtools/client/netmonitor/src/components/request-list/RequestListHeader.js", 445))
[task 2020-01-02T22:42:20.862Z] 22:42:20 INFO - GECKO(1950) | JavaScript error: resource://devtools/client/netmonitor/src/components/request-list/RequestListHeader.js, line 445: TypeError: columnsData.get(...) is undefined
[task 2020-01-02T22:42:46.149Z] 22:42:46 INFO - GECKO(1950) | 2020-01-02 22:42:46.104 firefox[1950:13038] Persistent UI failed to open file file:///Users/cltbld/Library/Saved%20Application%20State/org.mozilla.nightly.savedState/window_1.data: No such file or directory (2)
[task 2020-01-02T22:43:04.636Z] 22:43:04 INFO - TEST-INFO | started process screencapture
[task 2020-01-02T22:43:04.787Z] 22:43:04 INFO - TEST-INFO | screencapture: exit 0
[task 2020-01-02T22:43:04.787Z] 22:43:04 INFO - Buffered messages logged at 22:42:19
[task 2020-01-02T22:43:04.787Z] 22:43:04 INFO - Entering test bound
[task 2020-01-02T22:43:04.787Z] 22:43:04 INFO - Initializing a network monitor pane.
[task 2020-01-02T22:43:04.787Z] 22:43:04 INFO - Adding a new tab with URL: http://mochi.test:8888/browser/devtools/client/netmonitor/test/html_ws-test-page.html
[task 2020-01-02T22:43:04.787Z] 22:43:04 INFO - Buffered messages logged at 22:42:20
[task 2020-01-02T22:43:04.788Z] 22:43:04 INFO - Tab added and finished loading
[task 2020-01-02T22:43:04.788Z] 22:43:04 INFO - Net tab added successfully: http://mochi.test:8888/browser/devtools/client/netmonitor/test/html_ws-test-page.html
[task 2020-01-02T22:43:04.788Z] 22:43:04 INFO - Console message: [JavaScript Error: "Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”)." {file: "chrome://global/content/elements/panel.js" line: 62}]
[task 2020-01-02T22:43:04.788Z] 22:43:04 INFO - Network monitor pane shown successfully.
[task 2020-01-02T22:43:04.788Z] 22:43:04 INFO - Disabling cache and reloading page.
[task 2020-01-02T22:43:04.788Z] 22:43:04 INFO - Got marker: dom-interactive
[task 2020-01-02T22:43:04.788Z] 22:43:04 INFO - Got marker: dom-complete
[task 2020-01-02T22:43:04.788Z] 22:43:04 INFO - Got two timeline markers, done waiting
[task 2020-01-02T22:43:04.789Z] 22:43:04 INFO - Console message: [JavaScript Warning: "Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect." {file: "resource://devtools/client/netmonitor/src/components/request-list/RequestListContent.js" line: 168}]
[task 2020-01-02T22:43:04.789Z] 22:43:04 INFO - Console message: [JavaScript Error: "TypeError: columnsData.get(...) is undefined" {file: "resource://devtools/client/netmonitor/src/components/request-list/RequestListHeader.js" line: 445}]
[task 2020-01-02T22:43:04.789Z] 22:43:04 INFO - Buffered messages finished
[task 2020-01-02T22:43:04.789Z] 22:43:04 INFO - TEST-UNEXPECTED-FAIL | devtools/client/netmonitor/test/browser_net-ws-filter-freetext.js | Test timed out -
[task 2020-01-02T22:43:04.789Z] 22:43:04 INFO - GECKO(1950) | console.error: "Task cancelled"
[task 2020-01-02T22:43:04.789Z] 22:43:04 INFO - GECKO(1950) | console.error: (new TypeError("this.dataProvider is null", "resource://devtools/client/netmonitor/src/connector/firefox-connector.js", 419))
[task 2020-01-02T22:43:04.789Z] 22:43:04 INFO - GECKO(1950) | TypeError: this.dataProvider is null: getNetworkRequest@resource://devtools/client/netmonitor/src/connector/firefox-connector.js:419:5
[task 2020-01-02T22:43:04.789Z] 22:43:04 INFO - GECKO(1950) | getNetworkRequest@resource://devtools/client/netmonitor/src/connector/index.js:88:27
[task 2020-01-02T22:43:04.789Z] 22:43:04 INFO - GECKO(1950) | onTimings@chrome://mochitests/content/browser/devtools/client/netmonitor/test/head.js:255:44
[task 2020-01-02T22:43:04.789Z] 22:43:04 INFO - GECKO(1950) | emit@resource://devtools/shared/event-emitter.js:195:24
[task 2020-01-02T22:43:04.790Z] 22:43:04 INFO - GECKO(1950) | emit@resource://devtools/shared/event-emitter.js:276:18

Comment 4

[:Harald Kirschner :digitarald]

Sorry for the breakage. I updated the patch, but need to spend some more time verifying the impact.

Comment 5

[BugBot [:suhaib / :marco/ :calixte]]

There's a r+ patch which didn't land and no activity in this bug for 2 weeks.
:Harald, could you have a look please?
For more information, please visit auto_nag documentation.

Comment 6

[:Harald Kirschner :digitarald]

Not sure if this will make impact – we might spend some more time on proofing this out.

Comment 7

[Calum Smith [:cpmsmith]]

I recently noticed this same issue myself, and was going to suggest exactly the solution employed by the previously backed-out patch. Here's the profile I took:

https://share.firefox.dev/3xQe5Xm

It's a profile of loading a very large single-page app with ~2000 requests, and you can see it spends around 8-10% of CPU time on reflows for shouldUpdateWidth. The updates made to the original patch look like they would fix the test breakage that got it backed out, and I've only thought of one other potential issue:

Judging by this comment along with this one in updateColumnWidths, the reason this uses getClientBoundingRect instead of reading from columnsData is that their width can be affected by this media query in RequestList.css. It may even just be because of this ruleset which hides the waterfall, as in a quick test, I'm not sure the other two rulesets are having any effect—at least not the effect I'm expecting to see. The potential issue is that using the columnsData wouldn't take this hiding into account, but I think that could be easily fixed by implementing the hiding in JS rather than CSS.

:Honza, I suspect that with the growing popularity of Vite.js, which does significantly less bundling than Webpack in dev mode, this might become more of a pain point for users. If I take a swing at this, is there still appetite to look at it, and how might I go about verifying impact?

Comment 8

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Bomsy, could you please help out here? It would be great to finish the optimization (patch) and reduce the Network panel overhead when loading a page.