Add toggle grid icon to minimap

src/css/toolbox-animated-preview.css

@@ -124,6 +124,14 @@
   border-color: var(--highlight-color);
 }
 
+/**
+ * If the icon represents an enabled state, the border should always be gold.
+ */
+.preview-contextual-action-enabled {
+  color: var(--highlight-color);
+  border-color: var(--highlight-color);
+}
+
 /**
  * Drop-down in preview size selection
  */
@@ -195,6 +203,7 @@
 
 @media (-webkit-min-device-pixel-ratio: 2),
        (min-resolution: 192dpi) {
+  .icon-minimap-popup-preview-arrow-white:hover {
     background-image: url(../img/icons/minimap/minimap-popup-preview-arrow-gold@2x.png);
-
+  }
 }

src/js/controller/preview/PreviewController.js

@@ -20,6 +20,7 @@
     this.fpsRangeInput = document.querySelector('#preview-fps');
     this.fpsCounterDisplay = document.querySelector('#display-fps');
     this.openPopupPreview = document.querySelector('.open-popup-preview-button');
+    this.toggleGridButton = document.querySelector('.toggle-grid-button');
     this.previewSizeDropdown = document.querySelector('.preview-drop-down');
     this.previewSizes = {
       original: {
@@ -54,6 +55,7 @@
     var addEvent = pskl.utils.Event.addEventListener;
     addEvent(this.toggleOnionSkinButton, 'click', this.toggleOnionSkin_, this);
     addEvent(this.openPopupPreview, 'click', this.onOpenPopupPreviewClick_, this);
+    addEvent(this.toggleGridButton, 'click', this.toggleGrid_, this);
 
     var registerShortcut = pskl.app.shortcutService.registerShortcut.bind(pskl.app.shortcutService);
     registerShortcut(this.onionSkinShortcut, this.toggleOnionSkin_.bind(this));
@@ -88,6 +90,19 @@
     this.updateFPS_();
     this.updateMaxFPS_();
     this.updateContainerDimensions_();
+    this.updateToggleGridButton_();
+  };
+
+  ns.PreviewController.prototype.updateToggleGridButton_ = function () {
+    var gridEnabled = pskl.UserSettings.get(pskl.UserSettings.GRID_ENABLED);
+    this.toggleGridButton.classList.toggle('icon-minimap-grid-white', !gridEnabled);
+    this.toggleGridButton.classList.toggle('icon-minimap-grid-gold', gridEnabled);
+    this.toggleGridButton.classList.toggle('preview-contextual-action-enabled', gridEnabled);
+  };
+
+  ns.PreviewController.prototype.toggleGrid_ = function () {
+    var gridEnabled = pskl.UserSettings.get(pskl.UserSettings.GRID_ENABLED);
+    pskl.UserSettings.set(pskl.UserSettings.GRID_ENABLED, !gridEnabled);
   };
 
   ns.PreviewController.prototype.updatePreviewSizeButtons_ = function () {
@@ -171,6 +186,8 @@
       this.updateMaxFPS_();
     } else if (name === pskl.UserSettings.SEAMLESS_MODE) {
       this.onFrameSizeChange_();
+    } else if (name === pskl.UserSettings.GRID_ENABLED) {
+      this.updateToggleGridButton_();
     } else {
       this.updateZoom_();
       this.selectPreviewSizeButton_();

src/templates/preview.html

@@ -7,6 +7,8 @@
         <div class="preview-contextual-action  best-size-button" rel="tooltip" data-placement="left"></div>
         <div class="preview-contextual-action  full-size-button" rel="tooltip" data-placement="left">Full</div>
       </div>
+      <div class="preview-contextual-action  toggle-grid-button  icon-minimap-grid-white"
+        title="Toggle grid" rel="tooltip" data-placement="bottom"></div>
       <div class="preview-contextual-action  open-popup-preview-button  icon-minimap-popup-preview-arrow-white"
            title="Open preview in popup" rel="tooltip" data-placement="bottom"></div>
     </div>