Vivaldi UI Customisations
-
I think I get what you mean here. But then, in a sense, aren't the beautifier/reformatters that Discard invalid properties (CSS1.0, CSS2.0, or CSS2.1) also functioning in a limited way as a "Rewriter"? (…or what would be a better term for that functionality that implies more than just CSS minification?)
Removing "invalid" stuff is still minification, it's removing characters without changing its functionality.
You did not got the Rewiter thing. It's not about simple rewriting, it's about changing the original function to something different, more optimised, it completely changes the functions to output the same. It's like rewriting an integral as a Taylor series.
Minification barely has rewriting, it just merely joins and delete "useless" stuff. I said that I do not like to remove invalid things when beautifying because "useless" stuff is removed when minifying and not when beautifying, if it's in there minified it's probably because it must be there. I've seen some CSS properties in common.css that are not standard CSS.
But having said all of this, I have to wonder - If the CSS does not actually get compiled as, then why does it get minified, and to what advantage, and is it done as an explicitly intentional operation, or what ?
From Wikipedia Minification article: "removing all unnecessary characters from source code without changing its functionality (…white space characters, new line characters, comments, and sometimes block delimiters used to add readability to the code but not required to execute)...especially useful for interpreted languages deployed and transmitted on the Internet (such as JavaScript), because it reduces the amount of data that needs to be transferred. Minified source code may also be used as a kind of obfuscation…" (emphasis mine)
You said all, it's also less data being computed on your computer.
-
That's already there (in the Vivaldi [Edit] Menu, I mean) - is just not visible in the contextual menu [of the address bar]….
/* Pedantic mode ON */
Vivaldi Menu is the actual definition of the red square thing you can see in the top left of the browser
And, no "paste and go" is not related just to the address bar, it comes out when the context requires it, also inside the pages.
/* Pedantic mode OFF */
In a Mozilla environment, I think that such a thing could be coded in the XUL layer for an existing function, but dunno how (yet) for Vivaldi nor other Chromium-based browsers.
OK, thanks
-
You did not got the Rewiter thing. It's not about simple rewriting, it's about changing the original function to something different, more optimised, it completely changes the functions to output the same. It's like rewriting an integral as a Taylor series.
Ahhh. OK, the actual math of "rewriting an integral as a Taylor series" is a little over my head, but I think I get what you're saying: "rewriting" is a transformation from one method/function to a different (usually more efficient) method/function that will yield the same output… ...while minification deletes "useless" stuff (including "invalid properties" in some cases) but doesn't generally change any methods/functions. Does that sound like I've "got it"?
-
Ahhh. OK, the actual math of "rewriting an integral as a Taylor series" is a little over my head, but I think I get what you're saying: "rewriting" is a transformation from one method/function to a different (usually more efficient) method/function that will yield the same output… ...while minification deletes "useless" stuff (including "invalid properties" in some cases) but doesn't generally change any methods/functions. Does that sound like I've "got it"?
Yes, you got it now.
….More In-Depth (from the first post of this thread)
Going more specific, Vivaldi UI HTML is empty, all elements are added by the JS.
There are a lot of elements that simply do not exist until you request them, the advantage here is to not waste resources for stuff that would be hidden most of the time….
~
So if a function was already present in the JS, but not in use, how would we know, or go about finding out ?The HTML does not exist, the JS is always there. You have to run the function once while inspecting the JS so you can pause and check the functions being called. Or beautify the JS and read.
Also in Mozilla coding, we CAN include some conditional testing in the CSS, such as whether to display a larger or smaller icon/button, dependent upon the status of a variable which was set usually in the JS layer.
Vivaldi already does that, classes are added and removed in the elements all the time. Let me quote myself:
It's worth noting that the JS adds a lot of classes depending on state, preferences and OS. For example, the body has a class with the OS name and one with the window state, like maximized, normal (restored) or fullscreen.
-
-
Thanks! Very helpfull
A small variation - with tabs on the left:
[attachment=1111]VivaldiCustom2-2.png[/attachment]
!
#header {
min-height: 0 !important;
z-index: auto !important;
}
! .win .topmenu {
color: #fff;
position: absolute;
top: 5px;
left: 0px;
}
! .topmenu+#tabs-container.top {
border-bottom: 1px solid;
position: absolute;
top: 62px;
width: 100%;
z-index: 1 !important;
}
! #tabs-container.bottom #tabs, #tabs-container.top #tabs {
height: 30px !important;
}
! .toolbar.toolbar-addressbar {
padding-right: 100px;
}
! .button-toolbar.back{margin-left: 320px}
! .button-toolbar.rewind{
display: none;
}
! .button-toolbar.next{
display: none;
}
/*
.button-toolbar.home{
display: none;
}
*/
#pagetitle{
display: none;
}
! .addressfield {
margin-left: 20px !important;
}
! .bookmark-bar {
margin-bottom:0px;
}
! .window-buttongroup {
z-index: 2;
}Attachments:
-
Wow!!! :cheer: Way to go!
You've put a lot of work into that and come a long way in a very short time!
-
This is great! is there any way we can make a multi-line tab bar like in Opera Presto through CSS? I haven't worked with CSS enough to know if something like that would be possible
-
That I cannot answer - Possibly An_dz can.
I only saw that which you described a few days ago for the first time, while revisiting Opera Presto (12.17) for other reasons (in the 'A White Theme' thread), and I have to admit that even though they do steal some of the vertical space away from the web page content, that there is also a certain attraction to them.
~I do not mind a couple more scrolls tbh. This makes it very easy to find the tab you are looking for. I'm on Chromodo atm and it looks like this:
It's horrible. Firefox makes it easier but than you have to scroll through the tab bar which is worse.
-
This is great! is there any way we can make a multi-line tab bar like in Opera Presto through CSS? I haven't worked with CSS enough to know if something like that would be possible
A fast look gives me this, you may need to adjust for possible bugs.
#tabs-container.top #tabs, #tabs-container.bottom #tabs { height: auto !important; display: block !important; } #tabs-container.bottom #tabs .tab, #tabs-container.top #tabs .tab { max-width: 150px !important; min-width: 150px; display: inline-block !important; } #tabs .newtab { margin-top: -9px; } #tabs .trash { display: inline-block !important; float: right; }
Vivaldi/Chromium seems to have integrated the XUL equivalent functions into the JS.
Huh? No. The XUL layer is already hinting you what it is. It's a layer. Something the Mozilla developers have come so you can modify the interface without having to edit the sources. In Vivaldi there's no layer, you have to edit the source to modify the interface.
-
A fast look gives me this, you may need to adjust for possible bugs.
#tabs-container.top #tabs, #tabs-container.bottom #tabs { height: auto !important; display: block !important; } #tabs-container.bottom #tabs .tab, #tabs-container.top #tabs .tab { max-width: 150px !important; min-width: 150px; display: inline-block !important; } #tabs .newtab { margin-top: -9px; } #tabs .trash { display: inline-block !important; float: right; }
Thanks for the response and the code. It kind of works but it looks like this:
I tried a few tweaks and I can't seem to be able to hide tab-thumb class. Maybe it's impossible due to the way Vivaldi is built for the moment, but if you have any ideas or pointers I would be glad to hear them. Thanks in advance.
-
Oh, I forgot to add that part of the code. Sorry, I just changed with Dev Tools and did not kept track of all changes. This will get rid of them:
#tabs .tab .tab-thumb { display: none; }
-
Oh, I forgot to add that part of the code. Sorry, I just changed with Dev Tools and did not kept track of all changes. This will get rid of them:
This worked like a charm! The only problem was the trash was below the tabs instead of next to them, taking up 1 more line. I experimented a bit and I managed to find a solution. I am not familiar with inline-block functionality, so I used float on the tabs to fix this. The only "problem" now is that the new tab button is shown on the right side of the top line always, but I don't particularly care for that. If anyone has suggestions, I'm all ears. Here's how it looks now:
And below is the css file:
! ```
#tabs-container.top #tabs, #tabs-container.bottom #tabs {
height: auto !important;
display: block !important;
}
#tabs-container.bottom #tabs .tab, #tabs-container.top #tabs .tab {
max-width: 150px !important;
min-width: 150px;
display: inline-block !important;
float: left;
}
#tabs .tab .tab-thumb {
display: none;
}
#tabs .newtab {
margin-top: -9px;
}
#tabs .trash {
display: inline-block !important;
float: right;
} -
Added a new simple edit for tabs on side without preview images.
-
I managed to get this layout, combining and adjusting some of the tips posted earlier
How I can make the tab bar narrower?
This way I can shrink the tabs but not the bar.
#tabs-container.left #tabs .tab, #tabs-container.right #tabs .tab { max-height: 30px !important; width: 60px }
Making it resizeable would be even better.
-
Maybe add this one to what you already have ?
Thanks.
I already tried something like that.. with no luck
-
@The_Solutor
Really tricky, never seen this implementation before.#tabs-container.left, #tabs-container.right { flex: 0 0 180px !important; }
-
@The_Solutor
Really tricky,Wow, must be my proverbial "luck"
never seen this implementation before.
#tabs-container.left, #tabs-container.right { flex: 0 0 180px !important; }
I'll try it ASAP, thanks.
-
It worked perfectly
-
Could you please share your css code? That looks amazing