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.
Related
CodeSandbox demonstrating issue
I'm building a menu using Custom Elements. It works fine for keyboard and mouse users, but I noticed an issue when testing with a screenreader: all of my menuitems have no labels. You can see this in the Accessibility Inspector:
Each menuitem is essentially a custom element with a <slot> and some styling—that's it. When not using web components, if one does this:
<button role="menuitem">Foo</button>
Then the Chrome accessibility inspector will show "menuitem: 'Foo'" because it infers the name from the contents. With web components, this isn't the case—Chrome is showing no name. Here's a side-by-side comparison when I use the accessibility inspector inside the CodeSandbox I shared above.
Firefox and Safari both successfully infer the name of these menuitems. Chromium-based browsers are not. Is this a Chrome bug? Are the other browsers just working by coincidence? Is there anything I can do here? I'm really trying to avoid weird stuff where I pull the slot's innerText and add it to an aria-label or something.
I have a webpage on which if a tab key is pressed when in the last textbox a side pane from the right slides(like a side menu).
In chrome development tools I can see it is an aside tag with classes control-sidebar control-sidebar-dark but setting DOM break points(subtree & attribute) on the aside tag is not capturing anything.
On looking into DOM it seems like it is not being manipulated at all(which I expected sliding in should be doing) as I do not see the color blink on HTML tags that chrome developer tool shows for the affected elements.
I was expecting the javascript to be handling the sliding in of the aside tag but how could it be determined in this scenario? Could this be due to CSS only animation or something if yes than how to debug that?
I also tried to record in the animation tab of developer tools but it also stays blank.
This is happening on a privileged section of the site so I m sorry for not being able to put code sample or URL.
PS: The template is some modified version of http://www.ampleadmin.wrappixel.com/ampleadmin-html/ampleadmin-rtl/index.html(the navigation panel on right) but it is getting recorded in dev tool animation panel while mine doesnt.
I found out the cause. There are anchor tags inside the panel which get focused on when the tab is pressed from last textbox. There was no animation,CSS or JS involved.
Anchor(A) tags are focus able by default and the panel dont slide in when they are removed.
I'm doing accessibility work and testing tab focus.
Is there an easy way skip focus to a specific element on chrome or any other browser? For example, there is a button in the middle of the page. How can I quickly focus that element without tabbing through everything before it first?
Just use the focus method in JavaScript:
document.getElementById('myButton') .focus();
The focus method exists on all elements that are naturally focusable (like buttons, links, form elements), or that have been made focusable with the tabindex attribute.
For input elements, you can also use the autofocus attribute to tell the browser to focus it as soon as the page is loaded.
Many websites use "skip links" for the ability to bypass lengthy navigation menus and quickly access the certain areas of the page. This is useful for end-users as well as developers who are testing webpages.
The basic principle is that you'll have invisible links at the very beginning of the page that use anchor elements and IDs (just like any in-page link).
For example:
<body>
Skip to main content
...
<main id="maincontent">
<h1>Heading</h1>
<p>This is the first paragraph</p>
WebAIM has a very good tutorial on this.
http://webaim.org/techniques/skipnav/
When you visit their site, press the TAB key before doing anything else, and you'll see an example of how this works.
I would consider this method to be more reliable than using JavaScript, as HTML is more widely supported.
Open chrome developper tools
Inside the console, you can focus any element using the following:
document.querySelector(selector).focus();
The selector can be obtained right clicking the element inside the code of the developer tools and selecting copy / copy selector
This does not required the element to have an id attribute, but you still can use it.
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
My problem is this - when I click the down button on any input control on my form in Chrome a popup window is displayed. I am positive my code does not do it. The fact that it happens only in Chrome makes me think of some misbehaving Chrome plugin/extension.
Anyway, I would like to see the HTML element responsible for this popup. However, I cannot find it in the dev tools and trying to focus on it does not work - the popup closes the moment I click the page.
So, my question - is there a easy way to get hold on this HTML element without clicking the page?
I am using Chrome 23.0.1271.64 with the following extensions (according to the Chrome itself):
Advanced REST client 3.0.30
JSONView 0.0.32
OneClickDownload 1.2 Web
Developer 0.4.1
This looks just like the standard input field suggestion box. I suspect it is not part of the web page. Therefore it won't appear in the DOM and you can't style it, because it is part of the browser not the web page (although it appears over the top of the web page).
You can suppress it by putting the attribute & value autocomplete=off on the form field, although that is from HTML5 and will not work in all browsers just yet. See Is there a W3C valid way to disable autocomplete in a HTML form?