Phedenskog has uploaded a new change for review.
https://gerrit.wikimedia.org/r/284685
Change subject: Focus on image size instead of page size
......................................................................
Focus on image size instead of page size
The old info module focused on page size even though we can't get the actual
HTML size.
It's better for now to focus on only images (since that is what we can change
as editors).
We now list all images and the size and display a warning if the image size is
above the limit.
Change-Id: I141bec615e9d855e9142c6d51de1b58169e00c45
---
M extension.json
M i18n/en.json
M i18n/qqq.json
A modules/info/ext.PerformanceInspector.imagesize.js
D modules/info/ext.PerformanceInspector.pagesize.js
A modules/templates/imagesize.mustache
D modules/templates/pagesize.mustache
M modules/templates/summary.mustache
8 files changed, 138 insertions(+), 167 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/PerformanceInspector
refs/changes/85/284685/1
diff --git a/extension.json b/extension.json
index d05adbf..04a5c6f 100644
--- a/extension.json
+++ b/extension.json
@@ -24,7 +24,7 @@
"chartist/chartist.js",
"info/ext.PerformanceInspector.modules.js",
"info/ext.PerformanceInspector.backendtime.js",
- "info/ext.PerformanceInspector.pagesize.js"
+ "info/ext.PerformanceInspector.imagesize.js"
],
"styles": [
"chartist/chartist.css",
@@ -38,7 +38,7 @@
"summary.mustache":
"templates/summary.mustache",
"modules.mustache":
"templates/modules.mustache",
"backendtime.mustache":
"templates/backendtime.mustache",
- "pagesize.mustache":
"templates/pagesize.mustache"
+ "imagesize.mustache":
"templates/imagesize.mustache"
},
"messages": [
"performanceinspector-dialog-title",
@@ -64,12 +64,14 @@
"performanceinspector-backendtime-name",
"performanceinspector-backendtime-label",
"performanceinspector-backendtime-summary-above-medium",
- "performanceinspector-pagesize-name",
- "performanceinspector-pagesize-label",
-
"performanceinspector-pagesize-missing-html-size",
-
"performanceinspector-pagesize-column-totalsize",
-
"performanceinspector-pagesize-column-imagesize",
- "performanceinspector-pagesize-column-othersize"
+ "performanceinspector-imagesize-name",
+ "performanceinspector-imagesize-label",
+
"performanceinspector-imagesize-column-image-name",
+ "performanceinspector-imagesize-column-size",
+
"performanceinspector-imagesize-column-image-extra",
+ "performanceinspector-imagesize-too-big",
+ "performanceinspector-imagesize-description",
+ "performanceinspector-modules-summary-images"
]
}
},
@@ -81,4 +83,4 @@
"PerformanceInspectorHooks": "PerformanceInspector.hooks.php"
},
"manifest_version": 1
-}
\ No newline at end of file
+}
diff --git a/i18n/en.json b/i18n/en.json
index 51eedcd..d8b4a06 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -33,11 +33,12 @@
"performanceinspector-backendtime-summary-above-medium": "The page took
$1 {{PLURAL:$1| ms | ms }} to render in the backend.",
"performanceinspector-backendtime-time-spent": "The page took $1
{{PLURAL:$1| ms | ms }} to render in the backend.",
- "performanceinspector-pagesize-name": "Page size",
- "performanceinspector-pagesize-label": "Page size",
- "performanceinspector-pagesize-missing-html-size": "Warning: We miss
the size of the HTML in the total size.",
- "performanceinspector-pagesize-column-totalsize": "Total",
- "performanceinspector-pagesize-column-imagesize": "Image",
- "performanceinspector-pagesize-column-othersize": "Others"
-
-}
\ No newline at end of file
+ "performanceinspector-imagesize-name": "Image size",
+ "performanceinspector-imagesize-label": "Image size",
+ "performanceinspector-imagesize-column-image-name":"Name",
+ "performanceinspector-imagesize-column-size":"Size",
+ "performanceinspector-imagesize-column-image-extra":"Extra",
+ "performanceinspector-imagesize-too-big": "Warning",
+ "performanceinspector-imagesize-description":"Here are all the images
loaded on this page.",
+ "performanceinspector-modules-summary-images": "The page
{{PLURAL:$1|has|have}} $1 {{PLURAL:$1|image|images}} with a total size of $2."
+}
diff --git a/i18n/qqq.json b/i18n/qqq.json
index dc3e890..b46db0e 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -30,12 +30,12 @@
"performanceinspector-backendtime-label": "The label of the backend
part of the dialog",
"performanceinspector-backendtime-summary-above-medium": "Text
displayed when the backend time is larger than a predefined value.",
"performanceinspector-backendtime-time-spent": "Display the total time
spent in backend in the dialog ",
-
- "performanceinspector-pagesize-name": "The name of the page size of the
dialog",
- "performanceinspector-pagesize-label": "The label of the page size of
the dialog",
- "performanceinspector-pagesize-missing-html-size": "Warning text
displayed aboy that we are missing the HTML size from the total size",
- "performanceinspector-pagesize-column-totalsize": "Column name for the
total size",
- "performanceinspector-pagesize-column-imagesize": "Column name for
image size",
- "performanceinspector-pagesize-column-othersize": "Column name for all
other assets except images"
-
-}
\ No newline at end of file
+ "performanceinspector-imagesize-name": "The name of the page size of
the dialog",
+ "performanceinspector-imagesize-label": "The label of the page size of
the dialog",
+ "performanceinspector-imagesize-column-image-name":"Name of the column
displaying the image name",
+ "performanceinspector-imagesize-column-size":"The name of the column
displaying the size of the image",
+ "performanceinspector-imagesize-column-image-extra":"The name of the
column displaying extra information about the images.",
+ "performanceinspector-imagesize-too-big": "Information displayed in the
extra column if the image is too big.",
+ "performanceinspector-imagesize-description":"Description of the image
section, displayed before the table of images.",
+ "performanceinspector-modules-summary-images": "Information from the
images displaying the summary information from the image objects."
+}
diff --git a/modules/info/ext.PerformanceInspector.imagesize.js
b/modules/info/ext.PerformanceInspector.imagesize.js
new file mode 100644
index 0000000..1e70de6
--- /dev/null
+++ b/modules/info/ext.PerformanceInspector.imagesize.js
@@ -0,0 +1,72 @@
+/*jshint undef:false */
+
+( function ( mw, $ ) {
+
+ var imageSizeMetrics = function generateImageSize() {
+ var warningLimit = 6000,
+ totalSize = 0,
+ warnings = 0,
+ images = [],
+ resources,
+ imageSizeTemplate = mw.template.get(
'ext.PerformanceInspector.analyze', 'imagesize.mustache' ),
+ isResourceTimingV2Supported = ( window.performance &&
window.performance.getEntriesByType( 'resource' ) &&
window.performance.getEntriesByType( 'resource' )[ 0 ].encodedBodySize );
+
+ function isImage( name ) {
+ return ( name.match( /\.(jpeg|jpg|gif|png)$/i ) !==
null );
+ }
+
+ function humanSize( bytes ) {
+ var i = 0,
+ units = [ '', ' KiB', ' MiB', ' GiB', ' TiB', '
PiB' ];
+
+ if ( !$.isNumeric( bytes ) || bytes === 0 ) {
+ return bytes;
+ }
+ for ( ; bytes >= 1024; bytes /= 1024 ) {
+ i++;
+ }
+ // Maintain one decimal for kB and above, but don't
+ // add ".0" for bytes.
+ return bytes.toFixed( i > 0 ? 1 : 0 ) + units[ i ];
+ }
+
+ // The browser supports Resource Timing V2
+ if ( isResourceTimingV2Supported ) {
+ resources = window.performance.getEntriesByType(
'resource' );
+
+ for ( i = 0; i < resources.length; i++ ) {
+ if ( isImage( resources[ i ].name ) ) {
+ totalSize += resources[ i
].encodedBodySize;
+ if ( resources[ i ].encodedBodySize >
warningLimit ) {
+ warnings++;
+ }
+ images.push( {
+ name: resources[ i
].name.substring( resources[ i ].name.lastIndexOf( '/' ) + 1 ),
+ url: resources[ i ].name,
+ size: humanSize( resources[ i
].encodedBodySize ),
+ warning: resources[ i
].encodedBodySize > warningLimit ? true : false
+ } );
+ }
+ }
+
+ return {
+ summary: {
+ imagesSummary: mw.msg(
'performanceinspector-modules-summary-images', images.length, humanSize(
totalSize ), warnings )
+ },
+ view: {
+ name:
'performanceinspector-imagesize-name',
+ label:
'performanceinspector-imagesize-label',
+ template: imageSizeTemplate,
+ data: {
+ totalImageSize: totalSize,
+ warningLimit: warningLimit,
+ images: images
+ }
+ }
+ };
+ } else {
+ return {};
+ }
+ };
+ mw.performanceInspector.info.push( imageSizeMetrics );
+}( mediaWiki, jQuery ) );
diff --git a/modules/info/ext.PerformanceInspector.pagesize.js
b/modules/info/ext.PerformanceInspector.pagesize.js
deleted file mode 100644
index 1721def..0000000
--- a/modules/info/ext.PerformanceInspector.pagesize.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/*jshint undef:false */
-
-( function ( mw, $ ) {
-
- var pageSizeMetrics = function generatePageSize() {
- var warningLimit = 4000,
- noOfImages = 0,
- tooBig = [],
- resources,
- size = {
- images: 0,
- html: 0,
- others: 0
- },
- pageSizeTemplate = mw.template.get(
'ext.PerformanceInspector.analyze', 'pagesize.mustache' ),
- isResourceTimingV2Supported = ( window.performance &&
window.performance.getEntriesByType( 'resource' ) &&
window.performance.getEntriesByType( 'resource' )[ 0 ].encodedBodySize );
-
- function isImage( name ) {
- return ( name.match( /\.(jpeg|jpg|gif|png)$/i ) !==
null );
- }
-
- function humanSize( bytes ) {
- var i = 0,
- units = [ '', ' KiB', ' MiB', ' GiB', ' TiB', '
PiB' ];
-
- if ( !$.isNumeric( bytes ) || bytes === 0 ) {
- return bytes;
- }
- for ( ; bytes >= 1024; bytes /= 1024 ) {
- i++;
- }
- // Maintain one decimal for kB and above, but don't
- // add ".0" for bytes.
- return bytes.toFixed( i > 0 ? 1 : 0 ) + units[ i ];
- }
-
- // The browser supports Resource Timing V2
- if ( isResourceTimingV2Supported ) {
- resources = window.performance.getEntriesByType(
'resource' );
-
- for ( i = 0; i < resources.length; i++ ) {
- if ( isImage( resources[ i ].name ) ) {
- size.images = size.images + resources[
i ].encodedBodySize;
- noOfImages++;
- if ( resources[ i ].encodedBodySize >
warningLimit ) {
- tooBig.push( {
- name: resources[ i
].name.substring( resources[ i ].name.lastIndexOf( '/' ) + 1 ),
- size: humanSize(
resources[ i ].encodedBodySize )
- } );
- }
- } else {
- size.others = size.others + resources[
i ].encodedBodySize;
- }
- }
-
- return {
- summary: {
- pageSize: humanSize( size.images +
size.html + size.others )
- },
- view: {
- name:
'performanceinspector-pagesize-name',
- label:
'performanceinspector-pagesize-label',
- template: pageSizeTemplate,
- data: {
- size: {
- images: humanSize(
size.images ),
- html: humanSize(
size.html ),
- others: humanSize(
size.others )
- },
- warningLimit: warningLimit,
- totalSize: humanSize(
size.images + size.html + size.others ),
- tooBig: tooBig,
- showToBig: tooBig.length > 0 ?
true : false,
- noOfImages: noOfImages
- }
- }
- };
- } else {
- return {};
- }
- };
- mw.performanceInspector.info.push( pageSizeMetrics );
-}( mediaWiki, jQuery ) );
diff --git a/modules/templates/imagesize.mustache
b/modules/templates/imagesize.mustache
new file mode 100644
index 0000000..e11d3a1
--- /dev/null
+++ b/modules/templates/imagesize.mustache
@@ -0,0 +1,33 @@
+<h4>{{#msg}}performanceinspector-imagesize-title{{/msg}}</h4>
+
+<p>{{#msg}}performanceinspector-imagesize-description{{/msg}}</p>
+<table class="wikitable">
+ <thead>
+ <tr>
+ <th>
+
{{#msg}}performanceinspector-imagesize-column-image-name{{/msg}}
+ </th>
+ <th>
+
{{#msg}}performanceinspector-imagesize-column-size{{/msg}}
+ </th>
+ <th>
+
{{#msg}}performanceinspector-imagesize-column-image-extra{{/msg}}
+ </th>
+ </tr>
+ </thead>
+ {{#images}}
+ <tr>
+ <td>
+ <a href="{{url}}">{{name}}</a>
+ </td>
+ <td>
+ {{size}}
+ </td>
+ <td>
+ {{#warning}}
+
{{#msg}}performanceinspector-imagesize-too-big{{/msg}}
+ {{/warning}}
+ </td>
+ </tr>
+ {{/images}}
+</table>
diff --git a/modules/templates/pagesize.mustache
b/modules/templates/pagesize.mustache
deleted file mode 100644
index 8f28aaf..0000000
--- a/modules/templates/pagesize.mustache
+++ /dev/null
@@ -1,58 +0,0 @@
-<h4>{{#msg}}performanceinspector-pagesize-title{{/msg}}</h4>
-
-<p>{{#msg}}performanceinspector-pagesize-missing-html-size{{/msg}}</p>
-<table class="wikitable">
- <thead>
- <tr>
- <th>
-
{{#msg}}performanceinspector-pagesize-column-totalsize{{/msg}}
- </th>
- <th>
-
{{#msg}}performanceinspector-pagesize-column-imagesize{{/msg}}
- </th>
- <th>
-
{{#msg}}performanceinspector-pagesize-column-othersize{{/msg}}
- </th>
- </tr>
- </thead>
- <tr>
- <td>
- {{totalSize}}
- </td>
- <td>
- {{size.images}}
- </td>
- <td>
- {{size.others}}
- </td>
- </tr>
-</table>
-
-{{#showToBig}}
-<h5>Image(s) larger than {{warningLimit}} bytes</h5>
-
-<table class="wikitable">
- <thead>
- <tr>
- <th>
- Name
- </th>
- <th>
- Size
- </th>
- </tr>
- </thead>
- {{#tooBig}}
- <tr>
- <td>
- {{name}}
- </td>
- <td>
- {{size}}
- </td>
- </tr>
- {{/tooBig}}
-</table>
-
-
-{{/showToBig}}
diff --git a/modules/templates/summary.mustache
b/modules/templates/summary.mustache
index 27c9481..3426227 100644
--- a/modules/templates/summary.mustache
+++ b/modules/templates/summary.mustache
@@ -16,4 +16,8 @@
<p>
{{backendTime}}
</p>
+
+ {{#imagesSummary}}
+ {{imagesSummary}}
+ {{/imagesSummary}}
</div>
--
To view, visit https://gerrit.wikimedia.org/r/284685
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I141bec615e9d855e9142c6d51de1b58169e00c45
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/PerformanceInspector
Gerrit-Branch: master
Gerrit-Owner: Phedenskog <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
