How to inspect Vivaldi UI elements that only appear when I mouse over a certain location?

[yudai-nkt]

I'm trying to change the font size of a link URL in the bottom left corner, which only appears when I mouse over a link.

I went through the following steps to figure out what CSS elements I should modify, but this wasn't successful.

1. Open Vivaldi with the --args --debug-packed-apps --silent-debugger-extension-api options.
2. Visit a website containing hyperlinks (e.g., https://vivaldi.com/).
3. Open the DevTools and choose the Sources tab.
4. Place the cursor over a link.
5. Press F8 to pause JavaScript execution.

With the procedures above, the URL is pinned in the corner regardless of the cursor location but I cannot right-click on the URL to inspect it via the context menu.

How can I inspect these elements?

[luetage]

There isn't really a need to have it visible. On a normal webpage you would just toggle the :hover state of the link in the devtools and then inspect the result. But here the links are on webpage and the status info is part of the UI. I just open the devtools and then find the element… It's the last child of the webview-container.

But yeah, good question.

[LonM]

I can't think of a way to get this to work, but I can tell you that the ID of that popup is #status_info if you want to set it with css.

One possible workaround for this specific case:

• Go to Sources tab in inspector
• Hover over a link
• Press F8 to pause the ui
• Go to elements tab
• Press Ctrl+F
• Type what is in the box you want to find

[yudai-nkt]

@luetage Thanks to your reply, I was able to mod the status bar with the CSS below.

#status_info > span {
  font-size: calc(var(--fontSize) * 0.9);
}

Having said that, could you be more specific about how to find elements? I followed your suggestion, but couldn't find an ID selector named status_info (screenshots taken with the same link in the opening post).

[yudai-nkt]

@lonm Workarounds are also appreciated, but search for the link URL in DevTools didn't match anything helpful nor #status_info...

[luetage]

@yudai-nkt Are you inspecting the UI? Make sure you right click an UI element and not the webpage to inspect. Then you will find the webview-container and within the status info.

[yudai-nkt]

@luetage Uh, it seems I misunderstood what you meant by “have it visible” and got confused. That's why I foolishly didn't inspect the UI. I think I understand correctly now.