Inspecting the Vivaldi UI with DevTools
-
An accidentally-discovered side-benefit from using
--debug-packed-apps: -
@luetage Thanks for trying to explain... can not activate anything in vivaldi://inspect/#apps
-
@Mike5 said in Inspecting the Vivaldi UI with DevTools:
vivaldi://inspect/#apps
Hmm, still appears to work for me. But you don’t have to do it like that. Open
vivaldi://settings/in a tab (not extra window) and then open devtools with quick commands, shortcut, or through menu. This will open internal devtools. -
@luetage Wow, thanks for quick reply! Yes, DevTools open, vivaldi://inspect/#apps the same, can not activate browser.html. In DevTools where can i check if it is the internal Devtools?
-
@Mike5 Click on the mouse cursor on left top to select an element on page, then hover something in the UI, for example a tab or the panel.
-
@luetage No, neither if Devtools is in seperate window or docked, i can not point to an ui element, just switch to it. The culprit might be i can not activate browser.html in vivaldi://inspect/#apps. Why could that be, any flags i should add?
-
@Mike5 If you can dock the devtools, you haven’t opened the internal devtools. Internal devtools can’t be docked, they always open in a window. How did you open devtools after visiting the settings page?
-
@luetage I can not open Devtools when in Settings page. Have to switch to some web page.
My flags:
Vivaldi.exe" --disk-cache-dir="C:\ALL_OS\VIVALDI" --disk-cache-size=2000000000 --num-raster-threads=4 --enable-accelerated-2d-canvas --disable-crash-reporter --cipher-suite-blacklist="0x002f,0x009c,0xc013,0xc014,0x0035" --enable-features="BlockInsecurePrivateNetworkRequestsForNavigations,EncryptedClientHello" --disable-features="AdInterestGroupAPI,CrashReporting,EnableStructuredMetrics,InterestGroupStorage,MediaDrmPreprovisioning,Reporting,SafeBrowsingBetterTelemetryAcrossReports,RecordMediaEngagementScores,RecordWebAudioEngagement,WebUSB,WebXR,MediaEngagementBypassAutoplayPolicies" -
@Mike5 You can’t open devtools for the UI from some webpage, it doesn’t work like that. This is not dependent on flags. Let’s try again: Open
vivaldi://experiments, hit yourF2key to open quick commands, then typetoggle developer toolsand then hitenter. -
@luetage Yes Sir! Finally i can access the UI DevTools. What do NOT work to trigger UI DevTools:
Devtools from pages like Settings, Flags or any other "normal" internal page.
It DOES WORK on vivaldi://experiments and call DevTools via shortcut or quick commands.
Thank You very much @luetage, i can now dig deeper into modifying my UI layout.
What's confusing still, i can not activate anything on vivaldi://inspect/#appsThe Vivaldi Browser Community is extraordinary!
-
How do I modify the styles for tab cycler, including any icons within tab cycler and the tab cycler window itself ?
How do I modify the menu items styles within the menu icon found in the UI of the Vivaldi window which can either be the Vivaldi icon or the menu icon whatever you may have it set too in the top left hand corner of any Vivaldi window ?
-
- You can’t modify menus, they are styled by your operating system.
- The menu icon is just an SVG, you can replace its path with CSS.
- The icons in the tab cycler are website favicons, they are not a steady target. The only thing you could do is write a userscript for websites you want to change the favicon for, but I don’t know whether this will translate to the favicons in the tabswitcher. In any case this is off‐topic, because webpage manipulation is not part of Vivaldi modding. The tab cycler itself can be inspected, just look up the selectors you need.
-
I can't inspect the tab cycler as it's triggered by keyboard shortcuts; therefore what selectors must I look for within the css file ?
-
@Sparrows You can. Open the devtools for the UI, focus the Vivaldi window again, click
ctrl-taband keepctrlpressed. Then click the arrow icon top left in the devtools window and click the element in the cycler you want to inspect. This will highlight the HTML in the devtools window where you can look up everything. -
@luetage said in Inspecting the Vivaldi UI with DevTools:
@Sparrows You can. Open the devtools for the UI, focus the Vivaldi window again, click
ctrl-taband keepctrlpressed. Then click the arrow icon top left in the devtools window and click the element in the cycler you want to inspect. This will highlight the HTML in the devtools window where you can look up everything.This isn't working as you described. Tab Cycler opens with CTRL+TAB; while holding down CTRL while clicking the arrow in the dev tools doesn't inspect the elements for the UI in Vivaldi ?
-
@Sparrows Works for me. After clicking the arrow icon you need to click on the cycler. Anyway, it’s best to leave the cycler alone.
-
I don't have in vivaldi://inspect/#apps/ such a line with browser.html , where I can click Inspect
There is only chrome-extension://mpognobbkildjkofajifpdfhcoklimli/main.html -
I accidentally took off this jackdaw in
vivaldi://experiments/.
It is necessary to clarify this for beginners. If 3 daw is enabled, then they will not see browser.html
-
@sphera
well, is highly experimental inside the experiments page already and no-one ever suggested to fiddle with it (which is a red flag)//EDIT: Now is totally the opposite
You are not supposed to disable portals anymore from experiments, if present (the setting shouldn't be present anymore). -
Nothing is working, why isn't this easier, it used to just work T_T
