Merge pull request #13 from EpocDotFr/replace-fa-icons

Replace Font Awesome icons

Author: EpocDotFr

README.md

@@ -27,7 +27,7 @@ A browser extension that enhance all Merge Requests lists on any instance of Git
 
 ## Prerequisites
 
-  - **GitLab**: 9.0 or above or GitLab.com (this addon requires GitLab API v4)
+  - **GitLab**: the latest available version of GitLab or GitLab.com
   - **Firefox**: >= 63 (because this extension uses the `clipboard.writeText` API)
   - **Chrome**: >= 66 (because this extension uses the `clipboard.writeText` API)
 
@@ -56,6 +56,10 @@ It would be great, however the extension has no reliable way to do that due to a
 
 That was the initial idea for the 1.6 release, however it's not possible due to a technical GitLab limitation.
 
+  - Some feature looks broken on GitLab version [old version of GitLab]. Can you please fix that?
+
+Nope. I don't want to deal with old versions of GitLab. Too much work.
+
 ## Changelog
 
 See [here](https://github.com/EpocDotFr/gitlab-merge-requests-lists-enhancer/releases).

js/content.js

@@ -131,6 +131,7 @@
 
             this.baseUrl = location.protocol + '//' + location.host;
             this.baseApiUrl = this.baseUrl + '/api/v4/';
+            this.baseIconsUrl = this.getBaseIconsUrl();
             this.userAuthenticated = this.isUserAuthenticated();
             this.pipelineFeatureEnabled = this.isPipelineFeatureEnabled();
             this.apiClient = new GitLabApiClient(this.baseApiUrl, this.getCsrfToken());
@@ -185,6 +186,27 @@
             return document.querySelector('.navbar-nav .header-user') ? true : false;
         }
 
+        /**
+         * Return the base URL to the SVG icons file.
+         */
+        getBaseIconsUrl() {
+            let svgUse = document.querySelector('svg.s16 > use');
+
+            if (!svgUse || !svgUse.href.baseVal) {
+                return null;
+            }
+
+            let url = svgUse.href.baseVal;
+
+            if (url.startsWith('/')) {
+                url = this.baseUrl + url;
+            }
+
+            let parsedUrl = new URL(url);
+
+            return parsedUrl.protocol + '//' + parsedUrl.host + '/' + parsedUrl.pathname;
+        }
+
         /**
          * Determines if the project do uses the Gitlab "pipeline" feature.
          */
@@ -298,7 +320,7 @@
 
                 if (this.userAuthenticated && this.preferences.enable_button_to_toggle_wip_status) {
                     let toggleWipStatusButton = '<button class="btn btn-secondary btn-md btn-default btn-transparent btn-clipboard has-tooltip gmrle-toggle-wip-status" title="Toggle WIP status" style="padding-left: 0">' +
-                        '<i class="fa fa-wrench" aria-hidden="true"></i>' +
+                        this.buildSpriteIcon('lock') +
                     '</button> ';
 
                     this.parseHtmlAndPrepend(
@@ -320,7 +342,7 @@
 
                             break;
                         case 'icon':
-                            jiraTicketLinkLabel = '<i class="fa fa-ticket" aria-hidden="true"></i>';
+                            jiraTicketLinkLabel = this.buildSpriteIcon('issues');
                             jiraTicketLinkToolip = 'Jira ticket ' + mergeRequestNode.dataset.jiraTicketId;
 
                             break;
@@ -347,7 +369,7 @@
 
                 if (this.preferences.enable_button_to_copy_mr_info) {
                     let copyMrInfoButton = '<button class="btn btn-secondary btn-md btn-default btn-transparent btn-clipboard has-tooltip gmrle-copy-mr-info" title="Copy Merge Request info" style="padding-left: 0">' +
-                        '<i class="fa fa-share-square-o" aria-hidden="true"></i>' +
+                        this.buildSpriteIcon('share') +
                     '</button> ';
 
                     this.parseHtmlAndPrepend(
@@ -370,20 +392,20 @@
                     // Copy source branch name button
                     if (this.preferences.enable_buttons_to_copy_source_and_target_branches_name) {
                         newInfoLineToInject += ' <button class="btn btn-secondary btn-md btn-default btn-transparent btn-clipboard has-tooltip gmrle-copy-branch-name" title="Copy branch name" data-branch-name-to-copy="source">' +
-                            '<i class="fa fa-clipboard" aria-hidden="true"></i>' +
+                            this.buildSpriteIcon('copy-to-clipboard') +
                         '</button>';
                     }
 
                     // Target branch name
-                    newInfoLineToInject += ' <i class="fa fa-long-arrow-right" aria-hidden="true"></i> ' +
+                    newInfoLineToInject += ' ' + this.buildSpriteIcon('long-arrow') + ' ' +
                         '<span class="project-ref-path has-tooltip" title="Target branch">' +
                             '<a class="ref-name" href="' + this.baseProjectUrl + '/-/commits/' + mergeRequest.target_branch + '">' + mergeRequest.target_branch + '</a>' +
                         '</span>';
 
                     // Copy target branch name button
                     if (this.preferences.enable_buttons_to_copy_source_and_target_branches_name) {
                         newInfoLineToInject += ' <button class="btn btn-secondary btn-md btn-default btn-transparent btn-clipboard has-tooltip gmrle-copy-branch-name" title="Copy branch name" data-branch-name-to-copy="target">' +
-                            '<i class="fa fa-clipboard" aria-hidden="true"></i>' +
+                            this.buildSpriteIcon('copy-to-clipboard') +
                         '</button>';
                     }
 
@@ -522,8 +544,6 @@
          */
         toggleMergeRequestWipStatus(mergeRequestNode, toggleButton) {
             toggleButton.disabled = true;
-            toggleButton.firstChild.classList.remove('fa-wrench');
-            toggleButton.firstChild.classList.add('fa-spinner', 'fa-spin');
 
             let isWip = mergeRequestNode.dataset.isWip == 'true';
             let newTitle = '';
@@ -547,8 +567,6 @@
                 mergeRequestNode.querySelector('.merge-request-title-text a').textContent = responseData.title;
             }).finally(function() {
                 toggleButton.disabled = false;
-                toggleButton.firstChild.classList.add('fa-wrench');
-                toggleButton.firstChild.classList.remove('fa-spinner', 'fa-spin');
             });
         }
 
@@ -575,7 +593,16 @@
               return placeholders[placeholder];
             }).trim();
         }
+
+        /**
+         * Generate the HTML code corresponding to an SVG icon.
+         */
+        buildSpriteIcon(iconName) {
+            return '<svg class="s16" data-testid="' + iconName + '-icon">' +
+                '<use xlink:href="' + this.baseIconsUrl + '#' + iconName + '"></use>' +
+            '</svg>';
+        }
     }
 
     let cs = new ContentScript();
-}(this));
+}(this));

screenshot.png

@@ -1,7 +1,7 @@
 MANIFEST_FILE = {
     'manifest_version': 2,
     'name': 'GitLab Merge Requests lists enhancer',
-    'version': '1.5.0',
+    'version': '1.5.1',
     'description': 'An extension that enhance all Merge Requests lists on any instance of Gitlab and GitLab.com.',
     'homepage_url': 'https://github.com/EpocDotFr/gitlab-merge-requests-lists-enhancer',
     'author': 'Maxime \'Epoc\' G.',