Fix log duplication and excessive ResizeObserver log (#1747)

* everywhere - decorative changes

* /examples - fix duplicate logs in examples

* @uppy/dashboard - only fire the safety resize if we're not in a closed modal

* website/examples - made sure console.debug works in IE10

.eslintignore

@@ -5,6 +5,7 @@ coverage
 test/lib/**
 website/private_modules/hexo-renderer-uppyexamples/node_modules/**
 website/public/**
+website/src/examples/**/*.html
 website/themes/uppy/source/js/smooth-scroll.min.js
 website/themes/uppy/source/js/uppy.js
 website/themes/uppy/source/uppy/**

packages/@uppy/core/src/index.js

@@ -1064,8 +1064,8 @@ class Uppy {
   }
 
   /**
-   * Passes messages to a function, provided in `opt.logger`.
-   * If `opt.logger: Uppy.debugLogger` or `opt.debug: true`, logs to the browser console.
+   * Passes messages to a function, provided in `opts.logger`.
+   * If `opts.logger: Uppy.debugLogger` or `opts.debug: true`, logs to the browser console.
    *
    * @param {string|Object} message to log
    * @param {string} [type] optional `error` or `warning`

packages/@uppy/dashboard/src/index.js

@@ -377,34 +377,40 @@ module.exports = class Dashboard extends Plugin {
     }
   }
 
-  // _Why make insides of Dashboard invisible until first ResizeObserver event is emitted?
-  //  ResizeOberserver doesn't emit the first resize event fast enough, users can see the jump from one .uppy-size-- to another (e.g. in Safari)
-  // _Why not apply visibility property to .uppy-Dashboard-inner?
-  //  Because ideally, acc to specs, ResizeObserver should see invisible elements as of width 0. So even though applying invisibility to .uppy-Dashboard-inner works now, it may not work in the future.
+  // ___Why make insides of Dashboard invisible until first ResizeObserver event is emitted?
+  //    ResizeOberserver doesn't emit the first resize event fast enough, users can see the jump from one .uppy-size-- to another (e.g. in Safari)
+  // ___Why not apply visibility property to .uppy-Dashboard-inner?
+  //    Because ideally, acc to specs, ResizeObserver should see invisible elements as of width 0. So even though applying invisibility to .uppy-Dashboard-inner works now, it may not work in the future.
   startListeningToResize () {
     // Watch for Dashboard container (`.uppy-Dashboard-inner`) resize
     // and update containerWidth/containerHeight in plugin state accordingly.
     // Emits first event on initialization.
     this.resizeObserver = new ResizeObserver((entries, observer) => {
-      for (const entry of entries) {
-        const { width, height } = entry.contentRect
+      const uppyDashboardInnerEl = entries[0]
 
-        this.uppy.log(`[Dashboard] resized: ${width} / ${height}`)
+      const { width, height } = uppyDashboardInnerEl.contentRect
 
-        this.setPluginState({
-          containerWidth: width,
-          containerHeight: height,
-          areInsidesReadyToBeVisible: true
-        })
-      }
+      this.uppy.log(`[Dashboard] resized: ${width} / ${height}`, 'debug')
+
+      this.setPluginState({
+        containerWidth: width,
+        containerHeight: height,
+        areInsidesReadyToBeVisible: true
+      })
     })
     this.resizeObserver.observe(this.el.querySelector('.uppy-Dashboard-inner'))
 
     // If ResizeObserver fails to emit an event telling us what size to use - default to the mobile view
     this.makeDashboardInsidesVisibleAnywayTimeout = setTimeout(() => {
       const pluginState = this.getPluginState()
-      if (!pluginState.areInsidesReadyToBeVisible) {
-        this.uppy.log("[Dashboard] resize event didn't fire on time: defaulted to mobile layout")
+      const isModalAndClosed = !this.opts.inline && pluginState.isHidden
+      if (
+        // if ResizeObserver hasn't yet fired,
+        !pluginState.areInsidesReadyToBeVisible &&
+        // and it's not due to the modal being closed
+        !isModalAndClosed
+      ) {
+        this.uppy.log("[Dashboard] resize event didn't fire on time: defaulted to mobile layout", 'debug')
 
         this.setPluginState({
           areInsidesReadyToBeVisible: true

website/themes/uppy/layout/example.ejs

@@ -51,8 +51,11 @@
       };
     }
 
+    // IE 10 doesn’t support console.debug
+    var consoleDebug = console.debug || console.log
+
     console.log = customLog(console.log.bind(console), document.getElementById("console-log"));
-    console.debug = customLog(console.log.bind(console), document.getElementById("console-log"));
+    console.debug = customLog(consoleDebug.bind(console), document.getElementById("console-log"));
     console.warn = customLog(console.warn.bind(console), document.getElementById("console-log"));
     console.error = customLog(console.error.bind(console), document.getElementById("console-log"));
   </script>