Move the tabbar with bundle.js
-
It took me just 24 hours after installing Vivaldi Beta 3 to make it my goto browser. I like where this browser is going. It is reminiscent of a couple other browser from back in the day when they started. Needless to say that was back in the day so I moved browsers. I am not a coder. I dabble. This is a simple edit of bundle.js to move the tabbar into the legacy position. Below the bookmark bar and right above the page content. CSS edits here are difficult because they do not change where the html is located. I.E. there are two completely different dividers involved in the original tabbar location and the bookmark bar/content location. You can't change div's with css. This simply moves the tabbar code into a different div. Which is how and where the html is rendered from js. Yes I unminified it and then minified it back. I am human and read like a human. It's up to you how you do whatever it is you do, this is just how I did it and what I moved. Any of the elements besides the tabbar you want moved are capable of being moved the same way I did this. I don't intend to put up a modified bundle.js. It won't be my fault if something you do doesn't work. It won't have any arbitrary code in it you don't know where it came from either if you do it yourself. I wouldn't let anybody I don't trust touch any js code I intend to run, period. [u]BACKUP bundle.js or any other file before you start editing!!! HEED the warning about the closing parenthisis and comma!!! I would not copy and paste this. Treat it as an example only[/u]. Whatever unminfier and minifier you use may not be what I used. My suggestion is to find one that doesn't pretty up the original any more than necessary for you to read it. I simply used uglify to minify it. [u]If it doesn't work look very closely at the "This is what the modified code should look like" section.[/u] And finally. Yes, this will be written over whenever you upgrade Vivaldi. Not a permanent solution. I suspect until we get a final release there will be no permanent solutions to any GUI hacks. Maybe if some of us are lucky the devs will give us a switch for this in browser. [attachment=2952]vivaldi-tabbar.png[/attachment] [code] //Included the entire header div because there is a closing parenthisis and comma at the end that belong in this section. If they are moved it will cause the code to not display correctly.// //######################Header Section i.createElement("div", { id: "header", onDoubleClick: this.handleDoubleClick, className: !this.props.vivaldiSettings.USE_TABCOLOR || "on" === this.props.vivaldiSettings.TABCOLOR_BEHIND_TABS || "top" === this.props.vivaldiSettings.TAB_POSITION && this.props.vivaldiSettings.SHOW_TAB_BAR ? null : "favicon-current-background-color" }, i.createElement(w, { currentWindowstate: this.state.currentWindowstate, title: z.getDisplayTitle(this.state.activePage), pages: this.state.pages, currentOS: this.state.currentOS, tabPosition: this.props.vivaldiSettings.SHOW_TAB_BAR ? this.props.vivaldiSettings.TAB_POSITION : "none", onNoVisualBlur: this.noVisualBlur }), this.state.showHorizontalVivaldiMenu && this.state.menuItems && i.createElement("div", { className: "topmenu" }, i.createElement("button", { className: "vivaldi-horizontal-icon", onDoubleClick: this.close, title: V("Double Click to Close"), dangerouslySetInnerHTML: { __html: '<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n <defs>\n <radialgradient cy="23.635%" fx="50%" fy="23.635%" r="55.581%" id="horizontal-menu-button-radialGradient-1">\n \n \n</radialgradient> \n <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="horizontal-menu-button-filter-2">\n \n \n \n \n <femerge>\n \n \n</femerge> \n</filter> \n \n <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="horizontal-menu-viv-icon-filter-5">\n \n \n \n \n <femerge>\n \n \n</femerge> \n</filter> \n</defs> \n <g id="horizontal-menu-viv-icon" fill="none" fill-rule="evenodd">\n <g id="horizontal-product_logo_16">\n <mask id="horizontal-menu-viv-icon-mask-4" fill="#fff">\n \n</mask> \n <g id="v-icon-bg" filter="url(#horizontal-menu-button-filter-2)">\n \n \n</g> \n \n</g> \n</g> \n</svg>\n' } }), i.createElement(f, { horizontal: !0, platformPopups: !0, items: this.state.menuItems }), i.createElement("div", { className: "horizontal-menu-pagetitle" }, z.getDisplayTitle(this.state.activePage))) //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ //Cut out this section. Yes the comma goes too. The comma needs to be deleted once it is moved into the Main div. //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ , this.props.vivaldiSettings.SHOW_TAB_BAR && "top" === this.props.vivaldiSettings.TAB_POSITION && i.createElement(T, { ref: "tabbar", pages: this.state.pages, pageHistory: this.state.pageHistory, pageSelection: this.state.pageSelection, activePage: this.state.activePage, tabPosition: this.props.vivaldiSettings.TAB_POSITION, switchTabVisualTabSwitcher: this.switchTabVisualTabSwitcher }), !this.props.vivaldiSettings.SHOW_TAB_BAR && i.createElement(T, { ref: "tabbar", pages: this.state.pages, pageHistory: this.state.pageHistory, pageSelection: this.state.pageSelection, activePage: this.state.activePage, tabPosition: "none", switchTabVisualTabSwitcher: this.switchTabVisualTabSwitcher }) //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ //Leave the last closing parenthisis and comma before the Main Div. It is the closing for the Header div section. //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ), //##########################Main Section i.createElement("div", { id: "main", className: this.props.vivaldiSettings.PANEL_POSITION }, i.createElement(k, { id: this.state.activePage.get("id"), page: this.state.activePage, "private": this.state.incognito, currentOS: this.state.currentOS, searchEngines: this.props.vivaldiSettings.SEARCH_ENGINES, currentWindowstate: this.state.currentWindowstate }), this.props.vivaldiSettings.BOOKMARK_BAR_VISIBLE && i.createElement(a, { useTabColor: this.props.vivaldiSettings.USE_TABCOLOR && "on" !== this.props.vivaldiSettings.TABCOLOR_BEHIND_TABS, display: this.props.vivaldiSettings.BOOKMARK_BAR_DISPLAY, statusOff: "off" === this.props.SHOW_VIVALDI_FOOTER, keyAccess: this.props.vivaldiSettings.KEY_ACCESS }), //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ //Paste it in here. Remember the comma must be dropped, there is already one here(above). //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ this.props.vivaldiSettings.SHOW_TAB_BAR && "top" === this.props.vivaldiSettings.TAB_POSITION && i.createElement(T, { ref: "tabbar", pages: this.state.pages, pageHistory: this.state.pageHistory, pageSelection: this.state.pageSelection, activePage: this.state.activePage, tabPosition: this.props.vivaldiSettings.TAB_POSITION, switchTabVisualTabSwitcher: this.switchTabVisualTabSwitcher }), !this.props.vivaldiSettings.SHOW_TAB_BAR && i.createElement(T, { ref: "tabbar", pages: this.state.pages, pageHistory: this.state.pageHistory, pageSelection: this.state.pageSelection, activePage: this.state.activePage, tabPosition: "none", switchTabVisualTabSwitcher: this.switchTabVisualTabSwitcher }), //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ //########################Inner Section i.createElement("div", { className: "inner" }, //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ //This is what the modified code should look like. //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ i.createElement("div", { id: "header", onDoubleClick: this.handleDoubleClick, className: !this.props.vivaldiSettings.USE_TABCOLOR || "on" === this.props.vivaldiSettings.TABCOLOR_BEHIND_TABS || "top" === this.props.vivaldiSettings.TAB_POSITION && this.props.vivaldiSettings.SHOW_TAB_BAR ? null : "favicon-current-background-color" }, i.createElement(w, { currentWindowstate: this.state.currentWindowstate, title: z.getDisplayTitle(this.state.activePage), pages: this.state.pages, currentOS: this.state.currentOS, tabPosition: this.props.vivaldiSettings.SHOW_TAB_BAR ? this.props.vivaldiSettings.TAB_POSITION : "none", onNoVisualBlur: this.noVisualBlur }), this.state.showHorizontalVivaldiMenu && this.state.menuItems && i.createElement("div", { className: "topmenu" }, i.createElement("button", { className: "vivaldi-horizontal-icon", onDoubleClick: this.close, title: V("Double Click to Close"), dangerouslySetInnerHTML: { __html: '<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n <defs>\n <radialgradient cy="23.635%" fx="50%" fy="23.635%" r="55.581%" id="horizontal-menu-button-radialGradient-1">\n \n \n</radialgradient> \n <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="horizontal-menu-button-filter-2">\n \n \n \n \n <femerge>\n \n \n</femerge> \n</filter> \n \n <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="horizontal-menu-viv-icon-filter-5">\n \n \n \n \n <femerge>\n \n \n</femerge> \n</filter> \n</defs> \n <g id="horizontal-menu-viv-icon" fill="none" fill-rule="evenodd">\n <g id="horizontal-product_logo_16">\n <mask id="horizontal-menu-viv-icon-mask-4" fill="#fff">\n \n</mask> \n <g id="v-icon-bg" filter="url(#horizontal-menu-button-filter-2)">\n \n \n</g> \n \n</g> \n</g> \n</svg>\n' } }), i.createElement(f, { horizontal: !0, platformPopups: !0, items: this.state.menuItems }), i.createElement("div", { className: "horizontal-menu-pagetitle" }, z.getDisplayTitle(this.state.activePage))) ), i.createElement("div", { id: "main", className: this.props.vivaldiSettings.PANEL_POSITION }, i.createElement(k, { id: this.state.activePage.get("id"), page: this.state.activePage, "private": this.state.incognito, currentOS: this.state.currentOS, searchEngines: this.props.vivaldiSettings.SEARCH_ENGINES, currentWindowstate: this.state.currentWindowstate }), this.props.vivaldiSettings.BOOKMARK_BAR_VISIBLE && i.createElement(a, { useTabColor: this.props.vivaldiSettings.USE_TABCOLOR && "on" !== this.props.vivaldiSettings.TABCOLOR_BEHIND_TABS, display: this.props.vivaldiSettings.BOOKMARK_BAR_DISPLAY, statusOff: "off" === this.props.SHOW_VIVALDI_FOOTER, keyAccess: this.props.vivaldiSettings.KEY_ACCESS }), this.props.vivaldiSettings.SHOW_TAB_BAR && "top" === this.props.vivaldiSettings.TAB_POSITION && i.createElement(T, { ref: "tabbar", pages: this.state.pages, pageHistory: this.state.pageHistory, pageSelection: this.state.pageSelection, activePage: this.state.activePage, tabPosition: this.props.vivaldiSettings.TAB_POSITION, switchTabVisualTabSwitcher: this.switchTabVisualTabSwitcher }), !this.props.vivaldiSettings.SHOW_TAB_BAR && i.createElement(T, { ref: "tabbar", pages: this.state.pages, pageHistory: this.state.pageHistory, pageSelection: this.state.pageSelection, activePage: this.state.activePage, tabPosition: "none", switchTabVisualTabSwitcher: this.switchTabVisualTabSwitcher }), i.createElement("div", { className: "inner" }, [/code] Attachments: [img]https://forum.vivaldi.net/uploads/attachments/75727/vivaldi-tabbar.png[/img]
-
I added the switch to the above hack and cleaned it up a bit. Now it will give you a switch in the tab settings for the Legacy Position. It also fixed how the sidebar and tabbar met in the corner. I had moved an unnecessary element in the first hack and corrected that with this.
[attachment=2966]tabbarwithswitch.png[/attachment]
//############################################################## //Turn on bracket matching in your editor. // //Search for and insert into /id: "main"/ after the bookmark bar element. //############################################################## this.props.vivaldiSettings.BOOKMARK_BAR_VISIBLE && i.createElement(a, { useTabColor: this.props.vivaldiSettings.USE_TABCOLOR && "on" !== this.props.vivaldiSettings.TABCOLOR_BEHIND_TABS, display: this.props.vivaldiSettings.BOOKMARK_BAR_DISPLAY, statusOff: "off" === this.props.SHOW_VIVALDI_FOOTER, keyAccess: this.props.vivaldiSettings.KEY_ACCESS }), this.props.vivaldiSettings.SHOW_TAB_BAR && "legacy" === this.props.vivaldiSettings.TAB_POSITION && i.createElement(T, { ref: "tabbar", pages: this.state.pages, pageHistory: this.state.pageHistory, pageSelection: this.state.pageSelection, activePage: this.state.activePage, tabPosition: this.props.vivaldiSettings.TAB_POSITION, switchTabVisualTabSwitcher: this.switchTabVisualTabSwitcher }), //############################################################## //Search for and insert into 568\. The last element is the "bottom" switch. Insert new code after the next to last closing parenthisis for the bottom div. Add a comma after the closing parenthisis for that div. That closing parenthisis now goes after the new code. Counting them and bracket matching or selecting inside brackets is easiest way to locate. //############################################################## //########################Original############################## i.createElement("div", { className: "setting-single" },i.createElement("label", null, i.createElement(e, { value: "bottom" }), i.createElement("span", null, s("Bottom"))))) //########################Modified############################## i.createElement("div", { className: "setting-single" },i.createElement("label", null, i.createElement(e, { value: "bottom" }), i.createElement("span", null, s("Bottom")))), i.createElement("div", { className: "setting-single" }, i.createElement("label", null, i.createElement(e, { value: "legacy" }), i.createElement("span", null, s("Legacy Position"))))) //############################################################## ```Attachments: ![](https://forum.vivaldi.net/uploads/attachments/75727/tabbarwithswitch.png)