Added first-run dialog.

It points out some non-obvious UI features to users. The first-run
check is made against the last version LOOT ran as, which means the
dialog could be updated to cover important changes in each release.

resources/report/css/style.css

@@ -466,4 +466,19 @@ li[is=plugin-li] > .hasGlobalPriority, li[is=plugin-li] > .hasPriority {
 body.editMode li[is=plugin-li] > .hasGlobalPriority,
 body.editMode li[is=plugin-li] > .hasPriority {
     display: inline-block;
+}
+
+#firstRun > ul {
+    list-style-type: disc;
+    padding-left: 40px;
+}
+#firstRun > button {
+    display: block;
+    margin: 0 auto;
+}
+#firstRun .tag {
+    margin: 0;
+}
+#firstRun .fa {
+    padding: 0 0.3em;
 }

resources/report/js/script.js

@@ -357,10 +357,10 @@ var loot = {
     query: function(request) {
         return new Promise(function(resolve, reject) {
             window.cefQuery({
-            request: request,
-            persistent: false,
-            onSuccess: resolve,
-            onFailure: function(errorCode, errorMessage) {
+                request: request,
+                persistent: false,
+                onSuccess: resolve,
+                onFailure: function(errorCode, errorMessage) {
                     reject(Error('Error code: ' + errorCode + '; ' + errorMessage))
                 }
             });
@@ -1147,6 +1147,9 @@ function focusSearch(evt) {
         document.getElementById('searchBox').focus();
     }
 }
+function closeFirstRunDialog(evt) {
+    evt.target.parentElement.close();
+}
 function setupEventHandlers() {
     var elements;
     /*Set up filter value and CSS setting storage read/write handlers.*/
@@ -1188,9 +1191,12 @@ function setupEventHandlers() {
     settings.getElementsByClassName('accept')[0].addEventListener('click', closeSettingsDialog, false);
     settings.getElementsByClassName('cancel')[0].addEventListener('click', closeSettingsDialog, false);
 
-    /* Set up about dialog handlers. */
+    /* Set up about dialog handler. */
     document.getElementById('about').getElementsByTagName('button')[0].addEventListener('click', closeAboutDialog, false);
 
+    /* Set up event handler for closing the first-run dialog. */
+    document.getElementById('firstRun').getElementsByTagName('button')[0].addEventListener('click', closeFirstRunDialog, false);
+
     /* Set up event handler for hover text. */
     var hoverTargets = document.querySelectorAll('[title]');
     for (var i = 0; i < hoverTargets.length; ++i) {
@@ -1213,6 +1219,7 @@ function initVars() {
             loot.version = JSON.parse(result);
 
             document.getElementById('LOOTVersion').textContent = loot.version;
+            document.getElementById('firstTimeLootVersion').textContent = loot.version;
         } catch (e) {
             console.log(e);
             console.log('Response: ' + result);
@@ -1324,6 +1331,10 @@ function initVars() {
             if (loot.settings.autoRefresh) {
                 window.addEventListener('focus', onFocus, false);
             }
+
+            if (!loot.settings.lastVersion || loot.settings.lastVersion != loot.version) {
+                document.getElementById('firstRun').showModal();
+            }
         }).catch(processCefError);
 
     }).catch(processCefError);

resources/report/report.html

@@ -550,5 +550,19 @@ along with LOOT. If not, see <http://www.gnu.org/licenses/>.
         <h1>Calculating the last digit of &pi;...</h1>
     </dialog>
 
+    <dialog id="firstRun">
+        <h1>First-Time Tips</h1>
+        <p>This appears to be the first time you have run LOOT v<span id="firstTimeLootVersion"></span>. Here are some tips to help you get started with the interface.
+        <ul>
+            <li>As well as messages, LOOT displays plugin <span class="version">version numbers</span>, <span class="crc">CRCs</span> and Bash Tag suggestions for <span class="tag add">addition</span> and <span class="tag remove">removal</span>.</li>
+            <li>CRCs and dummy plugin icons <span class="fa fa-eye-slash"></span> are only displayed after plugins have been loaded, either by conflict filtering, or by sorting.</li>
+            <li>Each plugin has a menu that can be used to access extra features, including the plugin's metadata editor and conflict filter. Click the plugin's <span class="fa fa-ellipsis-v fa-lg"></span> icon to reveal it.</li>
+            <li>Multiple metadata editors can be opened at once, and the menu bar is disabled while any editors are open.</li>
+            <li>Plugins can be drag and dropped from the sidebar into editors' <q>load after</q>, <q>requirements</q> and <q>incompatibility</q> tables.</li>
+            <li>Many interface elements have tooltips. If you don't know what something is, try hovering your mouse over it to find out.
+        </ul>
+        <p>See LOOT's documentation, accessed through the <q>Help</q> menu, for further details.</p>
+        <button class="accept">OK</button>
+    </dialog>
     <script src="js/script.js"></script>
 </body>

src/gui/app.cpp

@@ -318,6 +318,7 @@ namespace loot {
         base::AutoLock lock_scope(_lock);
 
         _settings["lastGame"] = _games[_currentGame].FolderName();
+        _settings["lastVersion"] = to_string(g_version_major) + "." + to_string(g_version_minor) + "." + to_string(g_version_patch);
 
         //Save settings.
         try {