Sliding Windows (commonly known as Auto Hide) is a special feature of the new Window
System. Many users have requested this feature and we agree that it could be useful. This
document contains specifications about its design and behavior. We will adopt the same
name for the Sliding Windows feature as other IDEs (Idea or .NET), namely Auto Hide.
2. Requirements
Auto hidden windows should take as little space as possible on the left, right and
bottom edges of the IDE.
There should exist another way to invoke the Auto Hidden state, than from icon in
titlebar (i.e.: to change Docked window state to Auto Hide window state).
Auto hidden windows should be able to be invoked programmatically.
Should be consistent with the concept of window groups in the new WS.
There should be D&D support for Auto Hidden Windows (nice to have feature).
Consideration of other products based on Netbeans (propose design as the best
compromise).
3. Use Cases
This chapter mentions some typical use cases, which we should address with our design.
The main goal is to successfully cover scenarios where the user is primarily working in
the Editor area, but she needs to access other windows occasionally (eg. windows Project ,
Output, Component Palette).
User would like to quickly check a window's content:
Ability to enable special minimized mode, where window isn't visible all of the time.
Ability of user to reveal hidden window quickly (via mouse move).
Ability of window to auto hide itself without any special action (only mouse off move).
Typical examples are To Do, Search or VCS windows, within which
time consuming actions occur, but the user would like to check if actions are finished or
not.
User would like to interact occasionally with the content of a window (not so often):
Ability to enable special minimized mode, where window isn't visible all of the time.
Ability of user to reveal hidden window quickly (via mouse move) and interact with its
content.
Ability of window to remain in its revealed state while user interacts with its content
(to auto hide, mouse click action is required).
Ability of window to auto hide itself after any user action (e.g.: when user changes her
focus to another component of the IDE via mouse click, etc.).
User would like to use the keyboard to manipulate Auto hidden windows (as opposed to the
mouse):
Ability to invoke or close Docked windows from the keyboard
Ability to change the state of windows to the Auto Hide mode from the keyboard
Ability to reveal Auto hiddenwindow from the keyboard
Ability to change the state of Auto hidden windows to the Docked mode from
the keyboard
4. Design specification
Basic concept
Each window (except the Editor area) has the following states:
Closed state - Window isn't visible in IDE and can be invoked from main Window
menu
(possible enhancement: from contextual menu situated at edges of IDE too).
Docked state - Window is visible in work area of IDE somewhere around
Editor area.
Auto Hide mode (new) - Windows in this mode have three
possible states (Minimized or Slided, which is related to types of
invocation).
The Auto Hide feature has the following logic and behavior:
When there are no Window in Auto Hide mode, no left, right or bottom edgebars
are visible.
User can change Windows from the Docked state to Auto Hide mode 3 ways:
By clicking the Auto Hide icon situated on the right side of the window's titlebar.
From the Contextual menu of the window's titlebar.
Drag&Dropp of the window to any visible edgebars.
After invoking Auto Hide mode the window will slide (Minimized state) to the
left, right or bottom edgebar (top edge below main toolbar isn't supported) depending on
the means
Edgebar will appear immediately upon invocation, when no window was in Auto Hide mode
for a given edge.
Edges contain toolbar with buttons. Each button has dragger icon and tile of window in
Auto Hide state.
User can make window (in Auto Hide-Minimized state) visible by following
actions: mouse over, mouse click, keyboard shortcut.
Then window will slide into work area of IDE (Slided state) along all edge.
Sliding can also be invoked programmatically too but window will not obtain a focus.
User can change Auto Hide mode to Docked state of window like this:
By Auto Hide icon situated in titlebar of Slided window.
From Contextual menu of button in edge or from Contextual menu over titlebar of Slided
window.
By Drag&Drop into the work area of the IDE.
Then window will be resized and moved smoothly to the position in Docked state.
Additional behavior:
Window remembers its Auto Hide state or Docked state before it's being
closed.When it is invoked next time, then it will be opened to that saved state.
Window remembers its position in Docked state before it's being changed to the Auto
Hide mode.Then could be docked back on the same place.
Each window has defined its default position and state (Docked or Auto Hide)
for their first invocation.
figure 1 - figure 2 - Edges
with Minimizedwindows (visible as buttons)
Usage of Auto Hide Window
Window in Auto Hide mode is hidden at edge of IDE (left, right and down) as a button. User
can slide it and minimize it by more different actions:
When user moves by mouse over button, then Minimized window will slide from
side BUT will not obtain a focus (figure 2).
When user moves out from that window and linked button it will hide window once again into
Minimized state.
When user clicks by mouse on button, then Minimized window will slide from side
AND will obtain a focus (figure 3).
Window will be hidden once again after focusing of any other part of IDE, clicking by
mouse out of window and linked button or by pressing ECS.
When user uses keyboard shortcut for concrete Minimized window (e.g. Ctrl+6 for
To Do window), then it will slide from side AND will obtain a focus
(figure 3).
It will be hidden once again after focusing of any other part of IDE, clicking by mouse
out of window and linked button or by pressing ECS.
There should exist a way, how to invoke any window in Auto Hide mode programmatically:
Only button (without sliding into work area) will be invoked programatically in assigned
edge.
Button will appear in edge and window will slide into work area of IDE and will
obtain a focus. Then this Slided window could be hidden once again after
focusing of any other part of IDE or by pressing ESC. Then focus will return back at the
previous place. Output window should work in this mode.
figure 2 - Edges with Minimizedwindows
(buttons) and Projects
window is slided into IDE after mouse over (but isn't focused)
figure 3 - Edges with Minimizedwindows (buttons) and Projects
window is slided into IDE after mouse click (and is focused)
Size and position of Window in Auto Hide Mode
When user changes Docked state of window to the Auto Hide mode, then
window will slide to left, right or down edge of the IDE. Window will figure it out from
its position (in Docked state) in regard of the Editor area. We defined following
simple rules:
Do I occupy left side in regard of editor > Minimize window to the left edge
Do I occupy right area in regard of editor > Minimize window to the right edge
Do I occupy bottom or top area in regard of editor > Minimize window to the down edge
Size of window in Auto Hide-Slided state depends on previous size in Docked
state (+10pixels of overlap at side close to the center of the IDE)and can be resized by mouse dragging. New size should be persistent.
How to dock Auto hidden window
There are following possibilities how to dock window in Auto Hide mode back:
User can click on Dock button situated in the titlebar of Slided window.
User can uncheck Auto Hide menu item in Contextual menu above titlebar of Slided
window (see figure 10).
User can uncheck Auto Hide menu item in Contextual menu above button of Minimized
window situated in the edge (see figure 11).
Then window will be docked back into IDE on its previous position. When position of
window was removed meanwhile or changed from left to right (right to left) edge by
D&D, then new dock position will be generated along that edge, where is window Minimized.
Movement of windows in Auto Hide mode - prototype
There are more different movements of windows:
Move from Docked state to the edges - Should be clear, that window has moved to
the certain edge
Slide from edges into work area of IDE - Movement of window should be quick and
sequential. User should see resizing of window.
Slide to the edges back from center work area of IDE - Reverse movement then previous.
Move from Auto Hide state to the Docked state
Sliding effects are faster and real in the following prototype and we recommend this
one for implementation. There is Projects window with active Auto Hide icon.
All mentioned movements are more visible in the next version on the prototype, because
sliding effect were slowed-down a bit.
Design of Auto Hide icon and Dock icon
Icons in titlebar of window are typical buttons with icon inside.
Then their mouse-over and mouse-pressed appearance for Windows 2000 L&F is following:
figure 4 - Auto Hide left icon
in Dock Mode
figure 5 - Auto Hide right icon
in Dock Mode
figure 6 - Auto Hide down icon
in Dock Mode
figure 7 - Auto Hide left icon
and Close icon
in Dock Mode with mouse over effect
figure 8 - Auto Hide left icon
and Close icon
in Dock
Mode with mouse pressed effect
figure 9 - Dock icon in Auto
Hide mode
Pin icons for Metal L&F:
Here are all Metal icons for all possible states:
Pin icons on Windows XP L&F:
Look for other platforms (L&F)
Appearance of toggle buttons in the edgebars on Windows XP L&F is the following
(normal, mouse over and pressed states):
Contextual Menu
Auto Hide checkbox menu item will be added to the current Contextual menu,
which will appear:
Above titlebar of window
Above buttons situated in edges of the IDE.
Right shortcuts for these Auto Hide action: Ctrl+Backspace
figure 10 - Auto Hide checkbox menu item in the Dock state
figure 11 - Auto Hide checkbox menu item in the Auto
Hide-Minimized state
Maximalization of window in Auto Hide mode
Visual indication
This functionality should work similar to maximalization of docked windows. We need
better visual indication of max mode, so there will exist Restore icon in the toolbar of
window, when window is maximized.
Permanency of this mode
When any window in sliding mode is maximized, all windows situated in edgebars can share
its maximized area by clicking on them or hovering over them. This behavior should by
checked by real usecases or on usability study.
When the sliding window is closed/hidden/docked back, then maximized mode is cancelled.
Keyboard navigation
Each window has defined keyboard shortcut and it's visible in Window menu (e.g. Ctrl+6
for To Do window).
When window is in Dock state, then window will be focused after usage of concrete
shortcut.
When window is in Auto Hide state, then behavior of window will be the same like after
mouse click on button situated in the edge.
Drag&Drop ability
We should support D&D of windows into/from edges (Auto Hide state)
from/into work area of IDE (Docked state) and D&D of minimized windows among
edges like this:
Docked windows can be dragged to an edges - Then it will change state of window from Docked
state to the Auto Hide state automatically
Buttons (or titlebar of Slided window) can be dragged:
On different place inside the same edgebar
Out to Another edge, where they will become Auto Hide windows there
Somewhere in the work area of the IDE, with the same feedback we give now.
User can drag toggle button or titlebar of window.
Drag&Drop indication of active place should be changed a bit against old
implementation for windows system.
When user drops window on new position, then window will stay in minimized state.
Dynamical behavior and visual feedback at mentioned areas depends on initial state of
edgebar and is the following:
When target edgebar is visible before D&D of window:
All D&D areas are moved into inner part of IDE for amount of pixels, which is the
same as the width of edgebar.
When target edgebar isn't visible before D&D of window:
Edgebar appears when user points mouse over edges and out of a border of the IDE (20
pixels outside, see Flash demo below)
figure 12 - Drag&Drop dynamical behavior and active areas
Other possible Enhancements
New Auto Hide icon, because it wasn't intuitive for some users on usability study
New name for Auto Hiding... Minimize Window
Minimize Window (Ctrl+BackSpace) menu item name in Window menu
Indication of Maximalized mode ...new icon
Window could be opened directly in any edge from contextual menu over this edge.
Contextual menu contains the same list of windows like Window menu in main menu.
User can change edge for any Minimized window from Contextual menu above
minimized window or titlebar of window. This menu should contains all three edges (left,
right, down) but current is disabled.
Others?...
5. Open issues
Output window should exist in Auto Hide mode by default. Maybe some other windows too?
We discussed the Component Palette window already.
Gray (inactive) icon buttons on non-selected tabs
Improvment of Sliding effects
MAC OS L&F should be polished
6. List of features that should be implemented in promo E
Dock button situated in the titlebar of Slided window.
