I want to be able to target the highcharts tooltip using Protractor in the Chrome DOM inspector, but I need to be able to capture the class name of the tolltip to be able to do so.
When a point in a data series is hovered over in a Highcharts chart, a tooltip is displayed as you can see here:
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-basic/
I am using a shared tooltip:
tooltip: {
shared: true,
},
However, using the inspectors 'Force element state :hover' does not work. I can't even see the tooltip appear as DOM element in the inspector at all?
How is it possible to inspect the Highcharts tooltip in the Chrome DOM inspector?
To inspect the Highcharts tooltip in the Chrome DOM inspector you need to keep the tooltip visible. You can achieve it by wrapping the hide method:
Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function(proceed) {});
Demo: https://jsfiddle.net/BlackLabel/mke7Lh3b/
Now you can easily find the tooltip class which is (for the point in the first series):
highcharts-label highcharts-tooltip highcharts-color-0
highcharts-color-0 this part is added dynamically. The number depends on which color from default Highcharts color array series have assigned.
API: https://api.highcharts.com/highcharts/colors
An alternative is to use ctrl + F in the developper inspecteur. After you use a specific term in your tooltil press enter and you will find it easily
Related
I need to inspect a search bar. The search bar is initially hidden and only shows after clicking on the search icon.
However, if I click on my developer tools then the search bar dissapears again... If the search box should appear, then a class named active is added. So I tried to add the class manually but if I inspect other elements, then the active class is removed again...
Is there a way to lock the classlist? I could write a javascript interval method which sets the classlist, as a workaround.
e.g.
setInterval(function() {
jQuery("#debug")[0].classList = "label icon faSearch active";
}, 1000 );
But is there an easier way?
If you only need to debug your CSS, you can press F8 in the Sources tab of Developer console and you'll pause every Javascript code execution. That will prevent any Javascript code from altering the CSS classes.
Then you can change any CSS class manually.
Hope this helps,
When we inspect a page by chrome developer tools, By selecting the particular element, the styles of the element will be shown, where in we will have option to freeze the element's state by clicking ":hov" as shown in the screenshot below,
I need some help tweaking the Autodesk Viewer UI. I am working on the files as provided by a localised version output from http://extract.autodesk.io/.
I have not done any custom editing. I need help locating the relevant code and suggestions for the changes in the following areas:
The Model Browser docking panel. This opens by default with the first group in the tree Expanded (see picture). I want this first element and all other elements to open by default as Collapsed, so just the parent names are shown.
Staying in Model Browser. The Scroll Bars, (seen when model elements names are listed beyond the Model Browser window size) display correctly in the Opera and Chrome browsers,
however, they display unstyled as wide windows style scroll bars in the Firefox browser. What is needed for Firefox to display scrollbars as intended?
What code might override camera zoom property AFTER correctly loading default zoom value ?
The viewer version from http://extract.autodesk.io/ imports the scene camera properties for the start view ok, but overrides the Zoom property with another value shortly after intial page load.
1.I want this first element and all other elements to open by default as Collapsed, so just the parent names are shown.
Unfortunately far as I know there's no straightforward, native config option in Viewer to achieve this. However you can:
Hook an one-off click listener onto Model Browser button to programmatically fire a click on the corresponding notes you'd like to collapse, or directly add ‘.collapsed’ class to them. You can get a hold of the nodes either by their lmv-nodeid or their label text:
<div lmv-nodeid="9" class="collapsed group visible">
<lmvheader style="padding-left: 13px;">
<div class="visibility"></div>
<label>Switch:1</label>
</lmvheader>
</div>
Extend and build your own browser using the instanceTree and Autodesk.Viewing.UI.DockingPanel, see an example here
2.What is needed for Firefox to display scrollbars as intended?
Here is a great answer to your question. But looks like the status quo is still far from perfect, with no definite hack discovered so far. So again for a thorough solution you'd need to create your own styling (can do so with the help of something like) and apply them to .docking-panel and append .model-structure-panel or any other panels you'd like to narrow the scope to.
3.What code might override camera zoom property AFTER correctly loading default zoom value ?
This should be the code you are after.
You can manipulate camera with viewer.autocam.goToView( newView ), and see below for a sample view config:
const newView = {
position: newPosition,
up: currentView.up,
center: newCenter,
pivot: newPivotPoint,
fov: currentView.fov,
worldUp: currentView.worldUp,
isOrtho: (currentView.isOrtho === false)
}
I'm trying to inspect the shadow DOM for certain HTML5 controls, like the date picker for the input type="date" and the actual suggestion dropdown list for inputs bound to a datalist. Preferably in Chrome, but other browsers will do too.
I've found that by enabling the Shadow DOM setting in Chrome's inspector options allows me to inspect the shadow DOM for the actual input (which includes the ::-webkit-calendar-picker-indicator arrow to show the datepicker) but not the datepicker itself:
The same goes for the datalist. It appears as these controls are not part of the input, but I also can't find them anywhere else in the elements panel.
Is it possible to inspect such elements?
Small edit for clarification: I'm actually looking for which pseudo-classes apply to which controls. There's plenty of sites that list some of them, but I have yet to find a source that manages to list ::-webkit-calendar-picker-indicator for the datalist element, which does get applied. I'm looking for more of those sneaky bastards, and the best source for that of course is the horse's mouth.
Looks like the actual picker is loaded in an entirely different layer (basically a different window without the titlebar). So I guess the answer is: no, you can't.
I agree it would be great to be able to customize it. And similar popups too. Mozilla in XUL has display:popup which is used by context menus, flyout and similar things. Would be definitely great being able to use that in userland content too.
The calendar popup of Google Chrome is not in Shadow DOM.
It's in a separated page mapped to a popup window. See WebPagePopupImpl.cpp
And the popup content is written by HTML/JavaScript.
Chrome (and Firefox) both have really awesome tools for changing the current state of an element, e.g. setting it to a hover state so you can examine/modify css:
The problem is that this doesn't seem to set off any JavaScript events.
I'm currently trying to style a tooltip, which is shown on hover. It's difficult to hover over the element manually as the tooltip dissapears when I take the mouse off of said element, and setting the state to hover in the developer tools doesn't seem to set off the jQuery events.
I'm having to resort to adding an ID on the element in the developer tools inspector, then doing the following in the console:
$("#custom-element-hover").mouseover();
Which feels wrong (and is a little cumbersome).
Is there a better way to do this that I don't know about?
In a simple situation I think it is often easier to use the console as you are doing. But within developer tools, you can also find the event listener code and set a breakpoint on it:
You then right click on this handler and do view source, unminimize the source with the {} button and set a breakpoint in this handler function.
If this handler function triggers on unrelated events then you may need to right click on it and make the breakpoint conditional or add Watch Expressions to see when you are at the correct event.
You could also use the same method of breakpoint setting to instead skip over a particular mouseout event.
I can share with what I do in this kind of situations. I open elements tab in chrome debugger and right click on target element. Then I choose "Copy CSS path"
If you do this you will get something like this
#mdhelp-tabs > li:nth-child(1)
And this string can actually be used as legimit selector for jQuery. So this
$("#mdhelp-tabs > li:nth-child(1)")
will give jquery object with target element of dom in it.
So you would not have to assign an ID to every single element you want to deal with.
I am not sure but you can use console to handle tooltip
I use web developer tools to inspect html and subsequently see the css that is attached to the html element. This is proving to be a great process for learning from other websites (and the debugging my own)
Is there a way to inspect the javascript as well? So when I select the element, to be able to see the javascript related to the element?
In the element panel you can find all information related to an element including events attached to it.
You can use console in the element panel to inspect an element using dir(elementId)which dumps the object with the given id, as a JavaScript object with its properties.
You can see javascript code that is attached as event to any element on the page. In Developer tools its in the Elements tab and each element has "Event Listeners" - there you see what events and what javascript will be catched and executed.
I had the same problem and have been wandering a bit until I found how to do it on Chrome:
1. Open the Inspector Ctrl + Shift + i
2. Select the element that you would like to inspect
3. Click on the Event Listeners tab
4. Click on the link next to the event listener you would like to check
5. Click on Pretty Print (Symbolized as {} at the bottom of the window)