chromium ui framework(shared)
DESCRIPTION
This slides describe overview of ChromeOS UI Framework, consists of many visual components and aura, and aura shell.TRANSCRIPT
![Page 2: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/2.jpg)
About Me
Software Programmer @LGE(2009.02 ~)
Chromium Contributor(2012.01 ~)
Chromium Committer(2013.11 ~)
![Page 3: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/3.jpg)
Goal
Overview of ChromeOS UI Component.
We can say“How ChromeOS UI is constructed!”
![Page 4: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/4.jpg)
Goal
![Page 5: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/5.jpg)
Background
Chrome? Chromium?
![Page 6: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/6.jpg)
ChromeOS
Linux based operating system.Only chrome browser is running for user.
![Page 7: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/7.jpg)
UI Framework
In typical linux,
X or Wayland
Kernel
GUIApplication
GUI Application
WindowManager
GUI Application
gtk qt efl ...
![Page 8: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/8.jpg)
What kind of ToolKit is used in ChromeOS?
![Page 9: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/9.jpg)
Views
They created UI toolkit called "Views"
"Since we desired a differentiated aesthetic for Chromium, we have had to build a framework on Windows to accelerate our development of custom UI" - Chromium design docs
![Page 10: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/10.jpg)
Views
UI is constructed of a tree of view components
RootView
View
View
View
View
View
ViewView
Widget
![Page 11: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/11.jpg)
Views
Like other toolkits, it has many custom views● Label● Image view● web view● slider● separator● link● button● combobox● etc...
![Page 12: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/12.jpg)
Views
![Page 13: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/13.jpg)
OK. we know how Widget is made...
But, who give user eventsor draw its content?
![Page 14: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/14.jpg)
There is no window manager.ChromeOS runs single x-client application.
X
Browser Process Renderer
Process …...Renderer Process
GPU Process
libx
![Page 15: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/15.jpg)
They created a new window system.Aura
![Page 16: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/16.jpg)
Aura
Chrome's next generation hardware accelerated UI framework
![Page 17: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/17.jpg)
Aura
Contains view components
Responsible forevent propagationdraw widget’s contents
window hierarchy management - ChromeOS is a tree of Aura Window
![Page 18: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/18.jpg)
Aura
Event Flow
Mouse Click
Kernel
X
Aura Window
Widget component
![Page 19: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/19.jpg)
Aura
Drawing?
RootWindowHost
Aura Window
RootWindow
Browser process
GPU process
Aura Window
Aura Window
Aura Window
Aura Window
GPU
CC
Composite & Draw
![Page 20: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/20.jpg)
OK. we know how Widget is handled...
But, how create a widget?
![Page 21: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/21.jpg)
Ash (Aura SHell)
"A shell is software that provides an interface for users of an operating system to access the
services of a kernel." - wikipedia
![Page 22: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/22.jpg)
Ash
In typical linux,
X
Kernel
GTK application
QT Application .... Shell
![Page 23: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/23.jpg)
Ash
Role of Shell* Window mgmt.* Program exec.* System mgmt.
![Page 24: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/24.jpg)
Ash
![Page 25: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/25.jpg)
Referenceshttp://dev.chromium.org/developers/design-documents
![Page 26: Chromium ui framework(shared)](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c8e3514a7959df298b456e/html5/thumbnails/26.jpg)
Q&A