Add 'about' tab and icon. Update version to 0.4.5

Author: imigueldiaz

_locales/en/messages.json

@@ -120,6 +120,10 @@
 "startHereLabel": {
   "message": "Start",
   "description": "Label for the start here button."
+},
+"aboutLabel": {
+  "message": "About",
+  "description": "Label for the about button."
 }
 
 }

_locales/es/messages.json

@@ -120,5 +120,9 @@
   "startHereLabel": {
     "message": "Empezar",
     "description": "Etiqueta para el enlace de inicio."
+  },
+  "aboutLabel": {
+    "message": "Acerca de",
+    "description": "Etiqueta para la pestaña 'Acerca de'."
   }
 }

_locales/fr/messages.json

@@ -120,5 +120,9 @@
   "startHereLabel": {
     "message": "Commencez",
     "description": "Libellé pour le lien de démarrage."
+  },
+  "aboutLabel": {
+    "message": "À propos",
+    "description": "Libellé pour l'onglet À propos."
   }
 }

extension.html

@@ -14,6 +14,11 @@
       <img src="icons/settings.svg" alt="Settings icon"/>
       <span class="button-text"></span> 
     </button>
+    <button id="aboutTab" class="tabLink" role="tab" aria-selected="false" aria-controls="aboutContent">
+      <img src="icons/info.svg" alt="About icon"/>
+      <span class="button-text"></span>
+    </button>
+
   </div>
   <div id="tabContent">
     <div id="popupContent" class="tabContent" role="tabpanel" aria-labelledby="popupTab">
@@ -62,6 +67,15 @@
           <div id="saveError" class="error-badge" role="alert"></div>
         </form>
       </div>
+      <div id="aboutContent" class="tabContent" role="tabpanel" aria-labelledby="aboutTab" style="display: none;">
+        <img src="icons/icon128.png" alt="Extension Logo" class="about-logo" />
+
+        <a href="https://github.com/imigueldiaz" target="_blank" rel="noopener noreferrer"><h2>Ignacio de Miguel Diaz</h2></a>
+        <h3><a href="https://github.com/imigueldiaz/firefox-quick-abstract" target="_blank" rel="noopener noreferrer"><span id="extensionName"></span></a></h3>
+        <p><a href="" id="versionLink" target="_blank" rel="noopener noreferrer">Version <span id="version"></span></a></p>
+        <a href="LICENSE" target="_blank" rel="noopener noreferrer">MIT License</a>
+      </div>
+
     </div>
     <script type="text/javascript" src="lib/purify.min.js"></script>
     <script type="text/javascript" src="extension.js"></script>

icons/info.svg

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "__MSG_extensionName__",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "__MSG_extensionDescription__",
   "default_locale": "en",
   "permissions": [

manifest.json

@@ -89,7 +89,6 @@ document.addEventListener("DOMContentLoaded", function() {
   document.getElementById('modelLabel').textContent = browser.i18n.getMessage('modelLabel');
   document.getElementById('tempLabel').textContent = browser.i18n.getMessage('temperatureLabel');
   document.querySelector('#save .button-text').textContent = browser.i18n.getMessage('saveLabel');
-
   // Set the window title
   window.title = browser.i18n.getMessage('extensionName');
 });

options.js

@@ -342,11 +342,19 @@ document.addEventListener("DOMContentLoaded", function() {
   // Set the text of the buttons and the title of the popup
   document.querySelector('#popupTab .button-text').textContent = browser.i18n.getMessage('startHereLabel');
   document.querySelector('#optionsTab .button-text').textContent = browser.i18n.getMessage('settingsLabel');
+  document.querySelector('#aboutTab .button-text').textContent = browser.i18n.getMessage('aboutLabel');
 
   document.querySelector('#copyMarkdown .button-text').textContent = browser.i18n.getMessage('copyMarkdownLabel');
   document.querySelector('#copyHtml .button-text').textContent = browser.i18n.getMessage('copyHtmlLabel');
   document.querySelector('#copyText .button-text').textContent = browser.i18n.getMessage('copyTextLabel');
   document.querySelector('#resume .button-text').textContent = browser.i18n.getMessage('summarizeLabel');
+
+
+   const version = browser.runtime.getManifest().version;
+  document.getElementById('version').textContent = version;
+  document.getElementById('versionLink').href = `https://github.com/imigueldiaz/firefox-quick-abstract/releases/tag/v${version}`;
+  document.getElementById('extensionName').innerText = browser.i18n.getMessage('extensionName');
+
   document.title = browser.i18n.getMessage('extensionName');
 
   loadInitialText();

popup.js

@@ -7,6 +7,8 @@ body {
   line-height: 1.5;
   width: 550px;
   height: 600px;
+  display: flex;
+  flex-direction: column;
 }
 body#popup {
   padding: 5px;
@@ -56,11 +58,12 @@ button img {
   height: 30px;
   width: 30px;
   filter: none; 
-  margin: 0; 
-}
-#button-container button img {
-  object-fit: contain!important; 
+  margin: 0;
+  padding: 0;
+  object-fit: contain!important;
+  object-position: center;
 }
+
 button.ok {
   background-color: #0A84FF;
   color: #FFFFFF;
@@ -232,6 +235,13 @@ button.ok:hover {
   margin-bottom: 3px;
   border-bottom: 1px solid #D7D7DB
 }
+
+#tabContent {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
 .tabLink {
   padding: 3px auto;
   background-color: #f1f1f1;
@@ -258,6 +268,55 @@ img#logo {
   filter: none
 }
 
+.about-logo {
+  display: block;
+  margin: 20px auto;
+  width: 128px;
+  height: 128px;
+}
+
+#aboutContent {
+  margin: 100px auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 330px;
+  width:  330px;
+  text-align: center;
+  border: 1px solid #aaa;
+  border-radius: 16px;
+  background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
+  background-size: 400% 400%;
+  animation: gradientAnimation 10s ease infinite;
+}
+
+#aboutContent h2, #aboutContent h3 {
+  margin: 10px 0;
+}
+
+#aboutContent a {
+  color: #0A84FF;
+  text-decoration: none;
+}
+
+#aboutContent a:hover {
+  text-decoration: underline;
+}
+
+@keyframes gradientAnimation {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+
 @media (prefers-color-scheme: dark) {
   body {
     background-color: #1C1C1E;
@@ -328,5 +387,20 @@ img#logo {
   button img {
     filter: invert(100%);
   }
+   #aboutContent a {
+    color: #007AFF;
+  }
+
+  #options-form label {
+  display: block;
+  margin-bottom: 8px;
+  color: #F2F2F7;
+  font-size: 13px;
+  font-weight: bold;
+}
+#aboutContent {
+  background: linear-gradient(45deg, #2c2c2e, #1c1c1e);
+  border: 1px solid #333;
+}
 
 }