{"action":"created","issue":{"url":"https://api.github.com/repos/piroor/treestyletab/issues/1384","repository_url":"https://api.github.com/repos/piroor/treestyletab","labels_url":"https://api.github.com/repos/piroor/treestyletab/issues/1384/labels{/name}","comments_url":"https://api.github.com/repos/piroor/treestyletab/issues/1384/comments","events_url":"https://api.github.com/repos/piroor/treestyletab/issues/1384/events","html_url":"https://github.com/piroor/treestyletab/issues/1384","id":261079148,"number":1384,"title":"High CPU usage for tab loading animation","user":{"login":"SimonSapin","id":291359,"avatar_url":"https://avatars0.githubusercontent.com/u/291359?v=4","gravatar_id":"","url":"https://api.github.com/users/SimonSapin","html_url":"https://github.com/SimonSapin","followers_url":"https://api.github.com/users/SimonSapin/followers","following_url":"https://api.github.com/users/SimonSapin/following{/other_user}","gists_url":"https://api.github.com/users/SimonSapin/gists{/gist_id}","starred_url":"https://api.github.com/users/SimonSapin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SimonSapin/subscriptions","organizations_url":"https://api.github.com/users/SimonSapin/orgs","repos_url":"https://api.github.com/users/SimonSapin/repos","events_url":"https://api.github.com/users/SimonSapin/events{/privacy}","received_events_url":"https://api.github.com/users/SimonSapin/received_events","type":"User","site_admin":false},"labels":[{"id":681050686,"url":"https://api.github.com/repos/piroor/treestyletab/labels/WebExtensions","name":"WebExtensions","color":"006b75","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":38,"created_at":"2017-09-27T18:47:32Z","updated_at":"2017-11-21T17:36:55Z","closed_at":null,"author_association":"NONE","body":"<!--\r\nNOTE: Please read the guideline to open a new issue at first.\r\nhttps://github.com/piroor/treestyletab/blob/master/CONTRIBUTING.md\r\n\r\nAnd, WebExtensions-based renewed version is in development in now,\r\nand it will be released for Firefox 57. See also:\r\nhttps://github.com/piroor/treestyletab/issues/1224#issuecomment-326467198\r\n\r\nXUL-based legacy version won't work on Firefox 57, and\r\nby technical reasons WebExtensions-version cannot provide\r\nsome features of XUL-based version, including \"auto hide tab bar\".\r\nTo concentrate to development of the WE-based version,\r\nplease don't open issues about feature requests or trivial bug reports\r\nabout the XUL-based version.\r\n-->\r\n\r\n## Short description\r\n\r\nThe `@keyframes throbber` animation is expensive. \"Normal\" tabs in Firefox 57 / 58 have a similar-looking animation but it’s implemented in a completely different way:\r\n\r\n* Tree Style Tabs [has](https://github.com/piroor/treestyletab/blob/2.0/webextensions/sidebar/styles/throbber.css) a zero-size pseudo-element with a solid border, `border-radius: 100%`, and animates the `width` and `left` properties.\r\n* Firefox [has](http://searchfox.org/mozilla-central/rev/3dbb47302e114219c53e99ebaf50c5cb727358ab/browser/themes/shared/tabs.inc.css#136-163) an SVG sprite ([`chrome://browser/skin/tabbrowser/loading.svg`](http://searchfox.org/mozilla-central/source/browser/themes/shared/tabbrowser/loading.svg)) as a background-image in a pseudo-element that animates `transform: translateX(…)` with a `steps(60)` timing function.\r\n\r\nAs far as I understand, the latter is cheaper in current Firefox because things with animated `transform` are often painted into a separate layer that can be preserved and re-composited without re-painting when the transform changes. In comparison, changing the width of something with `border-radius` requires re-painting it.\r\n\r\n## Steps to reproduce\r\n\r\n 1. Start Firefox with clean profile.\r\n 2. Install TST.\r\n 3. In a terminal, run `netcat -l 8888` or some other command to start a TCP server that will accept an HTTP request but never send a response\r\n 4. In Firefox, navigate to http://localhost:8888. This causes the tab to be \"loading\" until closed or stopped, and shows the \"throbber\" animation in place of the tab’s favicon.\r\n\r\n## Expected result\r\n\r\nThis animation by itself should not use a significant amount of resources.\r\n\r\n## Actual result\r\n\r\nFirefox uses 40% ~ 80% CPU even though it is doing nothing else. This makes loading actual pages slower.\r\n\r\n## Environment\r\n\r\n * Platform (OS): Linux x64\r\n * Version of Firefox: 58.0a1 (2017-09-26) (64-bit)\r\n * Version (or revision) of Tree Style Tab: 2.0 from https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab/\r\n"},"comment":{"url":"https://api.github.com/repos/piroor/treestyletab/issues/comments/346103343","html_url":"https://github.com/piroor/treestyletab/issues/1384#issuecomment-346103343","issue_url":"https://api.github.com/repos/piroor/treestyletab/issues/1384","id":346103343,"user":{"login":"msujaws","id":272055,"avatar_url":"https://avatars1.githubusercontent.com/u/272055?v=4","gravatar_id":"","url":"https://api.github.com/users/msujaws","html_url":"https://github.com/msujaws","followers_url":"https://api.github.com/users/msujaws/followers","following_url":"https://api.github.com/users/msujaws/following{/other_user}","gists_url":"https://api.github.com/users/msujaws/gists{/gist_id}","starred_url":"https://api.github.com/users/msujaws/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/msujaws/subscriptions","organizations_url":"https://api.github.com/users/msujaws/orgs","repos_url":"https://api.github.com/users/msujaws/repos","events_url":"https://api.github.com/users/msujaws/events{/privacy}","received_events_url":"https://api.github.com/users/msujaws/received_events","type":"User","site_admin":false},"created_at":"2017-11-21T17:36:55Z","updated_at":"2017-11-21T17:36:55Z","author_association":"NONE","body":"Can you please gather a performance profile? You can use the tool at https://perf-html.io/ to find which parts of the code are taking the most time."}}
{"actor":{"display_login":"msujaws"}}