Merge branch 'breakpoint-checker-performance' into 'master'

Increase performance of the breakpoint size checker

See merge request !13454

12 files changed, 48 insertions, 92 deletions

diff --git a/app/assets/javascripts/boards/components/modal/list.js b/app/assets/javascripts/boards/components/modal/list.js
index 363269c0d5d..b4a45feee4d 100644
--- a/app/assets/javascripts/boards/components/modal/list.js
+++ b/app/assets/javascripts/boards/components/modal/list.js
@@ -1,7 +1,7 @@
 /* global ListIssue */
-/* global bp */
 
 import Vue from 'vue';
+import bp from '../../../breakpoints';
 
 const ModalStore = gl.issueBoards.ModalStore;
 
diff --git a/app/assets/javascripts/breakpoints.js b/app/assets/javascripts/breakpoints.js
index 2c1f988d987..7951348d8b2 100644
--- a/app/assets/javascripts/breakpoints.js
+++ b/app/assets/javascripts/breakpoints.js
@@ -1,66 +1,19 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, one-var-declaration-per-line, quotes, no-shadow, prefer-arrow-callback, prefer-template, consistent-return, no-return-assign, new-parens, no-param-reassign, max-len */
+export const breakpoints = {
+  lg: 1200,
+  md: 992,
+  sm: 768,
+  xs: 0,
+};
 
-var Breakpoints = (function() {
-  var BreakpointInstance, instance;
+const BreakpointInstance = {
+  windowWidth: () => window.innerWidth,
+  getBreakpointSize() {
+    const windowWidth = this.windowWidth();
 
-  function Breakpoints() {}
+    const breakpoint = Object.keys(breakpoints).find(key => windowWidth > breakpoints[key]);
 
-  instance = null;
+    return breakpoint;
+  },
+};
 
-  BreakpointInstance = (function() {
-    var BREAKPOINTS;
-
-    BREAKPOINTS = ["xs", "sm", "md", "lg"];
-
-    function BreakpointInstance() {
-      this.setup();
-    }
-
-    BreakpointInstance.prototype.setup = function() {
-      var allDeviceSelector, els;
-      allDeviceSelector = BREAKPOINTS.map(function(breakpoint) {
-        return ".device-" + breakpoint;
-      });
-      if ($(allDeviceSelector.join(",")).length) {
-        return;
-      }
-      // Create all the elements
-      els = $.map(BREAKPOINTS, function(breakpoint) {
-        return "<div class='device-" + breakpoint + " visible-" + breakpoint + "'></div>";
-      });
-      return $("body").append(els.join(''));
-    };
-
-    BreakpointInstance.prototype.visibleDevice = function() {
-      var allDeviceSelector;
-      allDeviceSelector = BREAKPOINTS.map(function(breakpoint) {
-        return ".device-" + breakpoint;
-      });
-      return $(allDeviceSelector.join(",")).filter(":visible");
-    };
-
-    BreakpointInstance.prototype.getBreakpointSize = function() {
-      var $visibleDevice;
-      $visibleDevice = this.visibleDevice;
-      // TODO: Consider refactoring in light of turbolinks removal.
-      // the page refreshed via turbolinks
-      if (!$visibleDevice().length) {
-        this.setup();
-      }
-      $visibleDevice = this.visibleDevice();
-      return $visibleDevice.attr("class").split("visible-")[1];
-    };
-
-    return BreakpointInstance;
-  })();
-
-  Breakpoints.get = function() {
-    return instance != null ? instance : instance = new BreakpointInstance;
-  };
-
-  return Breakpoints;
-})();
-
-$(() => { window.bp = Breakpoints.get(); });
-
-window.Breakpoints = Breakpoints;
+export default BreakpointInstance;
diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js
index 940326dcd33..ae1a23132a7 100644
--- a/app/assets/javascripts/build.js
+++ b/app/assets/javascripts/build.js
@@ -1,8 +1,7 @@
 /* eslint-disable func-names, wrap-iife, no-use-before-define,
 consistent-return, prefer-rest-params */
-/* global Breakpoints */
-
 import _ from 'underscore';
+import bp from './breakpoints';
 import { bytesToKiB } from './lib/utils/number_utils';
 
 window.Build = (function () {
@@ -34,8 +33,6 @@ window.Build = (function () {
     this.$scrollBottomBtn = $('.js-scroll-down');
 
     clearTimeout(Build.timeout);
-    // Init breakpoint checker
-    this.bp = Breakpoints.get();
 
     this.initSidebar();
     this.populateJobs(this.buildStage);
@@ -230,7 +227,7 @@ window.Build = (function () {
   };
 
   Build.prototype.shouldHideSidebarForViewport = function () {
-    const bootstrapBreakpoint = this.bp.getBreakpointSize();
+    const bootstrapBreakpoint = bp.getBreakpointSize();
     return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
   };
 
diff --git a/app/assets/javascripts/fly_out_nav.js b/app/assets/javascripts/fly_out_nav.js
index ad957f132b8..56744a440e7 100644
--- a/app/assets/javascripts/fly_out_nav.js
+++ b/app/assets/javascripts/fly_out_nav.js
@@ -1,6 +1,5 @@
-/* global bp */
 import Cookies from 'js-cookie';
-import './breakpoints';
+import bp from './breakpoints';
 
 export const canShowActiveSubItems = (el) => {
   const isHiddenByMedia = bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md';
diff --git a/app/assets/javascripts/issuable_context.js b/app/assets/javascripts/issuable_context.js
index 26392db4b5b..70c364e51fe 100644
--- a/app/assets/javascripts/issuable_context.js
+++ b/app/assets/javascripts/issuable_context.js
@@ -1,7 +1,6 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-new, comma-dangle, quotes, prefer-arrow-callback, consistent-return, one-var, no-var, one-var-declaration-per-line, no-underscore-dangle, max-len */
-/* global bp */
-
 import Cookies from 'js-cookie';
+import bp from './breakpoints';
 import UsersSelect from './users_select';
 
 const PARTICIPANTS_ROW_COUNT = 7;
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index e0c61a474c6..37f531c78f4 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -1,5 +1,4 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, quotes, consistent-return, prefer-arrow-callback, comma-dangle, object-shorthand, no-new, max-len, no-multi-spaces, import/newline-after-import, import/first */
-/* global bp */
 /* global Flash */
 /* global ConfirmDangerModal */
 /* global Aside */
@@ -66,7 +65,7 @@ import './api';
 import './aside';
 import './autosave';
 import loadAwardsHandler from './awards_handler';
-import './breakpoints';
+import bp from './breakpoints';
 import './broadcast_message';
 import './build';
 import './build_artifacts';
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 0294da3f20d..5a9b3d19f84 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -1,13 +1,12 @@
 /* eslint-disable no-new, class-methods-use-this */
-/* global Breakpoints */
 /* global Flash */
 /* global notes */
 
 import Cookies from 'js-cookie';
-import './breakpoints';
 import './flash';
 import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import initChangesDropdown from './init_changes_dropdown';
+import bp from './breakpoints';
 
 /* eslint-disable max-len */
 // MergeRequestTabs
@@ -134,7 +133,7 @@ import initChangesDropdown from './init_changes_dropdown';
         this.destroyPipelinesView();
       } else if (this.isDiffAction(action)) {
         this.loadDiff($target.attr('href'));
-        if (Breakpoints.get().getBreakpointSize() !== 'lg') {
+        if (bp.getBreakpointSize() !== 'lg') {
           this.shrinkView();
         }
         if (this.diffViewType() === 'parallel') {
@@ -145,7 +144,7 @@ import initChangesDropdown from './init_changes_dropdown';
         this.resetViewContainer();
         this.mountPipelinesView();
       } else {
-        if (Breakpoints.get().getBreakpointSize() !== 'xs') {
+        if (bp.getBreakpointSize() !== 'xs') {
           this.expandView();
         }
         this.resetViewContainer();
@@ -392,7 +391,7 @@ import initChangesDropdown from './init_changes_dropdown';
 
       // Screen space on small screens is usually very sparse
       // So we dont affix the tabs on these
-      if (Breakpoints.get().getBreakpointSize() === 'xs' || !$tabs.length) return;
+      if (bp.getBreakpointSize() === 'xs' || !$tabs.length) return;
 
       /**
         If the browser does not support position sticky, it returns the position as static.
diff --git a/app/assets/javascripts/monitoring/components/monitoring_column.vue b/app/assets/javascripts/monitoring/components/monitoring_column.vue
index c376baea79c..407af51cb7a 100644
--- a/app/assets/javascripts/monitoring/components/monitoring_column.vue
+++ b/app/assets/javascripts/monitoring/components/monitoring_column.vue
@@ -1,5 +1,4 @@
 <script>
-  /* global Breakpoints */
   import d3 from 'd3';
   import monitoringLegends from './monitoring_legends.vue';
   import monitoringFlag from './monitoring_flag.vue';
@@ -8,6 +7,7 @@
   import eventHub from '../event_hub';
   import measurements from '../utils/measurements';
   import { formatRelevantDigits } from '../../lib/utils/number_utils';
+  import bp from '../../breakpoints';
 
   const bisectDate = d3.bisector(d => d.time).left;
 
@@ -42,7 +42,6 @@
         yScale: {},
         margin: {},
         data: [],
-        breakpointHandler: Breakpoints.get(),
         unitOfDisplay: '',
         areaColorRgb: '#8fbce8',
         lineColorRgb: '#1f78d1',
@@ -96,7 +95,7 @@
 
     methods: {
       draw() {
-        const breakpointSize = this.breakpointHandler.getBreakpointSize();
+        const breakpointSize = bp.getBreakpointSize();
         const query = this.columnData.queries[0];
         this.margin = measurements.large.margin;
         if (breakpointSize === 'xs' || breakpointSize === 'sm') {
diff --git a/app/assets/javascripts/new_sidebar.js b/app/assets/javascripts/new_sidebar.js
index 930218dd1f5..b10b074f5ac 100644
--- a/app/assets/javascripts/new_sidebar.js
+++ b/app/assets/javascripts/new_sidebar.js
@@ -1,7 +1,6 @@
 import Cookies from 'js-cookie';
 import _ from 'underscore';
-/* global bp */
-import './breakpoints';
+import bp from './breakpoints';
 
 export default class NewNavSidebar {
   constructor() {
diff --git a/app/assets/javascripts/wikis.js b/app/assets/javascripts/wikis.js
index 51ed2b4fd15..a0025ddb598 100644
--- a/app/assets/javascripts/wikis.js
+++ b/app/assets/javascripts/wikis.js
@@ -1,10 +1,7 @@
-/* global Breakpoints */
-
-import './breakpoints';
+import bp from './breakpoints';
 
 export default class Wikis {
   constructor() {
-    this.bp = Breakpoints.get();
     this.sidebarEl = document.querySelector('.js-wiki-sidebar');
     this.sidebarExpanded = false;
 
@@ -41,15 +38,15 @@ export default class Wikis {
     this.renderSidebar();
   }
 
-  sidebarCanCollapse() {
-    const bootstrapBreakpoint = this.bp.getBreakpointSize();
+  static sidebarCanCollapse() {
+    const bootstrapBreakpoint = bp.getBreakpointSize();
     return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
   }
 
   renderSidebar() {
     if (!this.sidebarEl) return;
     const { classList } = this.sidebarEl;
-    if (this.sidebarExpanded || !this.sidebarCanCollapse()) {
+    if (this.sidebarExpanded || !Wikis.sidebarCanCollapse()) {
       if (!classList.contains('right-sidebar-expanded')) {
         classList.remove('right-sidebar-collapsed');
         classList.add('right-sidebar-expanded');
diff --git a/spec/javascripts/breakpoints_spec.js b/spec/javascripts/breakpoints_spec.js
new file mode 100644
index 00000000000..b1b5d36c1fb
--- /dev/null
+++ b/spec/javascripts/breakpoints_spec.js
@@ -0,0 +1,15 @@
+import bp, {
+  breakpoints,
+} from '~/breakpoints';
+
+describe('breakpoints', () => {
+  Object.keys(breakpoints).forEach((key) => {
+    const size = breakpoints[key];
+
+    it(`returns ${key} when larger than ${size}`, () => {
+      spyOn(bp, 'windowWidth').and.returnValue(size + 10);
+
+      expect(bp.getBreakpointSize()).toBe(key);
+    });
+  });
+});
diff --git a/spec/javascripts/fly_out_nav_spec.js b/spec/javascripts/fly_out_nav_spec.js
index d7b7acaa3f4..e44d874ad2b 100644
--- a/spec/javascripts/fly_out_nav_spec.js
+++ b/spec/javascripts/fly_out_nav_spec.js
@@ -1,4 +1,3 @@
-/* global bp */
 import Cookies from 'js-cookie';
 import {
   calculateTop,
@@ -7,6 +6,7 @@ import {
   canShowSubItems,
   canShowActiveSubItems,
 } from '~/fly_out_nav';
+import bp from '~/breakpoints';
 
 describe('Fly out sidebar navigation', () => {
   let el;