Dark mode (#36)

* css fixed

* dark enabled always

* funcs done

* themeList refactor

* SVG [PENDING]

* README.md updated

* fix svgs

* navbar height styling

* min width fixed

* remove errors

* css fixes

* chrome whiteFlash removed

* remove remove css statement

* firefox whiteflash removed

* darkmode scroll-bars

* corner fixed

* overall scroll fixed

* scroll on hover

* add comments to contentDark.js

* height 8px

* execution at the end

* version change

* comments change

* remove event listener

* Seperate imports from packages and local modules

* CHROME_EXTENSION => NODE_ENV

* gif updated

Co-authored-by: Taveesh Anand <tavy.andy97@gmail.com>

Author: vedanshgarg

README.md

@@ -58,5 +58,6 @@ SpanTree uses the following open-source packages:
 - [redux](https://github.com/reduxjs/redux)
 - [webext-redux](https://github.com/tshaddix/webext-redux)
 - [file-icons](https://github.com/file-icons/atom)
+- [dark-gitlab](https://gitlab.com/vednoc/dark-gitlab)
 - [axios](https://github.com/axios/axios)
 - [immer](https://github.com/immerjs/immer)

content/src/scripts/components/Pane/Pane.jsx

@@ -4,6 +4,7 @@ import SVG from "../SVG";
 import TreeList from "../../containers/TreeList/TreeList";
 import Resizer from "../../containers/Resizer/Resizer";
 import { fetchURLDetails } from "../../utils/url";
+import { switchTheme } from "../../utils/themeList";
 
 import "./styles.css";
 
@@ -35,8 +36,13 @@ function Pane({ toggleOpened, width, firstPageLoad, setFirstPageLoad }) {
               />{" "}
               {URLDetails.dirFormatted}
             </div>
-            <div onClick={toggleOpened} className="close-button">
-              <SVG icon="close" height="12" />
+            <div className="pane-icons">
+              <span onClick={switchTheme} className="close-button">
+                <SVG icon="half" height="9" />
+              </span>
+              <span onClick={toggleOpened} className="close-button">
+                <SVG icon="close" height="12" />
+              </span>
             </div>
           </div>
           <div className="pane-details" style={{ width: width - 12 + "px" }}>

content/src/scripts/components/Pane/styles.css

@@ -25,10 +25,14 @@
   background-color: rgb(77, 61, 146);
   color: white;
   padding: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
 }
 
 .close-button {
   cursor: pointer;
+  margin: 0 4px;
 }
 
 .spread {
@@ -48,3 +52,7 @@
   text-overflow: ellipsis;
   font-weight: bold;
 }
+
+.pane-icons{
+  min-width: 35px;
+}

content/src/scripts/components/SVG/SVG.jsx

@@ -1,7 +1,9 @@
 import React from "react";
+
 import Branch from "./assets/Branch";
 import Repo from "./assets/Repo";
 import Close from "./assets/Close";
+import Half from "./assets/Half";
 
 function SVG({ icon, height, style }) {
   switch (icon) {
@@ -11,6 +13,8 @@ function SVG({ icon, height, style }) {
       return <Repo height={height} style={style} />;
     case "close":
       return <Close height={height} style={style} />;
+    case "half":
+      return <Half height={height} style={style} />;
     default:
       return "faulty svg";
   }

content/src/scripts/components/SVG/assets/Close.jsx

@@ -4,7 +4,7 @@ function Close({ height, style }) {
   let heightSVG = height ? height : "16";
   let widthSVG = height ? `${(3 * height) / 4}` : "12";
   return (
-    <svg width={widthSVG} height={heightSVG} viewBox="0 0 12 16" style={style}>
+    <svg width={widthSVG} height={heightSVG} viewBox="0 0 12 12" style={style}>
       <path d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z" />
     </svg>
   );

content/src/scripts/components/SVG/assets/Half.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+function Half({ height, style }) {
+  let heightSVG = height ? height : "9";
+  let widthSVG = height ? height : "9";
+  return (
+    <svg height={heightSVG} width={widthSVG} viewBox="0 0 20 20" style={style}>
+      <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="Dribbble-Light-Preview" transform="translate(-180.000000, -4199.000000)"  fill="#ffffff">
+          <g id="icons" transform="translate(56.000000, 160.000000)">
+            <path d="M126,4049 C126,4044.589 129.589,4041 134,4041 L134,4057 C129.589,4057 126,4053.411 126,4049 M134,4039 C128.477,4039 124,4043.477 124,4049 C124,4054.523 128.477,4059 134,4059 C139.523,4059 144,4054.523 144,4049 C144,4043.477 139.523,4039 134,4039" id="contrast-[#907]"></path>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default Half;

content/src/scripts/containers/TreeList/styles.css

@@ -13,21 +13,22 @@
 }
 
 .tree-list::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.25);
-  border-radius: 10px;
-  background-color: #f5f5f5;
+  background-color: #c9c9c9;
+}
+
+.tree-list::-webkit-scrollbar-corner {
+  background-color: #c9c9c9;
 }
 
 .tree-list::-webkit-scrollbar {
   width: 8px;
   height: 8px;
-  background-color: #f5f5f5;
 }
 
 .tree-list::-webkit-scrollbar-thumb {
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  background-color: rgba(0, 0, 0, 0.55);
+  background-color: rgba(0, 0, 0, 0.50);
 }
 
 .parent-list {

content/src/scripts/index.js

@@ -11,7 +11,6 @@ const middleware = [thunkMiddleware];
 const storeWithMiddleware = applyMiddleware(proxyStore, ...middleware);
 
 const anchor = document.createElement("div");
-
 anchor.id = "rcr-anchor";
 
 if (document.querySelector(".layout-page") !== null) {

content/src/scripts/libs/contentDark.js

@@ -0,0 +1,78 @@
+// contentDark.js
+// As the main content.js is loaded on "document_idle", the dark theme needs to be loaded at the very beginning of
+// tab load to prevent a common phenomenon found in Chrome themes known as white flash. So this contentDark.js is
+// loaded on "document_start" and adds the darkGitlab.css to the <html> before the page starts loading.
+// Note: This file is not processed by webpack but is copied by gulp to the build/libs folder as is.
+
+// themeList.js
+const isPresentInThemeList = () => {
+  const domain = location.origin;
+  let themeList = JSON.parse(localStorage.getItem("spantree-themelist")) || {};
+
+  return domain in themeList && themeList[domain];
+};
+
+// browser.js
+const isWindowObject = (value) => {
+  return value != null && typeof value === "object" && "setInterval" in value;
+};
+const freeSelf = isWindowObject(typeof self == "object" && self) && self;
+const navigator = freeSelf && freeSelf.navigator;
+const userAgent = ((navigator && navigator.userAgent) || "").toLowerCase();
+const vendor = ((navigator && navigator.vendor) || "").toLowerCase();
+const browserKey = () => {
+  if (isChrome()) return "chrome";
+  if (isFirefox()) return "moz";
+  return "chrome";
+};
+const isChrome = () => {
+  const match = /google inc/.test(vendor)
+    ? userAgent.match(/(?:chrome|crios)\/(\d+)/)
+    : null;
+  return match !== null && !isOpera();
+};
+const isFirefox = () => {
+  const match = userAgent.match(/(?:firefox|fxios)\/(\d+)/);
+  return match !== null;
+};
+const isOpera = () => {
+  const match = userAgent.match(/(?:^opera.+?version|opr)\/(\d+)/);
+  return match !== null;
+};
+
+function fireContentLoadedEvent () {
+  // Remove event listener
+  document.removeEventListener('DOMContentLoaded', fireContentLoadedEvent);
+
+  // Insert CSS into Body
+  const darkGitlab = document.createElement("link");
+  darkGitlab.id = "spantree-theme";
+  darkGitlab.disabled = !isPresentInThemeList();
+  darkGitlab.rel = "stylesheet";
+  darkGitlab.type = "text/css";
+  darkGitlab.href = `${browserKey()}-extension://${chrome.i18n.getMessage(
+    "@@extension_id"
+  )}/libs/gitlab-dark.css`;
+  document
+    .querySelector("body")
+    .insertBefore(darkGitlab, document.querySelector("body").childNodes[0]);
+
+  // Remove CSS from Head
+  document.body.onload = () => {
+    document.querySelector("#spantree-theme-temp").remove();
+  };
+}
+
+// Insert CSS into Head
+const darkGitlabTemp = document.createElement("link");
+darkGitlabTemp.id = "spantree-theme-temp";
+darkGitlabTemp.disabled = !isPresentInThemeList();
+darkGitlabTemp.rel = "stylesheet";
+darkGitlabTemp.type = "text/css";
+darkGitlabTemp.href = `${browserKey()}-extension://${chrome.i18n.getMessage(
+  "@@extension_id"
+)}/libs/gitlab-dark.css`;
+document
+  .querySelector("html")
+  .insertBefore(darkGitlabTemp, document.querySelector("html").childNodes[0]);
+document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);