FxOS Window
Mgmt (1.4+)
http://bit.ly/window-mgmt-slide

Last updated: 2014/01/08
Window Manager of FxOS
A god-like-object doing everything.
Deeply coupled with many other modules in
system app, for examp...
Window Manager v1.0.1 ~ v1.3

Thanks you guys!!
God's Window, Mpumalanga - South Africa
As an architect, I’d love to setup
different things into its position to
relief the pain of management.
Let the window man...
AppWindow
● Basic class of all kind of windows
● Exactly it’s a wrapper to mozBrowser API.
● In order not be a fat class, ...
Architecture http://goo.gl/pSvh9F
Meta bug http://bugzil.la/window-management
Jsdoc http://alivedise.github.io/gaia-system...
Core principles
1. Wrap any API once and use the wrapper everywhere we
need it.
2. Module/Object communications.
3. One ob...
Maintain AppWindow class
In order not to have a fat appWindow prototype,
current strategy is grouping methods/properties
b...
FxOS Window
Mgmt
Event machenism
Events
● {PREFIX}created/{PREFIX}terminated
Managers are notified by this pair of events.
● {PREFIX}willrender/{PREFIX}ren...
Event prefix
● Exactly means the type of the window.
● app/homescreen/activity/popup/browser/….
● Wrapper is a specific ap...
Internal events/External events
appWindow.publish(‘external’);
appWindow.broadcast(‘internal’);

var app = new AppWindow()...
FxOS Window
Mgmt
Diagrams/Flowcharts
AppWindow Inheritance Diagram (outdated)
http://bit.ly/fxos-app-life-cycle
AppWindow LifeCycle (II)
Launch an app
● Active launch: mozApps API
● Inactive launch: System Message
AppWindow Switching Flow
Terminate an app
● window.close();
● crash
● killed by OOM killer
AppWindow Terminating Flow
FTU Launching Flow

FTU launching flow (I)
Homescreen LifeCycle Flowchart
Replace Homescreen Flow
Activity Management
● [Meta] Activity Management https://bugzilla.
mozilla.org/show_bug.cgi?id=931341
○ We couldn’t have t...
Activity Management (cont.)
● An AppWindow instance is just playing the role as the
Manager of its own ActivityWindow chil...
Create an Activity
var activity = new MozActivity({
name: "pick",
data: {
type: "image/jpeg"
}
});
activity.onsuccess = fu...
Activity Launching Flow
Terminating Activity
●
●
●
●

window.close();
crash
killed by OOM killer
postResult/postError
Activity Terminating Flow
Window Mgmt.
Modules Overview
Orientation Management
OrientationManager
● Fetch default orientation
● Get current orientation
● When orientation changes...
Orientation States
● Orientation changes whenever
○ App itself calls screen.mozLockOrientation or
screen.mozUnlockOrientat...
Layout Management
LayoutManager
● Fetch width and height
● When events which would affect the size of
the app window occur...
Resizing States
Resizing occurs whenever
● External events -- apply to top active app
window only.
● App opening transitio...
Visibility Management
VisibilityManager
● Gathering all external events affect the top
most app window’s page visibility.
...
Visibility States
Page visibility changes whenever
● App opening transition starts. (Turn into true)
● App closing transit...
Event driven design
AppWindow has two kinds of events
● External event by appWindow.publish
○ Custom event dispatched on g...
External events
● For any manager-like module who care the
groups of instances.
AppWindow.publish(INTERNAL_EVENT_NAME);
wi...
Internal events
● For the module who only care one target.
● Subcomponents usually needs this only.
appWindow.broadcast(IN...
Your own window manager
● Listen to appcreated/appterminated and
maintain a list of instances you are
intereseted in.
● Kn...
Your own window manager
document.querySelector(‘appWindow.active’);
// For who needs to know who is the active window.
// ...
Managers of window instances
●
●
●
●
●

AppWindowManager
ActivityWindowManager
AttentionWindowManager
ShrinkingUIManager
S...
AppWindowManager
● Process open/close request from
appWindow instances.
● Redirect resize/visibility request from
LayoutMa...
AppWindowFactory
● Process app launch request from gecko.
● Process app terminate request from gecko.
HomescreenLauncher
● Responsible to create HomescreenWindow
instance and make sure it’s a singleton.
● Virtualize homescre...
HomescreenWindow
Different from appWindow
● Singleton (controlled by
HomescreenLauncher)
● External event name prefix
● Li...
FTULauncher
● Responsible for fetching FTU info and
launching FTU
● Read/write internal flag that FTU has been
correctly r...
ActivityWindowFactory/Manager
● Decide inline activity caller/callee
relationship when creating activityWindow
intances. (...
ActivityWindow
Different from AppWindow
● Resize/Orientation management
○ Copy size/orientation from caller when no
fullsc...
PopupWindow/Manager
TODO in https://bugzil.la/popup-window
AttentionWindow/Manager
TODO in https://bugzil.la/attention-window
TrustedWindow/Manager
TODO in https://bugzil.la/trusted-window
Window Mgmt.
Sub Components of AppWindow
Dialog

Layeryng(Before)

Home
App

App

Activity

Activity

Attention
Popup

Attention
Layering(After)
sheet

Home
App

App
+Dialog
Activity
Popup
Attention
AppWindow Sub components
var app = new AppWindow();
app.ModalDialog = new BrowserModalDialog(app);
app.AuthDialog = new Br...
BrowserChrome (a.k.a appChrome)
● ProcessingBar
● NavigationUI
BrowserModalDialog
● Gaia implementation of window.
alert/window.confirm/window.prompt by pure
HTML.
WindowTransitionController
● One of the AppWindow’s sub-component.
● The one who really processes appWindow’s
open/close t...
Window Mgmt.
Progress / Plans
What’s had been done
1. Screenshoting management (by appWindow itself
instead of WindowManager)
2. Orientation management
...
What’s next? What’s left?
1. CardView - Reflection of app stacks
2. Swipe Gesture Improvement
3. BrowserWindow / PopupWind...
Origin hell
● [Gaia] Most of the origin reference in gaia could be resolved once
all UI components are moved inside AppWin...
Play with app transitions
● Due to the incoming UX change I think what we have to
do is define how we customize the transi...
Play with app transitions (cont.)
var app = new AppWindow(‘uitestapp’);
app.open(); app.close():
app.open(‘zoom-out’); app...
Play with app transitions (cont.)
// TODO: If we want to do a transition but it’s neither open nor close
var app = new App...
LockScreenWindow
● Isolate LockScreen
● Managed under AppWindowManager
○ Visibility
○ Orientation
○ Layout
SecureWindow
● Use case: Camera app on Lockscreen
● Launch an appWindow with config.oop =
false by default.
KeyboardWindow
● KeyboardManager delt with everything now.
● Stop Growing!
● KeyboardWindow is responsible to
○ Handle moz...
Window Mgmt v.next
1. Move LockScreen into iframe and/or let it controlled by LockScreenWindow
2. Move KeyboardManager int...
FirefoxOS Window Management
FirefoxOS Window Management
FirefoxOS Window Management
FirefoxOS Window Management
Upcoming SlideShare
Loading in...5
×

FirefoxOS Window Management

2,829

Published on

Introduce Window Management System of FirefoxOS, a fully web based operating system.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,829
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

FirefoxOS Window Management

  1. 1. FxOS Window Mgmt (1.4+) http://bit.ly/window-mgmt-slide Last updated: 2014/01/08
  2. 2. Window Manager of FxOS A god-like-object doing everything. Deeply coupled with many other modules in system app, for example LockScreen. Bugs, bugs, bugs.
  3. 3. Window Manager v1.0.1 ~ v1.3 Thanks you guys!!
  4. 4. God's Window, Mpumalanga - South Africa
  5. 5. As an architect, I’d love to setup different things into its position to relief the pain of management. Let the window manage itself!
  6. 6. AppWindow ● Basic class of all kind of windows ● Exactly it’s a wrapper to mozBrowser API. ● In order not be a fat class, we have ○ BrowserMixin to adapt mozBrowser API ○ Sub components: modalDialog, authDialog, chrome, transitionController ● Managed by AppWindowManager only when interaction with others are involved.
  7. 7. Architecture http://goo.gl/pSvh9F Meta bug http://bugzil.la/window-management Jsdoc http://alivedise.github.io/gaia-systemjsdoc/AppWindow.html
  8. 8. Core principles 1. Wrap any API once and use the wrapper everywhere we need it. 2. Module/Object communications. 3. One object concentrates on doing one thing. 4. Managers care interaction between two instances only. Instance itself is responsible to take care of everything that is only related to itself. 5. Instances are managed by its directy parent.
  9. 9. Maintain AppWindow class In order not to have a fat appWindow prototype, current strategy is grouping methods/properties by function in the same mixing object and injected into AppWindow.prototype
  10. 10. FxOS Window Mgmt Event machenism
  11. 11. Events ● {PREFIX}created/{PREFIX}terminated Managers are notified by this pair of events. ● {PREFIX}willrender/{PREFIX}rendered LayoutManager may decide where to layout the frame by changing app.containerElement on |appwillrender| event. ● {PREFIX}opening/{PREFIX}opened ● {PREFIX}closing/{PREFIX}closed ● {PREFIX}resized
  12. 12. Event prefix ● Exactly means the type of the window. ● app/homescreen/activity/popup/browser/…. ● Wrapper is a specific appWindow now, so they are sharing same eventPrefix.
  13. 13. Internal events/External events appWindow.publish(‘external’); appWindow.broadcast(‘internal’); var app = new AppWindow(); app.element.addEventListener(‘_internal’, callback1); // semantic sugar: app.subscribe(‘internal’, callback); window.addEventListener(‘appexternal’, callback2);
  14. 14. FxOS Window Mgmt Diagrams/Flowcharts
  15. 15. AppWindow Inheritance Diagram (outdated)
  16. 16. http://bit.ly/fxos-app-life-cycle
  17. 17. AppWindow LifeCycle (II)
  18. 18. Launch an app ● Active launch: mozApps API ● Inactive launch: System Message
  19. 19. AppWindow Switching Flow
  20. 20. Terminate an app ● window.close(); ● crash ● killed by OOM killer
  21. 21. AppWindow Terminating Flow
  22. 22. FTU Launching Flow FTU launching flow (I)
  23. 23. Homescreen LifeCycle Flowchart
  24. 24. Replace Homescreen Flow
  25. 25. Activity Management ● [Meta] Activity Management https://bugzilla. mozilla.org/show_bug.cgi?id=931341 ○ We couldn’t have two same pages opened right now. Need to fix system message bug. ○ The timing of opening activities and kill activities. ○ The memory management of callee/caller.
  26. 26. Activity Management (cont.) ● An AppWindow instance is just playing the role as the Manager of its own ActivityWindow child. ● ActivityWindow has a caller and maybe a callee and so forth ● AppWindow maybe callee of another AppWindow/Activity in case it’s a window disposition activity
  27. 27. Create an Activity var activity = new MozActivity({ name: "pick", data: { type: "image/jpeg" } }); activity.onsuccess = function() { console.log("Activity successfuly handled"); var imgSrc = this.result.blob; } activity.onerror = function() { console.log("The activity encouter en error: " + this.error); }
  28. 28. Activity Launching Flow
  29. 29. Terminating Activity ● ● ● ● window.close(); crash killed by OOM killer postResult/postError
  30. 30. Activity Terminating Flow
  31. 31. Window Mgmt. Modules Overview
  32. 32. Orientation Management OrientationManager ● Fetch default orientation ● Get current orientation ● When orientation changes, gecko resizes the system app and system would get resize event.
  33. 33. Orientation States ● Orientation changes whenever ○ App itself calls screen.mozLockOrientation or screen.mozUnlockOrientation ○ App has ‘orientation’ property in its manifest ■ Changed to app orientation when opening transition ends. ■ Changed to homescreen orientation when closing transition begins.
  34. 34. Layout Management LayoutManager ● Fetch width and height ● When events which would affect the size of the app window occurs, LayoutManager fires ‘system-resize’ event.
  35. 35. Resizing States Resizing occurs whenever ● External events -- apply to top active app window only. ● App opening transition ends “AND” it has been resized before.
  36. 36. Visibility Management VisibilityManager ● Gathering all external events affect the top most app window’s page visibility. ● App window itself has to manage its own visibility while transition occurs.
  37. 37. Visibility States Page visibility changes whenever ● App opening transition starts. (Turn into true) ● App closing transition ends. (Turn into false) ● External overlay events -- Only apply to the active Window.
  38. 38. Event driven design AppWindow has two kinds of events ● External event by appWindow.publish ○ Custom event dispatched on global object. ○ Any external event EVENTNAME would trigger internal event _EVENTNAME at first. ● Internal event by appWindow.broadcast ○ Custom event dispatched on app window element without event bubbling stage.
  39. 39. External events ● For any manager-like module who care the groups of instances. AppWindow.publish(INTERNAL_EVENT_NAME); window.addEventListener(INTERNAL_EVENT_NAME, callback);
  40. 40. Internal events ● For the module who only care one target. ● Subcomponents usually needs this only. appWindow.broadcast(INTERNAL_EVENT_NAME); appWindow.element.addEventListener (_INTERNAL_EVENT_NAME, callback);
  41. 41. Your own window manager ● Listen to appcreated/appterminated and maintain a list of instances you are intereseted in. ● Know the transition state change by appopened/appclosed events. ● Know the visibility state change by appforeground/appbackground events
  42. 42. Your own window manager document.querySelector(‘appWindow.active’); // For who needs to know who is the active window. // NOTE: TrustedUI/PopupWindow is not active now. You cannot find them by this way. // NOTE: When activity occurs, AppWindow and ActivityWindow both are active.
  43. 43. Managers of window instances ● ● ● ● ● AppWindowManager ActivityWindowManager AttentionWindowManager ShrinkingUIManager StackManager
  44. 44. AppWindowManager ● Process open/close request from appWindow instances. ● Redirect resize/visibility request from LayoutManager/VisibilityManager to active appWindow instance.
  45. 45. AppWindowFactory ● Process app launch request from gecko. ● Process app terminate request from gecko.
  46. 46. HomescreenLauncher ● Responsible to create HomescreenWindow instance and make sure it’s a singleton. ● Virtualize homescreen getter for replacable homescrees HomescreenLauncher.getHomescreen() ● Redirect requests to homescreen app.
  47. 47. HomescreenWindow Different from appWindow ● Singleton (controlled by HomescreenLauncher) ● External event name prefix ● Life cycle management ○ Restart on terminating at foreground ○ Restart upon |homescreenopening| event.
  48. 48. FTULauncher ● Responsible for fetching FTU info and launching FTU ● Read/write internal flag that FTU has been correctly runned or not. ○ ftudone ○ ftuskip
  49. 49. ActivityWindowFactory/Manager ● Decide inline activity caller/callee relationship when creating activityWindow intances. (Should be ActivityWindowFactory.) ● Maintain a list of all opened activityWindow instances for inline activities. ● Redirect resize/visibilitychange requests to
  50. 50. ActivityWindow Different from AppWindow ● Resize/Orientation management ○ Copy size/orientation from caller when no fullscreen/orientation propery in its manifest. ● Life cycle management ○ When killed: kill callee until the end of the chain. ○ reopen caller if killed at foreground by caller. requestOpen() and AppWindowManager would
  51. 51. PopupWindow/Manager TODO in https://bugzil.la/popup-window
  52. 52. AttentionWindow/Manager TODO in https://bugzil.la/attention-window
  53. 53. TrustedWindow/Manager TODO in https://bugzil.la/trusted-window
  54. 54. Window Mgmt. Sub Components of AppWindow
  55. 55. Dialog Layeryng(Before) Home App App Activity Activity Attention Popup Attention
  56. 56. Layering(After) sheet Home App App +Dialog Activity Popup Attention
  57. 57. AppWindow Sub components var app = new AppWindow(); app.ModalDialog = new BrowserModalDialog(app); app.AuthDialog = new BrowserAuthDialog(app); app.ChromeUI = new BrowserChrome(app, config);
  58. 58. BrowserChrome (a.k.a appChrome) ● ProcessingBar ● NavigationUI
  59. 59. BrowserModalDialog ● Gaia implementation of window. alert/window.confirm/window.prompt by pure HTML.
  60. 60. WindowTransitionController ● One of the AppWindow’s sub-component. ● The one who really processes appWindow’s open/close transitions. ● Publish opened/closed/opening/closing event on appWindow according to the state change of internal transition state machine. ● TODO: move generic transitionstatechange
  61. 61. Window Mgmt. Progress / Plans
  62. 62. What’s had been done 1. Screenshoting management (by appWindow itself instead of WindowManager) 2. Orientation management 3. Visibility management 4. HomescreenWindow + HomescreenLauncher 5. ActivityWindow + ActivityWindowFactory 6. AppWindowManager
  63. 63. What’s next? What’s left? 1. CardView - Reflection of app stacks 2. Swipe Gesture Improvement 3. BrowserWindow / PopupWindow / AttentionWindow 4. Enhance AppChrome for Haida 5. Release us from origin/manifestURL messy 6. …. see meta bugs.
  64. 64. Origin hell ● [Gaia] Most of the origin reference in gaia could be resolved once all UI components are moved inside AppWindow. ● [Gecko] Plenty of mozChromeEvents are telling us who is the target by the manifestURL and/or origin, and this is wrong. ○ How about an inline activity is asking geolocation permission? ● Entry point is still a pain -- if we cannot get out of it we end up living with pageURL/manifestURL dirty mapping.
  65. 65. Play with app transitions ● Due to the incoming UX change I think what we have to do is define how we customize the transitions. ● Transition/Animation are applied to whole appWindow instances ● Transition/Animationa are defined in css with a single class. ● The tasks we need to do before/after transitions are fixed. At least I hope so.
  66. 66. Play with app transitions (cont.) var app = new AppWindow(‘uitestapp’); app.open(); app.close(): app.open(‘zoom-out’); app.close(‘zoom-in’); app.open(‘swipe-in’); app.close(‘swipe-out’); // WindowTransitionController do whatever for you so you only need to write down the css rule.
  67. 67. Play with app transitions (cont.) // TODO: If we want to do a transition but it’s neither open nor close var app = new AppWindow(); app.animate(‘somewhere’); // Animating app.finish(); // Stopping animation and restore. // We don’t need to publish appopening/appclosing event in this case, // but we may have appanimating/appanimated event if necessary. // So maybe we still need some submodule to do that for us.
  68. 68. LockScreenWindow ● Isolate LockScreen ● Managed under AppWindowManager ○ Visibility ○ Orientation ○ Layout
  69. 69. SecureWindow ● Use case: Camera app on Lockscreen ● Launch an appWindow with config.oop = false by default.
  70. 70. KeyboardWindow ● KeyboardManager delt with everything now. ● Stop Growing! ● KeyboardWindow is responsible to ○ Handle mozBrowser events like OOM ○ Transition state control
  71. 71. Window Mgmt v.next 1. Move LockScreen into iframe and/or let it controlled by LockScreenWindow 2. Move KeyboardManager into appWindow and become AppKeyboardController. 3. Enhance LayoutManager and thus we would have multiple windows. (for TV request). 4. Move more mozChromeEvent into mozBrowser events to manager things better. 5. Remove all ‘origin’ reference. 6. Implement ScreenSaverWindow (for Tablet request).
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×