Does anyone know what the triangular warning icon on Google Chrome Developer Tools Timeline View represents? When I hover over it, click it etc - there's no different information provided than for any of the other events. The event itself doesn't look to be long either, I can't work out what it's warning me about.
Thanks.
This warning sign means that some code (e.g. element.offsetHeight or document.width) has triggered a synchronous layout event, which can adversely affect the performance in some cases. You should be able to see the associated stack trace if you expand the event tree.
A full explanation of this triangle and what it means is in the DevTools documentation:
https://developer.chrome.com/devtools/docs/timeline#locating-forced-synchronous-layouts
(source: chrome.com)
It includes a Forced Synchronous Layout demo to understand it better.
Related
In attempting to profile the performance of a site with PageSpeed tools i get a vague minimize main thread work suggestion as shown below:
The Learn More link is not exactly helpful here. I can see that style & layout is a large portion, so i'm trying to profile the site using Chrome Dev Tools. After i run the performance trace, i can see all the style, layout, and repaint in the main thread.
Where i am stuck, and have not found a helpful guide is how to actually translate these events on the timeline into the actual DOM element, or styles that are causing the performance bottleneck or particular repaint. All of the examples i've been able to find show a very simple example with just a few elements on the page.
How do i trace down what is causing the largest style and layout bottlenecks in terms of actual code?
I've been trying to get the scroll performance on my Ionic app up to par. I'm using the Google Chrome Rendering option under "More Tools" to flag potential scroll performance bottlenecks. I've found an issue with the touch events on a component. What's odd is this component is very similar to buttons that are on the same page, in the same scrollable section. They both have (click) and tappable attributes. It may be important to note that the component is also swipeable. When I turn off the swipeable feature, the issue goes away.
Is there any way I can fix this issue without disabling the swipeable feature? Also, there is another issue where Chrome flags all the (click)able links inside the swipeable component as potential scroll bottlenecks.
The URL Is https://musicblobs.com/home/HeyYouYeahYou. Here's an image of my issue:
enter image description here
I binded property IsBusy="{Binding IsBusy} and label from my page to viewmodel property. I see value changed in label, by i can't see any busy indicator on page on android, is it right?
I think there is some confusion over the IsBusy property. On iOS it shows the indicator in the statusbar which is questionable because the indicator there, according to iOS guidelines is only to be shown for network activity.
On Android it doesn't seem to do anything (visually) at all. Also see this bug on Bugzilla where this discussion is ongoing on what you, as a developer, can expect it to do.
When we read the documentation page for the IsBusy property it says:
Marks the Page as busy. This will cause the platform specific global
activity indicator to show a busy state.
So you should be able to see an activity indicator, also on Android. But in the bug mentioned earlier it is stated that it only appears if certain conditions are met or not at all when using AppCompat.
For now, if you have a requirement for this, I think it would be best to either skip over it for now until this is sorted out or implement your own visual aids.
The activity indicator on Android was removed as part of the transition to material design, as it was no longer inline with the design recommendations.
I'm trying to do this tutorial on using the timeline: https://developer.chrome.com/devtools/docs/demos/too-much-layout
Unfortunately when I go to the timeline in Chrome I am not seeing the view mode options "Events", "Frames" and "Memory". I've read other tutorials and they all seem to show these view modes but for the life of me I cannot figure out how to see them. This is what I see: http://imgur.com/33XEfJ5
Please note that this is not an issue with my version of Chrome. I actually was able to see the view modes when I hooked up my phone and ran the inspector through chrome://inspect. But I need to be able to see them when on my laptop as well.
In the new version the UI was slightly changed.
You can flip overview to frame mode by clicking a small button with vertical bars at the top.
Also memory mode might be enabled by checking Memory checkbox.
I'm trying to build a Firefox add-on based on their SDK and I wanna use panel for this. The panel is connected to a widget, so every time I click on the widget icon the panel shows up.
My problem is that I want the panel to stay visible even if I click on an area outside the panel and to be able to close only based on a certain situations.
Can this be achieved, or the panel API doesn't support this?
Thanks
It can't be achieved through the SDK API. However, you could actually "hack" the panel in order to be persistent, the problem is that you will face with other issue – basically won't go away, and other small stuff.
You can get additional details on Bugzilla if you're interested: Add a "isPersistent" attribute for panels. Notice that the bug is a WONTFIX, but it will give you an idea about the issue you could face. Also, there are some new widgets that will coming in the future, that could mitigate the needs to have the panel "persistent" (they're mentioned and linked in the bug above).
This is the offical sdk method of doing it:
let myPanel = Panel({.....})
let { getActiveView }=require("sdk/view/core");
getActiveView(myPanel).setAttribute("noautohide", true);
Floating panels are not supported by the SDK