removed global use of breakpoint checkerbreakpoint-checker-performance

11 files changed, 18 insertions, 34 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 7e3e9da63bb..7951348d8b2 100644
--- a/app/assets/javascripts/breakpoints.js
+++ b/app/assets/javascripts/breakpoints.js
@@ -16,8 +16,4 @@ const BreakpointInstance = {
   },
 };
 
-// For legacy reasons, this is added to window
-// one day this should be deleted
-window.bp = BreakpointInstance;
-
 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/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;