[TASK] Create consumable icons for chrome and use them

The generate-icons.js takes care of the different pngs created using sharp, while on it also changed the lit imports so no warning about deprecated imports is thrown which was caused an error in chrome.
ochorocho · Dec 1, 2021 · 94546ff · 94546ff
1 parent 4e34e20
commit 94546ff
Show file tree

Hide file tree

Showing 26 changed files with 669 additions and 321 deletions.
diff --git a/addon/_locales/en/messages.json b/addon/_locales/en/messages.json
@@ -1,6 +1 @@
-{
-  "openButton": {
-    "message": "Open in GitPod",
-    "description": "Open current patch in GitPod."
-  }
-}
+{}
diff --git a/addon/manifest.json b/addon/manifest.json
@@ -7,19 +7,19 @@
   "default_locale": "en",
   "homepage_url": "https://github.com/ochorocho/tdk-gitpod-addon",
   "icons": {
-    "48": "icons/typo3-orange.svg",
-    "96": "icons/typo3-orange.svg"
+    "48": "icons/typo3-light-48.png",
+    "96": "icons/typo3-light-96.png"
   },
   "permissions": [
 	"*://review.typo3.org/*",
     "activeTab"
   ],
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
   "browser_action": {
-    "default_icon": "icons/typo3-dark.svg",
+    "default_icon": "icons/typo3-light-48.png",
     "theme_icons": [{
-      "light": "icons/typo3-light.svg",
-      "dark": "icons/typo3-dark.svg",
+      "light": "icons/typo3-light-48.png",
+      "dark": "icons/typo3-dark-48.png",
       "size": 48
     }],
     "default_title": "TYPO3 TDK",

diff --git a/generate-icons.js b/generate-icons.js
@@ -0,0 +1,36 @@
+const sharp = require('sharp')
+const fs = require('fs')
+const path = require('path')
+const glob = require('glob')
+
+const iconsFolder = path.join(__dirname, 'icons/')
+const iconsTargetFolder = path.join(__dirname, './dist/icons/')
+
+// Create target folder if does not exist
+const dir = path.join(iconsTargetFolder)
+if (!fs.existsSync(dir)) {
+  fs.mkdirSync(dir, 0o744)
+}
+
+// Get files to process
+glob(path.join(iconsFolder, '**/*.svg'), function (er, files) {
+  files.forEach((file) => {
+    renderIcon(file)
+  })
+})
+
+// Generate icon sizes
+function renderIcon(file, sizes = [48, 96]) {
+  const filename = path.parse(path.basename(file))
+
+  sizes.forEach((size) => {
+    sharp(file)
+      .rotate()
+      .resize(size)
+      .png()
+      .toFile(path.join(iconsTargetFolder, filename.name + '-' + size + '.png'))
+      .catch(err => {
+        console.log('Could not write file ...', err)
+      })
+  })
+}
diff --git a/addon/icons/typo3-dark.svg → icons/typo3-dark.svg b/addon/icons/typo3-dark.svg → icons/typo3-dark.svg
diff --git a/addon/icons/typo3-light.svg → icons/typo3-light.svg b/addon/icons/typo3-light.svg → icons/typo3-light.svg
diff --git a/addon/icons/typo3-orange.svg → icons/typo3-orange.svg b/addon/icons/typo3-orange.svg → icons/typo3-orange.svg
diff --git a/javascript/components/drop-down.js b/javascript/components/drop-down.js
@@ -1,4 +1,4 @@
-import {LitElement, html} from 'lit-element'
+import {LitElement, html} from 'lit'
 
 class DropDown extends LitElement {
   static get properties() {

diff --git a/javascript/components/gerrit-patch.js b/javascript/components/gerrit-patch.js
@@ -1,4 +1,4 @@
-import {LitElement, html} from 'lit-element'
+import {LitElement, html} from 'lit'
 import {Gerrit} from '../utils/gerrit'
 
 class GerritPatch extends LitElement {
@@ -19,7 +19,7 @@ class GerritPatch extends LitElement {
 
   render() {
     return html`
-      <style-sheet></style-sheet>
+      <style-sheet/>
 
       <div class="container">
         <div class="label">Patch</div>

diff --git a/javascript/components/not-available.js b/javascript/components/not-available.js
@@ -1,4 +1,4 @@
-import {LitElement, html} from 'lit-element'
+import {LitElement, html} from 'lit'
 
 class NotAvailable extends LitElement {
   static get properties() {

diff --git a/javascript/components/popup-content.js b/javascript/components/popup-content.js
@@ -1,4 +1,4 @@
-import {LitElement, html} from 'lit-element'
+import {LitElement, html} from 'lit'
 import {Gerrit} from '../utils/gerrit'
 
 class PopupContent extends LitElement {
@@ -7,7 +7,7 @@ class PopupContent extends LitElement {
       url: String,
       branches: Array,
       php: Array,
-      form: { type: Object, reflect: true }
+      form: {type: Object, reflect: true}
     }
   }
 
@@ -27,16 +27,19 @@ class PopupContent extends LitElement {
     this.gerrit.branches().then(data => {
       this.branches = data
     })
+
+    this.addEventListener('open-in-gitpod', (e) => {
+      this.handleSubmit()
+    })
   }
 
   render() {
-    console.log('PARENT FORM RENDER', this.form)
     this.patch = this.gerrit.parse(this.url)
     if (this.patch) {
       return html`
-        <style-sheet></style-sheet>
+        <style-sheet/>
 
-        <form @submit="${(e) => this.handleSubmit(e)}" method="post" id="GitPodForm">
+        <form method="post" id="GitPodForm">
           <tdk-username .form="${this.form}" label="Username"></tdk-username>
           <gerrit-patch .form="${this.form}" .patch="${this.patch.id}"
                         .revision="${this.patch.revision}"></gerrit-patch>
@@ -51,9 +54,12 @@ class PopupContent extends LitElement {
     }
   }
 
-  handleSubmit(e) {
-    e.preventDefault()
+  handleSubmit() {
     this.form.TDK_PATCH_ID = this.patch.id
+    const enves = Object.keys(this.form).map((key) => [key, this.form[key]].join('=')).join(',')
+    const gitPod = 'https://gitpod.io/#' + enves + '/https://github.com/ochorocho/tdk/tree/feature/gitpod'
+    window.open(gitPod)
+    console.log(gitPod)
     console.log(this.form)
   }
 }

diff --git a/javascript/components/style-sheet.js b/javascript/components/style-sheet.js
@@ -1,4 +1,4 @@
-import {LitElement, html} from 'lit-element'
+import {LitElement, html} from 'lit'
 
 /**
  * Used to include global styles.

diff --git a/javascript/components/tdk-button.js b/javascript/components/tdk-button.js
@@ -1,4 +1,4 @@
-import {LitElement, html} from 'lit-element'
+import {LitElement, html} from 'lit'
 
 class TdkButton extends LitElement {
   static get properties() {
@@ -12,17 +12,19 @@ class TdkButton extends LitElement {
     this.url = ''
   }
 
-  createRenderRoot() {
-    return this
-  }
-
   render() {
     return html`
-      <button id="open-git-pod" type="submit" class="gitpod">
+      <style-sheet/>
+
+      <button @click="${this.submitForm}" id="open-git-pod" type="submit" class="gitpod">
         Open in GitPod
       </button>
     `
   }
+
+  submitForm() {
+    this.dispatchEvent(new CustomEvent('open-in-gitpod', {bubbles: true, composed: true}))
+  }
 }
 
 export {TdkButton}
diff --git a/javascript/components/username.js b/javascript/components/username.js
@@ -1,4 +1,4 @@
-import {LitElement, html} from 'lit-element'
+import {LitElement, html} from 'lit'
 import {Gerrit} from '../utils/gerrit'
 
 class Username extends LitElement {

diff --git a/javascript/popup.js b/javascript/popup.js
@@ -1,5 +1,4 @@
 import '../scss/popup.scss'
-import {Translate} from './utils/translate'
 import {PopupContent} from './components/popup-content'
 import {NotAvailable} from './components/not-available'
 import {TdkButton} from './components/tdk-button'
@@ -8,9 +7,6 @@ import {DropDown} from './components/drop-down'
 import {GerritPatch} from './components/gerrit-patch'
 import {Username} from './components/username'
 
-// Seems obsolete ... might introduce kinda lll helper here.
-new Translate() // eslint-disable-line no-new
-
 customElements.define('popup-content', PopupContent)
 customElements.define('not-available', NotAvailable)
 customElements.define('tdk-button', TdkButton)

diff --git a/javascript/tdk.js b/javascript/tdk.js
diff --git a/javascript/utils/translate.js b/javascript/utils/translate.js
diff --git a/package.json b/package.json
@@ -6,7 +6,8 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "node_modules/.bin/webpack --mode=production && rm -Rf web-ext-artifacts/* && node_modules/.bin/web-ext build --source-dir=dist",
     "watch": "node_modules/.bin/webpack --mode=development --watch",
-    "dev": "cp -Rf addon dist;  node_modules/.bin/webpack --watch & node_modules/.bin/web-ext run --browser-console --start-url https://review.typo3.org/c/Packages/TYPO3.CMS/+/72275/ --start-url https://review.typo3.org/c/Packages/TYPO3.CMS/+/72275/13 --start-url review.typo3.org --start-url www.google.de --source-dir=dist --verbose",
+    "dev": "yarn watch & node_modules/.bin/web-ext run --browser-console --start-url https://review.typo3.org/c/Packages/TYPO3.CMS/+/72275/ --start-url https://review.typo3.org/c/Packages/TYPO3.CMS/+/72275/13 --start-url review.typo3.org --start-url www.google.de --source-dir=dist --verbose",
+    "dev:chrome": "yarn watch & node_modules/.bin/web-ext run -t chromium --browser-console --start-url https://review.typo3.org/c/Packages/TYPO3.CMS/+/72275/ --start-url https://review.typo3.org/c/Packages/TYPO3.CMS/+/72275/13 --start-url review.typo3.org --start-url www.google.de --source-dir=dist --verbose",
     "lint": "node_modules/.bin/web-ext lint --source-dir=dist",
     "sign:development": "rm -f dist/.web-extension-id; set -o allexport; source .env; set +o allexport; node_modules/.bin/web-ext sign --channel unlist --api-key=$MOZ_API_KEY --api-secret=$MOZ_API_SECRET --source-dir=dist/; unset MOZ_API_KEY MOZ_API_SECRET",
     "sign:production": "set -o allexport; source .env; set +o allexport; node_modules/.bin/web-ext sign --channel unlist --api-key=$MOZ_API_KEY --api-secret=$MOZ_API_SECRET --source-dir=dist/; unset MOZ_API_KEY MOZ_API_SECRET"
@@ -33,19 +34,21 @@
     "eslint-loader": "^4.0.2",
     "extract-loader": "^5.1.0",
     "file-loader": "^6.0.0",
-    "lit-element": "latest",
-    "lit-html": "^2.0.2",
+    "lit": "^2.0.2",
     "node-sass": "^6.0.1",
     "postcss": "^8.1.10",
     "postcss-inline-svg": "^5.0.0",
     "postcss-loader": "^4.1.0",
     "postcss-svgo": "^4.0.2",
+    "responsive-loader": "^2.3.0",
     "sass-lint": "^1.13.1",
     "sass-lint-webpack": "^1.0.3",
     "sass-loader": "^10.1.0",
+    "sharp": "^0.29.3",
     "style-loader": "^2.0.0",
     "web-ext": "^6.5.0",
     "webextension-polyfill": "^0.7.0",
-    "webpack-concat-plugin": "3.0.0"
+    "webpack-concat-plugin": "3.0.0",
+    "webpack-shell-plugin-next": "^2.2.2"
   }
 }
diff --git a/scss/general/font.scss b/scss/general/font.scss
@@ -1,10 +1,6 @@
 @font-face {
   font-family: Share;
-  src: url("fonts/Share-Regular.woff") format("woff");
-  font-weight: normal;
   font-style: normal;
+  font-weight: normal;
+  src: url('fonts/Share-Regular.woff') format('woff');
 }
-
-
-
-
diff --git a/scss/general/functions.scss b/scss/general/functions.scss
@@ -1,3 +1,7 @@
 @function spacer($name) {
   @return map-get($spacers, $name);
 }
+
+@function font($name) {
+  @return map-get($font-sizes, $name);
+}
diff --git a/scss/general/index.scss b/scss/general/index.scss
@@ -1,4 +1,4 @@
-@import "font";
-@import "variables";
-@import "mixins";
-@import "functions";
+@import 'font';
+@import 'variables';
+@import 'mixins';
+@import 'functions';
diff --git a/scss/general/mixins.scss b/scss/general/mixins.scss
@@ -1,11 +1,11 @@
 @import 'variables';
 
 @mixin button {
-  border: 1px solid $t3-orange;
   background: $t3-orange;
-  font-family: $font-family;
+  border: 1px solid $t3-orange;
   color: $white;
   cursor: pointer;
+  font-family: $font-family;
   font-size: 18px;
   padding: 5px;
   text-align: center;

diff --git a/scss/general/variables.scss b/scss/general/variables.scss
@@ -1,5 +1,5 @@
 // Dark Mode
-$dark: #333333;
+$dark: #333;
 $dark-menu: #4a4a4f;
 $dark-menu-hover: #5c5c61;
 $dark-text: #f9f9fa;
@@ -17,12 +17,13 @@ $spinner-background: #dedede;
 $spinner-color: #999;
 
 // Common
-$white: #ffffff;
-$spacers: ("xs": .3rem, "small": .5rem, "medium": 1rem, "large": 2rem);
+$white: #fff;
+$spacers: ('xs': .3rem, 'small': .5rem, 'medium': 1rem, 'large': 2rem);
+
 
 // TYPO3
 $font-family:  Share, Arial;
-$font-size:  1rem;
+$font-sizes:  ('xs': .5rem, 'small': .8rem, 'medium': 1rem, 'large': 2rem);
 
 $t3-orange: #eb7c00;
 $t3-orange-light: #f7a831;