SlideShare une entreprise Scribd logo
1  sur  26
Télécharger pour lire hors ligne
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

Contenu connexe

Tendances

Understanding Android Benchmarks
Understanding Android BenchmarksUnderstanding Android Benchmarks
Understanding Android Benchmarks
Koan-Sin Tan
 

Tendances (20)

Chromium wayland
Chromium waylandChromium wayland
Chromium wayland
 
Drupal
DrupalDrupal
Drupal
 
Janus RTP forwarders @ FOSDEM 2020
Janus RTP forwarders @ FOSDEM 2020Janus RTP forwarders @ FOSDEM 2020
Janus RTP forwarders @ FOSDEM 2020
 
Automating linux network performance testing
Automating linux network performance testingAutomating linux network performance testing
Automating linux network performance testing
 
HKG18-203 - Overview of Linaro DRM
HKG18-203 - Overview of Linaro DRMHKG18-203 - Overview of Linaro DRM
HKG18-203 - Overview of Linaro DRM
 
Anatomy of a Container: Namespaces, cgroups & Some Filesystem Magic - LinuxCon
Anatomy of a Container: Namespaces, cgroups & Some Filesystem Magic - LinuxConAnatomy of a Container: Namespaces, cgroups & Some Filesystem Magic - LinuxCon
Anatomy of a Container: Namespaces, cgroups & Some Filesystem Magic - LinuxCon
 
Podman rootless containers
Podman rootless containersPodman rootless containers
Podman rootless containers
 
PEGAPCSA80V1_2019 Questions Dumps
PEGAPCSA80V1_2019 Questions DumpsPEGAPCSA80V1_2019 Questions Dumps
PEGAPCSA80V1_2019 Questions Dumps
 
Beginners Guide to Drupal
Beginners Guide to DrupalBeginners Guide to Drupal
Beginners Guide to Drupal
 
brief intro to Linux device drivers
brief intro to Linux device driversbrief intro to Linux device drivers
brief intro to Linux device drivers
 
Web Assembly Big Picture
Web Assembly Big PictureWeb Assembly Big Picture
Web Assembly Big Picture
 
Multistream in Janus @ CommCon 2019
Multistream in Janus @ CommCon 2019Multistream in Janus @ CommCon 2019
Multistream in Janus @ CommCon 2019
 
Linux Profiling at Netflix
Linux Profiling at NetflixLinux Profiling at Netflix
Linux Profiling at Netflix
 
Understanding Android Benchmarks
Understanding Android BenchmarksUnderstanding Android Benchmarks
Understanding Android Benchmarks
 
HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...
HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...
HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...
 
RabbitMQ and EasyNetQ
RabbitMQ and EasyNetQRabbitMQ and EasyNetQ
RabbitMQ and EasyNetQ
 
Divolte collector overview
Divolte collector overviewDivolte collector overview
Divolte collector overview
 
Qt Qml
Qt QmlQt Qml
Qt Qml
 
Introduction to Skia by Ryan Chou @20141008
Introduction to Skia by Ryan Chou @20141008Introduction to Skia by Ryan Chou @20141008
Introduction to Skia by Ryan Chou @20141008
 
Android OTA updates
Android OTA updatesAndroid OTA updates
Android OTA updates
 

En vedette

Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022
NAVER D2
 
Charity apprentice logo-blue-6675
Charity apprentice logo-blue-6675Charity apprentice logo-blue-6675
Charity apprentice logo-blue-6675
FITC
 

En vedette (20)

OVERVIEW: Chromium Source Tree
OVERVIEW: Chromium Source TreeOVERVIEW: Chromium Source Tree
OVERVIEW: Chromium Source Tree
 
Mobile Browser Internal (Blink Rendering Engine)
Mobile Browser Internal (Blink Rendering Engine)Mobile Browser Internal (Blink Rendering Engine)
Mobile Browser Internal (Blink Rendering Engine)
 
Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022
 
Designing and Building (Your Own) UI Frameworks For the Enterprise
Designing and Building (Your Own) UI Frameworks For the EnterpriseDesigning and Building (Your Own) UI Frameworks For the Enterprise
Designing and Building (Your Own) UI Frameworks For the Enterprise
 
Accelerating performance on Qt and WebKit for the MIPS architecture
Accelerating performance on Qt and WebKit for the MIPS architectureAccelerating performance on Qt and WebKit for the MIPS architecture
Accelerating performance on Qt and WebKit for the MIPS architecture
 
03 - Qt UI Development
03 - Qt UI Development03 - Qt UI Development
03 - Qt UI Development
 
了解 Qt
了解 Qt了解 Qt
了解 Qt
 
Maemo 6 UI Framework
Maemo 6 UI FrameworkMaemo 6 UI Framework
Maemo 6 UI Framework
 
Charity apprentice logo-blue-6675
Charity apprentice logo-blue-6675Charity apprentice logo-blue-6675
Charity apprentice logo-blue-6675
 
Qt5 embedded
Qt5 embeddedQt5 embedded
Qt5 embedded
 
Android chromium web view
Android chromium web viewAndroid chromium web view
Android chromium web view
 
Chrome & Webkit overview
Chrome & Webkit overviewChrome & Webkit overview
Chrome & Webkit overview
 
Advanced Chrome extension exploitation
Advanced Chrome extension exploitationAdvanced Chrome extension exploitation
Advanced Chrome extension exploitation
 
10.3.1 Mez Plast
10.3.1 Mez Plast10.3.1 Mez Plast
10.3.1 Mez Plast
 
Borel azote
Borel azoteBorel azote
Borel azote
 
Projecto Clean Sky
Projecto Clean SkyProjecto Clean Sky
Projecto Clean Sky
 
Serveur http embarqué dans une application Android. Usages et implémentations
Serveur http embarqué dans une application Android.  Usages et implémentationsServeur http embarqué dans une application Android.  Usages et implémentations
Serveur http embarqué dans une application Android. Usages et implémentations
 
Building Chromium on an Embedded Platform using Ozone-Wayland Layer (GENIVI 1...
Building Chromium on an Embedded Platform using Ozone-Wayland Layer (GENIVI 1...Building Chromium on an Embedded Platform using Ozone-Wayland Layer (GENIVI 1...
Building Chromium on an Embedded Platform using Ozone-Wayland Layer (GENIVI 1...
 
TURBINE FUNDAMENTAL
TURBINE FUNDAMENTALTURBINE FUNDAMENTAL
TURBINE FUNDAMENTAL
 
Chromium Contributing Explained: Writing Good Patches
Chromium Contributing Explained: Writing Good PatchesChromium Contributing Explained: Writing Good Patches
Chromium Contributing Explained: Writing Good Patches
 

Similaire à Chromium ui framework(shared)

VB.Net GUI Unit_01
VB.Net GUI Unit_01VB.Net GUI Unit_01
VB.Net GUI Unit_01
Prashanth Shivakumar
 
What is Google Chrome?
What is Google Chrome?What is Google Chrome?
What is Google Chrome?
s1170222
 
GUI_part_1.pptx
GUI_part_1.pptxGUI_part_1.pptx
GUI_part_1.pptx
Parasuraman43
 
Internet Explorer 9
Internet Explorer 9Internet Explorer 9
Internet Explorer 9
Vasu Jain
 

Similaire à Chromium ui framework(shared) (20)

LCU14 208- Chromium-Blink Migration for RDK
LCU14 208- Chromium-Blink Migration for RDKLCU14 208- Chromium-Blink Migration for RDK
LCU14 208- Chromium-Blink Migration for RDK
 
Web browser architecture
Web browser architectureWeb browser architecture
Web browser architecture
 
Headless browser a stepping stone towards developing smarter web applicatio...
Headless browser   a stepping stone towards developing smarter web applicatio...Headless browser   a stepping stone towards developing smarter web applicatio...
Headless browser a stepping stone towards developing smarter web applicatio...
 
VB.Net GUI Unit_01
VB.Net GUI Unit_01VB.Net GUI Unit_01
VB.Net GUI Unit_01
 
What is Google Chrome?
What is Google Chrome?What is Google Chrome?
What is Google Chrome?
 
GUI_part_1.pptx
GUI_part_1.pptxGUI_part_1.pptx
GUI_part_1.pptx
 
Android : Deep dive into developing MobileApp using Android
Android : Deep dive into developing MobileApp using AndroidAndroid : Deep dive into developing MobileApp using Android
Android : Deep dive into developing MobileApp using Android
 
webOS App by Example: Sorting Thoughts
webOS App by Example: Sorting ThoughtswebOS App by Example: Sorting Thoughts
webOS App by Example: Sorting Thoughts
 
Web development tool
Web development toolWeb development tool
Web development tool
 
Google chrome by JD
Google chrome by JDGoogle chrome by JD
Google chrome by JD
 
Android architecture and Additional Components
Android architecture and Additional ComponentsAndroid architecture and Additional Components
Android architecture and Additional Components
 
Google Chrome OS
Google Chrome OSGoogle Chrome OS
Google Chrome OS
 
Building a browser for automotive. alternatives, challenges and recommendatio...
Building a browser for automotive. alternatives, challenges and recommendatio...Building a browser for automotive. alternatives, challenges and recommendatio...
Building a browser for automotive. alternatives, challenges and recommendatio...
 
Building a Browser for Automotive: Alternatives, Challenges and Recommendations
Building a Browser for Automotive: Alternatives, Challenges and RecommendationsBuilding a Browser for Automotive: Alternatives, Challenges and Recommendations
Building a Browser for Automotive: Alternatives, Challenges and Recommendations
 
Android app development ppt
Android app development pptAndroid app development ppt
Android app development ppt
 
Internet Explorer 9
Internet Explorer 9Internet Explorer 9
Internet Explorer 9
 
Chromiumos
Chromiumos Chromiumos
Chromiumos
 
Android app development
Android app developmentAndroid app development
Android app development
 
Firefox OS - Hive Pilani 2015
Firefox OS - Hive Pilani 2015Firefox OS - Hive Pilani 2015
Firefox OS - Hive Pilani 2015
 
Mobile app development using Android SDK
Mobile app development using Android SDKMobile app development using Android SDK
Mobile app development using Android SDK
 

Plus de gnomekr

Plus de gnomekr (10)

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

Dernier

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Dernier (20)

Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 

Chromium ui framework(shared)