Updated the auto-update UI.

Added a settings tab to manage updates.
On this tab you can:
* Init auto update check.
* View update information (version, prerelease vs release, etc).
* View update changelog.
* Install updates (when downloaded).
The green glow on the landing page now takes users to the settings tab. Updates can be installed from there.
This UI can be changed in the future if needed.

app/assets/css/launcher.css

@@ -1582,19 +1582,19 @@ input:checked + .toggleSwitchSlider:before {
 
 /* Style links on the Java tab. */
 #settingsTabJava a,
-#settingsChangelogText a {
+.settingsChangelogText a {
     color: rgba(202, 202, 202, 0.75);
     transition: 0.25s ease;
     outline: none;
 }
 #settingsTabJava a:hover,
 #settingsTabJava a:focus,
-#settingsChangelogText a:hover,
-#settingsChangelogText a:focus {
+.settingsChangelogText a:hover,
+.settingsChangelogText a:focus {
     color: rgba(255, 255, 255, 0.75);
 }
 #settingsTabJava a:active,
-#settingsChangelogText a:active {
+.settingsChangelogText a:active {
     color: rgba(165, 165, 165, 0.75);
 }
 
@@ -1916,7 +1916,7 @@ input:checked + .toggleSwitchSlider:before {
 }
 
 /* Main changelog container. */
-#settingsChangelogContainer {
+.settingsChangelogContainer {
     display: flex;
     flex-direction: column;
     background: rgba(0, 0, 0, 0.25);
@@ -1927,42 +1927,42 @@ input:checked + .toggleSwitchSlider:before {
 }
 
 /* Changelog content container. */
-#settingsChangelogContent {
+.settingsChangelogContent {
     display: flex;
     flex-direction: column;
     padding: 15px;
 }
 
 /* Changelog header container. */
-#settingsChangelogHeadline {
+.settingsChangelogHeadline {
     padding-bottom: 10px;
     margin-bottom: 10px;
     border-bottom: 1px solid rgba(126, 126, 126, 0.57);
 }
 /* Changelog header label. */
-#settingsChangelogLabel {
+.settingsChangelogLabel {
     font-size: 12px;
     color: grey;
     font-weight: bold;
 }
 
 /* Changelog text content container. */
-#settingsChangelogText {
+.settingsChangelogText {
     font-size: 12px;
 }
 
 /* Styles for the changelog elements. */
-#settingsChangelogText p {
+.settingsChangelogText p {
     margin-bottom: 16px;
     line-height: 1.5;
 }
-#settingsChangelogText blockquote {
+.settingsChangelogText blockquote {
     border-left: 0.25em solid rgba(126, 126, 126, 0.95);
     margin: 0px;
     padding: 0 0 0 1em;
     color: rgba(255, 255, 255, 0.85);
 }
-#settingsChangelogText code {
+.settingsChangelogText code {
     padding: 0.1em 0.4em;
     font-size: 85%;
     background-color: rgba(255, 255, 255, 0.25);
@@ -1970,19 +1970,19 @@ input:checked + .toggleSwitchSlider:before {
     border-radius: 3px;
     font-family: 'Avenir Book';
 }
-#settingsChangelogText li+li {
+.settingsChangelogText li+li {
     margin-top: .25em;
 }
-#settingsChangelogText a.commit-link {
+.settingsChangelogText a.commit-link {
     font-weight: 400;
     color: #ffffff;
     text-decoration: none;
 }
-#settingsChangelogText a.commit-link:hover {
+.settingsChangelogText a.commit-link:hover {
     text-decoration: underline !important;
     text-decoration-color: black;
 }
-#settingsChangelogText tt {
+.settingsChangelogText tt {
     padding: 0.1em 0.4em;
     font-size: 86%;
     background-color: white;
@@ -1990,29 +1990,137 @@ input:checked + .toggleSwitchSlider:before {
     color: black;
     font-weight: bold;
 }
-#settingsChangelogText a.commit-link:hover tt {
+.settingsChangelogText a.commit-link:hover tt {
     text-decoration: underline;
     text-decoration-color: black;
 }
-#settingsChangelogText .highlight {
+.settingsChangelogText .highlight {
     background: rgba(0, 0, 0, 0.30);
     user-select: initial;
     padding: 5px 10px;
 }
-#settingsChangelogText .highlight pre {
+.settingsChangelogText .highlight pre {
     margin: 0px;
 }
 
 /* Container for the changelog button. */
-#settingsChangelogActions {
+.settingsChangelogActions {
     padding: 0px 15px 5px 15px;
 }
 
 /* Open changelog on GitHub. */
-#settingsChangelogButton {
+.settingsChangelogButton {
     padding: 0px;
 }
 
+/* * *
+* Settings View (Updates Tab)
+* * */
+
+/* Main about content container. */
+#settingsUpdateStatusContainer {
+    display: flex;
+    flex-direction: column;
+    background: rgba(0, 0, 0, 0.25);
+    border: 1px solid rgba(126, 126, 126, 0.57);
+    border-radius: 3px;
+    width: 75%;
+    margin-bottom: 20px;
+}
+
+/* Update content. */
+#settingsUpdateStatusContent {
+    display: flex;
+    flex-direction: column;
+    padding: 15px;
+}
+
+/* Update header elements. */
+#settingsUpdateStatusHeadline {
+    display: flex;
+    align-items: center;
+    padding-bottom: 5px;
+    border-bottom: 1px solid rgba(126, 126, 126, 0.57);
+}
+#settingsUpdateTitle {
+    font-size: 16px;
+    padding-left: 10px;
+    font-weight: bold;
+}
+
+/* Update version container. */
+#settingsUpdateVersion {
+    display: flex;
+    align-items: center;
+    padding: 10px 0px;
+    border-bottom: 1px solid rgba(126, 126, 126, 0.57);
+}
+
+/* Checkmark next to the version information. */
+#settingsUpdateVersionCheck {
+    border-radius: 50%;
+    background: #23aa23;
+    text-align: center;
+    font-weight: bold;
+    margin: 11px 12px;
+    color: white;
+    height: 15px;
+    width: 15px;
+    font-size: 12px;
+    line-height: 17px;
+}
+
+/* Update version details container. */
+#settingsUpdateVersionDetails {
+    margin-left: 10px;
+}
+
+/* Release type text. */
+#settingsUpdateVersionTitle {
+    font-size: 12px;
+    font-family: 'Avenir Medium';
+    color: #23aa23;
+    font-weight: bold;
+}
+
+/* Current version text. */
+#settingsUpdateVersionLine {
+    font-size: 10px;
+    color: grey;
+    font-weight: bold;
+}
+
+/* Update action container. */
+#settingsUpdateActionContainer {
+    padding-top: 10px;
+    font-size: 14px;
+    font-weight: bold;
+}
+
+/* Update action button styles. */
+#settingsUpdateActionButton {
+    padding-left: 10px;
+    background: none;
+    border: none;
+    font-size: 14px;
+    font-weight: bold;
+    cursor: pointer;
+    outline: none;
+    text-align: left;
+    transition: 0.25s ease;
+}
+#settingsUpdateActionButton:hover,
+#settingsUpdateActionButton:focus {
+    text-shadow: 0px 0px 20px white, 0px 0px 20px white, 0px 0px 20px white;
+}
+#settingsUpdateActionButton:active {
+    text-shadow: 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7;
+    color: #c7c7c7;
+}
+#settingsUpdateActionButton:disabled {
+    pointer-events: none;
+}
+
 /*******************************************************************************
  *                                                                             *
  * Landing View (Structural Styles)                                            *

app/assets/js/scripts/settings.js

@@ -976,12 +976,10 @@ function prepareJavaTab(){
  * About Tab
  */
 
-const settingsAboutCurrentVersionCheck = document.getElementById('settingsAboutCurrentVersionCheck')
-const settingsAboutCurrentVersionTitle = document.getElementById('settingsAboutCurrentVersionTitle')
-const settingsAboutCurrentVersionValue = document.getElementById('settingsAboutCurrentVersionValue')
-const settingsChangelogTitle           = document.getElementById('settingsChangelogTitle')
-const settingsChangelogText            = document.getElementById('settingsChangelogText')
-const settingsChangelogButton          = document.getElementById('settingsChangelogButton')
+const settingsTabAbout             = document.getElementById('settingsTabAbout')
+const settingsAboutChangelogTitle  = settingsTabAbout.getElementsByClassName('settingsChangelogTitle')[0]
+const settingsAboutChangelogText   = settingsTabAbout.getElementsByClassName('settingsChangelogText')[0]
+const settingsAboutChangelogButton = settingsTabAbout.getElementsByClassName('settingsChangelogButton')[0]
 
 // Bind the devtools toggle button.
 document.getElementById('settingsAboutDevToolsButton').onclick = (e) => {
@@ -990,24 +988,45 @@ document.getElementById('settingsAboutDevToolsButton').onclick = (e) => {
 }
 
 /**
- * Retrieve the version information and display it on the UI.
+ * Return whether or not the provided version is a prerelease.
+ * 
+ * @param {string} version The semver version to test.
+ * @returns {boolean} True if the version is a prerelease, otherwise false.
  */
-function populateVersionInformation(){
-    const version = remote.app.getVersion()
-
-    settingsAboutCurrentVersionValue.innerHTML = version
+function isPrerelease(version){
     const preRelComp = semver.prerelease(version)
-    if(preRelComp != null && preRelComp.length > 0){
-        settingsAboutCurrentVersionTitle.innerHTML = 'Pre-release'
-        settingsAboutCurrentVersionTitle.style.color = '#ff886d'
-        settingsAboutCurrentVersionCheck.style.background = '#ff886d'
+    return preRelComp != null && preRelComp.length > 0
+}
+
+/**
+ * Utility method to display version information on the
+ * About and Update settings tabs.
+ * 
+ * @param {string} version The semver version to display.
+ * @param {Element} valueElement The value element.
+ * @param {Element} titleElement The title element.
+ * @param {Element} checkElement The check mark element.
+ */
+function populateVersionInformation(version, valueElement, titleElement, checkElement){
+    valueElement.innerHTML = version
+    if(isPrerelease(version)){
+        titleElement.innerHTML = 'Pre-release'
+        titleElement.style.color = '#ff886d'
+        checkElement.style.background = '#ff886d'
     } else {
-        settingsAboutCurrentVersionTitle.innerHTML = 'Stable Release'
-        settingsAboutCurrentVersionTitle.style.color = null
-        settingsAboutCurrentVersionCheck.style.background = null
+        titleElement.innerHTML = 'Stable Release'
+        titleElement.style.color = null
+        checkElement.style.background = null
     }
 }
 
+/**
+ * Retrieve the version information and display it on the UI.
+ */
+function populateAboutVersionInformation(){
+    populateVersionInformation(remote.app.getVersion(), document.getElementById('settingsAboutCurrentVersionValue'), document.getElementById('settingsAboutCurrentVersionTitle'), document.getElementById('settingsAboutCurrentVersionCheck'))
+}
+
 /**
  * Fetches the GitHub atom release feed and parses it for the release notes
  * of the current version. This value is displayed on the UI.
@@ -1025,16 +1044,16 @@ function populateReleaseNotes(){
                 id = id.substring(id.lastIndexOf('/')+1)
 
                 if(id === version){
-                    settingsChangelogTitle.innerHTML = entry.find('title').text()
-                    settingsChangelogText.innerHTML = entry.find('content').text()
-                    settingsChangelogButton.href = entry.find('link').attr('href')
+                    settingsAboutChangelogTitle.innerHTML = entry.find('title').text()
+                    settingsAboutChangelogText.innerHTML = entry.find('content').text()
+                    settingsAboutChangelogButton.href = entry.find('link').attr('href')
                 }
             }
 
         },
         timeout: 2500
     }).catch(err => {
-        settingsChangelogText.innerHTML = 'Failed to load release notes.'
+        settingsAboutChangelogText.innerHTML = 'Failed to load release notes.'
     })
 }
 
@@ -1042,10 +1061,71 @@ function populateReleaseNotes(){
  * Prepare account tab for display.
  */
 function prepareAboutTab(){
-    populateVersionInformation()
+    populateAboutVersionInformation()
     populateReleaseNotes()
 }
 
+/**
+ * Update Tab
+ */
+
+const settingsTabUpdate            = document.getElementById('settingsTabUpdate')
+const settingsUpdateTitle          = document.getElementById('settingsUpdateTitle')
+const settingsUpdateVersionCheck   = document.getElementById('settingsUpdateVersionCheck')
+const settingsUpdateVersionTitle   = document.getElementById('settingsUpdateVersionTitle')
+const settingsUpdateVersionValue   = document.getElementById('settingsUpdateVersionValue')
+const settingsUpdateChangelogTitle = settingsTabUpdate.getElementsByClassName('settingsChangelogTitle')[0]
+const settingsUpdateChangelogText  = settingsTabUpdate.getElementsByClassName('settingsChangelogText')[0]
+const settingsUpdateChangelogCont  = settingsTabUpdate.getElementsByClassName('settingsChangelogContainer')[0]
+const settingsUpdateActionButton   = document.getElementById('settingsUpdateActionButton')
+
+/**
+ * Update the properties of the update action button.
+ * 
+ * @param {string} text The new button text.
+ * @param {boolean} disabled Optional. Disable or enable the button
+ * @param {function} handler Optional. New button event handler.
+ */
+function settingsUpdateButtonStatus(text, disabled = false, handler = null){
+    settingsUpdateActionButton.innerHTML = text
+    settingsUpdateActionButton.disabled = disabled
+    if(handler != null){
+        settingsUpdateActionButton.onclick = handler
+    }
+}
+
+/**
+ * Populate the update tab with relevant information.
+ * 
+ * @param {Object} data The update data.
+ */
+function populateSettingsUpdateInformation(data){
+    if(data != null){
+        settingsUpdateTitle.innerHTML = `New ${isPrerelease(data.version) ? 'Pre-release' : 'Release'} Available`
+        settingsUpdateChangelogCont.style.display = null
+        settingsUpdateChangelogTitle.innerHTML = data.releaseName
+        settingsUpdateChangelogText.innerHTML = data.releaseNotes
+        populateVersionInformation(data.version, settingsUpdateVersionValue, settingsUpdateVersionTitle, settingsUpdateVersionCheck)
+        settingsUpdateButtonStatus('Downloading..', true)
+    } else {
+        settingsUpdateTitle.innerHTML = 'You Are Running the Latest Version'
+        settingsUpdateChangelogCont.style.display = 'none'
+        populateVersionInformation(remote.app.getVersion(), settingsUpdateVersionValue, settingsUpdateVersionTitle, settingsUpdateVersionCheck)
+        settingsUpdateButtonStatus('Check for Updates', false, () => {
+            ipcRenderer.send('autoUpdateAction', 'checkForUpdate')
+            settingsUpdateButtonStatus('Checking for Updates..', true)
+        })
+    }
+}
+
+/**
+ * Prepare update tab for display.
+ * 
+ * @param {Object} data The update data.
+ */
+function prepareUpdateTab(data = null){
+    populateSettingsUpdateInformation(data)
+}
 
 /**
  * Settings preparation functions.
@@ -1060,6 +1140,7 @@ function prepareSettings(first = false) {
     if(first){
         setupSettingsTabs()
         initSettingsValidators()
+        prepareUpdateTab()
     } else {
         prepareModsTab()
     }

app/assets/js/scripts/uicore.js

@@ -34,16 +34,24 @@ if(!isDev){
         switch(arg){
             case 'checking-for-update':
                 console.log('%c[AutoUpdater]', 'color: #a02d2a; font-weight: bold', 'Checking for update..')
+                settingsUpdateButtonStatus('Checking for Updates..', true)
                 break
             case 'update-available':
                 console.log('%c[AutoUpdater]', 'color: #a02d2a; font-weight: bold', 'New update available', info.version)
+                populateSettingsUpdateInformation(info)
                 break
             case 'update-downloaded':
                 console.log('%c[AutoUpdater]', 'color: #a02d2a; font-weight: bold', 'Update ' + info.version + ' ready to be installed.')
+                settingsUpdateButtonStatus('Install Now', false, () => {
+                    if(!isDev){
+                        ipcRenderer.send('autoUpdateAction', 'installUpdateNow')
+                    }
+                })
                 showUpdateUI(info)
                 break
             case 'update-not-available':
                 console.log('%c[AutoUpdater]', 'color: #a02d2a; font-weight: bold', 'No new update found.')
+                settingsUpdateButtonStatus('Check for Updates')
                 break
             case 'ready':
                 updateCheckListener = setInterval(() => {
@@ -86,7 +94,7 @@ function showUpdateUI(info){
     //TODO Make this message a bit more informative `${info.version}`
     document.getElementById('image_seal_container').setAttribute('update', true)
     document.getElementById('image_seal_container').onclick = () => {
-        setOverlayContent('Update Available', 'A new update for the launcher is available. Would you like to install now?', 'Install', 'Later')
+        /*setOverlayContent('Update Available', 'A new update for the launcher is available. Would you like to install now?', 'Install', 'Later')
         setOverlayHandler(() => {
             if(!isDev){
                 ipcRenderer.send('autoUpdateAction', 'installUpdateNow')
@@ -98,7 +106,10 @@ function showUpdateUI(info){
         setDismissHandler(() => {
             toggleOverlay(false)
         })
-        toggleOverlay(true, true)
+        toggleOverlay(true, true)*/
+        switchView(getCurrentView(), VIEWS.settings, 500, 500, () => {
+            settingsNavItemListener(document.getElementById('settingsNavUpdate'), false)
+        })
     }
 }
 

app/settings.ejs

@@ -13,7 +13,7 @@
                     <button class="settingsNavItem" rSc="settingsTabLauncher">Launcher</button>
                     <div class="settingsNavSpacer"></div>
                     <button class="settingsNavItem" rSc="settingsTabAbout">About</button>
-                    <button class="settingsNavItem">Updates</button>
+                    <button class="settingsNavItem" rSc="settingsTabUpdate" id="settingsNavUpdate">Updates</button>
                     <div id="settingsNavContentBottom">
                         <div class="settingsNavDivider"></div>
                         <button id="settingsNavDone">Done</button>
@@ -267,19 +267,55 @@
                     <a href="#" id="settingsAboutDevToolsButton" class="settingsAboutButton">DevTools Console</a>
                 </div>
             </div>
-            <div class="settingsAboutDivider"></div>
-            <div id="settingsChangelogContainer">
-                <div id="settingsChangelogContent">
-                    <div id="settingsChangelogHeadline">
-                        <div id="settingsChangelogLabel">Release Notes</div>
-                        <div id="settingsChangelogTitle">Changelog</div>
+            <div class="settingsChangelogContainer">
+                <div class="settingsChangelogContent">
+                    <div class="settingsChangelogHeadline">
+                        <div class="settingsChangelogLabel">Release Notes</div>
+                        <div class="settingsChangelogTitle">Changelog</div>
                     </div>
-                    <div id="settingsChangelogText">
+                    <div class="settingsChangelogText">
                         No Release Notes
                     </div>
                 </div>
-                <div id="settingsChangelogActions">
-                    <a id="settingsChangelogButton" class="settingsAboutButton" href="#">View Release Notes on GitHub</a>
+                <div class="settingsChangelogActions">
+                    <a class="settingsChangelogButton settingsAboutButton" href="#">View Release Notes on GitHub</a>
+                </div>
+            </div>
+        </div>
+        <div id="settingsTabUpdate" class="settingsTab" style="display: none;">
+            <div class="settingsTabHeader">
+                <span class="settingsTabHeaderText">Launcher Updates</span>
+                <span class="settingsTabHeaderDesc">Download, install, and review updates for the launcher.</span>
+            </div>
+            <div id="settingsUpdateStatusContainer">
+                <div id="settingsUpdateStatusContent">
+                    <div id="settingsUpdateStatusHeadline">
+                        <span id="settingsUpdateTitle">You Are Running the Latest Version</span>
+                    </div>
+                    <div id="settingsUpdateVersion">
+                        <div id="settingsUpdateVersionCheck">&#10003;</div>
+                        <div id="settingsUpdateVersionDetails">
+                            <span id="settingsUpdateVersionTitle">Stable Release</span>
+                            <div id="settingsUpdateVersionLine">
+                                <span id="settingsUpdateVersionText">Version </span>
+                                <span id="settingsUpdateVersionValue">0.0.1-alpha.18</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="settingsUpdateActionContainer">
+                        <button id="settingsUpdateActionButton">Check for Updates</button>
+                    </div>
+                </div>
+            </div>
+            <div class="settingsChangelogContainer">
+                <div class="settingsChangelogContent">
+                    <div class="settingsChangelogHeadline">
+                        <div class="settingsChangelogLabel">What's New</div>
+                        <div class="settingsChangelogTitle">Update Release Notes</div>
+                    </div>
+                    <div class="settingsChangelogText">
+                        No Release Notes
+                    </div>
                 </div>
             </div>
         </div>