[MediaWiki-commits] [Gerrit] JS performance optimization - change (labs...crosswatch)
Sitic has submitted this change and it was merged.
Change subject: JS performance optimization
..
JS performance optimization
* give watchlist events a unique id to track them by (reusable DOM nodes)
* sort watchlist events when adding instead of a filter
* combined watchlist filters
* filtering is now done in JS not not the HTML
* using ngInfiniteScroll to display only a limited list of entries first
* debouncing when necessary
* various small fixes
Bug: T102569
Change-Id: Ib822ae65aecaf0c1f8fb15a33d338d6f56dad0f2
---
M backend/celery/tasks.py
M frontend/bower.json
M frontend/src/app/filters.js
M frontend/src/app/index.css
M frontend/src/app/index.js
M frontend/src/app/main/main.controller.js
M frontend/src/app/services.js
M frontend/src/components/settings/settings.controller.js
M frontend/src/components/watchlist/edit.directive.html
M frontend/src/components/watchlist/entry.directive.html
M frontend/src/components/watchlist/entry.directive.js
M frontend/src/components/watchlist/logevent.directive.html
M frontend/src/components/watchlist/watchlist.controller.js
M frontend/src/components/watchlist/watchlist.html
M frontend/src/i18n/locale-en.json
15 files changed, 213 insertions(+), 79 deletions(-)
Approvals:
Sitic: Verified; Looks good to me, approved
diff --git a/backend/celery/tasks.py b/backend/celery/tasks.py
index 408ee0a..86e5a7a 100644
--- a/backend/celery/tasks.py
+++ b/backend/celery/tasks.py
@@ -4,6 +4,7 @@
# Copyright (C) 2015 Jan Lebert
from __future__ import absolute_import
+from uuid import uuid4
from contextlib import closing
import MySQLdb
@@ -143,6 +144,9 @@
item['minor'] = m
if 'new' in item:
item['new'] = n
+
+# random id
+item['id'] = uuid4().hex[:8]
items.append(item)
message = {
'msgtype': 'watchlist',
diff --git a/frontend/bower.json b/frontend/bower.json
index dd3f642..a0e0f36 100644
--- a/frontend/bower.json
+++ b/frontend/bower.json
@@ -15,7 +15,8 @@
angular-local-storage: 0.2.x,
angular-motion: ~0.4.2,
angular-material: ~0.10.0,
-material-design-icons: ~2.0.0
+material-design-icons: ~2.0.0,
+ngInfiniteScroll: ~1.2.1
},
devDependencies: {
angular-mocks: ~1.4.0
diff --git a/frontend/src/app/filters.js b/frontend/src/app/filters.js
index b057e63..9209e64 100644
--- a/frontend/src/app/filters.js
+++ b/frontend/src/app/filters.js
@@ -3,6 +3,7 @@
.module('crosswatch')
.filter('urlEncode', urlEncodeFilter)
.filter('list', listFilter)
+ .filter('watchlist', watchlistFilter)
.filter('projects', projectsFilter)
.filter('editflags', editflagsFilter)
;
@@ -33,6 +34,45 @@
}
/**
+ * combined filter for watchlist
+ */
+function watchlistFilter () {
+ return function (items, config) {
+return items.filter(filter, config);
+ };
+
+ function filter (item) {
+var bool = projectsFilter(item, this.projectsSelected);
+
+if (bool) {
+ bool = editsflagsFilter(item, this.editflags);
+}
+return bool;
+ }
+
+ /**
+ * Filters watchlist based on selected / blacklisted wikis
+ */
+ function projectsFilter (item, projects) {
+return (projects.indexOf(item.project) -1);
+ }
+
+ /**
+ * Filters watchlist based on editflags (minor, bot, registered)
+ */
+ function editsflagsFilter (item, flags) {
+if (item.type === 'log') {
+ return true;
+}
+var minor = flags.minor || !item.minor;
+var bot = flags.bot || !item.bot;
+var anon = flags.anon || !(item.anon === );
+var registered = flags.registered || !(item.userid !== 0);
+return (minor bot anon registered);
+ }
+}
+
+/**
* Filters watchlist based on selected / blacklisted wikis
*/
function projectsFilter () {
diff --git a/frontend/src/app/index.css b/frontend/src/app/index.css
index e39a44b..9a44614 100644
--- a/frontend/src/app/index.css
+++ b/frontend/src/app/index.css
@@ -210,7 +210,8 @@
}
/* https://github.com/angular/material/issues/2769 */
-_:-ms-fullscreen, :root /* IE11 */ md-select-label *:first-child{
+_:-ms-fullscreen, :root /* IE11+ */ md-select-label :first-child{
flex-basis: auto;
- overflow: visible;
+ max-width: 100%;
+ overflow: hidden;
}
diff --git a/frontend/src/app/index.js b/frontend/src/app/index.js
index bc1a3e1..7fd5700 100644
--- a/frontend/src/app/index.js
+++ b/frontend/src/app/index.js
@@ -6,10 +6,11 @@
'ngRoute',
'ngMaterial',
'LocalStorageModule',
-'angular-translate-storage',
'pascalprecht.translate',
+'angular-translate-storage',
'bd.sockjs',
-'angularMoment'
+'angularMoment',
+'infinite-scroll'
])
.config(routeConfig)
.config(locationConfig)
diff --git a/frontend/src/app/main/main.controller.js
b/frontend/src/app/main/main.controller.js
index 09f4719..15e465d 100644
--- a/frontend/src/app/main/main.controller.js
+++
[MediaWiki-commits] [Gerrit] JS performance optimization - change (labs...crosswatch)
Sitic has uploaded a new change for review.
https://gerrit.wikimedia.org/r/219477
Change subject: JS performance optimization
..
JS performance optimization
* give watchlist events a unique id to track them by (reusable DOM nodes)
* sort watchlist events when adding instead of a filter
* combined watchlist filters
* filtering is now done in JS not not the HTML
* using ngInfiniteScroll to display only a limited list of entries first
* debouncing when necessary
* various small fixes
Bug: T102569
Change-Id: Ib822ae65aecaf0c1f8fb15a33d338d6f56dad0f2
---
M backend/celery/tasks.py
M frontend/bower.json
M frontend/src/app/filters.js
M frontend/src/app/index.css
M frontend/src/app/index.js
M frontend/src/app/main/main.controller.js
M frontend/src/app/services.js
M frontend/src/components/settings/settings.controller.js
M frontend/src/components/watchlist/edit.directive.html
M frontend/src/components/watchlist/entry.directive.html
M frontend/src/components/watchlist/entry.directive.js
M frontend/src/components/watchlist/logevent.directive.html
M frontend/src/components/watchlist/watchlist.controller.js
M frontend/src/components/watchlist/watchlist.html
M frontend/src/i18n/locale-en.json
15 files changed, 213 insertions(+), 79 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/labs/tools/crosswatch
refs/changes/77/219477/1
diff --git a/backend/celery/tasks.py b/backend/celery/tasks.py
index 408ee0a..86e5a7a 100644
--- a/backend/celery/tasks.py
+++ b/backend/celery/tasks.py
@@ -4,6 +4,7 @@
# Copyright (C) 2015 Jan Lebert
from __future__ import absolute_import
+from uuid import uuid4
from contextlib import closing
import MySQLdb
@@ -143,6 +144,9 @@
item['minor'] = m
if 'new' in item:
item['new'] = n
+
+# random id
+item['id'] = uuid4().hex[:8]
items.append(item)
message = {
'msgtype': 'watchlist',
diff --git a/frontend/bower.json b/frontend/bower.json
index dd3f642..a0e0f36 100644
--- a/frontend/bower.json
+++ b/frontend/bower.json
@@ -15,7 +15,8 @@
angular-local-storage: 0.2.x,
angular-motion: ~0.4.2,
angular-material: ~0.10.0,
-material-design-icons: ~2.0.0
+material-design-icons: ~2.0.0,
+ngInfiniteScroll: ~1.2.1
},
devDependencies: {
angular-mocks: ~1.4.0
diff --git a/frontend/src/app/filters.js b/frontend/src/app/filters.js
index b057e63..9209e64 100644
--- a/frontend/src/app/filters.js
+++ b/frontend/src/app/filters.js
@@ -3,6 +3,7 @@
.module('crosswatch')
.filter('urlEncode', urlEncodeFilter)
.filter('list', listFilter)
+ .filter('watchlist', watchlistFilter)
.filter('projects', projectsFilter)
.filter('editflags', editflagsFilter)
;
@@ -33,6 +34,45 @@
}
/**
+ * combined filter for watchlist
+ */
+function watchlistFilter () {
+ return function (items, config) {
+return items.filter(filter, config);
+ };
+
+ function filter (item) {
+var bool = projectsFilter(item, this.projectsSelected);
+
+if (bool) {
+ bool = editsflagsFilter(item, this.editflags);
+}
+return bool;
+ }
+
+ /**
+ * Filters watchlist based on selected / blacklisted wikis
+ */
+ function projectsFilter (item, projects) {
+return (projects.indexOf(item.project) -1);
+ }
+
+ /**
+ * Filters watchlist based on editflags (minor, bot, registered)
+ */
+ function editsflagsFilter (item, flags) {
+if (item.type === 'log') {
+ return true;
+}
+var minor = flags.minor || !item.minor;
+var bot = flags.bot || !item.bot;
+var anon = flags.anon || !(item.anon === );
+var registered = flags.registered || !(item.userid !== 0);
+return (minor bot anon registered);
+ }
+}
+
+/**
* Filters watchlist based on selected / blacklisted wikis
*/
function projectsFilter () {
diff --git a/frontend/src/app/index.css b/frontend/src/app/index.css
index e39a44b..9a44614 100644
--- a/frontend/src/app/index.css
+++ b/frontend/src/app/index.css
@@ -210,7 +210,8 @@
}
/* https://github.com/angular/material/issues/2769 */
-_:-ms-fullscreen, :root /* IE11 */ md-select-label *:first-child{
+_:-ms-fullscreen, :root /* IE11+ */ md-select-label :first-child{
flex-basis: auto;
- overflow: visible;
+ max-width: 100%;
+ overflow: hidden;
}
diff --git a/frontend/src/app/index.js b/frontend/src/app/index.js
index bc1a3e1..7fd5700 100644
--- a/frontend/src/app/index.js
+++ b/frontend/src/app/index.js
@@ -6,10 +6,11 @@
'ngRoute',
'ngMaterial',
'LocalStorageModule',
-'angular-translate-storage',
'pascalprecht.translate',
+'angular-translate-storage',
'bd.sockjs',
-'angularMoment'
+'angularMoment',
+'infinite-scroll'
])
.config(routeConfig)
.config(locationConfig)
diff --git a/frontend/src/app/main/main.controller.js
b/frontend/src/app/main/main.controller.js
index 09f4719..15e465d
