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' ) && utilities.ancestorContainsClass( allImgs[i], 'infobox' ))) + || utilities.ancestorHasStyleProperty( allImgs[i], 'background-color' ))) { allImgs[i].style.background = '#fff'; } } -- To view, visit https://gerrit.wikimedia.org/r/237400 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I350a71d51dd5a452f85c28ef7ef45807455119b1 Gerrit-PatchSet: 1 Gerrit-Project: apps/android/wikipedia Gerrit-Branch: master Gerrit-Owner: Mholloway <mhollo...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
