[Hack] Kaku – music player for next generation

kaku_radius

每年都要花點時間做自己的 Open Source Project，而今年意外的有一個很好的題目可以來發揮 xDDD，所以就利用一些上下班的時間把 Kaku 的整個雛型打造出來了！Kaku 是一個音樂播放器可以讓你自由地聽各個網路平台上面的音樂（目前支援的平台有 YouTube、Vimeo 還有 SoundCloud），算是一個各平台整台的小作品。

（先點連結看看再說：http://kaku.rocks）

而在開發這個程式的時候也發生許多有趣的問題，所以想把我還記得的部分寫下來做個記錄 xD。

Node Webkit(NW.js) 起手式

因為我一開始的目標就是希望這個程式是各個作業系統的使用者都可以使用的，因此桌上型應用程式勢必是我的首選，又因為在實際寫 Kaku 之前，我有幫 Atraci 寫過一些相關的程式碼，所以對於如何操作 Node Webkit 提供的 API 有一點點研究，所以就選用 Node Webkit 當作我開發的基底。~~（我只是前端工程師阿阿阿）~~

說到 Node Webkit，他有個有趣的設計就是他提供不同的 JavaScript Context，因此你的應用程式雖然是用前端的技術打造的，但是因為可以跨用到 Node Context，所以就可以混用許多現有的 npm module 當做後端來處理資料，所以在我的設計下，在這個程式裡面就有這兩類不同的資料夾，讓程式可以很明確的切分他們的職責。

搞定開發環境

因為有過幾次合作開發 Open Source Project 的經驗，所以如果你要讓你的專案吸引其他開發者的注意力的話，那你一定要把開發環境搞定或是簡化到一個指令複製貼上就可以跑起來，要不然光是一開始就讓別人有很強烈的挫折感，那你的專案也不用期望會有多少人來幫忙開發了 xDD。

又因為 Kaku 是我想要來嘗試練習 React 的一個專案，裡面用到很多 jsx 的語法所以需要 precompile 的動作，而且又因為要把整個程式包裝成 Node Webkit 的應用程式，也需要另外做 build 的動作，因此我就用 gulp 當做我 building tool 的基底來把這些操作都包裝起來，讓開發者只要按一兩個 gulp 指令就可以了！

現在想想，一開始就把這件事情做好所帶來的效益真的很高，也真的有一些人上了一些 patch ！

開心寫程式…嗎？

以前在 Mozilla 的時候，我們 app 的程式是架構在 require.js 之上以 AMD 的模式開發，所以時間久了我也漸漸的習慣了這種寫程式的方式，所以一開始的 Kaku 也是以這種方式寫的（對，之後被我全砍了）。但是時間久了我發現我漸漸的被他的東西綁住，整個 repo 開始要加入他專屬的設定檔去設定東西，最慘的就是寫測試的時候還要特別去設定一些東西才可以讓 AMD 的程式碼順利的跑在 require.js 上面。然後我記得最麻煩的是前端用的 require.js 和後端用的 require.js 無法混用，我還要特別抓一份存在 node_module (WTF)，然後它對於 ES6 的支援度不知道為什麼有很多問題，所以到後面有很多東西不是沒有測試，而是我不知道要怎麼讓他成功的跑在測試環境上面所以才沒有寫，囧！

這些其實不是壓倒我的最後一根稻草，壓倒我的是 3rd-party library 對 AMD 的支援有一些問題，不知道是那些作者在寫 UMD 寫太爛還是怎樣，有時候那些判斷的順序寫錯就無法用，囧！！所以那個時候為了讓很多 3rd-party library 可以使用，還特別 fork 並改了好多個專案，雖然大多都是 quickfix 不過也是很麻煩呀！

之後，因為強者我前同事 @rickychien ~~（Mozilla 已經變前公司了你不知道嗎 xDDD）~~ 在這段期間內一直和我在討論引入 webpack 的事情，所以就在某兩天想說長痛不如短痛，一次改了一百多個檔案把之前 AMD 的東西全部拿掉然後把測試還有開發環境一次全部用壞之後，就成功的把程式碼全部轉過去了 xDDD（完全錯誤示範，請不要學！！）

這邊真的要慶幸之前是用 AMD 的模式寫程式，才可以把各個模組切的這麼乾淨，然後通通改用 Common js 的方式載入，然後透過 webpack 來做打包的動作，整個世界美好！

Test + CI + Documentations +++

雖然是 Open Source Project，還是要用高規格來寫程式，該有的 CI、測試、文件都沒有少（有很多還沒寫完就是了…），這些東西真的都是在你要改程式的時候才特別有感！還記得以前不知道在哪個文章上看到幾句話關於工程師最討厭做的事情（以下為大概）：

寫文件

寫註解

寫測試

別人不寫文件

別人不寫註解

別人不寫測試

為了不要變成那個讓別人討厭的人，所以只好默默的把這些東西都補齊了 xDD，這些真的很重要呀！

從 NW.js 到 Electron

其實說實在的原本 NodeWebkit(NW.js) 用的好好的，只是想要嘗試一下 Github 特製的 Electron ，所以就一口氣換過去了 xDDD ，說真的之所以會想要轉換過去是覬覦他自動更新的功能，能夠讓應用程式自動更新真的很棒呀，不過研究後才發現他原生只有支援 Mac OS ，Windows 的則是要另外把他包進來，而 Linux 就什麼都沒有了 xDD，而且最麻煩的是要有提供一個 endpoint 讓他去存取得知最新版本，然後當使用者需要更新的時候才會再去相對應的載點下載。

其實想一想整個流程也是很合理啦，不過因為我不想要有伺服器來存這些東西，維護也有成本，所以我的東西都是放在 GitHub Releases 裡，因此就自己利用 GitHub API 自己簡單實做一個各平台都可以用的自動更新程式放在 Kaku 裡，讓他每次被啟動後會去判斷是否需要更新，如果使用者確認要更新後，會再把使用者導到下載程式的地方，完成半自動更新的流程（使用者唯一要多做一步的就是要自己解壓縮檔案然後覆蓋舊的程式這樣）。

說實在的 Electron 本身並沒有帶來太大的好處，一來是整合相關的 gulp 工具不多，二來是因為他的 global shortcut 的設計和 nw.js 的不一樣，需要多處理程式得到 focus 還有失去 focus 的事情（雖然也是好事啦），三來是我的程式沒有複雜到要用到很多特殊功能，所以花了很多不必要的時間 xD。不過用了就用了，有 GitHub 帶著社群開發也可以讓 Electron 更長久，持續觀注！

善用工具、改善工具

Kaku 有使用了很多社群開發的工具，盡量把主要的時間留在開發主要的商業邏輯，或是整合這些工具讓自己可以用得更順手。也因為這樣子，中間發現了一些工具的問題，這個時候要做的第一件事情就是先找找看有沒有其他更好的工具，如果沒有的話，我就會試著去 fork 那個專案然後修有問題的地方，最後再上 PR 給原作者。先不論那個 PR 會不會被接受，但至少在這個過程中，我也試著推動了輪子，試著讓這些東西變得更好，省下別人的時間。如果最後沒被 merge，笑笑也就過了是吧？

行銷！

通常程式設計師都不太會注重這一塊，但是我覺得對於 Open Source Project 來說，這一塊相當重要。這邊想講的不是說要砸多少錢買廣告幹嘛的（拜託，這是 Open Source Project 耶），而是要有一個基本的門面，至少簡單做個網頁加點程式相關的圖片嘛！不得不說在這個資訊暴炸時代，如果資訊本身不夠吸引別人，即使你改變了這個世界幾百次，也不會有任何人注意到的。

沒有人注意到這個專案，就不會有人使用你的程式，就不會有開發者加入和你開發新東西，你就會開始覺得這些東西做了不知道要幹嘛只能自 High，久了也就失去動力繼續下去了。不過至少，你可以去一些開發者論壇以技術的角度切入並和大家分享你做了這些東西，除了彼此技術的成長之外，無形當中也是一種行銷不是嗎？

所以，我就請設計師朋友幫我做了 Logo，也自己簡單的做了一個網頁展示這個程式，雖然沒有多專業但也比什麼都沒有好多了！再適時加上一點點 Social buttons ，如果有人想要分享的話自然就會分享，這樣也就夠啦！

最後最後最後

如果你沒用過 Kaku 的話，請立馬去官網下載，有什麼意見或想法都很歡迎留言給我，敬請期待下一篇文章 😛

[Memo] 兩年之後

Image Credit

two-years-later

時間過的超快，2015 年的七月也過了一半了，在離開 Mozilla Taiwan 半個月後，覺得要好好寫一篇文章記錄這段兩年的旅程。

還記得兩年前，在剛離開前前公司 Trend Micro 後（現在 Mozilla 已經變成前公司了 xDD），再次陷入了找工作的轟炸期，當時還特別寫了一篇文章記錄那幾個月的心境還有過程，在經過各大公司、團隊的連環面試後，意外的拿到很多間公司給的 offer，其中最感謝的就是讓我來到 Mozilla 的主管 – Timdream，沒有因為我只有 10 個月短短的經歷就刷掉我，讓我加入這個大家庭和每位強者同事學習很多東西，除了技術上的成長之外，也因為公司是跨國的公司，所以很多時候要和外國人還有自己 team 的人一起討論事情，雖然英文還是有待加強，不過也讓我在團隊合作這件事情上面學了很多呀。

在 Mozilla 的這段時間，去了很多國家、城市，最讓我印象深刻的就是在剛進去的時候，剛好遇到三年（還兩年）一次的 Summit 大會，第一次看到規模如此大的會議（全世界的 Mozilla 員工還有 Contributors）、第一次去了美國的 Portland、第一次和同事出國旅遊。這次的會議真的讓我感受到西方國家的人對於工作還有生活的態度，雖然工作重要，但是工作後的玩樂還有 party 也是不能少的，該放鬆的時候就一定要放鬆，玩的比大家都還要 High 呀。

portland-1

portland-2

portland-3

從 Summit 回來之後不知道過了多久，因為職務調動的關係就被分配到 Settings App team，這個 team 主要就是由人生勝利組的學長 Arthur 帶著其他人一起守住 FxOS 裡面的 Settings app（就是大家手機裡面的「設定」），不得不說這個 app 真的是包山包海包了又包包了再包，有一大堆和電信業者之間的通訊問題要處理、有一大家和系統之間的複雜互動還有一堆各 app 都要進來插一些自己的客製化設定，真的是一個不得小覷的 app！

在這個 team 裡，真的要特別感謝 Arthur、Ian 還有 Fred。感謝 Arthur 教我很多程式設計的一些眉眉角角，我永遠都會記得 Data / UI 分離這個準則的 xD。感謝 Ian 在 Settings app 裡藍芽的貢獻，如果沒有你擋下這些東西我們就屎定了 xD。感謝 Fred 和我一起處理很多 FxOS Tablet 的問題，當時 tune CSS 真的 tune 的很想死。到底是哪個____把 CSS rule 寫這麼死的啦 xD

也因為這個 team，在 FxOS 1.3 -> FxOS 1.4 workweek 的時候，我和 Arthur 一起和國外飛來的同事處理了很多 DSDS 的問題（就是所謂的雙卡雙待），而那是我唯一一次在 Mozilla 辦公室待到超過 11 點的時候，雖然那個時候很累，不過有這些戰友撐過那一週也是一個很特別的體驗！如果沒有這個 workweek，我也沒有機會去 101 頂樓看整片台北市的夜景（雖然裡面的商店都在賣高價商品給陸客有點煩人之外其他都算不錯），真的，很美。

101

之後，和整個 Gaia team 的大家也變得比較熟了，每一季大家都會舉辦 Team Building 出去某個地方玩一整天，大家一起打過桌遊、打過保齡球、玩過密室逃脫、去過淡水、去挑戰過熱血的抱石活動、去日月潭一起環湖騎腳踏車，好多有趣的事情都在這兩年內發生過，我還記得當時的宮博說過一句話，大意是說「在一些日子之後，最讓你印象深刻的不會是在這間公司工作過了什麼、做了哪些事情。反之，是那些曾經一起工作的人、那些回憶，才會讓你永藏於心」。

兩年之後，我覺得這句話說的真的很有道理，以前曾經去過的那些地方、那些景點都不會有太大的改變，變的是陪你再次來到這裡的人。不過想想，如果沒有前前公司的結束，也就不會有前公司的開始，也就不會有這些精彩的回憶了吧？我們不也是這樣從國小、國中、高中到大學這樣走來的嗎？

兩年之後，很高興認識了你們，謝謝你們給我這個機會參與這一段回憶與歷史，中間也許難免有好、有壞、有淚水、有歡笑，不過這也是人生之所以稱作人生的原因不是嗎？

下一段旅程即將開始，
謝謝你們，在兩年之後。

—

Special thanks to : Ricky, Gary, Greg, Arthur, Evan, Dominic, George, Ian, Rudy, Steve, Jessica, Sylvia, HsinYi, popochess, Yang-Jhu, Tim, Evelyn, Yuren, Edgar, Fred, Alive, Bella, Fang, Carol, Rex, Tzu-Lin, Luke, Clarice, Paul, Peko, Kate, Michelle … etc.

team3

team4

team1

team2

[FxOS] Settings App – Call Settings

Call Panel

Screenshots

Call Panel

Introduction

Call Settings is one of the most important panel that can let users highly customize their own call related settings like Call Waiting, Call Forwarding … etc. (We will cover each part later) Based on the screenshot above, you can see that for this panel, it’s more like an entry point for every panel and also it will display some useful information taken from hardware.

But when you navigate from this panel to others and navigate back, you may notice that some menu items are disabled at first and you can’t manipulate that. This is not a bug but also quite a feature. By doing so, we can make sure that each time when displaying them, we will always use latest value from hardware to make sure we won’t display some outdated information to mislead users.

Call Voice Mail Settings Panel (Dialog)

Screenshots

Call Voicemail Panel

Introduction

For every simcard, there must be a special number that you can dial to set your voicemail number and this is why we need this dialog in Settings App. When showing this dialog, it will try to get preset voicemail number in mozSettings db and show it at first. Here, you may get confused why it can get the right number from db, this is because in settings/js/panels/call/panel.js, we also need to show voicemail number on the menu item, so when trying to initialize the item, we will check whether there is any provided number from mozVoicemail API and store it into db, so that’s why in this dialog, you can get this value from db.

Call FDN Settings Panel

Screenshots

Call FDN Settings Panel

Enable / Disable FDN

Introduction

This panel is also an entry point that we can set settings related to Fixed Dialing Numbers. Here, we provide a toggle that you can enable / disable this feature. When clicking on the toggle, it will trigger DialogService to show SimpinDialog which is responsible for all Simpin related operations. This feature will only be enabled / disabled when you successfully type your PIN2 correctly in the dialog.

Call FDN List Panel

Screenshots

Call FDN List Panel

Popup menu when clicking on FDN number

Introduction

Here, in this panel, we will list down all preset FDN numbers in the list. When clicking on any number, we will show an popup for it and you can decide whether to call, edit and delete or not. Same with enable FDN, if you are going to do any operation I mentioned, we will use DialogService to show SimpinDialog to confirm this operation.

For any FDN number, they will all be stored inside your simcard. Sometime, based on your simcard, you may have an upper bound for the number of FDN numbers, but this depended on operators so the number may vary. So, if you hit an error message when creating a new number, you may go into this situation.

Call FDN List Add Panel (Dialog)

Screenshots

Call FDN List Add Panel (add mode)

Call FDN List Add Panel (edit mode)

Introduction

When clicking on the Add button in Call FDN List Panel, this dialog will pop up and ask users to input preferred name and number for this set of FDN number. Instead of adding, this dialog is also can be reused for editing. Normally there is no specific validation rules for these two fields in our codes, instead, we will pass wrapped object from FdnContext.createAction and pass it to SimpinDialog, it will directly communicate with operator and if there is any error coming up, we will directly report it and display to users.

Call Forwarding Panel

Screenshots

Call Forwarding Panel

Introduction

Honestly, Call Forwarding can be the most complex panel in Call Settings (especially before it was refactored), so let me briefly tell you a story behind this panel.

When users click on any menu item and type number for any Call Forwarding option (For this part, please check Call Forwarding Details section), after submitting, we can get wrapped results from the dialog and use call/call_forwarding.js to help us handle this object. After doing some tests, it seems that it is not able to do multi tasks when interacting with Gecko’s API (This should be the problem in modem). So, in order to make anything works perfect, we create another module called CallSettingsTaskScheduler (call/call_settings_task_scheduler.js) inherited from TaskScheduler (modules/base/task_scheduler.js).

TaskScheduler is obvious responsible for handling different tasks and make sure they are all scheduled and can be executed one by one without conflicting each other. While for CallSettingsTaskScheduler, it is just an extended class with some customized TASK_TYPE and error handling.

So back to topic, because we aren’t able to do more than one request on modem each time, we need the help from task scheduler to achieve this. This operation includes get and set, so they all should be scheduled. If we don’t do this in order, modem will directly throw out errors and our request would be dropped and this would make our state inconsistent with hardware.

In addition to this, there is also another special feature that TaskScheduler provides – if there is another same-type task coming up, we will remove queued same-type task and push the new on in the array. By doing so, we can make sure we won’t send outdated request and would always keep the latest one.

And for UI, when modem is busy on handling our operation, we should disable all UIs while normal, we should make them back. So, in panel, we will observe CallForwarding’s internal _state to lock / unlock UI.

For anything else, please check our script.

Call Forwarding Details Panel (Dialog)

Screenshots

Call Forwarding Details Panel (Dialog)

Introduction

This is the dialog that you can set any number on each Call Forwarding option. Right now, because we do support 4 different options for Call Forwarding but with the same UI, we will reuse this dialog for all of them instead of duplicating many codes. But basically, there is no much logics hidden in this dialog and all what it does is pass the result back to Call Forwarding Panel (Caller) and the caller will do following operations based on returned values.

For more details about how Call Forwarding works internally, please check Call Forwarding Panel section for more details.

Call Barring Panel

Screenshots

Call Barring Panel

Introduction

In this panel, you can restrict certain types of outgoing calls and incoming calls. There are no special logics handled in this panel and this can be treated as a toggle that helps you customize your Call settings.

[FxOS] Settings App – SimCardManager

Simcard Manager

Screenshots

Root panel

Simcard Manager

Introduction

After 1.4+, FxOS has started to support DSDS (Dual Sim feature) that you can insert 2 simcards into your FxOS device. By default, because FxOS is a unified OS that should be used in different devices, we will automatically hide this entry point by default if there is no more than one physical simcard slot.

If you check source codes in settings/js/panels/simcard_manager, you would notice that we have sim_ui_model.js and simcard_manager.js. Let me briefly explain the responsibilities of these two different scripts below.

For SimUIModel, this is a abstract interface between hardware information and our UI. Based on UX’s spec, there are so many different scenarios that we have to show / hide some parts of UI like simcard is not inserted, simcard is locked, simcard is blocked …etc. So, that’s why we need SimUIModel to control every sub-states.

While for SimcardManager, it will bridge the internal state of SimUIModel and real UI to make sure what should be hidden and what should be updated. In addition to this, SimcardManager also needs to watch some hardware events (like AirplaneMode, cardstatechange … etc) to update its UI to make sure they do reflect the real status.

In SimcardManager, there are three important select/option called Outgoing Calls, Outgoing Messages and Data. For some apps (like dialer), they will watch these mozSettingsKey to show / hide some hints to users, for example, if you choose Always Ask for outgoing calls, every time when you are trying to dial out a number, it will keep popping up a simcard picker UI so that you can choose which number you are going to use to dial.

But, there is one black magic that you need to keep in mind when you are dealing with these three select/option. In system app, there is one file called sim_settings_helper.js which does lots of works with these three options. Based on UX’s spec, there is a special request that we have to automatically switch options if from 2 simcards to 1 simcard. Interestingly, because from Gaia (including Gecko) aspect, we can’t directly make sure the second card is indeed inserted (We did encountered one edge case that one of colleague’s old simcard is hard to be recognized by our hardware and it takes more than 3 ~ 5 seconds to get its information from Gecko), due to this, sim_settings_helper.js will wait for upcoming event – simslotready from simslot_manager.js to make sure we did wait longer enough for the second card, and we can based on current situation to decided whether to switch option to another card or not.

[FxOS] Settings App – Wifi

Wifi

Flowchart

Wifi Panel

Screenshot

Wifi Panel (A)

Wifi Panel (B)

Introduction

Wifi panel is the main entry point for the other dialogs / panels. As you may see on the screenshot above, in this panel, users can turn on / off Wifi, decide which AP to connect with and manage certificates or whatever settings related to Wifi.

If you check settings/js/panels/wifi/, you will notice a script which is called wifi_network_list.js. This script is so important that we will use it to generate a list of APs that users can interact with. For example, if you click on any listed AP, it will automatically check its own encryption to show which kind of dialog or just connect to that AP directly.

In addition to this, it will also automatically check its current status from Gecko to see whether it should update its signal / wording … etc. By doing so, we encapsulate all logics within this list and caller doesn’t have to know these details when using it.

Wifi WPS Panel (Dialog)

Screenshot

Wifi WPS Panel

Introduction

WPS is another way to connect to AP but this needs some special support from it to make the functionality work. If your AP does support this, users can click on Connect with WPS button to select which way to use to connect with WPS.

From Gaia side, there is no much works here and we simply provide a basic UI for users to choose and configure. So for more details, please go check Gecko’s source code for this part.

Wifi Status Panel (Dialog)

Screenshot

Wifi Status Panel

Introduction

When clicking on connected AP in Wifi Panel, this dialog would be popped up to tell users all needed information about this AP including Security, Signal strength, IP address and Link Speed. In addition to this, you can also forget this AP by clicking right-up button.

Wifi Auth Panel (Dialog)

Screenshot

Wifi Auth Panel

Introduction

If users click on non-connected and encrypted AP from Wifi panel, we will pop up Wifi Auth Panel to users. Compared with non-encrypted AP, normally users have to type password or do some extra pre-settings to connect to this AP.

Wifi Manage Networks Panel

Screenshot

Wifi Manage Networks Panel

Introduction

In this panel, we will list down all connected AP here. If users click on the item, the confirm pop-up will be shown to double confirm whether they really want to remove forget connected AP or not. So for this panel’s code, there is no much complex works but only some UI related stuffs.

Wifi Join Hidden Panel (Dialog)

Screenshot

Wifi Join Hidden Panel

Introduction

This panel is pretty simple enough and it will transform all user’s input into a recognizable object for WifiManager. But there is one thing that should be noticed. Because there are some shared UI / logics for users to select security, EAP method … etc across panels (Wifi Auth Panel & Wifi Join Hidden Panel), we have to use a shared script to control them.

But, sadly, because there are still some minor difference between these two pages, in shard script, we will check some element’s existence before manipulating. So please remember to double check UI codes and shard script for this part before adding new rules. Otherwise, you may break another panel.

Wifi Manage Certificates Panel

Screenshot

Wifi Manage Certificates Panel

Introduction

If users are trying to connect with AP with WPA-EAP encryption, under some special EAP methods, they need users to provide needed Server Certificates and User Certificates for authentications.

So, if users are trying to connect to AP with these EAP methods, they have to go to this panel and import needed certificates first, otherwise, we can’t find out needed certificates when users are trying to join hidden network.

Wifi Select Certificate File Panel

Screenshot

Wifi Select Certificate File Panel

Introduction

In this panel, we will list down all possible certificates from SD card and present them to users. When clicking on these items, we will redirect them to Wifi Enter Certificate Nickname Panel.

Wifi Enter Certificate Nickname Panel (Dialog)

Screenshot

Wifi Enter Certificate Nickname Panel

Introduction

After selecting needed certificate from Wifi Select Certificate File Panel, users will be redirected to this dialog. In this dialog, users can decide whether to rename this certificate or not. Interestingly, if you already have one certificate named with the same name, you are not allowed to name it again because Gecko would throw out some error in this special case.

[FxOS] Settings App – AirplaneModeHelper

AirplaneModeHelper

Flowchart

Screenshots

Setting’s root panel

Introduction

For developers, AirplaneMode is a complicated service that has deep relationships between different services like Bluetooth, Wifi and MobileConnections. Because these services are all related to hardwares, there must be some round-trip time that you have to wait. In order to make these operations encapsulated, they are all handled in system/js/airplane_mode.js. and we think the other apps should just use a trigger to tell System app to do following works.

But due to the restriction that we can’t easily communicate across apps easily, we have to use some internal settings key to communicate. But in order to make sure other apps won’t directly manipulate the communication key that would break the other apps, we think the better way is to design an unified helper for everyone to use, and all these details will be hidden within APIs which it exposes and that’s why we need AirplaneModeHelper (its abbreviation would be AMH, and related file would be shared/js/airplane_mode_helper.js).

If you check below flowchart, you can notice that there are some useful API like ready(), setEnabled(), getStatus(), addEventListener() and removeEventListener() that you can use to build up your business logics. Take Settings app for example, there is a toggle in its root panel and users can click on it to enable / disable AirplaneMode, we use AMH to manipulate it and make sure we will block UI when enabling/disabling and unblock UI when enabled/disabled.

So with AMH, you can do whatever you want which relates to AirplaneMode, while for more details, please check its source code and flowchart below.

[FxOS] Settings App – DialogService v.s. DialogManager

Image Credit

settings

DialogService

Flowchart

DialogService focuses on controlling states between dialogs, it will make sure every time there is only one dialog showing up on the screen and for the others, they will be queued as an internal state and will be executed one by one when current dialog is dismissed.

Right now we support 4 different types of dialogs, AlertDialog, ConfirmDialog, PromptDialog and PanelDialog in DialogService.

For the previous three dialogs, they are used as a substitution of native alert, confirm and prompt API with predefined layout based on UX’s spec. While for PanelDialog, you can define your own dialog with pre-defined interface and DialogService will help you show it with all necessary callbacks are bounded on UI.

While for lifecycle of dialogs, they are all handled in DialogManager and please go check related documentation for this part.

DialogManager

DialogManager is a manager that mainly focuses on controlling the whole life cycle of each dialog. It will load panel, initialize panel, use pre-defined transition to show panel when DialogManager.open() is called. While for DialogManager.close(), it will find out which panel is going to be closed, validate the result of onSubmit() or onCancel(), and use pre-defined transition to hide panel.

Basically, this DialogManager will be only used accompanied with DialogService. If you want to know more details about how they are communicated with each other, you can go check settings/js/modules/dialog_service.js for more details.