Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Properly open selected folder on middle click #612

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

leomoty
Copy link
Contributor

@leomoty leomoty commented Jun 28, 2024

Now I have no clue how to test this, is there an easy way to figure out if the browser opened a new tab?

Fixes #545

@leomoty
Copy link
Contributor Author

leomoty commented Jun 28, 2024

Noticed I missed ctrl + click, will amend

@martinpitt
Copy link
Member

There is indeed no way to monitor the browser for multiple tabs in CDP. We also don't do this anywhere as we don't really want people to have a lot of parallel cockpit sessions in multiple tabs - we never test this, and at some point the communication overhead becomes quite severe.

I triggered the tests, I'll leave the functional review to @jelly . Thank you!

Comment on lines 147 to 148
if (newTab) {
open(`#/?path=${newPath}`);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These 2 added lines are not executed by any test.

@@ -194,7 +198,7 @@ export const FilesCardBody = ({
}

if (ev.detail > 1) {
onDoubleClickNavigate(file);
onClickNavigate(file);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This added line is not executed by any test.

}
};

const handleAuxClick = (ev: MouseEvent) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This added line is not executed by any test.

Comment on lines 220 to 223
if (ev.button === 1) {
ev.preventDefault();
const name = getFilenameForEvent(ev);
const file = sortedFiles?.find(file => file.name === name);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These 4 added lines are not executed by any test.

Comment on lines 225 to 227
if (file) {
setSelected([file]);
onClickNavigate(file, true);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These 3 added lines are not executed by any test.

@leomoty
Copy link
Contributor Author

leomoty commented Jul 1, 2024

There is indeed no way to monitor the browser for multiple tabs in CDP. We also don't do this anywhere as we don't really want people to have a lot of parallel cockpit sessions in multiple tabs - we never test this, and at some point the communication overhead becomes quite severe.

I triggered the tests, I'll leave the functional review to @jelly . Thank you!

Thanks Martin, yea, I guess a middle ground is merging the middle click, which works as expected, I didn't really put much thought into CTRL + CLICK, as it currently fights with multiple selection, just wanted to showcase that.

@leomoty
Copy link
Contributor Author

leomoty commented Jul 3, 2024

@jelly can I get a review? :), do not mind the ctrl click, I think we need to discuss it further, but if you are happy I can remove it and we could partially work only the middle click

@garrett
Copy link
Member

garrett commented Jul 9, 2024

Thanks!

However, this doesn't work as expected:

  1. It directly opens the tab, instead of respecting the tab open behavior, where, for example, in when middle-clicking on a link in Firefox, it (by default) opens the tab in the background and stays on the current tab. (This is configurable in the browser, and it should respect the browser defaults.)
  2. When opening a new tab, this only shows the content area that is normally in the iframe, but it does not show the rest of Cockpit.

In other words, I would expect it to open in the background like other tabs and be within Cockpit.

@leomoty
Copy link
Contributor Author

leomoty commented Jul 9, 2024

  1. It directly opens the tab, instead of respecting the tab open behavior, where, for example, in when middle-clicking on a link in Firefox, it (by default) opens the tab in the background and stays on the current tab. (This is configurable in the browser, and it should respect the browser defaults.)

Not able to find anything that would work everywhere, if anything chrome still seems to be the issue: https://stackoverflow.com/a/76529021 whether that is intended or not, I am not sure.

@garrett
Copy link
Member

garrett commented Jul 9, 2024

Not able to find anything that would work everywhere, if anything chrome still seems to be the issue: https://stackoverflow.com/a/76529021 whether that is intended or not, I am not sure.

Err... uh... what? That code looks ridiculous. Creating an anchor element from a button? 😕

Why not just use an actual anchor element within the DOM and use that, like intended?

<a href="link-goes-here">filename.txt</a>; then if it's a middle-click, allow it to pass through without preventing default behavior (and without doing secondary event handling behavior too)? Then you have the native action acting upon the native element intended to go places. And the even handler can intercept and preventDefault if it's a middle click (or right click and open in new tab).

Control click gets harder — normally I'd suggest that work too, but file managers generally have control-click for multi-select.

Basically you'd ususally do something like this with HTML + JavaScript like this simple example:

  <div id="fileList">
    <a href="Documents/" class="folder">Documents</a>
    <a href="Projects/" class="folder">Projects</a>
    <a href="document1.txt" class="file">document1.txt</a>
    <a href="image.jpg" class="file">image.jpg</a>
    <a href="archive.zip" class="file">archive.zip</a>
  </div>
document.getElementById('fileList').addEventListener('click', event => {
  // On folders, let a middle click go through and be handled natively
  if (event.target.matches('.folder') && event.button === 4) return;

  // Don't follow the link and instead do other things below
  event.preventDefault();

  // Do stuff to files and folders
  if (event.target.matches('.file, .folder')) {
    console.log('Clicked:', event.target.href);
  }
});

(It basically is using event delegation on the parent of the folders, then checks if it's a folder and if middle click was active, then returns if so, otherwise it prevents default actions and does stuff to files and folders.)

I haven't tested the JS, but it probably works. If I type something wrong, pretend it is pseudocode. 😉

(Hopefully something like the above can be adapted.)

@leomoty
Copy link
Contributor Author

leomoty commented Jul 9, 2024

Also middle click on my end seems to not open in foreground, I am using chrome / windows, even with my changes (I am ignoring ctrl click).

(It basically is using event delegation on the parent of the folders, then checks if it's a folder and if middle click was active, then returns if so, otherwise it prevents default actions and does stuff to files and folders.)

Also make sense, will give a try

@garrett
Copy link
Member

garrett commented Jul 9, 2024

Also middle click on my end seems to not open in foreground, I am using chrome / windows, even with my changes (I am ignoring ctrl click).

Ah, I'm using Firefox on Linux.

I tried Chromium and see the tabs open in the background as expected. Weird that this is different!

I just tried GNOME Web (WebKit, like Safari) and middle clicking does absolutely nothing at all. No tabs at all, nor navigation.

@leomoty
Copy link
Contributor Author

leomoty commented Jul 11, 2024

Hi @garrett, can you take another look? I did test on both chrome and firefox and respects the background opening just fine, but of course in list view, it only triggers from the <a> portion

@leomoty
Copy link
Contributor Author

leomoty commented Jul 16, 2024

friendly ping @garrett

Copy link
Member

@garrett garrett left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. I have a simple question about the JS; replied inline.

src/files-card-body.tsx Outdated Show resolved Hide resolved
@leomoty
Copy link
Contributor Author

leomoty commented Jul 30, 2024

@garrett one last check?

@leomoty
Copy link
Contributor Author

leomoty commented Jul 31, 2024

Updated to match path changes from #678

@garrett
Copy link
Member

garrett commented Aug 1, 2024

It looks fine to me, but we had a philosophical question about enabling this, even at this level, and some high priority things came up meanwhile. So... I'm not sure at the moment.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Properly support opening in browser tabs
4 participants