[MediaWiki-commits] [Gerrit] oojs/ui[master]: Improve and clarify GPU composite layer mixin

2017-01-05 Thread jenkins-bot (Code Review)
jenkins-bot has submitted this change and it was merged. ( 
https://gerrit.wikimedia.org/r/330344 )

Change subject: Improve and clarify GPU composite layer mixin
..


Improve and clarify GPU composite layer mixin

Improving and clarifying mixin to switch hardware
compositing mode in Webkit/Blink on. Using `translateZ()`
instead of `translate3d()` because it's shorter and has the same
effect.

Bug: T154460
Change-Id: I16a39a68f8234eb28eb1fe8327861d71938b6ecd
---
M src/styles/common.less
M src/styles/layouts/PanelLayout.less
M src/styles/widgets/ToggleSwitchWidget.less
M src/themes/apex/elements.less
M src/themes/apex/widgets.less
5 files changed, 11 insertions(+), 7 deletions(-)

Approvals:
  Bartosz Dziewoński: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/src/styles/common.less b/src/styles/common.less
index ddc26eb..e65a34a 100644
--- a/src/styles/common.less
+++ b/src/styles/common.less
@@ -34,8 +34,13 @@
.oo-ui-background-image-svg-internal( @svg, @fallback );
 }
 
-.oo-ui-force-webkit-gpu() {
-   -webkit-transform: translate3d( 0, 0, 0 );
+// Only Webkit/Blink: Force element on own GPU composite layer
+// Can be used in order to help establish smooth, jank-free scrolling
+// in connection with CSS animations. Use sparely & wisely!
+// See T154460
+.oo-ui-force-gpu-composite-layer() {
+   -webkit-transform: translateZ( 0 );
+   transform: translateZ( 0 );
 }
 
 .oo-ui-animation( @value1, @value2: X, ... ) {
diff --git a/src/styles/layouts/PanelLayout.less 
b/src/styles/layouts/PanelLayout.less
index 193b783..a843f91 100644
--- a/src/styles/layouts/PanelLayout.less
+++ b/src/styles/layouts/PanelLayout.less
@@ -5,8 +5,7 @@
 
&-scrollable {
overflow-y: auto;
-   /* Make scrolling smooth */
-   .oo-ui-force-webkit-gpu();
+   .oo-ui-force-gpu-composite-layer();
}
 
&-expanded {
diff --git a/src/styles/widgets/ToggleSwitchWidget.less 
b/src/styles/widgets/ToggleSwitchWidget.less
index 985ddb9..6c8a36d 100644
--- a/src/styles/widgets/ToggleSwitchWidget.less
+++ b/src/styles/widgets/ToggleSwitchWidget.less
@@ -6,7 +6,7 @@
vertical-align: middle;
overflow: hidden;
.oo-ui-box-sizing( border-box );
-   .oo-ui-force-webkit-gpu();
+   .oo-ui-force-gpu-composite-layer();
 
&.oo-ui-widget-enabled {
cursor: pointer;
diff --git a/src/themes/apex/elements.less b/src/themes/apex/elements.less
index 4f10a59..fb724de 100644
--- a/src/themes/apex/elements.less
+++ b/src/themes/apex/elements.less
@@ -191,7 +191,7 @@
&.oo-ui-buttonElement-pressed > 
.oo-ui-buttonElement-button {
opacity: 0.5;
// Opacity causes 1px measurement errors in 
Chrome, so force GPU rendering
-   .oo-ui-force-webkit-gpu();
+   .oo-ui-force-gpu-composite-layer();
box-shadow: none;
color: #333;
background: #eee;
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index 66a2817..afa6f30 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -599,7 +599,7 @@
&.oo-ui-widget-disabled {
opacity: 0.5;
// Opacity causes 1px measurement errors in Chrome, so force 
GPU rendering
-   .oo-ui-force-webkit-gpu();
+   .oo-ui-force-gpu-composite-layer();
box-shadow: none;
color: #333;
background: #eee;

-- 
To view, visit https://gerrit.wikimedia.org/r/330344
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: I16a39a68f8234eb28eb1fe8327861d71938b6ecd
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE 
Gerrit-Reviewer: Bartosz Dziewoński 
Gerrit-Reviewer: Esanders 
Gerrit-Reviewer: Jforrester 
Gerrit-Reviewer: Krinkle 
Gerrit-Reviewer: jenkins-bot <>

___
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits


[MediaWiki-commits] [Gerrit] oojs/ui[master]: Improve and clarify GPU composite layer mixin

2017-01-03 Thread VolkerE (Code Review)
VolkerE has uploaded a new change for review. ( 
https://gerrit.wikimedia.org/r/330344 )

Change subject: Improve and clarify GPU composite layer mixin
..

Improve and clarify GPU composite layer mixin

Improving and clarifying mixin to switch hardware
compositing mode in Webkit/Blink on. Using `translateZ()`
instead of `translate3d()` because it's shorter and has the same
effect.

Bug: T154460
Change-Id: I16a39a68f8234eb28eb1fe8327861d71938b6ecd
---
M src/styles/common.less
M src/styles/layouts/PanelLayout.less
M src/styles/widgets/ToggleSwitchWidget.less
M src/themes/apex/elements.less
M src/themes/apex/widgets.less
5 files changed, 11 insertions(+), 7 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/44/330344/1

diff --git a/src/styles/common.less b/src/styles/common.less
index ddc26eb..e65a34a 100644
--- a/src/styles/common.less
+++ b/src/styles/common.less
@@ -34,8 +34,13 @@
.oo-ui-background-image-svg-internal( @svg, @fallback );
 }
 
-.oo-ui-force-webkit-gpu() {
-   -webkit-transform: translate3d( 0, 0, 0 );
+// Only Webkit/Blink: Force element on own GPU composite layer
+// Can be used in order to help establish smooth, jank-free scrolling
+// in connection with CSS animations. Use sparely & wisely!
+// See T154460
+.oo-ui-force-gpu-composite-layer() {
+   -webkit-transform: translateZ( 0 );
+   transform: translateZ( 0 );
 }
 
 .oo-ui-animation( @value1, @value2: X, ... ) {
diff --git a/src/styles/layouts/PanelLayout.less 
b/src/styles/layouts/PanelLayout.less
index 193b783..a843f91 100644
--- a/src/styles/layouts/PanelLayout.less
+++ b/src/styles/layouts/PanelLayout.less
@@ -5,8 +5,7 @@
 
&-scrollable {
overflow-y: auto;
-   /* Make scrolling smooth */
-   .oo-ui-force-webkit-gpu();
+   .oo-ui-force-gpu-composite-layer();
}
 
&-expanded {
diff --git a/src/styles/widgets/ToggleSwitchWidget.less 
b/src/styles/widgets/ToggleSwitchWidget.less
index 985ddb9..6c8a36d 100644
--- a/src/styles/widgets/ToggleSwitchWidget.less
+++ b/src/styles/widgets/ToggleSwitchWidget.less
@@ -6,7 +6,7 @@
vertical-align: middle;
overflow: hidden;
.oo-ui-box-sizing( border-box );
-   .oo-ui-force-webkit-gpu();
+   .oo-ui-force-gpu-composite-layer();
 
&.oo-ui-widget-enabled {
cursor: pointer;
diff --git a/src/themes/apex/elements.less b/src/themes/apex/elements.less
index 4f10a59..fb724de 100644
--- a/src/themes/apex/elements.less
+++ b/src/themes/apex/elements.less
@@ -191,7 +191,7 @@
&.oo-ui-buttonElement-pressed > 
.oo-ui-buttonElement-button {
opacity: 0.5;
// Opacity causes 1px measurement errors in 
Chrome, so force GPU rendering
-   .oo-ui-force-webkit-gpu();
+   .oo-ui-force-gpu-composite-layer();
box-shadow: none;
color: #333;
background: #eee;
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index 66a2817..afa6f30 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -599,7 +599,7 @@
&.oo-ui-widget-disabled {
opacity: 0.5;
// Opacity causes 1px measurement errors in Chrome, so force 
GPU rendering
-   .oo-ui-force-webkit-gpu();
+   .oo-ui-force-gpu-composite-layer();
box-shadow: none;
color: #333;
background: #eee;

-- 
To view, visit https://gerrit.wikimedia.org/r/330344
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I16a39a68f8234eb28eb1fe8327861d71938b6ecd
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE 

___
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits