| Summary: | Add multiple tab support. | ||||||
|---|---|---|---|---|---|---|---|
| Product: | [ECD] Orion | Reporter: | Casey Flynn <caseyflynn> | ||||
| Component: | Client | Assignee: | Casey Flynn <caseyflynn> | ||||
| Status: | RESOLVED FIXED | QA Contact: | |||||
| Severity: | enhancement | ||||||
| Priority: | P2 | CC: | Carolyn_MacLeod, caseyflynn, curtis.windatt.public, emoffatt, kangy, libingw, Michael_Rennie, Mike_Wilson, remy.suen, Silenio_Quarti, steve_northover, wilford | ||||
| Version: | unspecified | ||||||
| Target Milestone: | 15.0 | ||||||
| Hardware: | PC | ||||||
| OS: | Linux | ||||||
| See Also: |
https://git.eclipse.org/r/90662 https://git.eclipse.org/c/orion/org.eclipse.orion.client.git/commit/?id=35cc2d8d599247d5bffc65f9101eac4149e50462 https://git.eclipse.org/r/92298 https://git.eclipse.org/c/orion/org.eclipse.orion.client.git/commit/?id=89320547caffc2258d314e91c70ad1445fbb6b32 |
||||||
| Whiteboard: | |||||||
| Attachments: |
|
||||||
|
Description
Casey Flynn
Have you tried ctrl+click, or right-click and select "Open link in new tab", on any file in the navigator tree? Or ctrl+shift+F filename and instead of Enter to open named file, use ctrl+click or right-click (or down arrow then Shift+F10) to open in new browser tab? We tried to make Orion use the browser's tabs as much as possible. If you haven't tried that, please try it for a while and then decide if you still want to keep this bug open. It's very powerful. :) Try ctrl+click in other places, like search results (ctrl+shift+H), problems view (ctrl+alt+p), git blame (ctrl+shift+B) (to open selected change in Git view), and on the Edit/Git/Settings icons in the left nav. Also, not sure if you noticed, but there's also split pane support (button in top right, beside wrench) for those times when you need to see 2 editors side by side (or one above the other). Thanks for the comments! I have been developing using several of the suggestions you recommended (relying on multiple browser windows, using the split pane), and do agree that the integration is very powerful. That being said, I feel that support for multiple tabs would enhance developer experience overall. Has the addition of this functionality been discussed in detail in the past? Were there reasons (other than semi-similar functionality offered by browsers) that this feature was not perused? Forgot to mention that ctrl+tab and ctrl+shift+tab switch between 2 adjacent browser tabs. Here's a nice overview of keyboard shortcuts for switching browser tabs: http://www.online-tech-tips.com/internet-explorer-tips/how-to-switch-between-tabs-in-ie7-using-shortcut-key/ (In reply to Carolyn MacLeod from comment #5) > CCing McQ to answer comment 3. Well, thanks. :-) The original design of Orion was what we were then calling "task focused". It was intended that it would be implemented as a collection of web pages, where each page solved a particular task and thus was as light weight as possible, with transitions between pages managed in a way that gave you a good developer experience. In addition, we expected that over time, the browsers themselves would have had much improved tab management, which we would have benefited from (rather than competed with by setting up our own mechanisms). Unfortunately, this does not seem to be the case. Regardless, despite Orion becoming more like a typical monolithic web app (mostly for expediency in the implementation), some of the original biases like having the editor page be focused on editing a single file are still around. I'm open to taking Orion in any direction that makes it more useful. The only questions I have would be around managing memory usage on the page, load times, etc. The JavaScript tooling has a separate instance per browser tab. Having multiple editor tabs with a single tooling (Tern worker) instance would be more efficient memory wise than having multiple browser tabs. Created attachment 266102 [details] Eclipse keyboard shortcuts for navigating editors (Windows) Please be very careful. I worry about the accessibility of tabs-inside-browser-tabs, because all of the typical navigation keyboard shortcuts (ctrl+tab, etc; listed in comment 4) are already taken by the browser. Here is the guidance given for keyboard navigation of ARIA tabpanels. This is the best guidance we've got for in-browser tabpanels. Unfortunately, the user has to always navigate back to the row of tabs in order to switch tabs. On top of that, our situation is complicated because in order to navigate back to the tabs from inside an editor, the user needs to type Ctrl+M to switch the editor into Tab-key-navigation-mode, and then type Shift+Tab. aria guidance: http://w3c.github.io/aria-practices/#tabpanel example: http://w3c.github.io/aria-practices/examples/tabs/tabs.html My recommendation is to do *both* of the following: 1) Follow the ARIA guidance for tabpanels (keyboard navigation and aria markup) 2) Also provide the Eclipse editor keyboard navigation shortcuts: Ctrl+F6, Ctrl+Shift+F6, Ctrl+Shift+E on Windows Cmd+F6, Cmd+Shift+F6, Cmd+Shift+E on Mac See attached (Windows) screen snap for location in Eclipse Navigation menu. Note that Eclipse also has Ctrl+E (Cmd+E) to switch editors, but we can't use that shortcut because browsers use it to go to the location bar. However, we could map the (non-dialog) behavior of Eclipse's Ctrl+E to the Ctrl+Shift+E shortcut, which may be preferable to the current (dialog) behavior of Eclipse Ctrl+Shift+E. If you have Eclipse handy, please try out all of these shortcuts for switching editors so that you can get a feel for how they work. Note that for the F6-based commands, you need to hold down the modifier keys and type F6 to move through the list of open editors. It has a similar feel to the OS's Alt+Tab behavior for switching apps. Casey, I've said from the start that we need to be able to host more than one file in a single (browser) tab. That being said I have to say that writing a good tab container is a *lot* of work (check out the SWT CTabFolder implementation for perspective). In short the tab management is going to eat your life...;-). It'll have to have at least the following characteristics: - Be able to show both an icon and the associated label (including the dirty indicator '*' when necessary) - When you have too many tabs each one will have to dynamically shrink to allow for all tabs to be seen (up to a point, see below) - Tabs have to be discreetly closable - Tabs should be draggable Note that even in this case if the user has many tabs open there may not be enough room to show all the tabs... In this case Eclipse (via CTabFolder) supports a dropdown to access the 'tabs' that are no longer visible. My recommendation would be to skip the tab implementation altogether and just provide the dropdown (since you'll need to do this anyway). Note that the *only* thing that tabs provide over the dropdown is the ability to scan the tabs to find the one to click on. With the dropdown approach they would open the dropdown to scan it (an extra click or key code). I can give a more detailed design if desired but I don't want to take the fun out of what you're doing. If you really want to go the tabs route then have at it, just don't say you haven't been warned...;-). New Gerrit change created: https://git.eclipse.org/r/89775 New Gerrit change created: https://git.eclipse.org/r/89782 Gerrit change https://git.eclipse.org/r/89782 was merged to [master]. Commit: http://git.eclipse.org/c/orion/org.eclipse.orion.client.git/commit/?id=62adf686ea1c88b5f82fac911641b7801e36ed58 Didn't mean to push change to master, Reverted: http://git.eclipse.org/c/gerrit/orion/org.eclipse.orion.client.git/commit/?id=0bf665857a2e7911ae59748c4eb254ed9f6ffe9c New Gerrit change created: https://git.eclipse.org/r/90662 Remaining items on this change are as follows: Add setting to General settings to enable \ disable editor tab support. Add setting to enforce maximum number of editor tabs. Enable tabs to be dragged between editors. Persist open tabs across sessions. Add support to have multiple files in an unsaved state. If you would like to see any other features added, please let me know! Hi, Casey. Please remember the keyboard. Need shortcuts for switching between already open tabs. See comment 8 for suggestions. Currently, when in an editor, I *can* type Ctrl+M then Shift+Tab then Space then Down Arrow to switch to the next tab. This is "probably ok", but it doesn't give a power user that "feeling of power" that they would get from something like the Eclipse tab-switching shortcuts. :) Those allow typing the filename of an open tab in a filtered list to go directly there. (In reply to Carolyn MacLeod from comment #16) Thanks Carolyn! It's on the list for a follow up PR! (In reply to Casey Flynn from comment #17) Awesome! Thanks, Casey. Please make sure the rest of comment 8 (basic accessibility) is also in a follow-up PR: adding the recommended ARIA markup (role=tablist/tab/tabpanel and appropriate aria-* attributes for each role) and keyboard handling (row of tabs can take focus, then user can use arrow keys to move between tabs, space to switch to selected tab, delete to delete tab, etc. Might even be nice to provide Shift+F10 menu to expose breadcrumb on a tab). Also for accessibility, the "Open tabs" button should be marked up as a "menu button" (i.e. with aria-haspopup=true): http://w3c.github.io/aria-practices/#menubutton Interesting split editor handling, with 2 "Open Tabs" menus. I had pictured only one menu, but this works ok. The "power user" keyboard shortcut will need to allow switching to any open tab, though, not just in the currently-focused side. A couple of notes initially:
1. don't show the .workspace file when Orion loads - thats the root folder for your workspace, so it shouldn't in a tab
2. maybe a better style on the tab? The black lines don't really fit with the themes. Perhaps make it a new theme item?
3. perhaps don't show tabs for folders - when I think of tabs in editors its for editing files, not folders.
4. There is a content synchronization problem:
a. create simple project
b. create a .tern-project file in the project - generate its default content (hit
ctrl+space in the empty file)
c. create a js file with the following contents: define([], function(){});
d. open both of those files in tabs
e. go to the js file, you should see a warning about needing requirejs
f. click the fix to update the project settings (this edits the .tern-project file)
g. go to the .tern-project file tab - the contents are not updated. You have to
close the tab and reopen the file to see the changes
(In reply to Michael Rennie from comment #21) > A couple of notes initially: > > 1. don't show the .workspace file when Orion loads - thats the root folder > for your workspace, so it shouldn't in a tab What would we like to show for the initial load as opposed to this? Gerrit change https://git.eclipse.org/r/90662 was merged to [master]. Commit: http://git.eclipse.org/c/orion/org.eclipse.orion.client.git/commit/?id=35cc2d8d599247d5bffc65f9101eac4149e50462 New Gerrit change created: https://git.eclipse.org/r/92298 Reverted due to bug 513077. Also please see bug 513024 and bug 513027. Gerrit change https://git.eclipse.org/r/92298 was merged to [master]. Commit: http://git.eclipse.org/c/orion/org.eclipse.orion.client.git/commit/?id=89320547caffc2258d314e91c70ad1445fbb6b32 |