refact codes

README.md

@@ -46,6 +46,7 @@ yarn dev chrome
 yarn dev firefox
 yarn dev opera
 yarn dev edge
+yarn dev safari
 ```
 
 ## Build extension
@@ -54,6 +55,7 @@ yarn build chrome
 yarn build firefox
 yarn build opera
 yarn build edge
+yarn build safari
 ```
 
 ## Lint codes
@@ -72,7 +74,20 @@ yarn lint:fix
 yarn type-check
 ```
 
+## Generate font file for Box-drawing character
+```
+pip install fonttools
+```
+
+```
+cd ./tools/font-builder
+. build.sh
+```
+
 ## Show supported browsers
 ```
 yarn supported-browsers
 ```
+
+# LICENSE
+MIT

app/scripts/content.ts

@@ -1,6 +1,5 @@
 import ChannelObserver from './content/channel-observer';
 import ChannelGrouper from './content/channe-grouper';
-import { alreadyAppliedExtension } from './content/apply-checker';
 import { waitElementRender } from './content/utils/wait-element-render';
 import * as domConstants from './content/dom-constants';
 import { logger } from './content/logger';
@@ -23,24 +22,19 @@ const WAIT_RENDER_CHANNEL_LIST_INTERVAL = 200;
         return;
       }
 
-      // Check already running extension (For backward compatibility)
-      if (alreadyAppliedExtension()) {
-        logger.labeledLog('Extension is already applied. Skip apply.');
-        return;
-      }
-
       logger.labeledLog('Rendered channel list item.');
 
       const channelObserver = new ChannelObserver();
       const channelGrouper = new ChannelGrouper();
 
       // Grouping
-      channelGrouper.groupingAllByPrefixOnIdle();
+      channelGrouper.groupingAllByPrefixOnIdleAndDebounce();
 
       // Grouping on update
       channelObserver.on('update', () => {
-        channelGrouper.groupingAllByPrefixOnIdle();
+        channelGrouper.groupingAllByPrefixOnIdleAndDebounce();
       });
+
       channelObserver.startObserve();
     })
     .catch(() => {

app/scripts/content/channe-grouper.ts

@@ -7,30 +7,40 @@ import { DATA_KEY_CHANNEL_NAME, DATA_KEY_CHANNEL_PREFIX, DATA_KEY_RAW_CHANNEL_NA
 // constants
 const CHANNEL_NAME_ROOT = '-/';
 const GROUPING_IDLE_CALLBACK_TIMEOUT = 3 * 1000;
+const UPDATE_CHANNEL_LIST_MIN_INTERVAL = 200;
 
 /**
  * Channel Grouping Class
  */
 export default class ChannelGrouper {
+  private debounceEmitUpdateTimeoutId: number | null;
   private idleCallbackId: number | null;
 
   constructor() {
+    this.debounceEmitUpdateTimeoutId = null;
     this.idleCallbackId = null;
   }
 
-  groupingAllByPrefixOnIdle(): void {
-    if (this.idleCallbackId !== null) {
-      window.cancelIdleCallback(this.idleCallbackId);
+  groupingAllByPrefixOnIdleAndDebounce(): void {
+    if (this.debounceEmitUpdateTimeoutId !== null) {
+      window.clearTimeout(this.debounceEmitUpdateTimeoutId);
     }
 
-    this.idleCallbackId = window.requestIdleCallback(
-      () => {
-        this.groupingAllByPrefix();
-      },
-      {
-        timeout: GROUPING_IDLE_CALLBACK_TIMEOUT,
-      },
-    );
+    // Reduce infinity loop impact
+    this.debounceEmitUpdateTimeoutId = window.setTimeout(() => {
+      if (this.idleCallbackId !== null) {
+        window.cancelIdleCallback(this.idleCallbackId);
+      }
+
+      this.idleCallbackId = window.requestIdleCallback(
+        () => {
+          this.groupingAllByPrefix();
+        },
+        {
+          timeout: GROUPING_IDLE_CALLBACK_TIMEOUT,
+        },
+      );
+    }, UPDATE_CHANNEL_LIST_MIN_INTERVAL);
   }
 
   protected groupingAllByPrefix(): void {

app/scripts/content/channel-observer.ts

@@ -3,23 +3,17 @@ import { EventEmitter } from 'eventemitter3';
 import * as domConstants from './dom-constants';
 import { logger } from './logger';
 
-const UPDATE_CHANNEL_LIST_MIN_INTERVAL = 200;
-
 /**
  * Channel Observing Class
  * @extends EventEmitter
  */
 export default class ChannelObserver extends EventEmitter<'update'> {
   private isObserving: boolean;
-  private lastUpdatedTime: number;
-  private debounceEmitUpdateTimeoutId: number | null;
   private channelListObserver: MutationObserver;
 
   constructor() {
     super();
     this.isObserving = false;
-    this.lastUpdatedTime = 0;
-    this.debounceEmitUpdateTimeoutId = null;
     this.channelListObserver = new MutationObserver((mutations): void => {
       logger.labeledLog('Observed channel dom change');
 
@@ -36,10 +30,14 @@ export default class ChannelObserver extends EventEmitter<'update'> {
       });
 
       // Emit update
-      this.debounceEmitUpdate();
+      this.emitUpdate();
     });
   }
 
+  protected emitUpdate(): void {
+    this.emit('update');
+  }
+
   async startObserve(): Promise<void> {
     this.enableObserver();
 
@@ -48,7 +46,7 @@ export default class ChannelObserver extends EventEmitter<'update'> {
       switch (document.visibilityState) {
         case 'visible':
           logger.labeledLog('Changed visibility to [visible] state');
-          this.debounceEmitUpdate();
+          this.emitUpdate();
           this.enableObserver();
           break;
         case 'hidden':
@@ -67,7 +65,7 @@ export default class ChannelObserver extends EventEmitter<'update'> {
     const workspaceObserver = new MutationObserver((): void => {
       logger.labeledLog('Workspace tab changed');
 
-      this.debounceEmitUpdate();
+      this.emitUpdate();
 
       // re-observe
       this.disableObserver();
@@ -132,17 +130,4 @@ export default class ChannelObserver extends EventEmitter<'update'> {
       attributeFilter: ['data-qa'],
     });
   }
-
-  protected debounceEmitUpdate(): void {
-    if (this.debounceEmitUpdateTimeoutId !== null) {
-      window.clearTimeout(this.debounceEmitUpdateTimeoutId);
-    }
-
-    // Reduce infinity loop impact
-    this.debounceEmitUpdateTimeoutId = window.setTimeout(() => {
-      this.emit('update');
-      logger.labeledLog('Emitted [update] event');
-      this.lastUpdatedTime = Date.now();
-    }, UPDATE_CHANNEL_LIST_MIN_INTERVAL);
-  }
 }

app/styles/content.css

@@ -19,15 +19,15 @@
   font-weight: 400;
   transform: scale(1.0, 1.5);
   display: inline-block;
-  font-family: "SlackChannelsGrounping-NotoSansJP-Medium";
+  font-family: "SlackChannelsGrounping-NotoSansJP-Medium", monospace;
   -webkit-font-smoothing: none;
   -moz-osx-font-smoothing: unset;
   position: relative;
 }
 
 .scg-ch-separator:before {
   content: "│";
-  font-family: "SlackChannelsGrounping-NotoSansJP-Medium";
+  font-family: "SlackChannelsGrounping-NotoSansJP-Medium", monospace;
   position: absolute;
   top: 0;
   left: 0;