refcator(extension): support new GitHub Design

Author: softvar

CHANGELOG.md

@@ -1,14 +1,26 @@
-- **v3.1.0** _- 6th Jan, 2020_
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## **v4.0.0** - 26th June, 2020
+
+  - Support new GitHub Design. Refer [GitHub Blog](https://github.blog/changelog/2020-06-23-design-updates-to-repositories-and-github-ui/)
+  - Backward compatibility to the old design, if new UI is not 100% publicly available.
+  - Fix the options token validation message issue.
+
+## **v3.1.0** - 6th Jan, 2020
 
   - Extension only utilizes `webNavigation` history for GitHub website using webNavigation event filters. Rest assured, history of any other website is not permitted.
   - Updated README with the doc link explaining introduction of `webRequest` and `webNavigation` API for supporting single-page GitHub website.
 
-- **v3.0.1** _- 3rd Jan, 2020_
+## **v3.0.1** - 3rd Jan, 2020
 
   - Use `webNavigation` API in background to detect page-url changes
   - Remove `setInterval` and `onpopstate` for page-url change listener from `inject.js`
 
-- **v3.0.0** _- 28th Dec, 2019_
+## **v3.0.0** - 28th Dec, 2019
 
   - Since GitHub is now SPA, changes are made to handle SPA behavior
   - Introduce background script to get web requests and append elements when page is rendered. For this, `webRequest` permission is required.
@@ -18,62 +30,62 @@
     - `webRequest` - to support GitHub being a single-page-application now. Read this [detailed blog](https://medium.com/@softvar/making-chrome-extension-smart-by-supporting-spa-websites-1f76593637e8).
     - `webNavigation` - to support GitHub being a single-page-application now. Read this [detailed blog](https://medium.com/@softvar/making-chrome-extension-smart-by-supporting-spa-websites-1f76593637e8).
 
-- **v2.1.0** _- 16th Nov, 2019_
+## **v2.1.0** - 16th Nov, 2019
 
   - Remove gulp and used webpack for bundling and automation
   - Remove clipboard from source code and instead use a dep bundled with (minified)inject.js
   - Remove jshint and used eslint for linting
   - Use prettier for auto-formatting files
   - Use husky and lint-staged to configure and run git-hooks
 
-- **v2.0.3** _- 27th Oct, 2018_
+## **v2.0.3** - 27th Oct, 2018
 
   - Fix selector path for inserting _copy file_ and _download file_ buttons while viewing a file
   - Minify content script thereby saving `4KB` per request. `inject.js` from `12KB` to `4KB`
 
-- **v2.0.2** _- 26th Oct, 2018_
+## **v2.0.2** - 26th Oct, 2018
 
   - Fix buttons alignment in options.js
 
-- **v2.0.0** _- 09th Aug, 2018_
+## **v2.0.0** - 09th Aug, 2018
 
   - Improvement :: Update logos/icons to adhere with [GitHub logo policy](https://github.com/logos)
   - Improvement :: Show GitHub-styled tooltip when hovering hover file download link
 
-- **v1.0.8** _- 1st May, 2018_
+## **v1.0.8** - 1st May, 2018
 
   - Fix :: Update classes to fix download. (Cmd/Ctr + Click) to download file
 
-- **v0.1.8** _- 10th Mar, 2017_
+## **v0.1.8** - 10th Mar, 2017
 
   - Imporvemnt :: Use `clipboard` as a dependency and use it via `manifest.json`
 
-- **v0.1.7** _- 10th Mar, 2017_
+## **v0.1.7** - 10th Mar, 2017
 
   - Fix :: Add proper toggle class [github changed class names] which fixes flickering while hover
   - Fix :: Dont add `td` when there's no file present.
 
-- **v0.1.6** _- 27th Aug, 2016_
+## **v0.1.6** - 27th Aug, 2016
 
   - Fix :: not showing repo size when navigating back; fix no hash change detection
 
-- **v0.1.5** _- 22nd Aug, 2016_
+## **v0.1.5** - 22nd Aug, 2016
 
   - Feature :: Show repo size on GitHub's repo homepage
   - Fix :: bugfix of default branch other than **master**
 
-- **v0.1.4** _- 20th Aug, 2016_
+## **v0.1.4** - 20th Aug, 2016
 
   - Improvement :: Better way of adding GitHub Access token - click extension or click options - Enhanced GitHub after opening _chrome://extension_
 
-- **v0.1.3** _- 14th Aug, 2016_
+## **v0.1.3** - 14th Aug, 2016
 
   - Fix :: fix focus effect on up-tree not removing blank td while navigating [#3](https://github.com/softvar/enhanced-github/pull/3)
 
-- **v0.1.2** _- 14th Aug, 2016_
+## **v0.1.2** - 14th Aug, 2016
 
   - Fix :: fix bug file on commits/<branch> url
 
-- **v0.1.1** _- 13th Aug, 2016_
+## **v0.1.1** - 13th Aug, 2016
 
   - Initial Launch

README.md

@@ -67,6 +67,19 @@ This Chrome extension will automatically pick this valid access token and Bingo!
 
 ## Screenshots
 
+### New GitHub Design - [Blog](https://github.blog/changelog/2020-06-23-design-updates-to-repositories-and-github-ui/)
+
+#### Screenshot of each file size and it's download link
+
+<img src="screenshots/github-repo-home-new.png">
+
+#### Screenshot of Copy fle contents and download link
+
+<img src="screenshots/github-file-new.png">
+
+
+### Old GitHub Design
+
 #### Screenshot of each file size and it's download link
 
 <img src="screenshots/github-repo-home.png">
@@ -79,6 +92,7 @@ This Chrome extension will automatically pick this valid access token and Bingo!
 
 - Thanks to [@zenorocha](https://github.com/zenorocha/) for [Clipboard.js](https://github.com/zenorocha/clipboard.js) - Modern copy to clipboard. No Flash. Just 3kb gzipped.
 
+
 ## Development
 
 1. Clone this repo
@@ -117,6 +131,15 @@ Support this project with your organization. Your logo will show up here with a
 
 <a href="https://opencollective.com/enhanced-github/organization/0/website"><img src="https://opencollective.com/enhanced-github/organization/0/avatar.svg"></a>
 
+## Policy
+
+❗️NO BS POLICY:
+
+> Enahanced GitHub Chrome Extension doesn't collect/share/care about your data at all.
+>
+> Asks for GitHub Access Token for private repos and if Rate Limiting is your concern.
+
+
 ## Copyright and License
 
 ❗️ This extension is not sponsored by, endorsed by, or an official project of GitHub. This is a personal project and is developed solely for providing additional functionalities on GitHub website.

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Enhanced GitHub",
   "short_name": "Enhanced GitHub",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "manifest_version": 2,
   "description": "Display repo size, size of each file, download link and option to copy file contents",
   "homepage_url": "https://github.com/softvar/enhanced-github",
@@ -13,7 +13,7 @@
   },
   "browser_action": {
     "default_icon": "icons/enhanced-github48.png",
-    "default_popup": "index.html",
+    "default_popup": "popup.html",
     "default_title": "Enhanced GitHub"
   },
   "permissions": ["*://*.github.com/*", "storage", "webRequest", "webNavigation"],

options.js

@@ -30,11 +30,15 @@ function saveOptions() {
       // Update statusText to let user know options were saved.
       var statusText = document.getElementById('status--text');
       var validationWarning = document.getElementById('validation-warning');
+      var validationMessage = validateUserToken(token);
 
-      statusText.textContent = 'Options saved!!';
-      validationWarning.textContent = validateUserToken(token);
+      if (!validationMessage) {
+        statusText.textContent = 'Options saved!!';
+        document.getElementById('status').style.display = 'inline-block';
+      }
+
+      validationWarning.textContent = validationMessage;
 
-      document.getElementById('status').style.display = 'inline-block';
       setTimeout(function() {
         statusText.textContent = '';
         document.getElementById('status').style.display = 'none';

package.json

@@ -1,7 +1,7 @@
 {
   "name": "enhanced-github",
   "version": "3.1.0",
-  "description": "Add-ons for GitHub website - Download File, display size of each file and Copy file contents",
+  "description": "Add-ons for GitHub website - Repo size, Download File, display size of each file and Copy file contents",
   "main": "src/inject.js",
   "scripts": {
     "dev": "webpack --watch --mode=development",
@@ -25,6 +25,8 @@
     "extension",
     "github",
     "enhanced-github",
+    "repo-size",
+    "file-size",
     "file-download"
   ],
   "dependencies": {

index.html popup.html

@@ -59,7 +59,7 @@ <h4>Works only on <i>github.com/*</i></h4>
         <li>Automatically displays each file size in every active branch (not applicable for folder / symlink).</li>
         <li>Show download link for each individual file (not applicable for folder / symlink).</li>
         <li>Copy file's contents directly to Clipboard (just won't work for markdown files).</li>
-        <li>Download file while viewing it's contents.</li>
+        <li>Download file content.</li>
       </ol>
     </div>
 

screenshots/github-file-new.png

@@ -10,6 +10,12 @@ const storageUtil = require('./utils/storageUtil');
 const CommonEnum = require('./enums/CommonEnum');
 
 window.chrome.extension.sendMessage({}, function(_response) {
+  window.enhancedGithub = {
+    config: {
+      isNewDesign: localStorage.getItem('enhanced-github-for-new-design') || 1
+    }
+  };
+
   let readyStateCheckInterval = setInterval(function() {
     if (document.readyState === 'complete') {
       clearInterval(readyStateCheckInterval);

screenshots/github-repo-home-new.png

@@ -94,6 +94,13 @@ let commonUtil = {
     [].forEach.call(document.querySelectorAll(selector), function(el) {
       el.parentNode.removeChild(el);
     });
+  },
+  isForGithUbNewUi: function() {
+    if (window.enhancedGithub && window.enhancedGithub.config) {
+      return window.enhancedGithub.config.isNewDesign;
+    }
+
+    return false;
   }
 };
 

src/inject.js

@@ -32,6 +32,29 @@ let domUtil = {
     commonUtil.removePrevInstancesOf('.repo-size');
 
     let formattedFileSize = commonUtil.convertSizeToHumanReadableFormat(storageUtil.get('repoSize') * 1024); // GitHub API return size in KB for repo
+
+    if (commonUtil.isForGithUbNewUi()) {
+      let formattedFileSize = commonUtil.convertSizeToHumanReadableFormat(storageUtil.get('repoSize') * 1024); // GitHub API return size in KB for repo
+      let elem = document.querySelector('a[href="#readme"]');
+
+      if (elem) {
+        let html = `
+          <div class="mt-3">
+            <a href="javascript:void(0)" class="muted-link">
+              <svg class="octicon octicon-database mr-2" mr="2" aria-hidden="true" height="16" version="1.1" viewBox="0 0 12 16" width="16">
+                <path d="M6 15c-3.31 0-6-.9-6-2v-2c0-.17.09-.34.21-.5.67.86 3 1.5 5.79 1.5s5.12-.64 5.79-1.5c.13.16.21.33.21.5v2c0 1.1-2.69 2-6 2zm0-4c-3.31 0-6-.9-6-2V7c0-.11.04-.21.09-.31.03-.06.07-.13.12-.19C.88 7.36 3.21 8 6 8s5.12-.64 5.79-1.5c.05.06.09.13.12.19.05.1.09.21.09.31v2c0 1.1-2.69 2-6 2zm0-4c-3.31 0-6-.9-6-2V3c0-1.1 2.69-2 6-2s6 .9 6 2v2c0 1.1-2.69 2-6 2zm0-5c-2.21 0-4 .45-4 1s1.79 1 4 1 4-.45 4-1-1.79-1-4-1z"></path>
+              </svg>
+                <span class="text-emphasized">${formattedFileSize.size}</span>
+                <span>${formattedFileSize.measure}</span>
+            </a>
+          </div>
+        `;
+
+        elem.parentElement.insertAdjacentHTML('beforeend', html);
+      }
+
+      return;
+    }
     let elem = document.querySelector('ul.numbers-summary');
 
     if (elem) {
@@ -100,6 +123,13 @@ let domUtil = {
     }
   },
   addFileSizeAndDownloadLink: function() {
+    if (commonUtil.isForGithUbNewUi()) {
+      apiUtil.getRepoContent(function(data) {
+        handlersUtil.onPathContentFetched(data);
+      });
+
+      return;
+    }
     let links = document.querySelectorAll('tr.js-navigation-item > td.content a');
     let elems = document.querySelectorAll('tr.js-navigation-item > td.age');
 

src/utils/commonUtil.js

@@ -30,9 +30,6 @@ let handlersUtil = {
       return;
     }
 
-    commonUtil.removePrevInstancesOf('.download'); // remove before adding new ones
-
-    let uptree = document.querySelectorAll('tr.up-tree > td');
     let isAnyFilePresent = false;
 
     for (let i = 0; i < data.length; i++) {
@@ -46,6 +43,61 @@ let handlersUtil = {
       return;
     }
 
+    if (commonUtil.isForGithUbNewUi()) {
+      setTimeout(function() {
+        const containerItems = document.querySelectorAll(
+          '.js-navigation-container.js-active-navigation-container .js-navigation-item'
+        );
+
+        let actualDataIndex = 0;
+
+        for (var i = 0; i < containerItems.length; i++) {
+          const commitElem = containerItems[i].querySelector('.commit-message');
+
+          if (commitElem) {
+            containerItems[i].querySelector('div:nth-of-type(2)').classList.remove('col-md-2', 'mr-3');
+            containerItems[i].querySelector('div:nth-of-type(2)').classList.add('col-md-1', 'mr-2');
+
+            if (data[actualDataIndex].type === 'file') {
+              let formattedFileSize = commonUtil.getFileSizeAndUnit(data[actualDataIndex]);
+
+              let html = `
+                <div role="gridcell" class="mr-1 text-gray-light" style="width: 95px;">
+                  <span class="css-truncate css-truncate-target d-block">
+                    <span style="margin-right: 5px;">
+                      ${formattedFileSize}
+                    </span>
+                    <a style="float: right" href="${data[actualDataIndex].download_url}" title="(Alt/Option/Ctrl + Click) to download File" aria-label="(Alt/Option/Ctrl + Click) to download File" class="tooltipped tooltipped-s"
+                      download="${data[actualDataIndex].name}">
+                      <svg class="octicon octicon-cloud-download" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
+                        <path d="M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1 3 2.92 3 5 1.02 5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7 1.3 8.28 1.3 8c0-.17.05-1.7 1.7-1.7h1.3V5c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81 0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16 5.06 14.08 4 12 4z"></path>
+                      </svg>
+                    </a>
+                  </span>
+                </div>
+              `;
+
+              commitElem.insertAdjacentHTML('afterend', html);
+            } else {
+              const defaultHtml = `
+                <div role="gridcell" class="mr-1" style="width: 90px;"></div>
+              `;
+
+              commitElem.insertAdjacentHTML('afterend', defaultHtml);
+            }
+
+            actualDataIndex++;
+          }
+        }
+      }, 1000);
+
+      return;
+    }
+
+    commonUtil.removePrevInstancesOf('.download'); // remove before adding new ones
+
+    let uptree = document.querySelectorAll('tr.up-tree > td');
+
     if (uptree && uptree[3]) {
       uptree[3].insertAdjacentHTML('afterend', '<td class="download"></td>');
     }

src/utils/domUtil.js

@@ -45,7 +45,8 @@ function addPlugins(argv) {
         { from: '*html', to: destination },
         { from: 'manifest.json', to: destination },
         { from: 'icons/*.png', to: destination },
-        { from: 'src/background.js', to: destination }
+        { from: 'src/background.js', to: destination },
+        { from: 'LICENSE', to: destination }
       ],
       { copyUnmodified: true }
     )