issue #555: add performance warning icon, show dialog

src/css/animations.css

@@ -1,3 +1,9 @@
 @keyframes fade {
   50% { opacity: 0.5; }
 }
+
+@keyframes glow {
+  0%   { opacity: 0.66; }
+  50% { opacity: 1; }
+  100%   { opacity: 0.66; }
+}

src/css/dialogs-performance-info.css

@@ -0,0 +1,34 @@
+.performance-link {
+  display: none;
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  z-index: 11000;
+  cursor: pointer;
+  opacity: 0;
+  transition : opacity 0.3s;
+}
+
+.performance-link.visible {
+  display: block;
+  opacity: 0.66;
+  animation: glow 2s infinite;
+}
+
+.performance-link.visible:hover {
+  opacity: 1;
+  animation: none;
+}
+
+#dialog-container.performance-info {
+  width: 500px;
+  height: 600px;
+  top : 50%;
+  left : 50%;
+  position : absolute;
+  margin-left: -250px;
+}
+
+.show #dialog-container.performance-info {
+  margin-top: -300px;
+}

src/index.html

@@ -71,13 +71,17 @@
   @@include('templates/misc-templates.html', {})
   @@include('templates/popup-preview.html', {})
 
-  <span class="cheatsheet-link icon-common-keyboard-gold" rel="tooltip" data-placement="right" title="Keyboard shortcuts">&nbsp;</span>
+  <span class="cheatsheet-link icon-common-keyboard-gold"
+        rel="tooltip" data-placement="right" title="Keyboard shortcuts">&nbsp;</span>
+  <div class="performance-link icon-common-warning-red"
+       rel="tooltip" data-placement="left" title="Performance issues: learn more.">&nbsp;</div>
 
   <!-- dialogs partials -->
   @@include('templates/dialogs/create-palette.html', {})
   @@include('templates/dialogs/import-image.html', {})
   @@include('templates/dialogs/browse-local.html', {})
   @@include('templates/dialogs/cheatsheet.html', {})
+  @@include('templates/dialogs/performance-info.html', {})
 
   <!-- settings-panel partials -->
   @@include('templates/settings/application.html', {})

src/js/controller/UserWarningController.js

@@ -4,32 +4,52 @@
   ns.UserWarningController = function (piskelController, currentColorsService) {
     this.piskelController = piskelController;
     this.currentColorsService = currentColorsService;
-    this.isWarningDisplayed = false;
+  };
+
+  // This method is not attached to the prototype because we want to trigger it
+  // from markup generated for a notification message.
+  ns.UserWarningController.showPerformanceInfoDialog = function () {
+    $.publish(Events.DIALOG_DISPLAY, {
+      dialogId: 'performance-info'
+    });
   };
 
   ns.UserWarningController.prototype.init = function () {
     $.subscribe(Events.PERFORMANCE_REPORT_CHANGED, this.onPerformanceReportChanged_.bind(this));
+
+    this.performanceLinkEl = document.querySelector('.performance-link');
+    pskl.utils.Event.addEventListener(
+      this.performanceLinkEl,
+      'click',
+      ns.UserWarningController.showPerformanceInfoDialog,
+      this
+    );
+  };
+
+  ns.UserWarningController.prototype.destroy = function () {
+    pskl.utils.Event.removeAllEventListeners(this);
+    this.performanceLinkEl = null;
   };
 
   ns.UserWarningController.prototype.onPerformanceReportChanged_ = function (event, report) {
-    console.log(report);
-
     var shouldDisplayWarning = report.hasProblem();
-    if (shouldDisplayWarning && !this.isWarningDisplayed) {
-      // show a notification
-      // show the warning bubble
+
+    // Check if a performance warning is already displayed.
+    var isWarningDisplayed = this.performanceLinkEl.classList.contains('visible');
+
+    // Show/hide the performance warning link depending on the received report.
+    this.performanceLinkEl.classList.toggle('visible', shouldDisplayWarning);
+
+    // Show a notification message if the new report indicates a performance issue
+    // and we were not displaying a warning before.
+    if (shouldDisplayWarning && !isWarningDisplayed) {
       $.publish(Events.SHOW_NOTIFICATION, [{
-        'content': 'performance problem notification',
+        'content': 'performance problem notification ' +
+                   '<a href="#" style="color:red;"' +
+                       'onclick="pskl.controller.UserWarningController.showPerformanceInfoDialog()">' +
+                      'learn more?</a>',
         'hideDelay' : 5000
       }]);
-      console.log('should show a performance notification');
-      this.isWarningDisplayed = true;
-    }
-
-    if (!shouldDisplayWarning && this.isWarningDisplayed) {
-      // hide the warning bubble
-      console.log('should hide a performance notification');
-      this.isWarningDisplayed = false;
     }
   };
 })();

src/js/controller/dialogs/DialogsController.js

@@ -17,6 +17,10 @@
     'import-image' : {
       template : 'templates/dialogs/import-image.html',
       controller : ns.ImportImageController
+    },
+    'performance-info' : {
+      template : 'templates/dialogs/performance-info.html',
+      controller : ns.PerformanceInfoController
     }
   };
 

src/js/controller/dialogs/PerformanceInfoController.js

@@ -0,0 +1,11 @@
+(function () {
+  var ns = $.namespace('pskl.controller.dialogs');
+
+  ns.PerformanceInfoController = function () {};
+
+  pskl.utils.inherit(ns.PerformanceInfoController, ns.AbstractDialogController);
+
+  ns.PerformanceInfoController.prototype.init = function () {
+    this.superclass.init.call(this);
+  };
+})();

src/piskel-script-list.js

@@ -140,6 +140,7 @@
   "js/controller/dialogs/ImportImageController.js",
   "js/controller/dialogs/BrowseLocalController.js",
   "js/controller/dialogs/CheatsheetController.js",
+  "js/controller/dialogs/PerformanceInfoController.js",
 
   // Dialogs controller
   "js/controller/dialogs/DialogsController.js",

src/piskel-style-list.js

@@ -22,6 +22,7 @@
   "css/dialogs-cheatsheet.css",
   "css/dialogs-create-palette.css",
   "css/dialogs-import-image.css",
+  "css/dialogs-performance-info.css",
   "css/notifications.css",
   "css/toolbox.css",
   "css/toolbox-layers-list.css",

src/templates/dialogs/performance-info.html

@@ -0,0 +1,11 @@
+<script type="text/template" id="templates/dialogs/performance-info.html">
+  <div class="dialog-wrapper">
+    <h3 class="dialog-head">
+      Performance issues
+      <span class="dialog-close">X</span>
+    </h3>
+    <div class="dialog-performance-info-body">
+      content
+    </div>
+  </div>
+</script>