Please request, small tab-tittle or small tab-url inside urlbar on tab mouse-hovered

[EstherMoellman]

Hi @aminomancer,

I'm an university student, and I'm part of a small international group of students who like to exchange Firefox CSS customizations for our own personal use (studies and jobs). We also use several Firefox JavaScripts (uc.js). But, unfortunately neither I nor anyone in our group knows anything about JavaScript. We use JavaScripts that we find here on Github, or JavaScripts that kindly Devs on Reddit create and adapt for us.

At this moment we need a simple JavaScript to show a short tab-title or tab-url inside the urlbar when a tab is mouse-hovered. That's all! As you know, in vanilla Firefox when a tab is mouse-hovered the tab-tooltip appears. We want to replace this tab-tooltip, and we want it to appear inside the urlbar. It doesn't matter if the JavaScript uses the tab-tooltip or tab-label or whatever, the only thing we need is that when any tab (pinned, unpinned, selected, unselected, active, not active etc) is mouse-hovered, a short tab-title or short tab-url will appear inside the urlbar. Please @aminomancer, could you help us?

We've already visited all the FF' JavaScripts repos, there is no such script. Also, we have already contacted all the Devs, in the past they always have already helped us a lot with other scripts, but unfortunately at this time we do NOT have anyone to help us.

@aminomancer, thank you very much!

[aminomancer]

So, while hovering a tab, should the tab's URL replace the text in the urlbar? Like, the current page URL is just replaced by the tab's URL? Or do you just mean the tab tooltip is styled in such a way that it always appears exactly where the urlbar is? Is this supposed to be a tooltip or just text? Should it have a background? Should it show both the title and the URL? Or just one or the other?

I guess the most important question is: is it meant to look like it literally is text inside the urlbar input field? As if the page URL is just replaced with the tab URL? Or is it just supposed to appear like a tooltip sitting on top of the urlbar? That distinction is important because those would result in 2 totally different approaches. If it's meant to look like ordinary urlbar text, then probably the best way to implement it is to actually make it ordinary urlbar text. Like, just changing the input value of the urlbar temporarily so that the urlbar shows the hovered tab's URL instead of the active tab's URL. But if it's meant to look like a tooltip, then it should be a tooltip. So those are very different things.

This doesn't seem too difficult. I'm sort of busy with teaching at the moment so I may not get around to it until near the end of the quarter, like early December. But the more information you can give me before then, the better.

[EstherMoellman]

So, while hovering a tab, should the tab's URL replace the text in the urlbar?

Yes! Please @aminomancer: If any individual tab is hovered, as long as it is hovered, then the urlbar will show its tab-tittle or tab-url. If no tab is hovered, then urlbar will behave as normal, showing the URL address of the selected tab. There is no need for special cases such multiselect, the script will work only for individual hovered tabs, else urlbar will behave as normal.

Like, the current page URL is just replaced by the tab's URL?

Yes (as long as any individual tab is hovered, current URL urlbar will be replaced by the tab-tittle or tab-url of the hovered tab).

Or do you just mean the tab tooltip is styled in such a way that it always appears exactly where the urlbar is? Is this supposed to be a tooltip or just text? Should it have a background? Should it show both the title and the URL? Or just one or the other?

Please, you can decide the easier way to you. I don't have preferences. From my side, it'll be fine if I hover any individual tab and the tab-tittle appears inside the urlbar, or the tab-url appears inside the urlbar, or tab-tooltip, or tab-label, anything will work for me. I just need to see any kind of tab identification inside urlbar when I mouse-hover any individual tab.

I guess the most important question is: is it meant to look like it literally is text inside the urlbar input field? As if the page URL is just replaced with the tab URL? Or is it just supposed to appear like a tooltip sitting on top of the urlbar? That distinction is important because those would result in 2 totally different approaches. If it's meant to look like ordinary urlbar text, then probably the best way to implement it is to actually make it ordinary urlbar text. Like, just changing the input value of the urlbar temporarily so that the urlbar shows the hovered tab's URL instead of the active tab's URL. But if it's meant to look like a tooltip, then it should be a tooltip. So those are very different things.

I understand you. As I explained, please you can decide the easier way to you. I don't need anything specific. Any tab identification inside urlbar will be fine for us. It can be the tab-tooltip, or the tab-label, or the tab-url, whatever, you name it. As long as it works for any individual hovered tab, and as long as a kind of tab identification appears inside the urlbar, then from our side will be fine. Please feel free to choose what is the easiest way for you, or what is the most useful script for your own collection of JavaScripts.

This doesn't seem too difficult. I'm sort of busy with teaching at the moment so I may not get around to it until near the end of the quarter, like early December. But the more information you can give me before then, the better.

No problem at all, we can wait! At least now you gave us hope : )

Thank you @aminomancer!

[aminomancer]

Alright try this script out. If you use a custom theme you might need to fiddle with the CSS styles a bit to get it to really align with the urlbar input, since it was designed to work with the vanilla layout in v96.0a1. I made it as dynamic as possible so it should be able to accommodate some deviations by itself, but there's always a limit to that kind of thing. Read the documentation in the script if you have any questions, I put pretty extensive notes in there. Might be helpful to someone trying to learn how to do this kind of firefox javascript modding.

[EstherMoellman]

@aminomancer your script seems perfect to me! I couldn't find issues or problems or conflicts, nothing, just perfect. For me your script works flawlessly, thank you very much! I also thank you for your incredible speed in writing the script, and for all the comments and explanations that you put throughout the script (I read everything and learned a lot).

Regarding the CSS, I didn't have to do anything, your script fit 100% perfect in my urlbar. The only thing I touched was the font size (I increased it a little bit) and nothing else. Your work is perfect, it's a kind of plug-and-play that does not require anything.

The only insignificant detail that I could mention to you in relation to the script, is that it has a small delay. At first I thought that you had put a delay, but studying the code I did not find anything. This delay is more or less 2 secs between hovering tab and the URL appearing in the urlbar. But honestly, it's a negligible delay, it doesn't bother me.

All kudos must go to you!

[aminomancer]

Well it's a tooltip, remember? All tooltips have a delay. It's 300ms by default. You can reduce or remove it by making a new "number" pref in about:config — ui.tooltipDelay set to 0 for example.

[EstherMoellman]

Perfect @aminomancer, the ui.tooltipDelay works, thank you. But better not to change ui.tooltipDelay, because at 0 the tooltip starts flickering when hovering from one tab to another.

Changing the topic, please one last question. I am testing all your JavaScripts one by one (they are great, one better than the other).

Your script urlbarTabUrlIndicator.uc.js naturally doesn't work with your tabTooltipNavButtons.uc.js. But by removing some lines from the latter I have made the two scripts work together (tab-tooltip only appears inside urlbar with urlbarTabUrlIndicator.uc.js).

Considering that I don't understand anything about JavaScript, please I prefer to ask you, what would be the lines that you would remove in tabTooltipNavButtons.uc.js to work with urlbarTabUrlIndicator.uc.js?

[aminomancer]

Actually I change ui.tooltipDelay and it works fine. Setting it to 0 is probably a bit extreme, but I think setting it to 10 could be okay. It's just the number of milliseconds. Zero milliseconds is too short for the tooltip to update in time, but 10 is probably enough. You could just gradually increase it until it looks good. I personally like a value of 100.

As for your other question, I guess it depends what you want to do. If you want the nav buttons to appear any time you hover a tab, then that's a bit more complicated. If you want the nav buttons to just show up when a modifier key is pressed (that's how I use the script), then change the first setting "Modifier key" (tabTooltipNavButtons.uc.js, line 15) from false to "ctrl" or whichever modifier key you prefer. That way the url indicator will show when a modifier key is not pressed, and the nav buttons will show when a modifier key is pressed.

Otherwise, if you want both of them to show at the same time, any time you hover a tab, then I think you can just delete lines 183 through 190.

[EstherMoellman]

Yes @aminomancer, I agree, 100 seems to be the best for the delay. Thanks.

With regards to tabTooltipNavButtons.uc.js, the line 15 "ctrl" option works. But my chosen functionality was a) "Always show navigation buttons on hovered tab & Never show tab-tooltip under tab" (tabTooltipNavButtons.uc.js) b) "Always show URL inside urlbar on hovered tab" (urlbarTabUrlIndicator.uc.js). So I was forced to remove lines at tabTooltipNavButtons.uc.js. Considering that I have no JavaScript knowledge, this was a kind of crime from my side (LOL). I didn't have the courage to ask you to do this task! So guilty as charged, I committed an act of heresy (LOL).

Thank you for your explanation about deleting lines 183 through 190. This works fine until navigation history and other options start to be used at tabTooltipNavButtons.uc.js (errors appear at Multiprocess Browser Console - Ctrl Shift J). So, due to my lack of JavaScript knowledge, it took me hours of work, it demanded me patience and attention, deleting script lines one by one, testing consequences at every script function, and checking the Multiprocess Browser Console at every single change. I don't complain, actually the task was a kind of therapy, also I leaned a lot. Now I believe everything is fine, your two scripts are working together as I wanted, and I can't see errors at Multiprocess Browser Console.

With regards to urlbarTabUrlIndicator.uc.js, when an URL is mouse selected (focused) at urlbar, the script stops working, hovered tabs are not showing their URLs inside urlbar. I have no problem with that, it does not bother me at all, I am making the comment just in case it is useful to you.

[aminomancer]

Yeah that's intentional. The urlbar's focus system would break down if we let the tooltip appear while the urlbar input is focused. Because for the tooltip to appear, the urlbar input must disappear, which blurs its focus. It's possible to cache the focus and restore it afterwards but it increases the complexity of the script, and it might interfere with firefox's built-in systems that already do this kind of focus caching thing.

[EstherMoellman]

@aminomancer,

I found a possible conflict between a bit of my CSS and your urlbarTabUrlIndicator.uc.js. This not a bug, this is not an urlbarTabUrlIndicator.uc.js problem, so I'm not opening an issue. This is a personal problem, and you are not forced to replay me.

My CSS stylesheet uses an oneliner layout. I'm attaching just this small part of my oneliner, please don't pay too much attention to it, this is just enough CSS to reproduce the possible conflict I found. This oneliner was built by a nice guy (/U/qaz69wsx), which at line 8 wrote:

#navigator-toolbox > #nav-bar {
margin-right: calc(100vw - var(--uc-navigationbar-width));
margin-top: calc(0px - var(--uc-toolbar-height)) }

This bit automatically adjusts navbar and tabbar height (after defining :root --uc-toolbar-height at line 1). And specifically the line 10 (margin-top: calc(0px - var(--uc-toolbar-height))) seems to be creating a possible conflict with your urlbarTabUrlIndicator.uc.js. Way to reproduce:

1. Use the small CSS I attached.
2. Use your urlbarTabUrlIndicator.uc.js
3. As first tab, open https://github.com/aminomancer/uc.css.js/blob/16d3629d38032617ccf7d55b73fca26565f37282/JS/fullscreenHotkey.uc.js
4. As second tab, open a new empty blank tab
5. Select the new empty blank tab
6. Mouse-hover the GitHub tab from different directions (up, down, right, left)

As a result, the mouse-hovered GitHub tab starts flickering, it becomes difficult to be hovered, the close button is hard to be accessed etc. Additional details:

• This is not happening with all the tabs, and I have no idea why this is happening only with specific tabs.
• This is not happening with same affected tab in different tab positions. For example, if the affected GitHub tab is moved from its first position to another position (third, fourth, last, whatever), then the GitHub tab stops flickering and behaves normal.

In short, this problem is happening with specific tabs in specific positions, and when the mentioned CSS bit is applied, and urlbarTabUrlIndicator.uc.js is used. If I remove the line 10 (margin-top: calc(0px - var(--uc-toolbar-height))) in my oneliner, it becomes broken, but the conflict disappears, no more flickering tabs. I tested on clean vanilla Nightly + Windows 10.

If by chance you understand what is happening, and if you can help me, please you'll be more than welcome! :)

Thanks a lot!

[aminomancer]

Try version 1.1, I just updated it

[aminomancer]

These are the important lines if you were wondering. It's kinda hard to explain but the flickering was basically caused by the tooltip overlapping with the tab because it's bigger than the urlbar. It didn't visually look like it was overlapping it, because the text is inside an inner box, which had a width set. I had assumed setting the width of the inner box would cause the tooltip to shrink around it. So I set the width of the inner box to match the text, but apparently I needed to set something on the tooltip itself, the inner box's parent.

So when your urlbar is small enough and the tab's title is long enough, and the tab you hovered is the furthest one to the left, the tooltip can overlap with the tab you hovered to open the tooltip. If the title is long enough the tooltip can't shrink to the same width of the urlbar, even though the textbox in the tooltip did shrink. So you'd wind up with a bunch of invisible tooltip bleeding out of the urlbar and therefore overlapping with the tabs. Since it's overlapping with the same tab you hovered to open the tooltip, your mouse is now hovering over the tooltip instead of the tab. Which forces the tooltip to close. But as soon as it closes, you're now mousing over the tab — so the tooltip reopens. And it does that ad nauseam, quickly, resulting in flickering.

That's usually what happens when you make the appearance of one element contingent on another element whose bounding box is affected by the appearance of the previous element — recursion. But by adding these lines I let the tooltip shrink to any arbitrary width. So now it should fit entirely within the urlbar at all times.

[EstherMoellman]

Thank you for your fix! Thank you for your fast action! Thank you for your great explanation! Now everything seems to work nice, but just in case tomorrow I'll redo further tests.