[feature] add bookmark groups

gulpfile.js

@@ -61,6 +61,7 @@ const cssFiles = [
   path.src + '/css/transitional.css',
   path.src + '/css/search.css',
   path.src + '/css/background.css',
+  path.src + '/css/group.css',
   path.src + '/css/link.css',
   path.src + '/css/auto-suggest.css',
   path.src + '/css/fontawesome.css'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "3.83.0",
+  "version": "4.0.0",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
   "main": "index.js",
   "scripts": {

src/css/form.css

@@ -1,3 +1,71 @@
+/* select */
+select {
+  background-color: rgb(var(--theme-gray-02));
+  background-image:
+    linear-gradient(45deg, transparent 50%, rgb(var(--form-input-text)) 50%),
+    linear-gradient(135deg, rgb(var(--form-input-text)) 50%, transparent 50%);
+  background-position:
+    calc(100% - calc(var(--form-arrow-size) * 5)) 50%,
+    calc(100% - calc(var(--form-arrow-size) * 4)) 50%;
+  background-size:
+    var(--form-arrow-size) var(--form-arrow-size),
+    var(--form-arrow-size) var(--form-arrow-size);
+  background-repeat: no-repeat;
+  padding: 0 calc(var(--form-arrow-size) * 10) 0 1em;
+  margin: 0 0 1em 0;
+  color: rgb(var(--form-input-text));
+  font-size: 1em;
+  font-family: var(--font-regular);
+  min-height: 2.5em;
+  min-width: 0;
+  width: 100%;
+  border-width: var(--form-input-border);
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--theme-radius);
+  cursor: pointer;
+  transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+select:hover {
+  background-image:
+    linear-gradient(45deg, transparent 50%, rgb(var(--form-input-text-hover)) 50%),
+    linear-gradient(135deg, rgb(var(--form-input-text-hover)) 50%, transparent 50%);
+  background-color: rgb(var(--theme-gray-03));
+  color: rgb(var(--form-input-text-hover));
+  outline: none;
+  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
+}
+
+select:focus,
+select:active {
+  background-image:
+    linear-gradient(45deg, transparent 50%, rgb(var(--form-input-text-focus)) 50%),
+    linear-gradient(135deg, rgb(var(--form-input-text-focus)) 50%, transparent 50%);
+  background-color: rgb(var(--theme-gray-01));
+  color: rgb(var(--form-input-text-focus));
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
+}
+
+select:disabled,
+select:disabled:hover,
+select:disabled:focus,
+select:disabled:active {
+  background-color: transparent;
+  background-image:
+    linear-gradient(45deg, transparent 50%, rgb(var(--form-input-text-disabled)) 50%),
+    linear-gradient(135deg, rgb(var(--form-input-text-disabled)) 50%, transparent 50%);
+  color: rgb(var(--form-input-text-disabled));
+  border-color: rgb(var(--form-input-text-disabled));
+  cursor: default;
+  box-shadow: none;
+}
+
 /* textarea */
 textarea {
   background-color: rgb(var(--theme-gray-02));
@@ -420,6 +488,7 @@ input[type="range"] {
   color: rgb(var(--theme-style-text));
   font-size: 1em;
   font-family: var(--font-regular);
+  display: block;
   height: 2em;
   width: 100%;
   border: 0;
@@ -846,7 +915,7 @@ input[type="range"]:disabled::-moz-range-progress {
 
 .form-grid:focus,
 .form-grid:focus-within {
-  outline: 0;
+  outline: none;
   border-color: rgb(var(--theme-style-text));
 }
 
@@ -1085,20 +1154,20 @@ input[type="range"]:disabled::-moz-range-progress {
 
 .form-group-text:hover,
 .form-group-text:focus {
-  background-color: rgb(var(--theme-gray-03));
+  /* background-color: rgb(var(--theme-gray-03)); */
-  border-bottom-color: rgb(var(--theme-gray-08));
+  /* border-bottom-color: rgb(var(--theme-gray-08)); */
   outline: none;
 }
 
-.form-group-text:disabled {
+.form-group-text.disabled {
   background-color: rgb(var(--theme-gray-02));
   color: rgb(var(--form-input-placeholder-disabled));
   box-shadow: none;
   cursor: default;
 }
 
-.form-group-text:disabled:hover,
+.form-group-text.disabled:hover,
-.form-group-text:disabled:focus {
+.form-group-text.disabled:focus {
   background-color: rgb(var(--theme-gray-02));
   border-color: transparent;
 }
@@ -1138,7 +1207,7 @@ input[type="range"]:disabled::-moz-range-progress {
 
 .form-group .form-group-text {
   margin-bottom: 0;
-  margin-left: calc(-1px * var(--form-input-border));
+  /* margin-left: calc(-1px * var(--form-input-border)); */
   border-radius: 0;
   z-index: 1;
   position: relative;

src/css/group.css

@@ -0,0 +1,89 @@
+.group {
+  padding-top: calc(calc(var(--layout-space) / 2) * var(--layout-padding));
+  padding-bottom: calc(calc(var(--layout-space) / 2) * var(--layout-padding));
+  padding-left: calc(var(--layout-space) * var(--layout-padding));
+  padding-right: calc(var(--layout-space) * var(--layout-padding));
+  width: var(--link-area-width);
+}
+
+.group:first-child {
+  padding-top: calc(var(--layout-space) * var(--layout-padding));
+}
+
+.group:last-child {
+  padding-bottom: calc(var(--layout-space) * var(--layout-padding));
+}
+
+.group-header {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+  transition: padding var(--layout-timing-extra-fast) var(--layout-duration-04);
+}
+
+.is-group-name-show .group-header,
+.is-link-edit .group-header {
+  padding-bottom: calc(var(--layout-space) * var(--layout-gutter));
+  transition: padding var(--layout-timing-extra-fast);
+}
+
+.group-name {
+  margin-right: 0;
+  display: none;
+  align-items: center;
+  min-height: 2.5em;
+  font-size: var(--group-name-size);
+}
+
+.is-group-name-show .group-name {
+  display: flex;
+}
+
+.group-name-text {
+  font-family: var(--font-fjalla);
+  margin-bottom: 0;
+}
+
+.group-control {
+  margin-right: 0;
+  margin-bottom: 0;
+  overflow: hidden;
+  height: 0;
+  width: 0;
+  transition:
+    width var(--layout-timing-extra-fast),
+    height var(--layout-timing-extra-fast) var(--layout-duration-04),
+    margin var(--layout-timing-extra-fast);
+}
+
+.is-link-edit .group-control {
+  height: 2.5em;
+  width: 16em;
+  transition:
+    width var(--layout-timing-extra-fast) var(--layout-duration-04),
+    height var(--layout-timing-extra-fast),
+    margin var(--layout-timing-extra-fast) var(--layout-duration-04);
+}
+
+.is-link-edit.is-group-name-show .group-control {
+  margin-right: 1em;
+}
+
+.group-control-item {
+  width: 4em;
+  flex-shrink: 0;
+}
+
+.group-body {
+  font-size: calc(var(--link-item-size) * 1);
+  background-color: transparent;
+  position: relative;
+  min-height: var(--link-item-height);
+  display: grid;
+  grid-auto-rows: 1fr;
+  grid-gap: calc(var(--layout-space) * var(--layout-gutter));
+  grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr));
+}

src/css/link.css

@@ -1,7 +1,7 @@
 .link {
   display: none;
   position: relative;
-  flex-direction: row;
+  flex-direction: column;
   z-index: var(--z-index-link);
 }
 
@@ -10,45 +10,33 @@
 }
 
 .is-link-area-alignment-left .link {
-  justify-content: flex-start;
+  align-items: flex-start;
 }
 
 .is-link-area-alignment-center .link {
-  justify-content: center;
+  align-items: center;
 }
 
 .is-link-area-alignment-right .link {
-  justify-content: flex-end;
+  align-items: flex-end;
 }
 
-.link-area {
+.is-layout-order-headerlink .link {
-  padding-left: calc(var(--layout-space) * var(--layout-padding));
+  margin-top: calc(-1 * calc(var(--layout-space) * var(--layout-padding)));
-  padding-right: calc(var(--layout-space) * var(--layout-padding));
-  font-size: calc(var(--link-item-size) * 1);
-  position: relative;
-  width: var(--link-area-width);
-  display: grid;
-  grid-auto-rows: 1fr;
-  grid-gap: calc(var(--layout-space) * var(--layout-gutter));
-  grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr));
 }
 
-.is-layout-order-headerlink .link-area {
+.is-layout-order-linkheader .link {
-  padding-bottom: calc(var(--layout-space) * var(--layout-padding));
+  margin-bottom: calc(-1 * calc(var(--layout-space) * var(--layout-padding)));
 }
 
-.is-layout-order-headerlink.is-header-border-bottom .link-area,
+.is-layout-order-headerlink.is-header-border-bottom .link,
-.is-layout-order-headerlink.is-header-shade-style-always .link-area {
+.is-layout-order-headerlink.is-header-shade-style-always .link {
-  padding-top: calc(var(--layout-space) * var(--layout-padding));
+  margin-top: 0;
 }
 
-.is-layout-order-linkheader .link-area {
+.is-layout-order-linkheader.is-header-border-top .link,
-  padding-top: calc(var(--layout-space) * var(--layout-padding));
+.is-layout-order-linkheader.is-header-shade-style-always .link {
-}
+  margin-bottom: 0;
-
-.is-layout-order-linkheader.is-header-border-top .link-area,
-.is-layout-order-linkheader.is-header-shade-style-always .link-area {
-  padding-bottom: calc(var(--layout-space) * var(--layout-padding));
 }
 
 .link-item {
@@ -79,15 +67,12 @@
   transition: none;
 }
 
-.link-item-placeholder {
+.link-placeholder {
   background-color: rgba(var(--theme-accent), 0.2);
   border-radius: var(--theme-radius);
   width: 100%;
   height: 100%;
   position: relative;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   box-shadow: inset 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--layout-line-width) * 4) rgba(var(--theme-accent), 0.1), inset 0 0 0 calc(var(--layout-line-width) * 8) rgba(var(--theme-accent), 0.1);
   pointer-events: none;
 }
@@ -321,6 +306,14 @@
   transition: all var(--layout-timing-extra-fast);
 }
 
+.is-link-style-list .link-control {
+  flex-wrap: nowrap;
+}
+
+.is-link-style-block .link-control {
+  flex-wrap: wrap;
+}
+
 .link-control-item {
   background-color: transparent;
   border-radius: 0;
@@ -329,7 +322,14 @@
   padding: 0;
   color: rgb(var(--theme-gray-02));
   flex-grow: 1;
-  flex-basis: 50%;
+}
+
+.is-link-style-list .link-control-item {
+  flex-basis: inherit;
+}
+
+.is-link-style-block .link-control-item {
+  flex-basis: 30%;
 }
 
 .link-url-text-dark .link-control-item {
@@ -436,6 +436,15 @@
 .link-display {
   font-size: 1em;
   display: none;
+  transition: font-size var(--layout-timing-extra-fast), margin var(--layout-timing-extra-fast);
+}
+
+.is-link-edit.is-link-style-list .link-display {
+  font-size: 0.5em;
+}
+
+.is-link-edit.is-link-style-block .link-display {
+  font-size: 0.6em;
 }
 
 .is-link-display-item-show .link-display {
@@ -497,7 +506,11 @@
   font-family: var(--font-regular);
   color: rgb(var(--theme-gray-12));
   display: none;
-  transition: color var(--layout-timing-extra-fast);
+  transition: color var(--layout-timing-extra-fast), font-size var(--layout-timing-extra-fast);
+}
+
+.is-link-edit .link-name {
+  font-size: 0.6em;
 }
 
 .link-name,
@@ -537,13 +550,27 @@
 }
 
 .link-empty {
+  background-color: rgba(var(--theme-gray-04), 0.2);
+  padding: 1em 0;
+  border-radius: var(--theme-radius);
   grid-column-start: 1;
   grid-column-end: -1;
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.is-sorting .link-empty {
+  display: none;
 }
 
 .link-empty-heading {
-  color: rgb(var(--theme-gray-16));
+  color: rgb(var(--theme-style-text));
+  margin-bottom: 0;
+}
+
+.link-empty-heading:not(:only-child) {
   margin-bottom: 0.5em;
 }
 
@@ -604,12 +631,12 @@
   transition: transform var(--layout-timing-extra-fast);
 }
 
-.link-form-text-icon:not(:disabled):hover .link-form-icon {
+.link-form-text-icon:not(.disabled):hover .link-form-icon {
   transform: scale(2) rotate(360deg);
   z-index: 1;
 }
 
-.link-form-text-icon:not(:disabled):active .link-form-icon {
+.link-form-text-icon:not(.disabled):active .link-form-icon {
   transform: scale(4) rotate(360deg);
 }
 

src/css/typography.css

@@ -56,7 +56,7 @@ p:not(:last-child) {
 
 hr {
   border: 0;
-  border-top: 1px solid rgb(var(--theme-gray-02));
+  border-top: 2px solid rgb(var(--theme-gray-02));
   border-radius: var(--theme-radius);
   margin: 1em 0;
   clear: both;

src/css/variables.css

@@ -38,6 +38,8 @@
   --header-button-size: 1em;
   --header-greeting-size: 1em;
   --header-transitional-size: 1em;
+  /* group */
+  --group-name-size: 1em;
   /* link */
   --link-area-width: 100%;
   --link-item-size: 1em;
@@ -51,11 +53,16 @@
   --layout-space: 0.5rem;
   --layout-padding: 4;
   --layout-gutter: 4;
-  --layout-timing-extra-fast: 0.2s ease-in-out;
+  --layout-duration-02: 0.2s;
-  --layout-timing-fast: 0.4s ease-in-out;
+  --layout-duration-04: 0.4s;
-  --layout-timing-medium: 0.6s ease-in-out;
+  --layout-duration-06: 0.6s;
-  --layout-timing-slow: 0.8s ease-in-out;
+  --layout-duration-08: 0.8s;
-  --layout-timing-extra-slow: 1s ease-in-out;
+  --layout-duration-10: 1s;
+  --layout-timing-extra-fast: var(--layout-duration-02) ease-in-out;
+  --layout-timing-fast: var(--layout-duration-04) ease-in-out;
+  --layout-timing-medium: var(--layout-duration-06) ease-in-out;
+  --layout-timing-slow: var(--layout-duration-08) ease-in-out;
+  --layout-timing-extra-slow: var(--layout-duration-10) ease-in-out;
   --layout-shadow-small: 0 0 4px rgba(0, 0, 0, 0.2), 0 0 8px rgba(0, 0, 0, 0.1);
   --layout-shadow-medium: 0 0 8px rgba(0, 0, 0, 0.2), 0 0 16px rgba(0, 0, 0, 0.1);
   --layout-shadow-large: 0 0 16px rgba(0, 0, 0, 0.2), 0 0 32px rgba(0, 0, 0, 0.1);
@@ -87,6 +94,7 @@
   --form-feedback-text-disabled: var(--theme-gray-04);
   --form-helper: var(--theme-gray-12);
   --form-helper-disabled: var(--theme-gray-06);
+  --form-arrow-size: 5px;
   /* button */
   --button-text: var(--theme-gray-12);
   --button-text-hover-focus: var(--theme-style-text);
@@ -175,7 +183,7 @@
   --link-item-width: 11em;
   --link-item-height: 10em;
   --link-item-url-height: 20%;
-  --link-item-edit-height: 30%;
+  --link-item-edit-height: 50%;
 }
 
 .is-link-style-list {

src/index.html

@@ -32,6 +32,7 @@
   <link rel="stylesheet" href="css/transitional.css">
   <link rel="stylesheet" href="css/search.css">
   <link rel="stylesheet" href="css/background.css">
+  <link rel="stylesheet" href="css/group.css">
   <link rel="stylesheet" href="css/link.css">
   <link rel="stylesheet" href="css/auto-suggest.css">
   <link rel="stylesheet" href="css/fontawesome.css">
@@ -99,9 +100,7 @@
       </div>
     </header>
 
-    <section class="link">
+    <section class="link"></section>
-      <div class="link-area"></div>
-    </section>
 
   </main>
 
@@ -112,6 +111,7 @@
         <div class="menu-nav-area-tab menu-nav-area-grow mb-0 list-unstyled">
           <button class="menu-nav-button control-menu-layout button mb-0 active" tabindex="-1">Layout</button>
           <button class="menu-nav-button control-menu-header button mb-0" tabindex="-1">Header</button>
+          <button class="menu-nav-button control-menu-groups button mb-0" tabindex="-1">Groups</button>
           <button class="menu-nav-button control-menu-bookmarks button mb-0" tabindex="-1">Bookmarks</button>
           <button class="menu-nav-button control-menu-theme button mb-0" tabindex="-1">Theme</button>
           <button class="menu-nav-button control-menu-background button mb-0" tabindex="-1">Background</button>
@@ -752,6 +752,29 @@
           </div>
         </div>
 
+        <div class="menu-content-area menu-content-area-groups is-hidden">
+          <div class="menu-item">
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Names</h1>
+            </div>
+            <div class="menu-item-form">
+              <div class="input-wrap">
+                <input id="control-group-name-show" class="control-group-name-show" type="checkbox" tabindex="-1">
+                <label for="control-group-name-show">Show</label>
+              </div>
+              <div class="form-indent">
+                <div class="input-wrap">
+                  <label for="control-group-name-size">Name Size</label>
+                  <input id="control-group-name-size" class="control-group-name-size" type="range" min="20" max="500" value="0" step="20" tabindex="-1">
+                </div>
+                <div class="button-wrap">
+                  <button class="control-group-name-size-default button mb-0" tabindex="-1">Default name size</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <div class="menu-content-area menu-content-area-bookmarks is-hidden">
           <div class="menu-item">
             <div class="menu-item-header">
@@ -1001,8 +1024,9 @@
               <h1 class="menu-item-header-text">Accent</h1>
             </div>
             <div class="menu-item-form">
-              <label for="control-theme-accent-current-picker">Colour</label>
+              <div class="input-wrap">
-              <div class="input-wrap"><div class="form-group mb-0">
+                <label for="control-theme-accent-current-picker">Colour</label>
+                <div class="form-group mb-0">
                   <input id="control-theme-accent-current-picker" class="form-group-item-half control-theme-accent-current-picker mb-0" type="color" value="#000000" tabindex="1">
                   <input id="control-theme-accent-current-hex" class="form-group-item-half control-theme-accent-current-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
                 </div>

src/js/bookmarks.js

@@ -3,185 +3,176 @@ var bookmarks = (function() {
   var mod = {};
 
   mod.all = [{
-    display: "icon",
+    name: "Cool stuff",
-    letter: "DEV",
+    items: [{
-    icon: {
+      display: "icon",
-      name: "code",
+      letter: "AS",
-      prefix: "fas",
+      icon: {
-      label: "Code"
+        name: "dice-d20",
-    },
+        prefix: "fas",
-    name: "Devdocs",
+        label: "Dice D20"
-    url: "http://devdocs.io/",
+      },
-    accent: {
+      name: "awesomeSheet",
-      override: false,
+      url: "https://zombiefox.github.io/awesomeSheet/",
-      color: {
+      accent: {
-        r: null,
+        override: false,
-        g: null,
+        color: {
-        b: null
+          r: null,
-      }
+          g: null,
-    },
+          b: null
-    timeStamp: 1546453101749
+        }
+      },
+      timeStamp: 1546453104010
+    }, {
+      display: "letter",
+      letter: "AZ",
+      icon: {
+        name: "amazon",
+        prefix: "fab",
+        label: "Amazon"
+      },
+      name: "Amazon",
+      url: "https://www.amazon.co.uk/",
+      accent: {
+        override: false,
+        color: {
+          r: null,
+          g: null,
+          b: null
+        }
+      },
+      timeStamp: 1546453107633
+    }, {
+      display: "letter",
+      letter: "GM",
+      icon: {
+        name: "envelope",
+        prefix: "fas",
+        label: "Envelope"
+      },
+      name: "Gmail",
+      url: "https://mail.google.com/",
+      accent: {
+        override: false,
+        color: {
+          r: null,
+          g: null,
+          b: null
+        }
+      },
+      timeStamp: 1546453110265
+    }, {
+      display: "icon",
+      letter: "R",
+      icon: {
+        name: "reddit-alien",
+        prefix: "fab",
+        label: "reddit Alien"
+      },
+      name: "Reddit",
+      url: "https://www.reddit.com/",
+      accent: {
+        override: false,
+        color: {
+          r: null,
+          g: null,
+          b: null
+        }
+      },
+      timeStamp: 1546453111491
+    }, {
+      display: "icon",
+      letter: "N",
+      icon: {
+        name: "film",
+        prefix: "fas",
+        label: "Film"
+      },
+      name: "Netflix",
+      url: "https://www.netflix.com/",
+      accent: {
+        override: false,
+        color: {
+          r: null,
+          g: null,
+          b: null
+        }
+      },
+      timeStamp: 1546453104460
+    }, {
+      display: "letter",
+      letter: "DR",
+      icon: {
+        name: null,
+        prefix: null,
+        label: null
+      },
+      name: "Drive",
+      url: "https://drive.google.com/drive/",
+      accent: {
+        override: false,
+        color: {
+          r: null,
+          g: null,
+          b: null
+        }
+      },
+      timeStamp: 1546453111953
+    }]
   }, {
-    display: "icon",
+    name: "Dev sites",
-    letter: "AS",
+    items: [{
-    icon: {
+      display: "icon",
-      name: "dice-d20",
+      letter: "DEV",
-      prefix: "fas",
+      icon: {
-      label: "Dice D20"
+        name: "code",
-    },
+        prefix: "fas",
-    name: "awesomeSheet",
+        label: "Code"
-    url: "https://zombiefox.github.io/awesomeSheet/",
+      },
-    accent: {
+      name: "Devdocs",
-      override: false,
+      url: "http://devdocs.io/",
-      color: {
+      accent: {
-        r: null,
+        override: false,
-        g: null,
+        color: {
-        b: null
+          r: null,
-      }
+          g: null,
-    },
+          b: null
-    timeStamp: 1546453104010
+        }
-  }, {
+      },
-    display: "icon",
+      timeStamp: 1546453101749
-    letter: "N",
+    }, {
-    icon: {
+      display: "icon",
-      name: "film",
+      letter: "GIT",
-      prefix: "fas",
+      icon: {
-      label: "Film"
+        name: "github",
-    },
+        prefix: "fab",
-    name: "Netflix",
+        label: "GitHub"
-    url: "https://www.netflix.com/",
+      },
-    accent: {
+      name: "Github",
-      override: false,
+      url: "https://github.com/",
-      color: {
+      accent: {
-        r: null,
+        override: false,
-        g: null,
+        color: {
-        b: null
+          r: null,
-      }
+          g: null,
-    },
+          b: null
-    timeStamp: 1546453104460
+        }
-  }, {
+      },
-    display: "letter",
+      timeStamp: 1546453108926
-    letter: "AZ",
+    }]
-    icon: {
-      name: "amazon",
-      prefix: "fab",
-      label: "Amazon"
-    },
-    name: "Amazon",
-    url: "https://www.amazon.co.uk/",
-    accent: {
-      override: false,
-      color: {
-        r: null,
-        g: null,
-        b: null
-      }
-    },
-    timeStamp: 1546453107633
-  }, {
-    display: "icon",
-    letter: "YT",
-    icon: {
-      name: "youtube",
-      prefix: "fab",
-      label: "YouTube"
-    },
-    name: "Youtube",
-    url: "https://www.youtube.com/",
-    accent: {
-      override: false,
-      color: {
-        r: null,
-        g: null,
-        b: null
-      }
-    },
-    timeStamp: 1546453108071
-  }, {
-    display: "letter",
-    letter: "GIT",
-    icon: {
-      name: "github",
-      prefix: "fab",
-      label: "GitHub"
-    },
-    name: "Github",
-    url: "https://github.com/",
-    accent: {
-      override: false,
-      color: {
-        r: null,
-        g: null,
-        b: null
-      }
-    },
-    timeStamp: 1546453108926
-  }, {
-    display: "letter",
-    letter: "GM",
-    icon: {
-      name: "envelope",
-      prefix: "fas",
-      label: "Envelope"
-    },
-    name: "Gmail",
-    url: "https://mail.google.com/",
-    accent: {
-      override: false,
-      color: {
-        r: null,
-        g: null,
-        b: null
-      }
-    },
-    timeStamp: 1546453110265
-  }, {
-    display: "icon",
-    letter: "R",
-    icon: {
-      name: "reddit-alien",
-      prefix: "fab",
-      label: "reddit Alien"
-    },
-    name: "Reddit",
-    url: "https://www.reddit.com/",
-    accent: {
-      override: false,
-      color: {
-        r: null,
-        g: null,
-        b: null
-      }
-    },
-    timeStamp: 1546453111491
-  }, {
-    display: "letter",
-    letter: "DR",
-    icon: {
-      name: null,
-      prefix: null,
-      label: null
-    },
-    name: "Drive",
-    url: "https://drive.google.com/drive/",
-    accent: {
-      override: false,
-      color: {
-        r: null,
-        g: null,
-        b: null
-      }
-    },
-    timeStamp: 1546453111953
   }];
 
   mod.get = function(data) {
     var _singleBookmark = function() {
       var found = false;
-      for (var i = 0; i < mod.all.length; i++) {
+      if (mod.all.length > 0) {
-        if (mod.all[i].timeStamp === data.timeStamp) {
+        mod.all.forEach(function(arrayItem, index) {
-          found = mod.all[i];
+          arrayItem.forEach(function(arrayItem, index) {
-        };
+            if (arrayItem[index].timeStamp === data.timeStamp) {
+              found = arrayItem[index];
+            };
+          });
+        });
       };
       return found;
     };
@@ -198,24 +189,52 @@ var bookmarks = (function() {
     };
   };
 
-  mod.add = function(data) {
+  mod.add = {
-    mod.all.push(data);
+    link: function(data) {
+      if (data.position.group.new) {
+        mod.add.group(data);
+      };
+      mod.all[data.position.destination.group].items.splice(data.position.destination.item, 0, data.link);
+    },
+    group: function(data) {
+      var name = data.position.group.name;
+      if (name != null && typeof name == "string") {
+        name = name.trim();
+      };
+      if (name == "" || name == null || name == undefined) {
+        var count = get().length + 1;
+        name = "Group " + count;
+      };
+      mod.all.push({
+        name: name,
+        items: []
+      });
+    }
   };
 
-  mod.edit = function(data) {
+  mod.edit = {
-    for (var i = 0; i < mod.all.length; i++) {
+    link: function(data) {
-      if (mod.all[i].timeStamp === data.timeStamp) {
+      if (data.position.group.new) {
-        mod.all[i] = data;
+        mod.add.group(data);
       };
-    };
+      var item = JSON.parse(JSON.stringify(data.link));
+      mod.all[data.position.origin.group].items.splice(data.position.origin.item, 1);
+      mod.all[data.position.destination.group].items.splice(data.position.destination.item, 0, item);
+    },
+    group: function(data) {
+      var group = JSON.parse(JSON.stringify(data.group));
+      mod.all.splice(data.position.origin, 1);
+      mod.all.splice(data.position.destination, 0, group);
+    }
   };
 
-  mod.remove = function(data) {
+  mod.remove = {
-    for (var i = 0; i < mod.all.length; i++) {
+    link: function(data) {
-      if (mod.all[i].timeStamp === data.timeStamp) {
+      mod.all[data.position.origin.group].items.splice(data.position.origin.item, 1);
-        mod.all.splice(mod.all.indexOf(mod.all[i]), 1);
+    },
-      };
+    group: function(data) {
-    };
+      mod.all.splice(data.position.origin, 1);
+    }
   };
 
   mod.sort = function(by) {
@@ -230,35 +249,51 @@ var bookmarks = (function() {
         return helper.sortObject(array, "icon.name");
       }
     };
-    mod.all = action[by](mod.all);
+    mod.all.forEach(function(arrayItem, index) {
+      arrayItem.items = action[by](arrayItem.items);
+    });
   };
 
-  mod.move = function(origin, destination) {
+  mod.move = {
-    mod.all = helper.moveArrayItem(mod.all, origin, destination);
+    link: function(data) {
+      var item = JSON.parse(JSON.stringify(mod.all[data.position.origin.group].items[data.position.origin.item]));
+      mod.all[data.position.origin.group].items.splice(data.position.origin.item, 1);
+      mod.all[data.position.destination.group].items.splice(data.position.destination.item, 0, item);
+    },
+    group: function(data) {
+      var group = JSON.parse(JSON.stringify(mod.all[data.position.origin]));
+      mod.all.splice(data.position.origin, 1);
+      mod.all.splice(data.position.destination, 0, group);
+    }
+  };
+
+  mod.count = function() {
+    var count = 0;
+    mod.all.forEach(function(arrayItem, index) {
+      count = count + arrayItem.items.length
+    });
+    return count;
+  };
+
+  var count = function() {
+    return mod.count();
   };
 
   var get = function(data) {
     return mod.get(data);
   };
 
-  var add = function(data) {
-    mod.add(data);
-  };
-
-  var edit = function(data) {
-    mod.edit(data);
-  };
-
   var sort = function(by) {
     mod.sort(by);
   };
 
-  var move = function(origin, destination) {
+  var remove = {
-    mod.move(origin, destination);
+    link: function(data) {
-  };
+      mod.remove.link(data);
-
+    },
-  var remove = function(data) {
+    group: function(data) {
-    mod.remove(data);
+      mod.remove.group(data);
+    }
   };
 
   var init = function() {
@@ -272,10 +307,8 @@ var bookmarks = (function() {
     init: init,
     mod: mod,
     get: get,
-    add: add,
-    edit: edit,
     sort: sort,
-    move: move,
+    count: count,
     remove: remove
   };
 

src/js/control.js

@@ -18,6 +18,12 @@ var control = (function() {
     func: function() {
       menu.nav(this.element, helper.e(".menu-content-area-header"));
     }
+  }, {
+    element: helper.e(".control-menu-groups"),
+    type: "button",
+    func: function() {
+      menu.nav(this.element, helper.e(".menu-content-area-groups"));
+    }
   }, {
     element: helper.e(".control-menu-bookmarks"),
     type: "button",
@@ -76,7 +82,7 @@ var control = (function() {
       theme.accent();
       theme.render.input.picker();
       theme.render.input.hex();
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-layout-width"),
@@ -1591,6 +1597,78 @@ var control = (function() {
     func: function() {
       render.class();
     }
+  }, {
+    element: helper.e(".control-group-name-show"),
+    path: "group.name.show",
+    type: "checkbox",
+    func: function() {
+      render.class();
+      render.dependents();
+    }
+  }, {
+    element: helper.e(".control-group-name-size"),
+    path: "group.name.size",
+    type: "range",
+    valueMod: ["float"],
+    additionalEvents: [{
+      event: "input",
+      func: function() {
+        edge.box.open({
+          element: helper.e(".group-name-text"),
+        });
+      }
+    }, {
+      event: "mousedown",
+      func: function() {
+        edge.box.open({
+          element: helper.e(".group-name-text"),
+        });
+      }
+    }, {
+      event: "mouseup",
+      func: function() {
+        edge.box.close();
+      }
+    }, {
+      event: "touchend",
+      func: function() {
+        edge.box.close();
+      }
+    }, {
+      event: "keydown",
+      func: function() {
+        if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
+          edge.box.open({
+            element: helper.e(".group-name-text"),
+          });
+        };
+      }
+    }, {
+      event: "keyup",
+      func: function() {
+        edge.box.close();
+      }
+    }],
+    func: function() {
+      link.render.group.size();
+    }
+  }, {
+    element: helper.e(".control-group-name-size-default"),
+    type: "button",
+    additionalEvents: [{
+      event: "click",
+      func: function() {
+        edge.box.open({
+          element: helper.e(".group-name-text"),
+          delay: 500
+        });
+      }
+    }],
+    func: function() {
+      mod.setValue("group.name.size", 1);
+      link.render.group.size();
+      render.update();
+    }
   }, {
     element: helper.e(".control-header-border-top"),
     path: "header.border.top",
@@ -1615,14 +1693,14 @@ var control = (function() {
       event: "input",
       func: function() {
         edge.box.open({
-          element: helper.e(".link-area"),
+          element: helper.e(".group"),
         });
       }
     }, {
       event: "mousedown",
       func: function() {
         edge.box.open({
-          element: helper.e(".link-area"),
+          element: helper.e(".group"),
         });
       }
     }, {
@@ -1640,7 +1718,7 @@ var control = (function() {
       func: function() {
         if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
           edge.box.open({
-            element: helper.e(".link-area"),
+            element: helper.e(".group"),
           });
         };
       }
@@ -1660,7 +1738,7 @@ var control = (function() {
       event: "click",
       func: function() {
         edge.box.open({
-          element: helper.e(".link-area"),
+          element: helper.e(".group"),
           delay: 500
         });
       }
@@ -1686,7 +1764,7 @@ var control = (function() {
       event: "change",
       func: function() {
         edge.box.open({
-          element: helper.e(".link-area"),
+          element: helper.e(".group"),
           delay: 500
         });
       }
@@ -1702,7 +1780,7 @@ var control = (function() {
       event: "change",
       func: function() {
         edge.box.open({
-          element: helper.e(".link-area"),
+          element: helper.e(".group"),
           delay: 500
         });
       }
@@ -1718,7 +1796,7 @@ var control = (function() {
       event: "change",
       func: function() {
         edge.box.open({
-          element: helper.e(".link-area"),
+          element: helper.e(".group"),
           delay: 500
         });
       }
@@ -1923,14 +2001,14 @@ var control = (function() {
     path: "link.item.order",
     type: "radio",
     func: function() {
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-link-item-order-namedisplay"),
     path: "link.item.order",
     type: "radio",
     func: function() {
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-link-item-url-show"),
@@ -1974,7 +2052,7 @@ var control = (function() {
     path: "link.newTab",
     type: "checkbox",
     func: function() {
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-link-item-border"),
@@ -2017,35 +2095,35 @@ var control = (function() {
     type: "button",
     func: function() {
       bookmarks.sort("letter");
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-link-sort-icon"),
     type: "button",
     func: function() {
       bookmarks.sort("icon");
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-link-sort-name"),
     type: "button",
     func: function() {
       bookmarks.sort("name");
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-link-accent-clear"),
     type: "button",
     func: function() {
       link.mod.accent.clear();
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-link-accent-set"),
     type: "button",
     func: function() {
       link.mod.accent.rainbow();
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-theme-accent-current-picker"),
@@ -2055,7 +2133,7 @@ var control = (function() {
       theme.accent();
       theme.render.input.quick();
       theme.render.input.hex();
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-theme-accent-current-hex"),
@@ -2066,7 +2144,7 @@ var control = (function() {
       theme.accent();
       theme.render.input.picker();
       theme.render.input.quick();
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-theme-style-dark"),
@@ -2147,7 +2225,7 @@ var control = (function() {
     func: function() {
       theme.render.accent.random();
       theme.render.accent.color();
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-background-color-by-theme"),
@@ -2520,6 +2598,13 @@ var control = (function() {
       _greeting();
       _transitional();
     };
+    var _group = function() {
+      if (state.get().group.name.show) {
+        helper.addClass(html, "is-group-name-show");
+      } else {
+        helper.removeClass(html, "is-group-name-show");
+      };
+    };
     var _link = function() {
       helper.removeClass(html, "is-link-show");
       helper.removeClass(html, "is-link-area-alignment-left");
@@ -2612,6 +2697,7 @@ var control = (function() {
     };
     _menu();
     _header();
+    _group();
     _link();
     _layout();
     _background();
@@ -2947,6 +3033,17 @@ var control = (function() {
         _disable.input(".control-link-edit", false);
       };
     };
+    var _group = function() {
+      if (state.get().group.name.show) {
+        _disable.input(".control-group-name-size", false);
+        _disable.element("[for=control-group-name-size]", false);
+        _disable.input(".control-group-name-size-default", false);
+      } else {
+        _disable.input(".control-group-name-size", true);
+        _disable.element("[for=control-group-name-size]", true);
+        _disable.input(".control-group-name-size-default", true);
+      };
+    };
     var _link = function() {
       _disable.input(".control-layout-order-headerlink", true);
       _disable.input(".control-layout-order-linkheader", true);
@@ -3150,6 +3247,7 @@ var control = (function() {
     };
     _header();
     _edit();
+    _group();
     _link();
     _theme();
     _background();

src/js/edge.js

@@ -1,8 +1,25 @@
 var edge = (function() {
 
   var _timer = null;
+  var _tick = null;
+  var _currentElement = null;
   var _currentEdge = null;
 
+  var bind = {};
+
+  bind.tick = {
+    set: function() {
+      _tick = window.setTimeout(function() {
+        render.update();
+        bind.tick.set();
+      }, 100);
+    },
+    remove: function() {
+      window.clearTimeout(_tick);
+      _tick = null;
+    }
+  };
+
   var mod = {};
 
   mod.open = function() {
@@ -40,6 +57,7 @@ var edge = (function() {
     if (override) {
       options = helper.applyOptions(options, override);
     };
+    _currentElement = options.element;
     var _resize = function() {
       var scrollTop = document.documentElement.scrollTop;
       var scrollLeft = document.documentElement.scrollLeft;
@@ -60,7 +78,9 @@ var edge = (function() {
         } else {
           edgeElement.remove();
         };
+        bind.tick.remove();
         _currentEdge = null;
+        _currentElement = null;
       };
       edgeElement.addEventListener("transitionend", function(event, elapsed) {
         if (event.propertyName === "opacity" && getComputedStyle(this).opacity == 0) {
@@ -82,13 +102,26 @@ var edge = (function() {
     if (options.element != null) {
       if (_currentEdge == null) {
         _makeEdge();
-        _resize();
+        render.update();
+        bind.tick.set();
       } else {
-        _resize();
+        render.update();
       };
     };
   };
 
+  render.update = function() {
+    if (_currentEdge != null) {
+      var scrollTop = document.documentElement.scrollTop;
+      var scrollLeft = document.documentElement.scrollLeft;
+      var rect = _currentElement.getBoundingClientRect();
+      _currentEdge.style.width = rect.width + "px";
+      _currentEdge.style.height = rect.height + "px";
+      _currentEdge.style.top = rect.top + scrollTop + "px";
+      _currentEdge.style.left = rect.left + scrollLeft + "px";
+    };
+  };
+
   var box = {
     open: function(override) {
       mod.open();
@@ -103,6 +136,7 @@ var edge = (function() {
   // exposed methods
   return {
     mod: mod,
+    bind: bind,
     render: render,
     box: box
   };

src/js/keyboard.js

@@ -7,7 +7,7 @@ var keyboard = (function() {
       //  esc
       if (event.keyCode == 27) {
         if (state.get().edge) {
-          edge.render.clear();
+          edge.box.close();
         } else if (state.get().menu) {
           menu.close();
           shade.close();
@@ -16,17 +16,14 @@ var keyboard = (function() {
         } else if (state.get().link.add) {
           link.add.close();
           shade.close();
+        } else if (state.get().link.edit) {
+          link.add.close();
+          shade.close();
+          control.render.update();
+          control.render.class();
         } else if (state.get().modal) {
           modal.close();
           shade.close();
-        } else if (state.get().link.edit) {
-          helper.setObject({
-            object: state.get(),
-            path: "link.edit",
-            newValue: false
-          });
-          control.render.update();
-          control.render.class();
         };
         data.save();
       };
@@ -96,7 +93,7 @@ var keyboard = (function() {
       if (state.get().theme.accent.random.active && event.ctrlKey && event.altKey && event.keyCode == 82) {
         theme.render.accent.random();
         theme.render.accent.color();
-        link.items();
+        link.groupAndItems();
         data.save();
       };
     }, false);

src/js/search.js

@@ -7,7 +7,7 @@ var search = (function() {
     searchInput.addEventListener("input", function() {
       mod.searching.set();
       render.clear.button();
-      link.items();
+      link.groupAndItems();
     }, false);
   };
 
@@ -17,7 +17,7 @@ var search = (function() {
       render.clear.input();
       mod.searching.set();
       render.clear.button();
-      link.items();
+      link.groupAndItems();
     }, false);
   };
 
@@ -35,6 +35,7 @@ var search = (function() {
 
   var get = function() {
     var searchInput = helper.e(".search-input");
+    var string = searchInput.value.toLowerCase().replace(/\s/g, "");
     if (state.get().search) {
       var searchedBookmarks = {
         total: 0,
@@ -42,12 +43,25 @@ var search = (function() {
       };
       searchedBookmarks.total = bookmarks.get().length;
       bookmarks.get().forEach(function(arrayItem, index) {
-        var matchUrl = (arrayItem.url != null) && (arrayItem.url.replace(/^https?\:\/\//i, "").replace(/\/$/, "").toLowerCase().includes(searchInput.value.toLowerCase().replace(/\s/g, "")));
+        var currentGroup = JSON.parse(JSON.stringify(arrayItem));
-        var matchName = (arrayItem.name != null) && (arrayItem.name.toLowerCase().replace(/\s/g, "").includes(searchInput.value.toLowerCase().replace(/\s/g, "")));
+        var matchingItems = [];
-        if (matchUrl || matchName) {
+        currentGroup.items.forEach(function(arrayItem, index) {
-          var bookmarkDataCopy = JSON.parse(JSON.stringify(arrayItem));
+          var matchUrl = (arrayItem.url != null) && (arrayItem.url.replace(/^https?\:\/\//i, "").replace(/\/$/, "").toLowerCase().includes(string));
-          searchedBookmarks.matching.push(bookmarkDataCopy);
+          var matchName = (arrayItem.name != null) && (arrayItem.name.toLowerCase().replace(/\s/g, "").includes(string));
+          if (matchUrl || matchName) {
+            currentGroup.items.splice(index, 1);
+            matchingItems.push(JSON.parse(JSON.stringify(arrayItem)));
+          };
+        });
+        if (matchingItems.length > 0) {
+          currentGroup.items = matchingItems;
+          searchedBookmarks.matching.push(currentGroup);
         };
+        var count = 0;
+        searchedBookmarks.matching.forEach(function(arrayItem, index) {
+          count = count + arrayItem.items.length
+        });
+        searchedBookmarks.total = count;
       });
       return searchedBookmarks;
     };

src/js/state.js

@@ -175,6 +175,12 @@ var state = (function() {
       style: "block",
       orientation: "bottom"
     },
+    group: {
+      name: {
+        show: true,
+        size: 1
+      }
+    },
     layout: {
       alignment: "centercenter",
       order: "headerlink",

src/js/update.js

@@ -618,6 +618,19 @@ var update = (function() {
         show: true
       };
       return data;
+    },
+    "4.0.0": function(data) {
+      data.bookmarks = [{
+        name: "Group 1",
+        items: data.bookmarks
+      }];
+      data.state.group = {
+        name: {
+          show: true,
+          size: 1
+        }
+      };
+      return data;
     }
   };
 

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "3.83.0";
+  var current = "4.0.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");

src/manifest.json

@@ -2,7 +2,7 @@
   "name": "nightTab",
   "short_name": "nightTab",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-  "version": "3.83.0",
+  "version": "4.0.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"