Implement media query listener for device pixel ratio changes

It should help in #450 case.

lib/minimap-element.js

@@ -308,10 +308,12 @@ export default class MinimapElement {
       Why? Currently, The style element will be removed first, and then re-added
       and the `change` event has not be triggered in the process.
     */
-    return this.subscriptions.add(atom.styles.onDidAddStyleElement(() => {
+    this.subscriptions.add(atom.styles.onDidAddStyleElement(() => {
       this.invalidateDOMStylesCache()
       this.requestForcedUpdate()
     }))
+
+    this.subscriptions.add(this.subscribeToMediaQuery())
   }
 
   /**
@@ -1064,6 +1066,24 @@ export default class MinimapElement {
     }
   }
 
+  /**
+   * Subscribes to a media query for device pixel ratio changes and forces
+   * a repaint when it occurs.
+   *
+   * @return {Disposable} a disposable to remove the media query listener
+   * @access private
+   */
+  subscribeToMediaQuery () {
+    const query = 'screen and (-webkit-min-device-pixel-ratio: 1.5)'
+    const mediaQuery = window.matchMedia(query)
+    const mediaListener = (e) => { this.requestForcedUpdate() }
+    mediaQuery.addListener(mediaListener)
+
+    return new Disposable(() => {
+      mediaQuery.removeListener(mediaListener)
+    })
+  }
+
   //    ########    ####    ########
   //    ##     ##  ##  ##   ##     ##
   //    ##     ##   ####    ##     ##