[MediaWiki-commits] [Gerrit] Refine handling of transparent image backgrounds in dark mode - change (apps...wikipedia)
jenkins-bot has submitted this change and it was merged.
Change subject: Refine handling of transparent image backgrounds in dark mode
..
Refine handling of transparent image backgrounds in dark mode
The previous patch submitted on this issue (see
https://gerrit.wikimedia.org/r/#/c/235507/) left at least one instance
in which image colors were being improperly stripped; see Manchester
United F.C. > Kit Evolution.
Hence, just checking the image node and all ancestors for a background-color
style element isn't sufficient. So with this patch, a white background is
added to each img element that:
(1) Is not nested in a table, unless that table is the infobox and the
element has the class name 'image'; or
(2) Does not have the style property 'background-color' or an ancestor with
it.
And with this, you may examine soccer jersey colors in dark mode to your
heart's content.
Bug: T108333
Change-Id: I350a71d51dd5a452f85c28ef7ef45807455119b1
---
M app/src/main/assets/bundle.js
M app/src/main/assets/preview.js
M www/js/night.js
3 files changed, 96 insertions(+), 12 deletions(-)
Approvals:
Dbrant: Looks good to me, approved
jenkins-bot: Verified
diff --git a/app/src/main/assets/bundle.js b/app/src/main/assets/bundle.js
index 40929f8..a23ea59 100644
--- a/app/src/main/assets/bundle.js
+++ b/app/src/main/assets/bundle.js
@@ -289,13 +289,14 @@
},{"./bridge":2}],8:[function(require,module,exports){
var bridge = require("./bridge");
var loader = require("./loader");
-var util = require("./utilities");
+var utilities = require("./utilities");
function setImageBackgroundsForDarkMode( content ) {
- var allImgs = content.querySelectorAll( 'img' );
+ var img, allImgs = content.querySelectorAll( 'img' );
for ( var i = 0; i < allImgs.length; i++ ) {
- if ( !util.ancestorHasStyleProperty( allImgs[i],
'background-color' ) ) {
- allImgs[i].style.background = '#fff';
+ img = allImgs[i];
+ if ( likelyExpectsLightBackground( img ) ) {
+ img.style.background = '#fff';
}
}
// and now, look for Math formula images, and invert them
@@ -314,6 +315,33 @@
}
}
+/**
+/ An heuristic for determining whether an element tagged 'img' is likely to
need a white background applied
+/ (provided a predefined background color is not supplied).
+/
+/ Based on trial, error and observation, this is likely to be the case when a
background color is not
+/ explicitly supplied, and:
+/
+/ (1) The element is in the infobox; or
+/ (2) The element is not in a table. ('img' elements in tables are frequently
generated by random
+/ templates and should not be altered; see, e.g., T85646).
+*/
+function likelyExpectsLightBackground( element ) {
+ return !hasPredefinedBackgroundColor( element ) && ( isInfoboxImage(
element ) || isNotInTable( element ) );
+}
+
+function hasPredefinedBackgroundColor( element ) {
+ return utilities.ancestorHasStyleProperty( element, 'background-color'
);
+}
+
+function isInfoboxImage( element ) {
+ return utilities.ancestorContainsClass( element, 'image' ) &&
utilities.ancestorContainsClass( element, 'infobox' );
+}
+
+function isNotInTable( element ) {
+ return !utilities.isNestedInTable( element );
+}
+
function toggle( nightCSSURL, hasPageLoaded ) {
window.isNightMode = !window.isNightMode;
diff --git a/app/src/main/assets/preview.js b/app/src/main/assets/preview.js
index 286431f..7df3c2a 100644
--- a/app/src/main/assets/preview.js
+++ b/app/src/main/assets/preview.js
@@ -183,13 +183,14 @@
},{"./bridge":2}],4:[function(require,module,exports){
var bridge = require("./bridge");
var loader = require("./loader");
-var util = require("./utilities");
+var utilities = require("./utilities");
function setImageBackgroundsForDarkMode( content ) {
- var allImgs = content.querySelectorAll( 'img' );
+ var img, allImgs = content.querySelectorAll( 'img' );
for ( var i = 0; i < allImgs.length; i++ ) {
- if ( !util.ancestorHasStyleProperty( allImgs[i],
'background-color' ) ) {
- allImgs[i].style.background = '#fff';
+ img = allImgs[i];
+ if ( likelyExpectsLightBackground( img ) ) {
+ img.style.background = '#fff';
}
}
// and now, look for Math formula images, and invert them
@@ -208,6 +209,33 @@
}
}
+/**
+/ An heuristic for determining whether an element tagged 'img' is likely to
need a white background applied
+/ (provided a predefined background color is not supplied).
+/
+/ Based on trial, error and observation, this is likely to be the case when a
background color is not
+/ explicitly supplied, and:
+/
+/ (1) The element is in the infobox; or
+/ (2) The element is not in a table. ('img' elements in
[MediaWiki-commits] [Gerrit] Refine handling of transparent image backgrounds in dark mode - change (apps...wikipedia)
Mholloway has uploaded a new change for review.
https://gerrit.wikimedia.org/r/237400
Change subject: Refine handling of transparent image backgrounds in dark mode
..
Refine handling of transparent image backgrounds in dark mode
The previous patch submitted on this issue (see
https://gerrit.wikimedia.org/r/#/c/235507/) left at least one instance
in which image colors were being improperly stripped; see Manchester
United F.C. > Kit Evolution.
Hence, just checking the image node and all ancestors for a background-color
style element isn't sufficient. So with this patch, a white background is
added to each img element that:
(1) Is not nested in a table, unless that table is the infobox and the
element has the class name 'image'; or
(2) Does not have the style property 'background-color' or an ancestor with
it.
And with this, you may examine soccer jersey colors in dark mode to your
heart's content.
Bug: T108333
Change-Id: I350a71d51dd5a452f85c28ef7ef45807455119b1
---
M app/src/main/assets/bundle.js
M app/src/main/assets/preview.js
M www/js/night.js
3 files changed, 24 insertions(+), 6 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/apps/android/wikipedia
refs/changes/00/237400/1
diff --git a/app/src/main/assets/bundle.js b/app/src/main/assets/bundle.js
index 40929f8..f165d41 100644
--- a/app/src/main/assets/bundle.js
+++ b/app/src/main/assets/bundle.js
@@ -289,12 +289,18 @@
},{"./bridge":2}],8:[function(require,module,exports){
var bridge = require("./bridge");
var loader = require("./loader");
-var util = require("./utilities");
+var utilities = require("./utilities");
+// Add a white background to all elements tagged 'img' that meet one of the
following conditions:
+//
+// (1) Is not nested in a table, unless that table is the infobox and the
element has the class name 'image'; or
+// (2) Does not have the style property 'background-color' or an ancestor with
it.
+//
function setImageBackgroundsForDarkMode( content ) {
var allImgs = content.querySelectorAll( 'img' );
for ( var i = 0; i < allImgs.length; i++ ) {
- if ( !util.ancestorHasStyleProperty( allImgs[i],
'background-color' ) ) {
+ if ( !(( utilities.isNestedInTable( allImgs[i] ) &&
!(utilities.ancestorContainsClass( allImgs[i], 'image' ) &&
utilities.ancestorContainsClass( allImgs[i], 'infobox' )))
+ || utilities.ancestorHasStyleProperty(
allImgs[i], 'background-color' ))) {
allImgs[i].style.background = '#fff';
}
}
diff --git a/app/src/main/assets/preview.js b/app/src/main/assets/preview.js
index 286431f..997b5d1 100644
--- a/app/src/main/assets/preview.js
+++ b/app/src/main/assets/preview.js
@@ -183,12 +183,18 @@
},{"./bridge":2}],4:[function(require,module,exports){
var bridge = require("./bridge");
var loader = require("./loader");
-var util = require("./utilities");
+var utilities = require("./utilities");
+// Add a white background to all elements tagged 'img' that meet one of the
following conditions:
+//
+// (1) Is not nested in a table, unless that table is the infobox and the
element has the class name 'image'; or
+// (2) Does not have the style property 'background-color' or an ancestor with
it.
+//
function setImageBackgroundsForDarkMode( content ) {
var allImgs = content.querySelectorAll( 'img' );
for ( var i = 0; i < allImgs.length; i++ ) {
- if ( !util.ancestorHasStyleProperty( allImgs[i],
'background-color' ) ) {
+ if ( !(( utilities.isNestedInTable( allImgs[i] ) &&
!(utilities.ancestorContainsClass( allImgs[i], 'image' ) &&
utilities.ancestorContainsClass( allImgs[i], 'infobox' )))
+ || utilities.ancestorHasStyleProperty(
allImgs[i], 'background-color' ))) {
allImgs[i].style.background = '#fff';
}
}
diff --git a/www/js/night.js b/www/js/night.js
index b53939f..4ecac3c 100644
--- a/www/js/night.js
+++ b/www/js/night.js
@@ -1,11 +1,17 @@
var bridge = require("./bridge");
var loader = require("./loader");
-var util = require("./utilities");
+var utilities = require("./utilities");
+// Add a white background to all elements tagged 'img' that meet one of the
following conditions:
+//
+// (1) Is not nested in a table, unless that table is the infobox and the
element has the class name 'image'; or
+// (2) Does not have the style property 'background-color' or an ancestor with
it.
+//
function setImageBackgroundsForDarkMode( content ) {
var allImgs = content.querySelectorAll( 'img' );
for ( var i = 0; i < allImgs.length; i++ ) {
- if ( !util.ancestorHasStyleProperty( allImgs[i],
'background-color' ) ) {
+ if ( !(( utilities.isNestedInTable( allImgs[i] ) &&
!(utilities.ancestorContainsClass( allImgs[i], 'image' ) &&
