From 2c32b6de0997069e853950ce59a6bce637da80cf Mon Sep 17 00:00:00 2001 From: Timo Tijhof Date: Sun, 3 Mar 2019 01:51:50 +0000 Subject: [PATCH] resources: Remove deprecated 'jquery.hidpi' module Deprecated in 1.32 and has no further purpose in its current form as a jQuery plugin for , which we now use natively without fallback. The remaining logic for bracketed window.devicePixelRatio is simple enough to inline as needed without the cruft and overhead that comes with a centralised approach. Bug: T202154 Change-Id: I729dfabcbb40a0a794d6b166a584f45a64ac0338 --- RELEASE-NOTES-1.33 | 1 + maintenance/dictionary/mediawiki.dic | 1 - resources/Resources.php | 5 - resources/src/jquery/jquery.hidpi.js | 177 ------------------ tests/qunit/QUnitTestResources.php | 2 - .../resources/jquery/jquery.hidpi.test.js | 38 ---- 6 files changed, 1 insertion(+), 223 deletions(-) delete mode 100644 resources/src/jquery/jquery.hidpi.js delete mode 100644 tests/qunit/suites/resources/jquery/jquery.hidpi.test.js diff --git a/RELEASE-NOTES-1.33 b/RELEASE-NOTES-1.33 index cd2d78a0b3..c2bb4cfb62 100644 --- a/RELEASE-NOTES-1.33 +++ b/RELEASE-NOTES-1.33 @@ -271,6 +271,7 @@ because of Phabricator reports. has been removed. * The 'jquery.xmldom' module has been removed. * The 'jquery.mockjax' module has been removed. +* The 'jquery.hidpi' module, deprecated in 1.32, has been removed. * AuthPlugin and related code, deprecated in 1.27, has been removed. Extensions should instead use AuthManager. The following no longer exist: * The AuthPlugin class itself and the related AuthPluginUser class and i18n diff --git a/maintenance/dictionary/mediawiki.dic b/maintenance/dictionary/mediawiki.dic index eca58cd180..fc17a3dd0e 100644 --- a/maintenance/dictionary/mediawiki.dic +++ b/maintenance/dictionary/mediawiki.dic @@ -1792,7 +1792,6 @@ hidepatrolled hideredirects hiderevision hideuser -hidpi highlimit highmax highuse diff --git a/resources/Resources.php b/resources/Resources.php index d6b1ec02e6..703154ecd0 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -232,11 +232,6 @@ return [ 'scripts' => 'resources/src/jquery/jquery.getAttrs.js', 'targets' => [ 'desktop', 'mobile' ], ], - 'jquery.hidpi' => [ - 'deprecated' => 'Use of the srcset polyfill is deprecated since MediaWiki 1.32.0', - 'scripts' => 'resources/src/jquery/jquery.hidpi.js', - 'targets' => [ 'desktop', 'mobile' ], - ], 'jquery.highlightText' => [ 'scripts' => 'resources/src/jquery/jquery.highlightText.js', 'dependencies' => [ diff --git a/resources/src/jquery/jquery.hidpi.js b/resources/src/jquery/jquery.hidpi.js deleted file mode 100644 index 025e6c23e1..0000000000 --- a/resources/src/jquery/jquery.hidpi.js +++ /dev/null @@ -1,177 +0,0 @@ -/** - * Responsive images based on `srcset` and `window.devicePixelRatio` emulation where needed. - * - * Call `.hidpi()` on a document or part of a document to proces image srcsets within that section. - * - * `$.devicePixelRatio()` can be used as a substitute for `window.devicePixelRatio`. - * It provides a familiar interface to retrieve the pixel ratio for browsers that don't - * implement `window.devicePixelRatio` but do have a different way of getting it. - * - * @class jQuery.plugin.hidpi - */ -( function () { - - /** - * Get reported or approximate device pixel ratio. - * - * - 1.0 means 1 CSS pixel is 1 hardware pixel - * - 2.0 means 1 CSS pixel is 2 hardware pixels - * - etc. - * - * Uses `window.devicePixelRatio` if available, or CSS media queries on IE. - * - * @static - * @inheritable - * @return {number} Device pixel ratio - */ - $.devicePixelRatio = function () { - if ( window.devicePixelRatio !== undefined ) { - // Most web browsers: - // * WebKit/Blink (Safari, Chrome, Android browser, etc) - // * Opera - // * Firefox 18+ - // * Microsoft Edge (Windows 10) - return window.devicePixelRatio; - } else if ( window.msMatchMedia !== undefined ) { - // Windows 8 desktops / tablets, probably Windows Phone 8 - // - // IE 10/11 doesn't report pixel ratio directly, but we can get the - // screen DPI and divide by 96. We'll bracket to [1, 1.5, 2.0] for - // simplicity, but you may get different values depending on zoom - // factor, size of screen and orientation in Metro IE. - if ( window.msMatchMedia( '(min-resolution: 192dpi)' ).matches ) { - return 2; - } else if ( window.msMatchMedia( '(min-resolution: 144dpi)' ).matches ) { - return 1.5; - } else { - return 1; - } - } else { - // Legacy browsers... - // Assume 1 if unknown. - return 1; - } - }; - - /** - * Bracket a given device pixel ratio to one of [1, 1.5, 2]. - * - * This is useful for grabbing images on the fly with sizes based on the display - * density, without causing slowdown and extra thumbnail renderings on devices - * that are slightly different from the most common sizes. - * - * The bracketed ratios match the default 'srcset' output on MediaWiki thumbnails, - * so will be consistent with default renderings. - * - * @static - * @inheritable - * @param {number} baseRatio Base ratio - * @return {number} Device pixel ratio - */ - $.bracketDevicePixelRatio = function ( baseRatio ) { - if ( baseRatio > 1.5 ) { - return 2; - } else if ( baseRatio > 1 ) { - return 1.5; - } else { - return 1; - } - }; - - /** - * Get reported or approximate device pixel ratio, bracketed to [1, 1.5, 2]. - * - * This is useful for grabbing images on the fly with sizes based on the display - * density, without causing slowdown and extra thumbnail renderings on devices - * that are slightly different from the most common sizes. - * - * The bracketed ratios match the default 'srcset' output on MediaWiki thumbnails, - * so will be consistent with default renderings. - * - * - 1.0 means 1 CSS pixel is 1 hardware pixel - * - 1.5 means 1 CSS pixel is 1.5 hardware pixels - * - 2.0 means 1 CSS pixel is 2 hardware pixels - * - * @static - * @inheritable - * @return {number} Device pixel ratio - */ - $.bracketedDevicePixelRatio = function () { - return $.bracketDevicePixelRatio( $.devicePixelRatio() ); - }; - - /** - * Implement responsive images based on srcset attributes, if browser has no - * native srcset support. - * - * @return {jQuery} This selection - * @chainable - */ - $.fn.hidpi = function () { - var $target = this, - // TODO add support for dpi media query checks on Firefox, IE - devicePixelRatio = $.devicePixelRatio(), - testImage = new Image(); - - if ( devicePixelRatio > 1 && testImage.srcset === undefined ) { - // No native srcset support. - $target.find( 'img' ).each( function () { - var $img = $( this ), - srcset = $img.attr( 'srcset' ), - match; - if ( typeof srcset === 'string' && srcset !== '' ) { - match = $.matchSrcSet( devicePixelRatio, srcset ); - if ( match !== null ) { - $img.attr( 'src', match ); - } - } - } ); - } - - return $target; - }; - - /** - * Match a srcset entry for the given device pixel ratio - * - * Exposed for testing. - * - * @private - * @static - * @param {number} devicePixelRatio - * @param {string} srcset - * @return {Mixed} null or the matching src string - */ - $.matchSrcSet = function ( devicePixelRatio, srcset ) { - var candidates, - candidate, - bits, - src, - i, - ratioStr, - ratio, - selectedRatio = 1, - selectedSrc = null; - candidates = srcset.split( / *, */ ); - for ( i = 0; i < candidates.length; i++ ) { - candidate = candidates[ i ]; - bits = candidate.split( / +/ ); - src = bits[ 0 ]; - if ( bits.length > 1 && bits[ 1 ].charAt( bits[ 1 ].length - 1 ) === 'x' ) { - ratioStr = bits[ 1 ].slice( 0, -1 ); - ratio = parseFloat( ratioStr ); - if ( ratio <= devicePixelRatio && ratio > selectedRatio ) { - selectedRatio = ratio; - selectedSrc = src; - } - } - } - return selectedSrc; - }; - - /** - * @class jQuery - * @mixins jQuery.plugin.hidpi - */ - -}() ); diff --git a/tests/qunit/QUnitTestResources.php b/tests/qunit/QUnitTestResources.php index d6ede4f53b..4969a8b45f 100644 --- a/tests/qunit/QUnitTestResources.php +++ b/tests/qunit/QUnitTestResources.php @@ -41,7 +41,6 @@ return [ 'tests/qunit/suites/resources/jquery/jquery.color.test.js', 'tests/qunit/suites/resources/jquery/jquery.colorUtil.test.js', 'tests/qunit/suites/resources/jquery/jquery.getAttrs.test.js', - 'tests/qunit/suites/resources/jquery/jquery.hidpi.test.js', 'tests/qunit/suites/resources/jquery/jquery.highlightText.test.js', 'tests/qunit/suites/resources/jquery/jquery.lengthLimit.test.js', 'tests/qunit/suites/resources/jquery/jquery.makeCollapsible.test.js', @@ -101,7 +100,6 @@ return [ 'jquery.color', 'jquery.colorUtil', 'jquery.getAttrs', - 'jquery.hidpi', 'jquery.highlightText', 'jquery.lengthLimit', 'jquery.makeCollapsible', diff --git a/tests/qunit/suites/resources/jquery/jquery.hidpi.test.js b/tests/qunit/suites/resources/jquery/jquery.hidpi.test.js deleted file mode 100644 index cb09180b21..0000000000 --- a/tests/qunit/suites/resources/jquery/jquery.hidpi.test.js +++ /dev/null @@ -1,38 +0,0 @@ -( function () { - QUnit.module( 'jquery.hidpi', QUnit.newMwEnvironment() ); - - QUnit.test( 'devicePixelRatio', function ( assert ) { - var devicePixelRatio = $.devicePixelRatio(); - assert.strictEqual( typeof devicePixelRatio, 'number', '$.devicePixelRatio() returns a number' ); - } ); - - QUnit.test( 'bracketedDevicePixelRatio', function ( assert ) { - var ratio = $.bracketedDevicePixelRatio(); - assert.strictEqual( typeof ratio, 'number', '$.bracketedDevicePixelRatio() returns a number' ); - } ); - - QUnit.test( 'bracketDevicePixelRatio', function ( assert ) { - assert.strictEqual( $.bracketDevicePixelRatio( 0.75 ), 1, '0.75 gives 1' ); - assert.strictEqual( $.bracketDevicePixelRatio( 1 ), 1, '1 gives 1' ); - assert.strictEqual( $.bracketDevicePixelRatio( 1.25 ), 1.5, '1.25 gives 1.5' ); - assert.strictEqual( $.bracketDevicePixelRatio( 1.5 ), 1.5, '1.5 gives 1.5' ); - assert.strictEqual( $.bracketDevicePixelRatio( 1.75 ), 2, '1.75 gives 2' ); - assert.strictEqual( $.bracketDevicePixelRatio( 2 ), 2, '2 gives 2' ); - assert.strictEqual( $.bracketDevicePixelRatio( 2.5 ), 2, '2.5 gives 2' ); - assert.strictEqual( $.bracketDevicePixelRatio( 3 ), 2, '3 gives 2' ); - } ); - - QUnit.test( 'matchSrcSet', function ( assert ) { - var srcset = 'onefive.png 1.5x, two.png 2x'; - - // Nice exact matches - assert.strictEqual( $.matchSrcSet( 1, srcset ), null, '1.0 gives no match' ); - assert.strictEqual( $.matchSrcSet( 1.5, srcset ), 'onefive.png', '1.5 gives match' ); - assert.strictEqual( $.matchSrcSet( 2, srcset ), 'two.png', '2 gives match' ); - - // Non-exact matches; should return the next-biggest specified - assert.strictEqual( $.matchSrcSet( 1.25, srcset ), null, '1.25 gives no match' ); - assert.strictEqual( $.matchSrcSet( 1.75, srcset ), 'onefive.png', '1.75 gives match to 1.5' ); - assert.strictEqual( $.matchSrcSet( 2.25, srcset ), 'two.png', '2.25 gives match to 2' ); - } ); -}() ); -- 2.20.1