Repository: manusa/electronim
Pull request #200 (2022-11-13 08:40:09)

💄 chrome-tabs uses material

sonarcloud[bot]: Kudos, SonarCloud Quality Gate passed!&nbsp; &nbsp; [![Quality Gate passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/passed-16px.png 'Quality Gate passed')](https://sonarcloud.io/dashboard?id=manusa_electronim&pullRequest=200)

[![Bug](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/bug-16px.png 'Bug')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=200&resolved=false&types=BUG) [![A](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/RatingBadge/A-16px.png 'A')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=200&resolved=false&types=BUG) [0 Bugs](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=200&resolved=false&types=BUG)  
[![Vulnerability](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/vulnerability-16px.png 'Vulnerability')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=200&resolved=false&types=VULNERABILITY) [![A](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/RatingBadge/A-16px.png 'A')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=200&resolved=false&types=VULNERABILITY) [0 Vulnerabilities](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=200&resolved=false&types=VULNERABILITY)  
[![Security Hotspot](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/security_hotspot-16px.png 'Security Hotspot')](https://sonarcloud.io/project/security_hotspots?id=manusa_electronim&pullRequest=200&resolved=false&types=SECURITY_HOTSPOT) [![A](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/RatingBadge/A-16px.png 'A')](https://sonarcloud.io/project/security_hotspots?id=manusa_electronim&pullRequest=200&resolved=false&types=SECURITY_HOTSPOT) [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=manusa_electronim&pullRequest=200&resolved=false&types=SECURITY_HOTSPOT)  
[![Code Smell](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/code_smell-16px.png 'Code Smell')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=200&resolved=false&types=CODE_SMELL) [![A](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/RatingBadge/A-16px.png 'A')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=200&resolved=false&types=CODE_SMELL) [0 Code Smells](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=200&resolved=false&types=CODE_SMELL)

[![60.0%](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/CoverageChart/60-16px.png '60.0%')](https://sonarcloud.io/component_measures?id=manusa_electronim&pullRequest=200&metric=new_coverage&view=list) [60.0% Coverage](https://sonarcloud.io/component_measures?id=manusa_electronim&pullRequest=200&metric=new_coverage&view=list)  
[![0.0%](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/Duplications/3-16px.png '0.0%')](https://sonarcloud.io/component_measures?id=manusa_electronim&pullRequest=200&metric=new_duplicated_lines_density&view=list) [0.0% Duplication](https://sonarcloud.io/component_measures?id=manusa_electronim&pullRequest=200&metric=new_duplicated_lines_density&view=list)



Patch:
diff --git a/src/chrome-tabs/chrome-tabs.browser.css b/src/chrome-tabs/chrome-tabs.browser.css
index 08b192a..71899dc 100644
--- a/src/chrome-tabs/chrome-tabs.browser.css
+++ b/src/chrome-tabs/chrome-tabs.browser.css
@@ -13,51 +13,49 @@
    See the License for the specific language governing permissions and
    limitations under the License.
  */
+@import '../styles/main.css';
+
 html {
-    overflow: hidden !important;
+  overflow: hidden !important;
 }
 
 body {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
 
 .tab-container {
-    position: relative;
-    width: auto;
-    flex-grow: 1;
-    display: flex;
-    background: #EEE;
-    align-items: center;
-    max-width: none;
+  position: relative;
+  width: auto;
+  flex-grow: 1;
+  display: flex;
+  background: #EEE;
+  align-items: center;
+  max-width: none;
 }
 
 .tab-container .chrome-tabs {
-    flex: 1;
-    background: #EEE;
-    padding: 10px 0;
+  flex: 1;
+  background: #EEE;
+  padding: 10px 0;
 }
 @media (prefers-color-scheme: dark) {
-    .tab-container,
-    .tab-container .chrome-tabs.chrome-tabs-dark-theme {
-        background: #202124;
-    }
+  .tab-container,
+  .tab-container .chrome-tabs.chrome-tabs-dark-theme {
+    background: #202124;
+  }
 
 }
 
 .tab-container .chrome-tabs .chrome-tab-close {
-    display: none;
+  display: none;
 }
 
 .tab-container .menu {
-    padding: 0 8px 0 0;
+  padding: 0 8px 0 0;
 }
 
 .tab-container .menu__button {
-    background: none;
-    border-color: transparent;
-}
-
-.tab-container .menu__button:hover {
-    border-color: #dbdbdb;
+  margin: 0 12px 0 8px;
+  z-index: 2;
 }
diff --git a/src/chrome-tabs/chrome-tabs.browser.mjs b/src/chrome-tabs/chrome-tabs.browser.mjs
index c575cd1..44ec2f6 100644
--- a/src/chrome-tabs/chrome-tabs.browser.mjs
+++ b/src/chrome-tabs/chrome-tabs.browser.mjs
@@ -15,7 +15,7 @@
  */
 /* eslint-disable no-undef */
 import {
-  APP_EVENTS, html, render, useLayoutEffect, useReducer, useState, Icon
+  APP_EVENTS, html, render, useLayoutEffect, useReducer, useState, IconButton
 } from '../components/index.mjs';
 import {
   initialState, reducer, activateTab, addTabs, moveTab, setNewVersionAvailable, setTabFavicon, setTabTitle,
@@ -174,17 +174,12 @@ const ChromeTabs = ({dispatch, state: {tabs}}) => {
 };
 
 const Menu = ({state: {newVersionAvailable}}) => {
-  const iconClass = `fas ${newVersionAvailable ? 'fa-arrow-alt-circle-up' : 'fa-bars'}`;
+  const icon = newVersionAvailable ? '\uf182' : '\ue5d4';
   return html`
-   <div class="menu">
-       <button
-          class="menu__button button"
-          onClick=${openMenu}
-          title=${newVersionAvailable ? 'New ElectronIM version is available' : ''}
-        >
-          <${Icon} icon=${iconClass}></${Icon}>
-       </button>
-   </div>
+    <${IconButton}
+      icon=${icon} className='menu__button' onClick=${openMenu}
+      title=${newVersionAvailable ? 'New ElectronIM version is available' : ''}
+    />
   `;
 };
 
diff --git a/src/chrome-tabs/index.html b/src/chrome-tabs/index.html
index ea6f5fe..be4e702 100644
--- a/src/chrome-tabs/index.html
+++ b/src/chrome-tabs/index.html
@@ -27,8 +27,5 @@ limitations under the License.
     <script src="./chrome-tabs.browser.mjs" type="module" ></script>
     <script src="../../bundles/lib/chrome-tabs/css/chrome-tabs.css.js"></script>
     <script src="../../bundles/lib/chrome-tabs/css/chrome-tabs-dark-theme.css.js"></script>
-    <script src="../../bundles/lib/@fortawesome/fontawesome-free/css/all.css.js"></script>
-    <script src="../../bundles/lib/bulma/css/bulma.css.js"></script>
-    <script src="../../bundles/lib/bulma/bulma.dark.scss.js"></script>
   </body>
 </html>
diff --git a/src/components/icon-button.mjs b/src/components/icon-button.mjs
index 7f02f4a..1d5b9fe 100644
--- a/src/components/icon-button.mjs
+++ b/src/components/icon-button.mjs
@@ -19,9 +19,10 @@ export const IconButton = ({
   icon,
   onClick = () => {},
   disabled = false,
-  className = ''
+  className = '',
+  ...properties
 }) => html`
-  <a href='#'
+  <a href='#' ...${properties}
     class=${`material3 icon-button ${disabled ? 'disabled ' : ''}${className}`}
     onClick=${disabled ? null : onClick}>${icon}</a>
 `;
diff --git a/src/styles/components/icon-button.css b/src/styles/components/icon-button.css
index 869c791..294d458 100644
--- a/src/styles/components/icon-button.css
+++ b/src/styles/components/icon-button.css
@@ -24,8 +24,10 @@
   outline: none;
   text-decoration: none;
   width: 24px;
-  line-height: 24px;
   height: 24px;
+  font-size: 24px;
+  line-height: 24px;
+  text-align: center;
 }
 
 .electronim .material3.icon-button::before {
@@ -44,5 +46,4 @@
 
 .electronim .material3.icon-button:hover::before {
   opacity: var(--md-sys-state-hover-state-layer-opacity);
-
 }


Test patch:
diff --git a/src/chrome-tabs/__tests__/chrome-tabs.browser.test.mjs b/src/chrome-tabs/__tests__/chrome-tabs.browser.test.mjs
index ff8a3ce..b59bca9 100644
--- a/src/chrome-tabs/__tests__/chrome-tabs.browser.test.mjs
+++ b/src/chrome-tabs/__tests__/chrome-tabs.browser.test.mjs
@@ -79,8 +79,8 @@ describe('ChromeTabs in Browser test suite', () => {
       });
       test('Main button shows arrow up', async () => {
         await waitFor(() =>
-          expect(document.querySelector('.menu__button i').getAttribute('class'))
-            .toBe('fas fa-arrow-alt-circle-up'));
+          expect(document.querySelector('.menu__button').textContent)
+            .toBe('\uf182'));
       });
       test('Main button has tooltip informing about new updates', async () => {
         await waitFor(() =>
@@ -206,8 +206,8 @@ describe('ChromeTabs in Browser test suite', () => {
   });
   describe('Main button events', () => {
     test('shows 3 bars when no updates available', () => {
-      const buttonClass = document.querySelector('.menu__button i').getAttribute('class');
-      expect(buttonClass).toBe('fas fa-bars');
+      const buttonClass = document.querySelector('.menu__button').textContent;
+      expect(buttonClass).toBe('\ue5d4');
     });
     test('menuButton click, should dispatch APP_EVENTS.appMenuOpen', () => {
       // When