Hide URL on Timestamp Hover

[Domvel]

Since a few months the url bar is hidden by hovering the channel lists. because the items of this list are buttons now. no a-tag anymore. I don't know the ticket nummer.

Anyway ... We missed something. If I hover the mouse over the time element of an user post, the browser url bar appears on the bottom with a internal link. This is annoying and should be fixed.

Generally, hide all internal links. Or add bottom style padding 26px. That the url bar does not overlap the chat. (esp. the "user is writing..." text)

Mattermost Version: 5.2.0
Database Schema Version: 5.2.0
Desktop Client: 4.1.2

[wget]

@Domvel Hello there. Thanks for your bug report. This actually happens for all items that are basically links on the GUI. @yuya-oc Do you think this can be removed as per the electron API?

PS: @Domvel: Please note for the future, please always make sure you are running the very latest version of the client app before filling a bug report (current one is 4.2.0). Thanks :)

[Domvel]

@wget You are absolutely right. Usually I use the latest version. Especially on bug reports. Sorry. :)
I'm sure Electron can hide this url-bar. I have no idea but anyway, the desktop client should display urls from users. (All external links.) That was one reason why we decided to use buttons to hide the URL bar on internal links. But in my opinion this url-bar can be removed. And implement a custom html tooltip for users external links posted by markdown. Anyway...

There are minimum three solutions:

1. Change the time stamp element to e.g. button (style it in currently time stamp style) to hide the url. I think this is the prefered solution for the most of members and collaborators here.

2. Add 26px (height of the url-bar (25px + 1px background border)) at bottom of #mattermostView0. Optionally with a pretty background like the theme. This could be an user option. You can test it in the DeveloperTools. (Crtl + Shift + i). Select the html element (div #content > div .MainPage > div .container-fluid > div .row > div .mattermostView > div #mattermostView0) and change the css style .mattermostView webview, .mattermostView .mattermostView-loadingScreen to bottom: 26px. But this will not hide the internal links. This solution only fixes the overlapping issue.

3. Hide the url-bar in Electron (if possible). This will hide ALL urls. Also the external links posted by users. You should implement an alternative by html tooltip.

What is your preferred solution?

[yuya-oc]

@wget Everyone misunderstand this though, the URL bar is NOT electron's feature. It's implemented by our desktop app via update-target-url event of webview.

Thanks @Domvel, I think all solutions are possible. However probably I can't select one.

• 1 and 3: Sadly I'm not sure whether those a-tags may become buttons. (cc: @esethna)
• 2: As far as I know, it seems that desktop app users don't want further horizontal bars (e.g. menu bar Hide menu bar on Windows #457). And web browsers still should have the same issue, so the original problem would not be resolved.

[Domvel]

@yuya-oc Interesting. The URL bar looks exactly like the bar from Chrome (Chromium?). So I thought it comes with Chromium / Electron.

I just suggested button tags to hide url when a mouse is hovering, because in the past the channel list also was a-tags. And there was a github ticket (idk the id), to fix this. They decided to use button tags. Because buttons do not show the url.

But I see - as you posted - the Mattermost Desktop Client displays the Target-URL-Bar by the hovering class (css selector). So, I think the solution is "easy" (never say easy, I know ^^). Just remove the hovering class from the time stamp element. Or something else in this direction. Like: Add additional class for timestamp and other elements which should not display the target url. (not-selector).

[amyblais]

Opened a ticket for this here: https://mattermost.atlassian.net/browse/MM-13995.

[amyblais]

Updated ticket: https://mattermost.atlassian.net/browse/MM-9922.

[infacto]

Yes this is annoying and still present when hovering the time stamp. A few solutions:

• Remove the link from the timestamp. This is the permalink for the post, which can also be accessed via the "More" menu (...).

• Navigate using JavaScript to hide the url and / or wrap it in a button-tag.

• Add more space at the bottom for this app to prevent hiding the state like "user is typing..."

• Hide all urls. (native browser thing) and display a custom tooltip (or like the native one.) on links you want to display (like external links).

[esethna]

Thanks @infacto, requeued the ticket for discussion