I have created a webextension with a popup window:
I want the user to be able to copy/paste the contents of this popup. This works fine in Chrome, but in Firefox the text cannot be selected. If you drag with your mouse over the text nothing happens.
I tried inspecting and changing the CSS (maybe there's a default user-select?), but without success.
How can I enable text selection in my extension's popup window?
TLDR: add -moz-user-select: text to the body element of the popup.
There is indeed a default user-select.
You can inspect the CSS of the popup using the following steps:
Navigate to about:debugging and enable add-on debugging.
Click the Debug link next to your addon.
Click the ellipses in the top right corner and select "Disable popup auto-hide".
Open your popup.
In the developer tools, select another frame by clicking the frame button in the top right corner.
Open the inspector. As you can see there is a -moz-user-select CSS rule:
So the fix is to add a CSS rule in your popup CSS like this:
body { -moz-user-select: text; }
Setting this to auto doesn't work. Other possible values are documented here.
Related
Rather than change browser once again, anyone know a trick to allow this to happen:
I have a dropdown menu at the top of a website containing a settings button. When you hover over the settings button, the settings panel shows and when you hover off, the settings panel hides.
In chrome, if I use developer console to inspect that settings panel, when I hover over the settings button, the settings panel pops up and I can inspect elements inside it.
In IE10, when I hover over the settings button, it just inspects the text rather than bringing up the settings panel.
Any ideas on how to get IE10 to allow the hover over events to trigger so I can in fact inspect the elements inside the menu.
Thanks for your input!
I'm using Google Chrome Developer Kit, I have a button with some CSS style applied, I need to see the properties associated on this status Hover in Googel Chrome Devoper windows.
How to do it? When I move out from the button change status and I cannot see the CSS applied.
Thanks for your time!
When you inspect element, there are a couple of icons top right ...
Click the one as in the image (pointer) and select the states for your element with the checkboxes.
Using chromes web inspector to view code is very useful. But how do you view for example the hover code for a button? You will have to hover the mouse over the button and thus cannot use it (mouse) in the inspector. Are there any shortcuts or other ways to accomplish this in the inspector?
Now you can see both the pseudo-class style rules and force them on elements.
To see the rules like :hover in the Styles pane click the small dotted box button in the top right.
To force an element into :hover state, right click it.
Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.
Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.
It's a little annoying, but you need to right click on the element, and then, keeping your mouse over the link, use your keyboard select the 'Inspect Element' link and press enter. This should show you the css for the hover pseudo class for the selected element.
Here's hoping they make this a little easier in future builds.
In Chrome:
You can also mouseover on an element, and then click CTRL+SHIFT+C to inspect that element.
In Firefox:
in firebug:
source: https://stackoverflow.com/a/11272205/2165415
I'm not sure that I right understand your question but if you want to see the event handler code you can just inspect the element and look at Event Listeners sidebar pane of Elements Panel.
Another way is just press pause button in Scripts Panel and just hover the element.
The debugger will stop at the first instruction of the first event handler.
Please have a look on below link for answer
See :hover state in Chrome Developer Tools
We supply micro-site content to a client. They supply us with a HTML wrapper and we inject our content into it. I'm trying to debug an issue where our style sheet appears to be interfering with the style in their wrapper.
Normally I'd use firebug or IE Developer Toolbar to select the element and I can see which styles are being applied, which are being overridden and where they are coming from. But this particular problem only exists when I hover the mouse over a link. Specifically, the link shrinks a little bit.
Is there anything that I can use to see what the browser is doing with the styles when I hover the mouse over the link?
Right click on the element. Select 'inspect element'. In the firebug html window click on the tag you're interested in. Hover over the element in page. You should see the style change to e.g a:hover
I want to debug the CSS for a DHTML menu, but the element I want to debug is a submenu, so it only appears when the top element in the menu is clicked.
So I can't use that button on Firebug that shows the CSS for the next element clicked, because when I click on the top menu item it will show the CSS for that element, not its child, and if I expand the menu first and then click on the Firebug button the submenu disappears (it disappears when it loses focus).
Any tips on how to get out of this catch-22?
Use firebug console command line to run click event. Like $('#menutab a').click(); If it's needed, you could also set breakpoint to avoid hidding.
Read more in firebug documentation
Select your element in the HTML tab, directly in the source.
Then, you can hover your page to toggle it.
In cases like this I sometimes alter the script slightly in order for the 'hidden' element to stay visible.
In this case, I would perhaps comment out/disable the script code which hides the element on blur. That way you can click the main element, and inspect the now visible item for as long as needed.
What about debuging with all the buttons visible? Or you can still find the elemnt in the HTML tree.
In Opera, you can use Dragonfly (Tools > Advanced > Developer Tools, or Ctrl+Shift+i) to solve this issue. When the tools are active, clicking on any part of the page will navigate to that section of the HTML side-by-side with its CSS.