Menu Modifications for Vivaldi



  • ~ [i][b]DISCLAIMER :[/b] This post and thread is a work in progress, and WILL be modified as required and appropriate.[/i] This is all done using the Win32 version of Vivaldi TP3, but I suspect that in general terms that these mods will work with Vivaldi for other OS's too. There are 8 screenshots in this first post, and the descriptions and explanations are intertwined, plus further details in followup posts. Note that some menu entries have been Renamed to whatever better describes their function (or to be more consistent with related similar functions), some have been Moved to more logical (IMNSHO) locations (such as 'Import Data' is now found under 'Tools', and 'Full Screen' is now under 'View'), and others have been deleted altogether (such as 'Paste and Go', because it did not seem to work for me). Still others have been ADDED to avoid excessive mousing to other parts of the screen, such as the 'Tab Stack Tiling' commands, which are otherwise on the Status Bar (Footer) at the far bottom of the window. All pics include my SLIM TOP MAX theme as a basis for the UI, and which I had to tweak a bit, as my modified menu is slightly wider than the original one - Folks using the Vivaldi button menu will not have that problem, but I'm old fashioned and prefer the horizontal menu, so I did what I had to do. B) [attachment=1165]vivaldimenumod01-before.png[/attachment] This is before the Menu Mods were done - bare Slim Top Max theme. [attachment=1166]vivaldimenumod01-after.png[/attachment] This is after the Menu Mods were done, with all menues collapsed. [attachment=1167]vivaldimenumod01-file.png[/attachment] This is the revised File menu. [attachment=1168]vivaldimenumod01-edit.png[/attachment] This is the revised Edit menu. [attachment=1174]vivaldimenumod01-view2.png[/attachment] This is the revised View menu. [attachment=1170]vivaldimenumod01-tools.png[/attachment] This is the revised Tools menu. [attachment=1171]vivaldimenumod01-tabs.png[/attachment] This is the revised and renamed Window menu, now called 'Tabs'. [attachment=1172]vivaldimenumod01-BMsstax.png[/attachment] This is the revised and renamed Help menu, now called 'Bookmarks and Stacks'. ~ Attachments: [img]https://forum.vivaldi.net/uploads/attachments/956/vivaldimenumod01-before.png[/img],[img]https://forum.vivaldi.net/uploads/attachments/956/vivaldimenumod01-after.png[/img],[img]https://forum.vivaldi.net/uploads/attachments/956/vivaldimenumod01-file.png[/img],[img]https://forum.vivaldi.net/uploads/attachments/956/vivaldimenumod01-edit.png[/img],[img]https://forum.vivaldi.net/uploads/attachments/956/vivaldimenumod01-tools.png[/img],[img]https://forum.vivaldi.net/uploads/attachments/956/vivaldimenumod01-tabs.png[/img],[img]https://forum.vivaldi.net/uploads/attachments/956/vivaldimenumod01-BMsstax.png[/img],[img]https://forum.vivaldi.net/uploads/attachments/956/vivaldimenumod01-view2.png[/img]



  • ~
    Quick Summary of what we can see so far :

    Names of Menu entries can be changed.

    Locations of Menu entries can be changed.

    More Menu entries can be added.

    Names of Menues themselves can be changed.

    Additional Menues themselves (more than the default 6) are possible too, and though my screenshots do not show this, I have tested and proven that they can.
    ~



  • ~
    Explanation of How to Do this stuff :

    OK, some of us know that custom CSS statements can modify the Vivaldi UI layout, similarly as they can for other browsers, and the larger CSS file which is already present by default in Vivaldi is called common.css

    There is also a large Javascript file of similar importance called bundle.js in the Vivaldi application tree.

    When adding custom CSS code, we usually put it into a separate file, and then edit common.css with just one new line of code, to tell it to include that file.

    There might be a similar simpler safer way to deal with the Javascript (I dunno), but for now, I have simply been editing the large bundle.js file, and if you are careful with that wall-o-code ( and lucky ;) ), it will work.

    TABLE of COMMANDs :

    Near the end of the contents of bundle.js, there is a table of named commands (currently 68 in total in TP3, not all implemented yet as some are still being developed - Yes, I tested some of those which are not in use, and a few caused problems).

    If you do a search for name:"COMMAND, you will reach the top of this table, and will see the upper case names, as well as the screen names and names of the code functions which are accessed, both in lower or mixed case.

    It is also in that table where I edited the screen names of a few of the commands, to make them display differently in the menu, though doing that alone does not change their position in the menu.

    MAIN MENU TABLE :

    Directly below is another table, which defines the primary menu structure, and links each menu entry to one of the upper case commands of the first table.

    THIS is where I moved the position of some commands, renamed two menu dropdowns, and added the Bookmark and Tab Stack Tiling commands.

    ~

    WATCH THIS POST, as I'll be adding more details about how, as well as the code which was manipulated to achieve the results shown in my pics.
    ~


  • Moderator

    If anyone is interested you may find info about mouse gestures on bundle.js, as I have already said in another thread. Open defaultSettingsPlatformSpecific-bundle.js for the default gestures. I did not look much closely to find the answer yet, just found the calls, but it's a little tricky to understand the arithmetic.

    In my Customising Vivaldi thread I have one bundle.js edit that adds double click in tab bar to open a new tab.
    https://vivaldi.net/en-US/forum/all/3073-vivaldi-ui-customisations#24520



  • ~
    Thanks !

    I glossed over that post when you first made it, as I had not yet looked inside bundle.js at the time, but it means more to me when reviewing it now.

    And I have another operational mod in mind which would use a similar call.
    ~



  • [attachment=1176]thenotworthy.gif[/attachment] I'm not worthy! I'm not worthy! [attachment=1176]thenotworthy.gif[/attachment]
    You've made me famous by including me in all your screenshots !!!

    Seriously though, Dude, really nice start on this! [attachment=1177]thumbup.gif[/attachment]

    One minor point: when Vivaldi is further along in its development and (hopefully) much more efficient and speed than it is now, I will want to use multiple windows with multiple tabs per window, so I would want to retain the Windows menu. I realize you said other menus could be added, so there would be the possibility of both a Tabs and a Windows menu. But I wonder if they could also be combined in some way: e.g., maybe a Windows menu with a Tabs menu that slides/pops out to the right of each listed window on mouseover or click to display the tabs for that window (?)
    Attachments:
    ,



  • Folks using the Vivaldi button menu will not have that problem, but I'm old fashioned and prefer the horizontal menu, so I did what I had to do. B)

    In that case is not matter of being old school or new school, you are just using a good old 5/4 monitor, so vertical space is not your problem.

    For people, like me, on 16/10 monitors (IMHO the best compromise) is more important.

    For people on the idiotic 16/9 monitors, vertical space is literally oxygen.

    Back in topic, too bad Paste & GO is still something like the Holy Grail for Vivaldi users.



  • @An_dz:

    In my Customising Vivaldi thread I have one bundle.js edit that adds double click in tab bar to open a new tab.
    https://vivaldi.net/en-US/forum/all/3073-vivaldi-ui-customisations#24520

    Wow, I missed that.

    Reeeally nice… ;)



  • @gdveggie:

    [attachment=1176]thenotworthy.gif[/attachment] I'm not worthy! I'm not worthy! [attachment=1176]thenotworthy.gif[/attachment]
    You've made me famous by including me in all your screenshots !!!

    Seriously though, Dude, really nice start on this! [attachment=1177]thumbup.gif[/attachment]

    One minor point: when Vivaldi is further along in its development and (hopefully) much more efficient and speed than it is now, I will want to use multiple windows with multiple tabs per window, so I would want to retain the Windows menu. I realize you said other menus could be added, so there would be the possibility of both a Tabs and a Windows menu. But I wonder if they could also be combined in some way: e.g., maybe a Windows menu with a Tabs menu that slides/pops out to the right of each listed window on mouseover or click to display the tabs for that window (?)

    ~
    Yes, you now have 15ns of fame ! :woohoo: Use it well, grasshopper. :P

    Regarding where/how the Tabs/Windows appear, let me mention what I know so far about that :

    (1) We can change the name of each menu dropdown, and we can change which individual commands appear in each, but with ONE exception, which I have not investigated yet.

    The 5th dropdown always includes the Tabs/Windows, regardless of what name I use for it, and what else I put in there, so they must be getting inserted there by a separate routine which independently accesses (by position rather than by name) the table/list which I have been manipulating in order to make the changes which I have tested and posted so far.

    BTW, my own Mozilla browser use rarely includes a 2nd window, though often has hundreds of open (but lazy) tabs.

    With Vivaldi, I am currently curtailed to maybe 30 tabs, as they all load at once when the browser is close and relaunched.

    Please also review the THIRD post, as I just made some additions to it.
    ~



  • @The_Solutor:

    Folks using the Vivaldi button menu will not have that problem, but I'm old fashioned and prefer the horizontal menu, so I did what I had to do. B)

    In that case is not matter of being old school or new school, you are just using a good old 5/4 monitor, so vertical space is not your problem.

    For people, like me, on 16/10 monitors (IMHO the best compromise) is more important.

    For people on the idiotic 16/9 monitors, vertical space is literally oxygen.
    = = =
    Back in topic, too bad Paste & GO is still something like the Holy Grail for Vivaldi users.

    ~
    I do not attend school anymore, from either side of the desk ;) , but I still treasure my vertical space, which is WHY my monitors of choice are based more upon height than width.

    That choice is partly because I also like my screen elements to be there constantly, rather than hiding and popping up when I hover.

    I'm looking for a 1600x1200 in 20 inch, as corp liq's have been giving those up the last while.

    It was stupid and arbitrary when the industry forced wide panels on computer users, just because TVs went that way.

    Completely illogical, IMNSHO !

    But anyway, P&G is important to me too, and I will be looking over the next few days to see whether I can figure out how to make it happen thru the address bar context menu, as most other current browsers do.

    Part of the reason for my research (which yielded these menu mods) was because I also wish to add some CUSTOM BUTTONS, and P&G would work well from one of those too, if I can nail the command to do it while not focused on the address bar.

    I already conjured up an extension to allow Mozilla-based browsers to do P&G from a button, but the lingo is structured differently here, and I'm still navigating the learning curve. :)
    ~



  • @davesnothere:

    I do not attend school anymore, from either side of the desk ;) , but I still treasure my vertical space, which is WHY my monitors of choice are based more upon height than width.

    I had no doubt about that.

    In the past I even went further, just using a pivotable 4/3 monitor in portrait mode.

    Which is just great for browsing and document editing, but becomes unhandy for videos or photo editing
    Also, given the widespread usage of 16/9 screens, more and more SW over time are thought for that scenario.

    There is also the notebook problem where the choches are limited so I settled for 16/10, thinkpads X200/210 or dell e4300/4200 are still great machines, and good 1920x1200 monitors are still available at decent prices.

    But anyway, P&G is important to me too, and I will be looking over the next few days to see whether I can figure out how to make it happen thru the address bar context menu, as most other current browsers do.

    I'm anything but a coder, so take it with a grain of salt, but I noticed that the contextual menu is not something we translated, but comes translated anyway (perhaps wrongly translated in my language), so I believe it comes straight from a deeper level, straight from chromium code and likely isn't yet managed by the Vivaldi's UI



  • @davesnothere:

    It was stupid and arbitrary when the industry forced wide panels on computer users, just because TVs went that way.

    There is something called "pivot" on good monitors - really great for reading stuff, almost mo more scrolling necessary with a "wide screen" monitor in portrait position - do we call it a "high screen" monitor then? :silly:

    Back to topic: One of the first things I did was making the area next to the tabs dragging the window again by simply setting the spacer between the tabs and the trash icon to zero by commenting out his definition in the common.css.

    Hacking into the browser reminds me a little bit of the old Opera INI hacking days :)



  • @QuHno:

    There is something called "pivot" on good monitors - really great for reading stuff, almost mo more scrolling necessary with a "wide screen" monitor in portrait position - do we call it a "high screen" monitor then? :silly:

    Back to topic: One of the first things I did was making the area next to the tabs dragging the window again, by simply setting the spacer between the tabs and the trash icon to zero by commenting out his definition in the common.css….
    ~
    So a pivot smilie would be :side: ?

    And I remember the old Radius CRT pivoting screens for Mac, which worked so well that Apple later bought the company. :lol:

    Not very many LCD screens let us do that, but I have seen one occasionally from LG and Samsung.
    ~



  • @QuHno:

    There is something called "pivot" on good monitors - really great for reading stuff, almost mo more scrolling necessary with a "wide screen" monitor in portrait position - do we call it a "high screen" monitor then? :silly:

    I mentioned them right above your post, yes pivotable monitors are great, but 16/9 is still a stupid A/R even in portrait 16/10 or 4/3 are much better.

    Personally I believe that part of iPad's success was due to their aspect ratio, given the firsr wave of Android tablets were mostly 16/9, (then slowly moved to 16/10 and sometimes 4/3 too)



  • ~
    Acer made some 4x3 Android tabs.

    I think they still do.

    And I agree that 16x9 was a silly/stupid/inept-manufacturing-decision, other than for proper TVs, and IMNSHO, 16x10 is not a lot better.

    I use a 1280x1024 screen (5x4).

    Short of pivoting, that's about as good as it gets. B)
    ~



  • ~
    As you may know, in the Context Menu, New Tab does not work - at least in the Windows editions of Vivaldi.

    I posted in the current (167) snapshot thread, offering this fix, and was told that it was already done for the next snapshot, but I wanted to post it anyway, in case anybody is interested, impatient ( or bored ;) ), and brave enough to edit their bundle.js file to perform it.

    This was done with the TP3 edition of Vivaldi, but I expect that earlier ones have the same code, and likely the 167 snapshot too.

    Here are the steps :

    (1) Backup the bundle.js file from your Vivaldi install to another folder somewhere.

    (2) Back it up a second time, to another different folder or drive.

    (3) Open one or the other of these 2 backups in a text editor such as NotePad, MAXIMIZE the window, and edit THAT one, keeping the extra backup unchanged, in case you wish to return to the original.

    (4) Search inside the opened file for THIS string : createTab:function(e){this.props.clearTabSelection(),p.openURL(e)},

    (5) When you find it, copy and paste a duplicate of it, immediately following the one which you found, INCLUDING the comma at the end of each one.

    We are going to make an edit to each of these, but not the same edit to both.

    If You wish, you can add a carriage return (press the Enter key) at the end of each line (after the comma) to make it easier to read, and Vivaldi will ignore those anyway after.

    (6) Edit the first line to delete the letter e from inside of the brackets - This happens twice in the line, and each bracketed e must be deleted.

    Before : createTab:function(e){this.props.clearTabSelection(),p.openURL(e)},

    After : createTab:function(){this.props.clearTabSelection(),p.openURL()},

    (7) Edit the duplicated line to CHANGE the first word, and inject the word Clone. - This happens only once in the line, and note the upper case C in Clone - Do NOT change the bracketed e's in this line.

    Before : createTab:function(e){this.props.clearTabSelection(),p.openURL(e)},

    After : createCloneTab:function(e){this.props.clearTabSelection(),p.openURL(e)},

    [8] Search and locate this next line : cloneTab:function(){this.props.clearTabSelection(),this.createTab(this.props.page.attributes.url)},

    (9) Edit this line so that we inject the word Clone, to match the change made in step (7).

    Before : cloneTab:function(){this.props.clearTabSelection(),this.createTab(this.props.page.attributes.url)},

    After : cloneTab:function(){this.props.clearTabSelection(),this.createCloneTab(this.props.page.attributes.url)},

    (10) Review all of the above steps, and then save the file one last time.

    (11) Exit Vivaldi if you have not done so already, and copy the changed file to overwrite the one in the Vivaldi program folder.

    (12) Relaunch Vivaldi and test New Tab and Clone Tab, both of which are in the Context Menu.

    Cheers ! :cheer:
    ~



  • Anyone found a way to edit the right click menu's inside the browser frame yet?
    For example the image menu, link menu, the right click > inspect element menu?

    I've tried to look but found nothing.



  • ~
    I found where it is, but do not know how to deal with it.

    Look in the first Locales folder, inside of the version number folder.

    I could view the en-us.pak file and see Element Inspect.

    But unlike the JS and CSS files, it is not a pure text file.

    The translator folks would know what to do with it, if you only wanted to change a label.
    ~



  • They did this in the next build, as they had said, and Clone Tab still works too. B)

    (So you can ignore my earlier post about how to deal with these things, unless you wish to compare my code to theirs.)



  • I have added 'REFRESH' to be the first entry of the VIEW menu, plus an extra spacer line, but have not bothered to change the screenshot in my earlier post.

    It works fine ! :cheer:
    ~


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.