SlideShare a Scribd company logo
Views, Aura and Ash:
ChromeOS UI Framework
Simon YoungKi Hong
simonhong@chromium.org
About Me
Software Programmer @LGE
(2009.02 ~)
Chromium Contributor
(2012.01 ~)
Chromium Committer
(2013.11 ~)
Goal
Overview of ChromeOS UI Component.

We can say
“How ChromeOS UI is constructed!”
Goal
Background
Chrome? Chromium?
ChromeOS
Linux based operating system.
Only chrome browser is running for user.
UI Framework
In typical linux,
GUI
Application

GUI
Application

GUI
Application

Window
Manager

gtk

qt

efl

...

X or Wayland
Kernel
What kind of ToolKit is used
in ChromeOS?
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
Views
UI is constructed of a tree of view components
Widget
RootView
View
View

View
View

View
View
View
Views
Like other toolkits, it has many custom views
●
●
●
●
●
●
●
●
●

Label
Image view
web view
slider
separator
link
button
combobox
etc...
Views
OK. we know how Widget is made...

But, who give user events
or draw its content?
There is no window manager.
ChromeOS runs single x-client application.

Browser
Process

Renderer
Process

Renderer
Process

libx

X

…...

GPU
Process
They created a new window system.
Aura
Aura
Chrome's next generation hardware
accelerated UI framework
Aura
Contains view components
Responsible for
event propagation
draw widget’s contents
window hierarchy management
- ChromeOS is a tree of Aura Window
Aura
Event Flow
Widget component

Aura Window

X

Kernel

Mouse Click
Aura
Drawing?
RootWindowHost

CC

RootWindow
Composite
& Draw
Aura
Window
Aura
Window

Aura
Window
Aura
Window

Aura
Window

GPU process

Browser process

GPU
OK. we know how Widget is handled...

But, how create a widget?
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
Ash
In typical linux,

GTK
application

QT
Application

....

X
Kernel

Shell
Ash
Role of Shell
* Window mgmt.
* Program exec.
* System mgmt.
Ash
References
http://dev.chromium.org/developers/design-documents
Q&A

More Related Content

PDF
Container based android
PDF
Android Chromium Rendering Pipeline
ODP
Q4.11: Porting Android to new Platforms
ODP
Embedded Android : System Development - Part III
PDF
Android Automotive
PDF
Android Things : Building Embedded Devices
PDF
Android Internals
PDF
Mobile Browser Internal (Blink Rendering Engine)
Container based android
Android Chromium Rendering Pipeline
Q4.11: Porting Android to new Platforms
Embedded Android : System Development - Part III
Android Automotive
Android Things : Building Embedded Devices
Android Internals
Mobile Browser Internal (Blink Rendering Engine)

What's hot (20)

PDF
The magic of flutter
PDF
Android's HIDL: Treble in the HAL
PDF
Embedded Android : System Development - Part I
PDF
Android Binder IPC for Linux
PPT
"Learning AOSP" - Android Hardware Abstraction Layer (HAL)
PDF
Embedded Android : System Development - Part IV (Android System Services)
PDF
CI/CD with Jenkins and Docker - DevOps Meetup Day Thailand
PPTX
Introduction of android treble
PDF
Reactive Microservices with Quarkus
PDF
Jenkins
PDF
Porting Android
PDF
포트폴리오 오경원
PPTX
Jenkins CI presentation
PDF
ES2015 / ES6: Basics of modern Javascript
PDF
Building beautiful apps using google flutter
PDF
[ko] Kernel Networking Stack 진입 장벽 허물기
PDF
Building a REST Job Server for interactive Spark as a service by Romain Rigau...
PDF
Embedded Android Workshop with Pie
PDF
A/B Linux updates with RAUC and meta-rauc-community: now & in the future
The magic of flutter
Android's HIDL: Treble in the HAL
Embedded Android : System Development - Part I
Android Binder IPC for Linux
"Learning AOSP" - Android Hardware Abstraction Layer (HAL)
Embedded Android : System Development - Part IV (Android System Services)
CI/CD with Jenkins and Docker - DevOps Meetup Day Thailand
Introduction of android treble
Reactive Microservices with Quarkus
Jenkins
Porting Android
포트폴리오 오경원
Jenkins CI presentation
ES2015 / ES6: Basics of modern Javascript
Building beautiful apps using google flutter
[ko] Kernel Networking Stack 진입 장벽 허물기
Building a REST Job Server for interactive Spark as a service by Romain Rigau...
Embedded Android Workshop with Pie
A/B Linux updates with RAUC and meta-rauc-community: now & in the future
Ad

Viewers also liked (20)

PDF
OVERVIEW: Chromium Source Tree
PDF
Deview 2013 mobile browser internals and trends_20131022
PDF
Designing and Building (Your Own) UI Frameworks For the Enterprise
PDF
Accelerating performance on Qt and WebKit for the MIPS architecture
PDF
03 - Qt UI Development
PPT
了解 Qt
PDF
Maemo 6 UI Framework
PDF
Charity apprentice logo-blue-6675
PDF
Qt5 embedded
PPTX
Android chromium web view
PDF
Chrome & Webkit overview
PDF
Advanced Chrome extension exploitation
PDF
PPTX
Borel azote
PPTX
Serveur http embarqué dans une application Android. Usages et implémentations
PDF
Building Chromium on an Embedded Platform using Ozone-Wayland Layer (GENIVI 1...
PPT
TURBINE FUNDAMENTAL
PDF
Chromium Contributing Explained: Writing Good Patches
PDF
Clean Sky Projects on the More Electric Aircraft
OVERVIEW: Chromium Source Tree
Deview 2013 mobile browser internals and trends_20131022
Designing and Building (Your Own) UI Frameworks For the Enterprise
Accelerating performance on Qt and WebKit for the MIPS architecture
03 - Qt UI Development
了解 Qt
Maemo 6 UI Framework
Charity apprentice logo-blue-6675
Qt5 embedded
Android chromium web view
Chrome & Webkit overview
Advanced Chrome extension exploitation
Borel azote
Serveur http embarqué dans une application Android. Usages et implémentations
Building Chromium on an Embedded Platform using Ozone-Wayland Layer (GENIVI 1...
TURBINE FUNDAMENTAL
Chromium Contributing Explained: Writing Good Patches
Clean Sky Projects on the More Electric Aircraft
Ad

Similar to Chromium ui framework(shared) (20)

PDF
LCU14 208- Chromium-Blink Migration for RDK
PPTX
Web browser architecture
PDF
Headless browser a stepping stone towards developing smarter web applicatio...
PPT
VB.Net GUI Unit_01
PDF
What is Google Chrome?
PDF
How to choose best web design company in bangalore
PPTX
GUI_part_1.pptx
PDF
Android : Deep dive into developing MobileApp using Android
KEY
webOS App by Example: Sorting Thoughts
PPTX
Web development tool
PPTX
Google chrome by JD
PPT
Android architecture and Additional Components
PDF
Google Chrome OS
PDF
Building a browser for automotive. alternatives, challenges and recommendatio...
PDF
Building a Browser for Automotive: Alternatives, Challenges and Recommendations
PPTX
Android app development ppt
PPTX
Internet Explorer 9
PPT
Chromiumos
PPTX
Android app development
PDF
Firefox OS - Hive Pilani 2015
LCU14 208- Chromium-Blink Migration for RDK
Web browser architecture
Headless browser a stepping stone towards developing smarter web applicatio...
VB.Net GUI Unit_01
What is Google Chrome?
How to choose best web design company in bangalore
GUI_part_1.pptx
Android : Deep dive into developing MobileApp using Android
webOS App by Example: Sorting Thoughts
Web development tool
Google chrome by JD
Android architecture and Additional Components
Google Chrome OS
Building a browser for automotive. alternatives, challenges and recommendatio...
Building a Browser for Automotive: Alternatives, Challenges and Recommendations
Android app development ppt
Internet Explorer 9
Chromiumos
Android app development
Firefox OS - Hive Pilani 2015

More from gnomekr (10)

PPTX
Korean input overview in the linux desktop
PPTX
20180519 hangul processing
PDF
The way of approaching to foss for nursing care business
PPT
뒷북요정으로 알아보는 사용자 요구 반영의 나쁜 예
PPT
Gnome on wayland at a glance
PDF
My ubuntu life-dklee
PPT
Vision and dream for youth startup company
PDF
Hw accelerated webkitgtk+ on raspberry pi
PPT
Gnome.asia.summit2013 report-pdf
PPT
System hacking basics
Korean input overview in the linux desktop
20180519 hangul processing
The way of approaching to foss for nursing care business
뒷북요정으로 알아보는 사용자 요구 반영의 나쁜 예
Gnome on wayland at a glance
My ubuntu life-dklee
Vision and dream for youth startup company
Hw accelerated webkitgtk+ on raspberry pi
Gnome.asia.summit2013 report-pdf
System hacking basics

Recently uploaded (20)

PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Modernizing your data center with Dell and AMD
PDF
Review of recent advances in non-invasive hemoglobin estimation
DOCX
The AUB Centre for AI in Media Proposal.docx
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PDF
Electronic commerce courselecture one. Pdf
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PDF
cuic standard and advanced reporting.pdf
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PDF
KodekX | Application Modernization Development
PPTX
Cloud computing and distributed systems.
PPTX
Big Data Technologies - Introduction.pptx
PDF
NewMind AI Monthly Chronicles - July 2025
PPT
Teaching material agriculture food technology
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PDF
Empathic Computing: Creating Shared Understanding
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Building Integrated photovoltaic BIPV_UPV.pdf
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Modernizing your data center with Dell and AMD
Review of recent advances in non-invasive hemoglobin estimation
The AUB Centre for AI in Media Proposal.docx
Mobile App Security Testing_ A Comprehensive Guide.pdf
Electronic commerce courselecture one. Pdf
Understanding_Digital_Forensics_Presentation.pptx
cuic standard and advanced reporting.pdf
The Rise and Fall of 3GPP – Time for a Sabbatical?
Dropbox Q2 2025 Financial Results & Investor Presentation
KodekX | Application Modernization Development
Cloud computing and distributed systems.
Big Data Technologies - Introduction.pptx
NewMind AI Monthly Chronicles - July 2025
Teaching material agriculture food technology
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Empathic Computing: Creating Shared Understanding

Chromium ui framework(shared)