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

Add collapse all and navigate to selected file icons to Projects view #7925

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

Conversation

s4gh
Copy link

@s4gh s4gh commented Oct 29, 2024

This PR adds two icons/buttons to the "Projects" and "Files" views of the IDE. One of them collapses all elements of the tree view. Another one selects an element in the tree view which corresponds to the selected file in the editor window. See screenshots below.

Previously similar functionality is available via context menus. However, context menus is more clicks and less convenience. You need to know that "collapse all" is available in context menu for the tree view while "select current file in projects tree" is available in context menu of the file editor. And not in any place but when you click on the header. So having icons in the tree view is gives access to these common features in easier and more convenient way.

dark
light

@Chris2011
Copy link
Contributor

Hey @s4gh nice feature. I have two things to add:

  1. Can we please have this on hover?
  2. Also don't forget the favorites tab
  3. What happens with text which is longer for example project name or the branch name behind project? Can you please test this?
  4. I would suggest also to add new file and new folder to it as a shortcut and mouse users.

@mbien
Copy link
Member

mbien commented Oct 30, 2024

i think the general idea is good but this likely needs discussion how it is implemented.

The navigator window has for example a pretty nice solution for this: a collapsible toolbar
image

The toolbar is esp nice since it scales better with more buttons. Other candidates would be for example: the "synchronize editor with views" setting, which could be added as toggle button later too and would fit right in.

I only took a quick look but for example: the collapse-all action already exists and should be called instead of rolling a new implementation if possible.

email on the patch is also not valid. adding do-not-merge for now

@mbien mbien added do not merge Don't merge this PR, it is not ready or just demonstration purposes. UI User Interface ci:dev-build [ci] produce a dev-build zip artifact (7 days expiration, see link on workflow summary page) labels Oct 30, 2024
@Chris2011
Copy link
Contributor

The buttons seems more lightweight from the UI. Looks more modern for me than the toolbar. From the UI perspective you are absolutely right, that it fits better with this toolbar.

I would rather see them in the tabs area (see image) and if we have more actions which not fit, we could have the kebab menu, Just another Idea. So we don't need specific stuff for the views but we can have view specific actions but wrapped in the tabs bar.

image

@s4gh s4gh force-pushed the feature/projecttab-sync-and-collapse-icons branch from 5a11281 to aa30fb0 Compare November 2, 2024 11:08
@s4gh s4gh force-pushed the feature/projecttab-sync-and-collapse-icons branch from aa30fb0 to 4b8c86b Compare November 2, 2024 22:54
@s4gh
Copy link
Author

s4gh commented Nov 2, 2024

@mbien and @Chris2011

  1. Email is fixed in PR
  2. the collapse-all action already exists and should be called instead of rolling a new implementation if possible.
    Yes, if you mean this
    @ActionID(category="Project", id="org.netbeans.modules.project.ui.collapseAllNodes")
    I am actually using it. I mean this action had a method inside private void collapseNodes(Node node, ProjectTab tab) and I am actually calling same method from the icon. So they actually call the same method. The only difference is that when you click on icon instead of dispatching an action via framework it is simply a method call because all needed code is already in the same file. It sounds reasonable for me. Anyway there is no code duplication for in this case.
  3. In the updated PR I've added code to show these icons only when mouse is in "Projects" or "Files" tab as was suggested by @Chris2011 After you remove mouse - icons are hidden.
  4. As for the way to to how display such icons there are 3 options. All of them are used one of the popular IDEs. Please check screenshots below. The options are:
    1. Suggested implementation in this PR where buttons overlap tree and are located in the top right corner of the view. Main advantage - you don't loose vertical space. Most modern screens have 16:10 or 16:9 aspect ratio. Which if far from ideal for development. So vertical space is more valuable than horizontal. That is why I am proposing this approach. Disadvantage - you can put less icons there. But is this really a disadvantage? Netbeans has global toolbar with common icons like new file, new folder, run, debut, search, etc. You don't really need to repeat these icons in other toolbar inside of "Projects" view. Please check how this looks on my laptop with 15 inches screen on the last screenshot in this comment. With current implementation you can easily put few more icons.
    2. Toolbar - allows you to put more icons but takes vertical space. From my personal point of view with proposed implementation we can put enough icons and save vertical space. See below how toolbar looks in Eclipse.
    3. Place them in tab area as was suggested by @Chris2011 in one of the comments. This is how it is implemented in Idea. But the reason why they can do this in Idea because they don't really have tabs in "tab area". Instead they have drop down to switch between views. In Netbeans we simply do not have real estate to put these icons into "tab area". But the biggest problem with such approach is that I am afraid it will be to complex. Definitely for my first ever Netbeans PR. So I am afraid two other approaches are much more practical from the efforts stand point. At lest for me at this point.

So yes, I am really trying to convince you to green light current approach because of the reasons listed above.

Screenshots of different implementation in different IDEs:
Eclipse with toolbar
eclipse
VS Code - very similar to this approach. Icons are visible only when you have mouse in the tree view. Has more icons but there is no global toolbar in VS Code
vscode
Idea - icons are in the tab are. But Idea does not have tabs. That is why it has more space in the "tab area" which allows to put icons there.
idea

How current PR looks on my 16 inches laptop screen:
laptop-screen
.

@Chris2011
Copy link
Contributor

Thx for the explanation. One more thing from my side.
to 4.3. There is no problem IMHO to add this to the tab bar because we already have icons there. The minifcfation icon and in the editor tab bar, we have more, maximize, shop opened tabs and forward/backward and if you have more tabs, you got a scrollbar whcih goes behind the icons. So I still suggest to use this but then we need to change the whole UI too.

So all in all, I like your idea I'm for it, but also for this it would be good to be consistent witht eh UI of the IDE. Either we need to change the whole UI with such buttons but it could be that it doesn't fit with all use cases or we use that, what we already have in NetBeans, toolbar or inside the tabbar.

@s4gh
Copy link
Author

s4gh commented Nov 5, 2024

@Chris2011 , I don't remember seeing any additional buttons in the tab are other than "minimize" button. And minimize is not "view specific" I mean it is not related to any particular view like "Services" or "Projects" but to window management as a whole and applies to all windows. If there are any examples when some view puts a custom button in a tab area please point me to this example. I'd like to check the code to understand how this can be done. Since at the moment with my very limited knowledge of Netbeans codebase I simply do not know how to do this and if this is even possible at all. When I work in with ide/projectui/src/org/netbeans/modules/project/ui/ProjectTab.java - I do not have access to the tab are. And the view can be even detached. That is why I am afraid that this may be not possible at all. Since actual view probably does not even know if it is opened as a tab or is it detached. If there are examples where this is already implemented - please help me to locate them to check the code.

@mbien For me, implementation of toolbar or current approach seem much easier from the coding perspective. I've tried to explain why I like proposed approach better. And based on the recent statistic you are the most active Netbeans maintainer. What's your call on this? I mean are you ok with proposed UI changes. I hope I've addressed all other comments you've made before.

@Chris2011
Copy link
Contributor

This is just existing for the editor area
image

Yes not for the project tabs but this could be a hint to have a look into this area. But sure it could be that this is editor area specific.

The undocking tab is another part, yes thats true.

@s4gh
Copy link
Author

s4gh commented Nov 5, 2024

I see. These are still "windowing generic" icons/buttons applicable to any tab/window. Right? I mean to move between tabs and to do "windowing staff". I am afraid there is no way to put something else there. So "view specific" icons in the tab are may be not possible I am afraid.

@neilcsmith-net
Copy link
Member

I agree with @mbien that the general idea is good, but that the implementation should perhaps mirror the navigator panel. I have mixed feelings there - I prefer the look of this, but not the inconsistency.

More importantly, the actions should be registered in the layer system. Similarly to how the current popup menu is populated. See registrations under ProjectTabActions and FilesTabActions for the collapse action (https://github.com/apache/netbeans/blob/master/ide/projectui/src/org/netbeans/modules/project/ui/ProjectTab.java#L876). Other applications using these APIs might want to have different actions, or none at all. -1 from me for now on that point.

@s4gh
Copy link
Author

s4gh commented Nov 6, 2024

These icons/actions apply only to 3 views - Projects, Files and Favorites. This PR adds these icons to Projects, Files. So it will be 100% consistent across these 2 views. If you help me to locate file which implements "Favorites" view I will try to add same icons to that view as well. So if you want consistency - it will be consistent across all view for this this can apply.

If you give "Navigator" view and it's toolbar at the bottom I do not really think this is consistent with any other panel. Which other panel has "toolbar" at the bottom? For "Navigator" view buttons on the bottom panel are not "quick actions". These are more like settings - e.g. to show static members or not. You don't use them often. Nobody puts "quick actions" on the bottom of the screen. In my previous comments you can see screenshots from every other IDE and nobody puts such quick actions at the bottom from usability stand point.

If PR with buttons of the top for all 3 views Projects, Files and Favorites will be accepted - please help me to locate in which file "Favorites" view is implemented. Also I will be appreciated for some examples how to register actions in layer system. This is my first PR attempt and I don't know much about Netbeans codebase yet. But more importantly if this PR will not be accepted anyway there is no sense for me to spend time trying to understand how "Favorites" view works :-)

@neilcsmith-net
Copy link
Member

If you give "Navigator" view and it's toolbar at the bottom I do not really think this is consistent with any other panel. Which other panel has "toolbar" at the bottom?

Debugger for one. Do a code search for TapPanel and you'll find various.

Also I will be appreciated for some examples how to register actions in layer system. This is my first PR attempt and I don't know much about Netbeans codebase yet. But more importantly if this PR will not be accepted anyway there is no sense for me to spend time trying to understand how "Favorites" view works :-)

The actions are already registered. You need to reference them at some path (like a symlink). The link I previously shared shows how this is done for the popup menu. You'd add a reference at another path.

Actions registered in a path can then be loaded via https://bits.netbeans.org/23/javadoc/org-openide-util-ui/org/openide/util/Utilities.html#actionsForPath-java.lang.String- They would need checking for null (used for separators) and buttons created out of them. How to link icons might be a concern though, as they might not work on the actions themselves.

Possibly take a look at #7171 - that loads actions from a path and converts to buttons for the editor background. Although for various reasons, the actions are registered in an XML file rather than via @ActionReference in that one.

I can't guarantee that your PR will be accepted, but I can say that it almost certainly won't be if platform developers using these views in other applications can't override the action selection and/or remove them from view entirely.

@s4gh
Copy link
Author

s4gh commented Nov 7, 2024

@neilcsmith-net in debugging panel toolbar at the bottom is for settings as well. This is not for quick actions. I personally almost never use things like "show/hide system threads" for debugger view or "show/hide static class members" for "Navigator".

There are screenshots above from all other popular IDEs and nobody puts such actions at the bottom. Because these are expected to be quickly accessible near the tree for convenience. If you want just to have them somewhere - they are already in context menus across different screens. But that's the point - it is not easy and and not fast to use context menu. All other IDEs also expose them next to the tree to make it easy and fast to access them. Because these are not settings. These are quick actions.

@mbien
I do not know who and how makes decisions in respect to Netbeans PRs. Can I please get a decision on whether this PR (with needed improvements) will be accepted with quick action buttons on top? If something needs to be improved - fine. I can do this. But so far after many comments I really do not understand if you (community) are willing to accepts such PR or not. I am trying to understand if it makes sense to continue with "Favorites" view or not.

@Chris2011
Copy link
Contributor

There are different opinions and most of the concerns are valid. It adds new features to the IDE and also to the platform which has impact of the UI too. Do all developers/users of NetBeans understands the different concepts of toolbar buttons/settings and quick actions? Does it fits in the UI or do we change the whole UI for this to fit in the tab area for example? I know that those discussions are frustrating. And also we need maybe an option for your new feature that people can say "I don't want this fancy buttons" as we often have this. And this is also fine.

I made my point clear, I'm definitely for this, but I can understand the concerns and we should find a solution that fits us all or maybe most of us.

@Chris2011
Copy link
Contributor

But I will not decide anything here.

@neilcsmith-net
Copy link
Member

Some uses of TapPanel could be considered quick actions, but I'm certainly not against having quick actions at the top, and totally understand why. I like the look of your proposal, while also thinking they don't quite match with other aspects of the UI. I mean, it could be a top toolbar from a usability point of view. OTOH, your proposal looks better!

The blocker for me is the action registration. I for one do not want a hardcoded action to select the current file in the view - that works against the UI in my platform applications. I can think of other actions I might want there instead. What works for the IDE does not work for all uses.

I also have a slight concern about the crosshair icon - looks too much like a + sign and that it should create a new project. The one in your example images has a gap in the middle.

@s4gh
Copy link
Author

s4gh commented Nov 7, 2024

@neilcsmith-net
I can change crosshair icon to be less like "+" something similar to icon in Idea (screenshot above) .

I will look at the actions in more details. I am still learning how this all works. Some actions already exist.
When you right click on the tab header of code editor there is "Select in Projects". Which means that this action already exists. But the "problem" is that it always opens this file in "Projects" view. While I am adding these icons to multiple view - right now it is already "Projects" and "Files". When I click the icon in "Files" view I can't use "Select in Projects" because it will open other view. I need something like "Select in Files". But "files" and "projects" views are not 2 different classes - they are implemented by the same class. So I still need to figure out how to call different actions from the same code depending on what view is used. At the moment I am not sure how I can know which view "projects" or "files" has focus now. For "Favorites" I need yet another action "Select in Favorites".

For collapse all icon for "Files" and "Projects" there is already registered action. There is no need to register new one. I am not calling this functionality via "action" because this action is in the same file as my other code. So I simply can call same method which is used by action. So, in this case there is no code duplication, corresponding action already exists and I use the same method which is used by this action.

Yes sure I can spend time on looking more into how actions work and try to find where "Favorites" view is implemented and change it as well. If you know file name please share. However this PR already has a lot of comments and some of the question whether this feets Netbeans or not. I am asking for decision to know what to do next. You already see UI and screenshots from other IDEs. And if this PR will not be accepted there is no need for me to spend time on trying to work on actions and "Favorites". I absolutely respect what you do and you have complete right accept something or not. I am asking to know if it makes sense for me to continue or not. I think this is reasonable question.

@neilcsmith-net
Copy link
Member

I need something like "Select in Files". ...For "Favorites" I need yet another action "Select in Favorites".

Check out the actions registered to CTRL+SHIFT+1, CTRL+SHIFT+2 and CTRL+SHIFT+3. You can search in the Tools / Options / Keymap / Search in Shortcuts. Which will tell you they're in the Window/SelectDocumentNode category. A search for that https://github.com/search?q=repo%3Aapache%2Fnetbeans%20Window%2FSelectDocumentNode&type=code

Finds

https://github.com/apache/netbeans/blob/master/ide/projectui/src/org/netbeans/modules/project/ui/actions/SelectNodeAction.java#L43

https://github.com/apache/netbeans/blob/master/platform/favorites/src/org/netbeans/modules/favorites/Actions.java#L82

For collapse all icon for "Files" and "Projects" there is already registered action. There is no need to register new one. I am not calling this functionality via "action" because this action is in the same file as my other code. So I simply can call same method which is used by action.

This is where you're going wrong! The decoupling is important. You need to load the actions via a layer folder, and attach them to your buttons. The folder contains shadows (symlinks) to the actions - you are not registering a new action, but you are referencing it from somewhere else.

It looks like the collapse all action relies on a String in the view root node Lookup - https://github.com/apache/netbeans/blob/master/ide/projectui/src/org/netbeans/modules/project/ui/ProjectsRootNode.java#L116 Seems odd to use a String. You'll probably need to use the variant of loading that allows passing in a Lookup https://bits.netbeans.org/23/javadoc/org-openide-util-ui/org/openide/util/Utilities.html#actionsForPath-java.lang.String-org.openide.util.Lookup- Probably the one from the root node of the view??

@Chris2011
Copy link
Contributor

@s4gh it always make sense to have a look into everything what you want to change and add etc. doesn't matter one or two PRs doesn't get accepted or to much comments, etc. So please don't get this wrong. You already mentioned the IDEs and how they are doing it, but this is another whole topic, how the others are doing the other stuff and how they are look like.

Let's focus on the favorites, get this done. We are trying not to fight against, we just want to find a way where most of us are aggreed with and fine with.

@steamboatid
Copy link

this is good feature. plz merge it

@neilcsmith-net
Copy link
Member

@steamboatid it is a good feature, but it is not yet in a mergeable state. Maybe you can work with @s4gh to address the concerns if you want to see this added to the IDE and platform.

@steamboatid
Copy link

@steamboatid it is a good feature, but it is not yet in a mergeable state. Maybe you can work with @s4gh to address the concerns if you want to see this added to the IDE and platform.

@s4gh @neilcsmith-net if adding more buttons not mergeable (yet), why not simply add new item in the "Source Files" popup menu?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ci:dev-build [ci] produce a dev-build zip artifact (7 days expiration, see link on workflow summary page) do not merge Don't merge this PR, it is not ready or just demonstration purposes. UI User Interface
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants