Initial commit

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Kyle Mitchell
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,10 @@
+placid-tab
+==========
+
+A minimal New Tab page for Firefox.  **Still in development**
+
+**Now with both dark _and_ light themes!**
+
+![Dark theme | main screen](images/dark-main.png)
+![Light theme | main screen](images/light-main.png)
+![Dark theme | options screen](images/dark-options.png)

css/color-dark.css

@@ -0,0 +1,7 @@
+body{color:#bebebe;background-color:#0c0c0d}
+button{color:#bebebe;background-color:#323234}
+button:hover{color:#303030;background-color:#cfcfcf}
+input[type="text"]{color:#bebebe;background-color:#323234}
+input[type="text"]:hover{background-color:#474749}
+polygon{fill:#323234}
+polygon:hover{fill:#474749}

css/color.css

@@ -0,0 +1,14 @@
+body{color:#9f9f9f}
+button{color:#303030;background-color:#cfcfcf}
+button:hover{color:#bebebe;background-color:#323234}
+input[type="text"]{color:#404040;background-color:#cfcfcf}
+input[type="text"]:hover{background-color:#a6a6a6}
+polygon{fill:#cfcfcf}
+polygon:hover{fill:#a6a6a6}
+body.dark{color:#bebebe;background-color:#0c0c0d}
+body.dark button{color:#bebebe;background-color:#323234}
+body.dark button:hover{color:#303030;background-color:#cfcfcf}
+body.dark input[type="text"]{color:#bebebe;background-color:#323234}
+body.dark input[type="text"]:hover{background-color:#474749}
+body.dark polygon{fill:#323234}
+body.dark polygon:hover{fill:#474749}

css/home.css

@@ -0,0 +1,8 @@
+.quadrant:nth-child(1):hover ~ svg polygon{fill:#cfcfcf}
+.quadrant:nth-child(2):hover ~ svg polygon{fill:#cfcfcf}
+.quadrant:nth-child(3):hover ~ svg polygon{fill:#cfcfcf}
+.quadrant:nth-child(4):hover ~ svg polygon{fill:#cfcfcf}
+body.dark .quadrant:nth-child(1):hover ~ svg polygon{fill:#323234}
+body.dark .quadrant:nth-child(2):hover ~ svg polygon{fill:#323234}
+body.dark .quadrant:nth-child(3):hover ~ svg polygon{fill:#323234}
+body.dark .quadrant:nth-child(4):hover ~ svg polygon{fill:#323234}

css/options.css

@@ -0,0 +1,17 @@
+.group{position:absolute;width:100%}
+.pad{padding:60px}
+.row{padding:10px}
+.label{display:inline-block;width:30px}
+.field{display:inline}
+.label span{display:table-cell;vertical-align:middle}
+#mode{position:absolute;top:calc(50%+75px);left:0;right:0;margin:auto;z-index:9}
+#quad1 .group{text-align:right;bottom:0}
+#quad2 .group{bottom:0}
+#quad3 .group{text-align:right}
+button{top:calc(50% + 75px);height:60px;width:60px;border-radius:30px;outline:0;font-size:16px}
+button:hover{cursor:pointer}
+input[type="text"]{display:inline-block;height:48px;width:400px;padding:0;border:0;line-height:48px;text-align:center;font-size:18px}
+.colorwrapper{height:70px;width:70px;display:inline-block;vertical-align:middle;overflow:hidden}
+input[type="color"]{height:100px;width:100px;position:relative;top:-15px;left:-15px}
+input[type="color"]:hover{cursor:pointer}
+input:focus{outline:0}

css/style.css

@@ -0,0 +1,14 @@
+*{padding:0;margin:0;border:0;-webkit-transition:300ms;transition:300ms}
+body,html,.content{width:100%;height:100%;-webkit-transition:none;transition:none}
+.content{position:relative}
+a,svg,rect{position:absolute}
+svg{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;z-index:10}
+polygon{transition:fill .2s}
+@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?evxobq');src:url('../fonts/icomoon.eot?evxobq#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?evxobq') format('truetype'),url('../fonts/icomoon.woff?evxobq') format('woff'),url('../fonts/icomoon.svg?evxobq#icomoon') format('svg');font-weight:normal;font-style:normal}
+[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased}
+.icon-sun:before{content:"\e900"}
+.icon-moon:before{content:"\e901"}
+.icon-paint-format:before{content:"\e902"}
+.icon-link:before{content:"\e904"}
+.icon-sun,.icon-moon{font-size:36px}
+.quadrant{position:relative;width:50%;height:50%;float:left}

fonts/icomoon.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="sun" d="M512 672c-123.5 0-224-100.5-224-224s100.5-224 224-224 224 100.5 224 224c0 123.5-100.5 224-224 224zM512 288c-88.376 0-160 71.624-160 160s71.624 160 160 160 160-71.624 160-160-71.624-160-160-160zM512 736c17.666 0 32 14.334 32 32v64c0 17.666-14.334 32-32 32s-32-14.334-32-32v-64c0-17.666 14.334-32 32-32zM512 160c-17.666 0-32-14.334-32-32v-64c0-17.666 14.334-32 32-32s32 14.334 32 32v64c0 17.666-14.334 32-32 32zM760.876 651.666l45.25 45.25c12.5 12.5 12.5 32.75 0 45.25s-32.75 12.5-45.25 0l-45.25-45.25c-12.5-12.5-12.5-32.75 0-45.25 12.498-12.5 32.75-12.5 45.25 0zM263.124 244.332l-45.25-45.25c-12.5-12.498-12.5-32.748 0-45.248s32.75-12.5 45.25 0l45.25 45.248c12.5 12.542 12.5 32.752 0 45.25-12.498 12.502-32.75 12.544-45.25 0zM224 448c0 17.666-14.334 32-32 32h-64c-17.666 0-32-14.334-32-32s14.334-32 32-32h64c17.666 0 32 14.334 32 32zM896 480h-64c-17.666 0-32-14.334-32-32s14.334-32 32-32h64c17.666 0 32 14.334 32 32s-14.334 32-32 32zM263.082 651.666c12.502-12.5 32.752-12.5 45.25 0 12.502 12.5 12.502 32.75 0 45.25l-45.25 45.25c-12.5 12.5-32.748 12.5-45.25 0-12.5-12.5-12.5-32.75 0-45.25l45.25-45.25zM760.918 244.376c-12.542 12.5-32.752 12.5-45.25 0-12.502-12.5-12.542-32.75 0-45.25l45.25-45.25c12.498-12.5 32.748-12.5 45.248 0s12.5 32.748 0 45.25l-45.248 45.25z" />
+<glyph unicode="&#xe901;" glyph-name="moon" d="M699.704 273.7c-99.752-99.832-262.166-99.832-362 0-99.832 99.834-99.832 262.25 0 362.042 26.418 26.374 58.624 46.5 95.664 59.624 11.668 4.084 24.586 1.124 33.25-7.584 8.752-8.75 11.71-21.666 7.586-33.25-25.084-70.75-8-147.332 44.498-199.834 52.418-52.456 129.002-69.5 199.834-44.5 11.584 4.124 24.542 1.166 33.25-7.584 8.752-8.666 11.668-21.624 7.542-33.25-13.042-37.040-33.208-69.246-59.624-95.664zM382.954 590.492c-74.876-74.876-74.876-196.708 0-271.542 80-80.042 216.25-72.834 286 16.334-71.918-4.5-142.75 21.458-195.5 74.168-52.75 52.708-78.666 123.542-74.168 195.458-5.748-4.502-11.208-9.294-16.332-14.418z" />
+<glyph unicode="&#xe902;" glyph-name="paint-format" d="M1024 384v384h-192v64c0 35.2-28.8 64-64 64h-704c-35.2 0-64-28.8-64-64v-192c0-35.2 28.8-64 64-64h704c35.2 0 64 28.8 64 64v64h128v-256h-576v-128h-32c-17.674 0-32-14.326-32-32v-320c0-17.674 14.326-32 32-32h128c17.674 0 32 14.326 32 32v320c0 17.674-14.326 32-32 32h-32v64h576zM768 768h-704v64h704v-64z" />
+<glyph unicode="&#xe904;" glyph-name="link" d="M440.236 324.234c-13.31 0-26.616 5.076-36.77 15.23-95.134 95.136-95.134 249.934 0 345.070l192 192c46.088 46.086 107.36 71.466 172.534 71.466s126.448-25.38 172.536-71.464c95.132-95.136 95.132-249.934 0-345.070l-87.766-87.766c-20.308-20.308-53.23-20.308-73.54 0-20.306 20.306-20.306 53.232 0 73.54l87.766 87.766c54.584 54.586 54.584 143.404 0 197.99-26.442 26.442-61.6 41.004-98.996 41.004s-72.552-14.562-98.996-41.006l-192-191.998c-54.586-54.586-54.586-143.406 0-197.992 20.308-20.306 20.306-53.232 0-73.54-10.15-10.152-23.462-15.23-36.768-15.23zM256-52c-65.176 0-126.45 25.38-172.534 71.464-95.134 95.136-95.134 249.934 0 345.070l87.764 87.764c20.308 20.306 53.234 20.306 73.54 0 20.308-20.306 20.308-53.232 0-73.54l-87.764-87.764c-54.586-54.586-54.586-143.406 0-197.992 26.44-26.44 61.598-41.002 98.994-41.002s72.552 14.562 98.998 41.006l192 191.998c54.584 54.586 54.584 143.406 0 197.992-20.308 20.308-20.306 53.232 0 73.54 20.306 20.306 53.232 20.306 73.54-0.002 95.132-95.134 95.132-249.932 0.002-345.068l-192.002-192c-46.090-46.088-107.364-71.466-172.538-71.466z" />
+</font></defs></svg>

home.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>New Tab</title>
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/color.css">
+  <link rel="stylesheet" href="css/home.css">
+</head>
+<body>
+  <div class="content">
+    <a class="quadrant" href="options.html"></a>
+    <a class="quadrant" href="options.html"></a>
+    <a class="quadrant" href="options.html"></a>
+    <a class="quadrant" href="options.html"></a>
+    <svg id="logo" height="75px" width="75px" viewBox="0 0 10 10">
+      <a href="options.html"><polygon points="5,10 10,5 5,0 0,5" /></a>
+    </svg>
+  </div>
+  <script src="js/home.js"></script>
+</body>
+</html>

icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 10 10" xml:space="preserve">
+  <a href="options.html"><polygon points="5,10 10,5 5,0 0,5" fill="#000000"/></a>
+</svg>

js/darkMode.js

@@ -0,0 +1,48 @@
+// Returns the color at an index, based on the current theme
+function color_at (i) {
+  return COLORS[isDark ? 'dark' : 'light'][i];
+}
+
+// Sets the page's color to match the current theme
+function render () {
+  var savedColors = JSON.parse(localStorage.colors || '[]');
+  body.className = (isDark ? 'dark' : 'light') + '-mode';
+
+  if (isOptionsPage) {
+    toggle.className = 'icon-' + (isDark ? 'sun' : 'moon');
+    colorInputs.forEach(function (input, i) {
+      input.value = savedColors[i] || color_at(i);
+    });
+  }
+}
+
+// Toggles the theme between 'light-mode' and 'dark-mode'
+function toggle_theme () {
+  localStorage.darkMode = isDark = !isDark;
+  render();
+}
+
+// Color sets for each theme
+var COLORS = {
+  dark:  ['#3f3027', '#30273f', '#27303f', '#3f2730'],
+  light: ['#efe0d7', '#e0d7ef', '#d7e0ef', '#efd7e0'],
+};
+
+// Pull the saved theme preference from localStorage
+var isDark = JSON.parse(localStorage.darkMode || false);
+
+// DOM
+var body = document.body;
+var colorInputs = [].slice.call(document.querySelectorAll('.colorwrapper input'));
+
+var isOptionsPage = colorInputs.length;
+
+if (isOptionsPage)
+  var toggle = document.getElementById('dark-mode').querySelector('span');
+
+// Set the page's color
+render();
+
+// Exports
+placid.color_at = color_at;
+placid.toggle_theme = toggle_theme;

js/home.js

@@ -0,0 +1,47 @@
+function restore_options() {
+  browser.storage.sync.get("links", function(result){
+    var quads = document.querySelectorAll('a')
+    for (i = 0; i < quads.length; i++) {
+      if (result.links[i]) {
+        var link = result.links[i]
+        if (link.substring(0, 4) === 'http' ? link = 'options.html' : link = 'http://' + link)
+        quads[i].href = link
+      }
+    }
+  })
+  browser.storage.sync.get("colors", function(result){
+    var quads = document.querySelectorAll('a')
+    var style = document.createElement('style');
+    for (i = 0; i < quads.length; i++) {
+      if (result.colors[i]) {
+        style.appendChild(
+          document.createTextNode('.content a:nth-child(' + (i + 1) + '):hover ~ svg polygon { fill: ' + result.colors[i] + '}')
+        )
+      }
+    }
+    document.head.appendChild(style);
+    for (i = 0; i < input_colors.length; i++) {
+      if (result.links[i]) {
+        input_colors[i].value = result.colors[i]
+      }
+    }
+  })
+  browser.storage.sync.get("mode", function(result){
+    if (result.mode) {
+      switch(result.mode) {
+        case "light":
+          document.body.classList.remove('dark')
+          break
+        case "dark":
+          document.body.classList.add('dark')
+          break
+        default:
+          break
+      }
+    } else {
+      mode = "light"
+      browser.storage.sync.set({mode:"light"})
+    }
+  })
+}
+document.addEventListener('DOMContentLoaded', restore_options)

js/load.js

@@ -0,0 +1,27 @@
+function loadjscssfile(filename, filetype){
+  if (filetype=="js"){
+    var fileref=document.createElement('script')
+    fileref.setAttribute("type","text/javascript")
+    fileref.setAttribute("src", filename)
+  }
+  else if (filetype=="css"){
+    var fileref=document.createElement("link")
+    fileref.setAttribute("rel", "stylesheet")
+    fileref.setAttribute("type", "text/css")
+    fileref.setAttribute("href", filename)
+  }
+  if (typeof fileref!="undefined")
+    document.getElementsByTagName("head")[0].appendChild(fileref)
+}
+browser.storage.sync.get("mode", function(result){
+  switch(result.mode) {
+    case "light":
+      loadjscssfile("css/color.css", "css")
+      break
+    case "dark":
+      loadjscssfile("css/color-dark.css", "css")
+      break
+    default:
+      break
+  }
+})

js/options.js

@@ -0,0 +1,90 @@
+function debounce(fn, delay) {
+  var timeout;
+  return function () {
+    clearTimeout(timeout);
+    timeout = setTimeout(fn, delay || 500);
+  };
+}
+function save_options() {
+  var links = [], colors = []
+  var input_links = document.querySelectorAll('input[type="text"]')
+  var input_colors = document.querySelectorAll('input[type="color"]')
+  for (i = 0; i < input_links.length; i++) {
+    links.push(input_links[i].value)
+    colors.push(input_colors[i].value)
+  }
+  browser.storage.sync.set({links:links, colors:colors})
+  console.log("Settings Saved ")
+}
+function restore_options() {
+  var mode
+  browser.storage.sync.get("mode", function(result){
+    if (result.mode) {
+      switch(result.mode) {
+        case "light":
+          document.body.classList.remove('dark')
+          break
+        case "dark":
+          document.body.classList.add('dark')
+          break
+        default:
+          break
+      }
+    } else {
+      mode = "light"
+      browser.storage.sync.set({mode:"light"})
+    }
+  })
+  browser.storage.sync.get("links", function(result){
+    var input_links = document.querySelectorAll('input[type="text"]')
+    for (i = 0; i < input_links.length; i++) {
+      input_links[i].value = result.links[i]
+    }
+  })
+  browser.storage.sync.get("colors", function(result){
+    var input_colors = document.querySelectorAll('input[type="color"]')
+    for (i = 0; i < input_colors.length; i++) {
+      if (result.colors[i]) {
+        input_colors[i].value = result.colors[i]
+      }
+    }
+  })
+}
+function change_mode() {
+  browser.storage.sync.get("mode", function(result){
+    var input_colors = document.querySelectorAll('input[type="color"]')
+    switch(result.mode) {
+      case "light":
+        document.body.classList.add('dark')
+        mode = "dark"
+        browser.storage.sync.set({mode:"dark"})
+        for (i = 0; i < input_colors.length; i++) {
+          if (input_colors[i].value == "#cfcfcf") {
+            input_colors[i].value = "#323234"
+          }
+        }
+        break
+      case "dark":
+        document.body.classList.remove('dark')
+        mode = "light"
+        browser.storage.sync.set({mode:"light"})
+        for (i = 0; i < input_colors.length; i++) {
+          if (input_colors[i].value == "#323234") {
+            input_colors[i].value = "#cfcfcf"
+          }
+        }
+        break
+      default:
+        break
+    }
+})
+}
+function load() {
+  var inputs = document.getElementsByTagName('input')
+  for (i = 0; i < inputs.length; i++) {
+    inputs[i].addEventListener('input', debounce(save_options))
+  }
+  document.getElementById("mode").addEventListener("click", change_mode)
+  restore_options()
+}
+document.addEventListener('DOMContentLoaded', load)

manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "Placid Tab 2",
+  "short_name": "Placid Tab 2",
+  "version": "1.0.0",
+  "manifest_version": 2,
+  "description": "A minimal New Tab page",
+  "author": "Kyle Mitchell",
+  "applications": {
+    "gecko": {
+      "id": "placidtab2@kylemitchell.me",
+      "strict_min_version": "57.0"
+    }
+  },
+  "chrome_url_overrides" : {
+    "newtab": "home.html"
+  },
+  "icons": { "16": "icon.svg",
+             "48": "icon.svg",
+             "128": "icon.svg" },
+  "permissions": ["storage"]
+}

options.html

@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Options</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/color.css">
+    <link rel="stylesheet" href="css/options.css">
+  </head>
+
+  <body>
+    <div class="content">
+      <div class="quadrant" id="quad1">
+        <div class="group">
+          <div class="pad">
+            <div class="row">
+              <div class="field">
+                <div class="colorwrapper">
+                  <input type="color" value="#cfcfcf" />
+                </div>
+              </div>
+              <div class="label">
+                <label for="color1"><span class="icon-paint-format"></span></label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="field">
+                <input type="text" spellcheck="false" />
+              </div>
+              <div class="label">
+                <label><span class="icon-link"></span></label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="quadrant" id="quad2">
+        <div class="group">
+          <div class="pad">
+            <div class="row">
+              <div class="label">
+                <label for="color1"><span class="icon-paint-format"></span></label>
+              </div>
+              <div class="field">
+                <div class="colorwrapper">
+                  <input type="color" value="#cfcfcf" />
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="label">
+                <label><span class="icon-link"></span></label>
+              </div>
+              <div class="field">
+                <input type="text" spellcheck="false" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="quadrant" id="quad3">
+        <div class="group">
+          <div class="pad">
+            <div class="row">
+              <div class="field">
+                <input type="text" spellcheck="false" />
+              </div>
+              <div class="label">
+                <label><span class="icon-link"></span></label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="field">
+                <div class="colorwrapper">
+                  <input type="color" value="#cfcfcf" />
+                </div>
+              </div>
+              <div class="label">
+                <label for="color1"><span class="icon-paint-format"></span></label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="quadrant"  id="quad4">
+        <div class="group">
+          <div class="pad">
+            <div class="row">
+              <div class="label">
+                <label><span class="icon-link"></span></label>
+              </div>
+              <div class="field">
+                <input type="text" spellcheck="false" />
+              </div>
+            </div>
+            <div class="row">
+              <div class="label">
+                <label for="color1"><span class="icon-paint-format"></span></label>
+              </div>
+              <div class="field">
+                <div class="colorwrapper">
+                  <input type="color" value="#cfcfcf" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <svg id="logo" height="75px" width="75px" viewBox="0 0 10 10">
+        <a href="home.html"><polygon points="5,10 10,5 5,0 0,5" /></a>
+      </svg>
+      <button id="mode"><span class="icon-moon"></span></button>
+    </div>
+    <script src="js/options.js"></script>
+  </body>
+</html>

temp.json

@@ -0,0 +1,12 @@
+{
+  "quad": [
+    {"address": "site", "color": "blue"},
+    {"address": "site", "color": "green"},
+    {"address": "site", "color": "yellow"},
+    {"address": "site", "color": "purple"}
+
+  ],
+  "options": {
+    "nightmode": "false"
+  }
+}