add collapse group control

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "7.0.2",
+  "version": "7.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "7.0.2",
+  "version": "7.1.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/component/bookmark/index.css

@@ -84,12 +84,25 @@
 .bookmark-group {
   width: 100%;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
   gap: calc(var(--layout-space) * var(--layout-padding));
   align-items: stretch;
   justify-content: stretch;
 }
 
+.is-group-area-justify-left .bookmark-group {
+  justify-content: flex-start;
+}
+
+.is-group-area-justify-center .bookmark-group {
+  justify-content: center;
+}
+
+.is-group-area-justify-right .bookmark-group {
+  justify-content: flex-end;
+}
+
 .bookmark {
   font-size: 1em;
   position: relative;

src/component/bookmarkEmpty/index.css

@@ -10,6 +10,7 @@
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
+  width: 100%;
 }
 
 .bookmark-empty-headline:not(:last-child) {

src/component/bookmarkPreset/index.js

@@ -3,7 +3,8 @@
  bookmarkPreset.get = () => {
    return [{
      name: { text: 'Cool stuff', show: true },
-     openAll: { show: true },
+     collapse: false,
+     toolbar: { openAll: { show: true }, collapse: { show: true } },
      items: [{
        url: 'https://zombiefox.github.io/awesomeSheet/',
        display: {
@@ -115,7 +116,8 @@
      }]
    }, {
      name: { text: 'Dev sites', show: true },
-     openAll: { show: true },
+     collapse: false,
+     toolbar: { openAll: { show: true }, collapse: { show: true } },
      items: [{
        url: 'https://devdocs.io/',
        display: {

src/component/bookmarkTile/index.js

@@ -483,11 +483,13 @@ const BookmarkTile = function({
           this.element.content.background.wrap.appendChild(this.element.content.background.video);
 
           if (isValidString(bookmarkData.link.background.video.url)) {
-            const backgroundVideoElement = new Video({
+
+            this.video = new Video({
               url: bookmarkData.link.background.video.url
             });
 
-            this.element.content.background.video.appendChild(backgroundVideoElement.video);
+            this.element.content.background.video.appendChild(this.video.video);
+
           };
 
           break;
@@ -547,6 +549,8 @@ const BookmarkTile = function({
 
   };
 
+  this.video = false;
+
   this.assemble();
 
   this.style();

src/component/customThemeTile/index.js

@@ -198,7 +198,7 @@ export const CustomThemeTile = function({
 
         themeSetting.control.opacity.search.update();
 
-        themeSetting.control.opacity.openAll.update();
+        themeSetting.control.opacity.group.toolbar.update();
 
         themeSetting.disable();
 
@@ -279,7 +279,7 @@ export const CustomThemeTile = function({
           'theme.bookmark.color.opacity',
           'theme.bookmark.item.opacity',
           'theme.toolbar.opacity',
-          'theme.group.openAll.opacity'
+          'theme.group.toolbar.opacity'
         ]);
 
         applyCSSClass([

src/component/group/index.css

@@ -15,6 +15,10 @@
   transition: gap var(--layout-transition-extra-fast) var(--layout-duration-04);
 }
 
+.is-group-collapse.group {
+  width: initial;
+}
+
 .is-group-order-header-body .group {
   flex-direction: column;
 }
@@ -28,7 +32,7 @@
 }
 
 .group.is-group-header,
-.group.is-group-open-all {
+.group.is-group-toolbar {
   gap: calc(var(--layout-space) * var(--layout-gutter));
 }
 
@@ -94,6 +98,10 @@
   grid-auto-flow: dense;
 }
 
+.is-group-collapse .group-body {
+  display: none;
+}
+
 .group-control {
   margin-left: calc(calc(var(--layout-space) * var(--layout-gutter)) * -1);
   height: 0;
@@ -129,21 +137,29 @@
   transition: width var(--layout-transition-extra-fast);
 }
 
-.group-control-open-all {
+.group-toolbar-button {
-  font-size: calc(calc(var(--group-openall-size) / 10) * 0.1em);
+  font-size: calc(calc(var(--group-toolbar-size) / 10) * 0.1em);
 }
 
-.group-control-open-all {
+.group-toolbar-button {
-  background-color: hsl(var(--button-background), calc(var(--theme-group-openall-opacity) / 100));
+  background-color: hsl(var(--button-background), calc(var(--theme-group-toolbar-opacity) / 100));
 }
 
-.group-control-open-all:focus,
+.group-toolbar-button:focus,
-.group-control-open-all:hover {
+.group-toolbar-button:hover {
-  background-color: hsl(var(--button-background-focus-hover), calc(var(--theme-group-openall-opacity) / 100));
+  background-color: hsl(var(--button-background-focus-hover), calc(var(--theme-group-toolbar-opacity) / 100));
 }
 
-.group-control-open-all:active {
+.group-toolbar-button:active {
-  background-color: hsl(var(--button-background-active), calc(var(--theme-group-openall-opacity) / 100));
+  background-color: hsl(var(--button-background-active), calc(var(--theme-group-toolbar-opacity) / 100));
+}
+
+.group-toolbar-collapse .icon {
+  transition: transform var(--layout-transition-fast);
+}
+
+.is-group-collapse .group-toolbar-collapse .icon {
+  transform: rotate(180deg);
 }
 
 .group-sort-placeholder {
@@ -160,21 +176,21 @@
   box-shadow: var(--edge-on-accent);
 }
 
-.is-group-open-all-opacity-low .group-control-open-all {
+.is-group-toolbar-opacity-low .group-toolbar-button {
   --button-text: var(--theme-primary-text-010);
   --button-text-focus-hover: var(--theme-primary-text-010);
   --button-text-active: var(--theme-primary-text-010);
   --button-text-disabled: var(--theme-primary-010);
 }
 
-.is-group-open-all-opacity-low.is-theme-background-type-accent .group-control-open-all {
+.is-group-toolbar-opacity-low.is-theme-background-type-accent .group-toolbar-button {
   --button-text: var(--theme-accent-text);
   --button-text-focus-hover: var(--theme-accent-text);
   --button-text-active: var(--theme-accent-text);
   --button-text-disabled: var(--theme-accent-text);
 }
 
-.is-group-open-all-opacity-low.is-theme-background-type-color .group-control-open-all {
+.is-group-toolbar-opacity-low.is-theme-background-type-color .group-toolbar-button {
   --button-text: var(--theme-background-color-text);
   --button-text-focus-hover: var(--theme-background-color-text);
   --button-text-active: var(--theme-background-color-text);

src/component/group/index.js

@@ -299,7 +299,7 @@ group.sort = {
 group.init = () => {
   applyCSSVar([
     'group.name.size',
-    'group.openAll.size'
+    'group.toolbar.size'
   ]);
   applyCSSClass([
     'group.area.justify',

src/component/groupArea/index.js

@@ -32,6 +32,10 @@ export const GroupArea = function({
       control: node('div|class:group-control'),
       group: node('div|class:group-control-group form-group form-group-horizontal')
     },
+    toolbar: {
+      toolbar: node('div|class:group-toolbar'),
+      group: node('div|class:group-toolbar-group form-group form-group-horizontal')
+    },
     body: node('div|class:group-body')
   };
 
@@ -166,10 +170,12 @@ export const GroupArea = function({
 
   this.openAll = {
     button: new Button({
-      text: 'Open all',
+      text: 'Open all Bookmarks in ' + (isValidString(groupData.group.name.text) ? groupData.group.name.text : 'this Group'),
       style: ['line'],
-      title: 'Open all Bookmarks in this Group',
+      title: 'Open all Bookmarks in ' + (isValidString(groupData.group.name.text) ? groupData.group.name.text : 'this Group'),
-      classList: ['group-control-button', 'group-control-open-all'],
+      srOnly: true,
+      iconName: 'openAll',
+      classList: ['group-toolbar-button', 'group-toolbar-open-all'],
       func: () => {
         this.openAll.open();
       }
@@ -197,14 +203,57 @@ export const GroupArea = function({
     }
   };
 
+  this.collapse = {
+    button: new Button({
+      text: 'Collapse ' + (isValidString(groupData.group.name.text) ? groupData.group.name.text : 'this Group'),
+      style: ['line'],
+      title: 'Collapse ' + (isValidString(groupData.group.name.text) ? groupData.group.name.text : 'this Group'),
+      srOnly: true,
+      iconName: 'arrowKeyboardUp',
+      classList: ['group-toolbar-button', 'group-toolbar-collapse'],
+      func: () => {
+        this.collapse.toggle();
+        this.collapse.video();
+        this.update.style();
+        data.save();
+      }
+    }),
+    toggle: () => {
+
+      if (groupData.group.collapse) {
+        groupData.group.collapse = false;
+      } else {
+        groupData.group.collapse = true;
+      };
+
+    },
+    video: () => {
+
+      if (bookmark.tile.current.length > 0) {
+        bookmark.tile.current.forEach((item, i) => {
+
+          if (item.video) {
+            if (groupData.group.collapse) {
+              item.video.pause();
+            } else {
+              item.video.play();
+            };
+          };
+
+        });
+      };
+
+    }
+  };
+
   this.style = () => {
 
     if (groupData.group.name.show && isValidString(groupData.group.name.text)) {
       this.element.group.classList.add('is-group-header');
     };
 
-    if (groupData.group.openAll.show && groupData.group.items.length > 0) {
+    if (groupData.group.toolbar.collapse.show || (groupData.group.toolbar.openAll.show && groupData.group.items.length > 0)) {
-      this.element.group.classList.add('is-group-open-all');
+      this.element.group.classList.add('is-group-toolbar');
     };
 
   };
@@ -267,8 +316,20 @@ export const GroupArea = function({
       this.element.header.appendChild(this.element.name.name);
     };
 
-    if (groupData.group.openAll.show && groupData.group.items.length > 0) {
+    if (groupData.group.toolbar.collapse.show) {
-      this.element.header.appendChild(this.openAll.button.button);
+      this.element.toolbar.group.appendChild(this.collapse.button.button);
+    };
+
+    if (groupData.group.toolbar.openAll.show && groupData.group.items.length > 0) {
+      this.element.toolbar.group.appendChild(this.openAll.button.button);
+    };
+
+    if (groupData.group.toolbar.collapse.show || (groupData.group.toolbar.openAll.show && groupData.group.items.length > 0)) {
+
+      this.element.toolbar.toolbar.appendChild(this.element.toolbar.group);
+
+      this.element.header.appendChild(this.element.toolbar.toolbar);
+
     };
 
     this.element.group.appendChild(this.element.header);
@@ -303,13 +364,31 @@ export const GroupArea = function({
 
     const html = document.querySelector('html');
 
-    if (state.get.current().theme.group.openAll.opacity < 40) {
+    if (state.get.current().theme.group.toolbar.opacity < 40) {
 
-      html.classList.add('is-group-open-all-opacity-low');
+      html.classList.add('is-group-toolbar-opacity-low');
+
+      this.openAll.button.style.update(['link']);
+
+      this.collapse.button.style.update(['link']);
 
     } else {
 
-      html.classList.remove('is-group-open-all-opacity-low');
+      html.classList.remove('is-group-toolbar-opacity-low');
+
+      this.openAll.button.style.update(['line']);
+
+      this.collapse.button.style.update(['line']);
+
+    };
+
+    if (groupData.group.collapse) {
+
+      this.element.group.classList.add('is-group-collapse');
+
+    } else {
+
+      this.element.group.classList.remove('is-group-collapse');
 
     };
 

src/component/groupDefault/index.js

@@ -1,5 +1,6 @@
 export const groupDefault = {
   name: { text: '', show: true },
-  openAll: { show: true },
+  collapse: false,
+  toolbar: { size: 100, openAll: { show: true }, collapse: { show: true } },
   items: []
 };

src/component/groupForm/index.js

@@ -104,15 +104,24 @@ export const GroupForm = function({
         }
       })
     },
+    collapse: {
+      show: new Control_checkbox({
+        object: groupData.group,
+        path: 'toolbar.collapse.show',
+        id: 'toolbar-collapse-show',
+        labelText: 'Show Collapse',
+        description: 'The Collapse button will show or hide the Bookmaks in this Group.'
+      })
+    },
     openAll: {
       show: new Control_checkbox({
         object: groupData.group,
-        path: 'openAll.show',
+        path: 'toolbar.openAll.show',
-        id: 'openAll-show',
+        id: 'toolbar-openAll-show',
         labelText: 'Show Open all',
         description: 'Open all button will appear if there is at least one Bookmark in this Group.'
       })
-    },
+    }
   };
 
   this.control.destination = new Control_select({
@@ -184,14 +193,15 @@ export const GroupForm = function({
         children: [
           form.wrap({
             children: [
-              node('h2:Open all|class:mb-2'),
+              node('h2:Toolbar|class:mb-2'),
-              node('p:Display a button to open all Bookmarks in this Group.|class:mb-5')
+              node('p:Display controls to open all or show/hide the Bookmarks in this Group.|class:mb-5')
             ]
           }),
           form.wrap({
             children: [
               form.indent({
                 children: [
+                  this.control.group.collapse.show.wrap(),
                   this.control.group.openAll.show.wrap()
                 ]
               })

src/component/icon/index.js

@@ -102,6 +102,12 @@ icon.all = {
   },
   random: {
     path: 'M10.59 9.17L5.41 4L4 5.41L9.17 10.58L10.59 9.17ZM14.5 4L16.54 6.04L4 18.59L5.41 20L17.96 7.46L20 9.5V4H14.5ZM14.83 13.41L13.42 14.82L16.55 17.95L14.5 20H20V14.5L17.96 16.54L14.83 13.41V13.41Z'
+  },
+  tab: {
+    path: 'M0 0h24v24H0V0zm0 0h24v24H0V0z M0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none"/><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h10v4h8v10z'
+  },
+  openAll: {
+    path: 'M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z'
   }
 };
 

src/component/menu/index.js

@@ -21,7 +21,7 @@ menu.navData = [
   { name: 'Layout', active: false, overscroll: true, sub: ['Scaling', 'Area', 'Padding', 'Gutter', 'Alignment', 'Page'] },
   { name: 'Header', active: false, overscroll: true, sub: ['Area', 'Greeting', 'Transitional words', 'Clock', 'Date', 'Search'] },
   { name: 'Bookmark', active: false, overscroll: true, sub: ['General', 'Style', 'Orientation', 'Sort'] },
-  { name: 'Group', active: false, overscroll: true, sub: ['Alignment', 'Name', 'Open All'] },
+  { name: 'Group', active: false, overscroll: true, sub: ['Alignment', 'Name', 'Toolbar'] },
   { name: 'Toolbar', active: false, overscroll: true, sub: ['Size', 'Location', 'Position', 'Controls'] },
   { name: 'Data', active: false, overscroll: true, sub: ['Restore', 'Backup', 'Clear'] },
   { name: 'Support', active: false, overscroll: false },

src/component/menuContent/groupSetting/index.js

@@ -46,12 +46,12 @@ const groupSetting = {};
 groupSetting.control = {
   alignment: {},
   name: {},
-  open: {}
+  toolbar: {}
 };
 
 groupSetting.edge = {
   name: {},
-  open: {}
+  toolbar: {}
 };
 
 groupSetting.disable = () => {
@@ -63,10 +63,10 @@ groupSetting.disable = () => {
     groupSetting.control.name.hide.enable();
     groupSetting.control.name.show.enable();
     groupSetting.control.name.helper.enable();
-    groupSetting.control.open.size.enable();
+    groupSetting.control.toolbar.size.enable();
-    groupSetting.control.open.hide.enable();
+    groupSetting.control.toolbar.openAll.hide.enable();
-    groupSetting.control.open.show.enable();
+    groupSetting.control.toolbar.openAll.show.enable();
-    groupSetting.control.open.helper.enable();
+    groupSetting.control.toolbar.openAll.helper.enable();
   } else {
     groupSetting.control.alignment.justify.disable();
     groupSetting.control.alignment.order.disable();
@@ -74,10 +74,10 @@ groupSetting.disable = () => {
     groupSetting.control.name.hide.disable();
     groupSetting.control.name.show.disable();
     groupSetting.control.name.helper.disable();
-    groupSetting.control.open.size.disable();
+    groupSetting.control.toolbar.size.disable();
-    groupSetting.control.open.hide.disable();
+    groupSetting.control.toolbar.openAll.hide.disable();
-    groupSetting.control.open.show.disable();
+    groupSetting.control.toolbar.openAll.show.disable();
-    groupSetting.control.open.helper.disable();
+    groupSetting.control.toolbar.openAll.helper.disable();
   };
 
 };
@@ -180,19 +180,19 @@ groupSetting.name = (parent) => {
 
       };
 
-      if (groupSetting.edge.open.size) {
+      if (groupSetting.edge.toolbar.size) {
 
         if (state.get.current().bookmark.show && group.area.current.length > 0) {
 
-          groupSetting.edge.open.size.update.primary(group.area.current[0].openAll.button.button);
+          groupSetting.edge.toolbar.size.update.primary(group.area.current[0].element.toolbar.toolbar);
 
-          groupSetting.edge.open.size.update.secondary([group.area.current[0].element.header]);
+          groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
 
         };
 
       } else {
 
-        groupSetting.edge.open.size = new Edge({ primary: group.area.current[0].openAll.button.button, secondary: [group.area.current[0].element.header] });
+        groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
 
       };
 
@@ -226,19 +226,19 @@ groupSetting.name = (parent) => {
 
       };
 
-      if (groupSetting.edge.open.size) {
+      if (groupSetting.edge.toolbar.size) {
 
         if (state.get.current().bookmark.show && group.area.current.length > 0) {
 
-          groupSetting.edge.open.size.update.primary(group.area.current[0].openAll.button.button);
+          groupSetting.edge.toolbar.size.update.primary(group.area.current[0].element.toolbar.toolbar);
 
-          groupSetting.edge.open.size.update.secondary([group.area.current[0].element.header]);
+          groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
 
         };
 
       } else {
 
-        groupSetting.edge.open.size = new Edge({ primary: group.area.current[0].openAll.button.button, secondary: [group.area.current[0].element.header] });
+        groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
 
       };
 
@@ -269,42 +269,43 @@ groupSetting.name = (parent) => {
 
 };
 
-groupSetting.open = (parent) => {
+groupSetting.toolbar = (parent) => {
 
-  if (state.get.current().bookmark.show && bookmark.all[0].openAll.show && group.area.current.length > 0) {
+  if (state.get.current().bookmark.show && (bookmark.all[0].toolbar.collapse.show || (bookmark.all[0].toolbar.openAll.show && bookmark.all[0].items.length > 0))) {
 
-    groupSetting.edge.open.size = new Edge({ primary: group.area.current[0].openAll.button.button, secondary: [group.area.current[0].element.header] });
+    groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
 
   };
 
-  groupSetting.control.open.size = new Control_slider({
+  groupSetting.control.toolbar.size = new Control_slider({
     object: state.get.current(),
-    path: 'group.openAll.size',
+    path: 'group.toolbar.size',
-    id: 'group-openAll-size',
+    id: 'group-toolbar-size',
-    labelText: 'Open all size',
+    labelText: 'Group toolbar size',
-    value: state.get.current().group.openAll.size,
+    value: state.get.current().group.toolbar.size,
-    defaultValue: state.get.default().group.openAll.size,
+    defaultValue: state.get.default().group.toolbar.size,
-    min: state.get.minMax().group.openAll.size.min,
+    min: state.get.minMax().group.toolbar.size.min,
-    max: state.get.minMax().group.openAll.size.max,
+    max: state.get.minMax().group.toolbar.size.max,
     action: () => {
-      applyCSSVar('group.openAll.size');
+      applyCSSVar('group.toolbar.size');
-      if (state.get.current().bookmark.show && group.area.current.length > 0 && bookmark.all[0].openAll.show && groupSetting.edge.open.size) { groupSetting.edge.open.size.track(); };
+      if (state.get.current().bookmark.show && (bookmark.all[0].toolbar.collapse.show || (bookmark.all[0].toolbar.openAll.show && bookmark.all[0].items.length > 0))) { groupSetting.edge.toolbar.size.track(); };
       data.save();
     },
     mouseDownAction: () => {
-      if (state.get.current().bookmark.show && group.area.current.length > 0 && bookmark.all[0].openAll.show && groupSetting.edge.open.size) { groupSetting.edge.open.size.show(); };
+      if (state.get.current().bookmark.show && (bookmark.all[0].toolbar.collapse.show || (bookmark.all[0].toolbar.openAll.show && bookmark.all[0].items.length > 0))) { groupSetting.edge.toolbar.size.show(); };
     },
     mouseUpAction: () => {
-      if (state.get.current().bookmark.show && group.area.current.length > 0 && bookmark.all[0].openAll.show && groupSetting.edge.open.size) { groupSetting.edge.open.size.hide(); };
+      if (state.get.current().bookmark.show && (bookmark.all[0].toolbar.collapse.show || (bookmark.all[0].toolbar.openAll.show && bookmark.all[0].items.length > 0))) { groupSetting.edge.toolbar.size.hide(); };
     }
   });
 
-  groupSetting.control.open.hide = new Button({
+  groupSetting.control.toolbar.collapse = {
+    show: new Button({
       text: 'Show all',
       style: ['line'],
       func: () => {
 
-      bookmark.all.forEach(item => { item.openAll.show = true; });
+        bookmark.all.forEach(item => { item.toolbar.collapse.show = true; });
 
         groupAndBookmark.render();
 
@@ -324,33 +325,32 @@ groupSetting.open = (parent) => {
 
         };
 
-      if (groupSetting.edge.open.size) {
+        if (groupSetting.edge.toolbar.size) {
 
           if (state.get.current().bookmark.show && group.area.current.length > 0) {
 
-          groupSetting.edge.open.size.update.primary(group.area.current[0].openAll.button.button);
+            groupSetting.edge.toolbar.size.update.primary(group.area.current[0].element.toolbar.toolbar);
 
-          groupSetting.edge.open.size.update.secondary([group.area.current[0].element.header]);
+            groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
 
           };
 
         } else {
 
-        groupSetting.edge.open.size = new Edge({ primary: group.area.current[0].openAll.button.button, secondary: [group.area.current[0].element.header] });
+          groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
 
         };
 
         data.save();
 
       }
-  });
+    }),
-
+    hide: new Button({
-  groupSetting.control.open.show = new Button({
       text: 'Hide all',
       style: ['line'],
       func: () => {
 
-      bookmark.all.forEach(item => { item.openAll.show = false; });
+        bookmark.all.forEach(item => { item.toolbar.collapse.show = false; });
 
         groupAndBookmark.render();
 
@@ -370,44 +370,154 @@ groupSetting.open = (parent) => {
 
         };
 
-      if (groupSetting.edge.open.size) {
+        if (groupSetting.edge.toolbar.size) {
 
           if (state.get.current().bookmark.show && group.area.current.length > 0) {
 
-          groupSetting.edge.open.size.update.primary(group.area.current[0].openAll.button.button);
+            groupSetting.edge.toolbar.size.update.primary(group.area.current[0].element.toolbar.toolbar);
 
-          groupSetting.edge.open.size.update.secondary([group.area.current[0].element.header]);
+            groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
 
           };
 
         } else {
 
-        groupSetting.edge.open.size = new Edge({ primary: group.area.current[0].openAll.button.button, secondary: [group.area.current[0].element.header] });
+          groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
 
         };
 
         data.save();
 
       }
-  });
+    }),
+    helper: new Control_helperText({
+      text: ['Group toolbar collapse button can also be changed by editing individual Groups.']
+    })
+  };
 
-  groupSetting.control.open.helper = new Control_helperText({
+  groupSetting.control.toolbar.openAll = {
-    text: ['Group Names can also be changed by editing individual Groups.']
+    show: new Button({
-  });
+      text: 'Show all',
+      style: ['line'],
+      func: () => {
+
+        bookmark.all.forEach(item => { item.toolbar.openAll.show = true; });
+
+        groupAndBookmark.render();
+
+        if (groupSetting.edge.name.size) {
+
+          if (state.get.current().bookmark.show && group.area.current.length > 0) {
+
+            groupSetting.edge.name.size.update.primary(group.area.current[0].element.name.name);
+
+            groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]);
+
+          };
+
+        } else {
+
+          groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] });
+
+        };
+
+        if (groupSetting.edge.toolbar.size) {
+
+          if (state.get.current().bookmark.show && group.area.current.length > 0) {
+
+            groupSetting.edge.toolbar.size.update.primary(group.area.current[0].element.toolbar.toolbar);
+
+            groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
+
+          };
+
+        } else {
+
+          groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
+
+        };
+
+        data.save();
+
+      }
+    }),
+    hide: new Button({
+      text: 'Hide all',
+      style: ['line'],
+      func: () => {
+
+        bookmark.all.forEach(item => { item.toolbar.openAll.show = false; });
+
+        groupAndBookmark.render();
+
+        if (groupSetting.edge.name.size) {
+
+          if (state.get.current().bookmark.show && group.area.current.length > 0) {
+
+            groupSetting.edge.name.size.update.primary(group.area.current[0].element.name.name);
+
+            groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]);
+
+          };
+
+        } else {
+
+          groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] });
+
+        };
+
+        if (groupSetting.edge.toolbar.size) {
+
+          if (state.get.current().bookmark.show && group.area.current.length > 0) {
+
+            groupSetting.edge.toolbar.size.update.primary(group.area.current[0].element.toolbar.toolbar);
+
+            groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
+
+          };
+
+        } else {
+
+          groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
+
+        };
+
+        data.save();
+
+      }
+    }),
+    helper: new Control_helperText({
+      text: ['Group toolbar open all button can also be changed by editing individual Groups.']
+    })
+  };
 
   parent.appendChild(
     node('div', [
-      groupSetting.control.open.size.wrap(),
+      groupSetting.control.toolbar.size.wrap(),
+      node('hr'),
+      node('label:Group Collapse'),
       form.inline({
         gap: 'small',
         wrap: true,
         equalGap: true,
         children: [
-          groupSetting.control.open.hide.wrap(),
+          groupSetting.control.toolbar.collapse.show.wrap(),
-          groupSetting.control.open.show.wrap()
+          groupSetting.control.toolbar.collapse.hide.wrap()
         ]
       }),
-      groupSetting.control.open.helper.wrap()
+      groupSetting.control.toolbar.openAll.helper.wrap(),
+      node('hr'),
+      node('label:Group Open all'),
+      form.inline({
+        gap: 'small',
+        wrap: true,
+        equalGap: true,
+        children: [
+          groupSetting.control.toolbar.openAll.show.wrap(),
+          groupSetting.control.toolbar.openAll.hide.wrap()
+        ]
+      }),
+      groupSetting.control.toolbar.collapse.helper.wrap()
     ])
   );
 

src/component/menuContent/themeSetting/index.js

@@ -1110,7 +1110,7 @@ themeSetting.opacity = (parent) => {
 
       state.get.current().theme.header.search.opacity = state.get.current().theme.opacity.general;
 
-      state.get.current().theme.group.openAll.opacity = state.get.current().theme.opacity.general;
+      state.get.current().theme.group.toolbar.opacity = state.get.current().theme.opacity.general;
 
       themeSetting.control.opacity.toolbar.update();
 
@@ -1118,14 +1118,14 @@ themeSetting.opacity = (parent) => {
 
       themeSetting.control.opacity.search.update();
 
-      themeSetting.control.opacity.openAll.update();
+      themeSetting.control.opacity.group.toolbar.update();
 
       applyCSSVar([
         'theme.opacity.general',
         'theme.toolbar.opacity',
         'theme.bookmark.item.opacity',
         'theme.header.search.opacity',
-        'theme.group.openAll.opacity'
+        'theme.group.toolbar.opacity'
       ]);
 
       bookmark.item.mod.applyVar('color.opacity', state.get.current().theme.bookmark.item.opacity);
@@ -1213,18 +1213,19 @@ themeSetting.opacity = (parent) => {
     }
   });
 
-  themeSetting.control.opacity.openAll = new Control_sliderSlim({
+  themeSetting.control.opacity.group = {
+    toolbar: new Control_sliderSlim({
       object: state.get.current(),
-    path: 'theme.group.openAll.opacity',
+      path: 'theme.group.toolbar.opacity',
-    id: 'theme-group-open-all-opacity',
+      id: 'theme-group-toolbar-opacity',
-    labelText: 'Open all',
+      labelText: 'Group toolbar',
-    value: state.get.current().theme.group.openAll.opacity,
+      value: state.get.current().theme.group.toolbar.opacity,
-    defaultValue: state.get.default().theme.group.openAll.opacity,
+      defaultValue: state.get.default().theme.group.toolbar.opacity,
-    min: state.get.minMax().theme.group.openAll.opacity.min,
+      min: state.get.minMax().theme.group.toolbar.opacity.min,
-    max: state.get.minMax().theme.group.openAll.opacity.max,
+      max: state.get.minMax().theme.group.toolbar.opacity.max,
       action: () => {
 
-      applyCSSVar('theme.group.openAll.opacity');
+        applyCSSVar('theme.group.toolbar.opacity');
 
         if (group.area.current.length > 0) {
 
@@ -1235,7 +1236,8 @@ themeSetting.opacity = (parent) => {
         data.save();
 
       }
-  });
+    })
+  };
 
   parent.appendChild(
     node('div', [
@@ -1248,7 +1250,7 @@ themeSetting.opacity = (parent) => {
               themeSetting.control.opacity.toolbar.wrap(),
               themeSetting.control.opacity.bookmark.wrap(),
               themeSetting.control.opacity.search.wrap(),
-              themeSetting.control.opacity.openAll.wrap()
+              themeSetting.control.opacity.group.toolbar.wrap()
             ]
           })
         ]

src/component/presetThemeTile/index.js

@@ -205,7 +205,7 @@ export const PresetThemeTile = function({
 
         themeSetting.control.opacity.search.update();
 
-        themeSetting.control.opacity.openAll.update();
+        themeSetting.control.opacity.group.toolbar.update();
 
         themeSetting.disable();
 
@@ -286,7 +286,7 @@ export const PresetThemeTile = function({
           'theme.bookmark.color.opacity',
           'theme.bookmark.item.opacity',
           'theme.toolbar.opacity',
-          'theme.group.openAll.opacity'
+          'theme.group.toolbar.opacity'
         ]);
 
         applyCSSClass([

src/component/searchEmpty/index.css

@@ -10,6 +10,7 @@
   align-items: center;
   flex-wrap: wrap;
   gap: 1em;
+  width: 100%;
 }
 
 .search-empty-string {

src/component/state/index.js

@@ -73,7 +73,7 @@ state.default = {
     area: { justify: 'left' },
     order: 'header-body',
     name: { size: 100 },
-    openAll: { size: 100 },
+    toolbar: { size: 100 },
     edit: false,
     add: false
   },
@@ -100,7 +100,7 @@ state.default = {
     layout: { color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, blur: 0, opacity: 10 }, divider: { size: 0 } },
     header: { color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 10 }, search: { opacity: 100 } },
     bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-    group: { openAll: { opacity: 100 } },
+    group: { toolbar: { opacity: 100 } },
     toolbar: { opacity: 100 },
     style: 'dark',
     radius: 25,
@@ -124,7 +124,7 @@ state.minMax = {
   bookmark: { size: { min: 50, max: 500 } },
   group: {
     name: { size: { min: 50, max: 500 } },
-    openAll: { size: { min: 50, max: 500 } }
+    toolbar: { size: { min: 50, max: 500 } }
   },
   layout: {
     area: {
@@ -156,7 +156,7 @@ state.minMax = {
       toolbar: { min: 0, max: 100 },
       bookmark: { min: 0, max: 100 },
       search: { min: 0, max: 100 },
-      openAll: { min: 0, max: 100 }
+      toolbar: { min: 0, max: 100 }
     },
     layout: {
       color: {
@@ -183,7 +183,7 @@ state.minMax = {
       },
       item: { border: { min: 0, max: 20 }, opacity: { min: 0, max: 100 } }
     },
-    group: { openAll: { opacity: { min: 0, max: 100 } } },
+    group: { toolbar: { opacity: { min: 0, max: 100 } } },
     toolbar: { opacity: { min: 0, max: 100 } },
     background: {
       color: {

src/component/theme/index.js

@@ -530,7 +530,7 @@ theme.init = () => {
     'theme.bookmark.color.opacity',
     'theme.bookmark.item.opacity',
     'theme.toolbar.opacity',
-    'theme.group.openAll.opacity'
+    'theme.group.toolbar.opacity'
   ]);
   applyCSSClass([
     'theme.style',

src/component/themePreset/acrid/index.js

@@ -22,6 +22,6 @@ export const acrid = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-  group: { openAll: { opacity: 100 } },
+  group: { toolbar: { opacity: 100 } },
   toolbar: { opacity: 100 }
 };

src/component/themePreset/aerial/index.js

@@ -22,6 +22,6 @@ export const aerial = {
   layout: { color: { by: 'custom', blur: 50, opacity: 40, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 1 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 0 } },
-  group: { openAll: { opacity: 0 } },
+  group: { toolbar: { opacity: 0 } },
   toolbar: { opacity: 0 }
 };

src/component/themePreset/azure/index.js

@@ -22,6 +22,6 @@ export const azure = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 30 } },
-  group: { openAll: { opacity: 0 } },
+  group: { toolbar: { opacity: 0 } },
   toolbar: { opacity: 0 }
 };

src/component/themePreset/bean/index.js

@@ -22,6 +22,6 @@ export const bean = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-  group: { openAll: { opacity: 0 } },
+  group: { toolbar: { opacity: 0 } },
   toolbar: { opacity: 0 }
 };

src/component/themePreset/comet/index.js

@@ -22,6 +22,6 @@ export const comet = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 20 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 20 } },
-  group: { openAll: { opacity: 0 } },
+  group: { toolbar: { opacity: 0 } },
   toolbar: { opacity: 0 }
 };

src/component/themePreset/corsair/index.js

@@ -22,6 +22,6 @@ export const corsair = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-  group: { openAll: { opacity: 100 } },
+  group: { toolbar: { opacity: 100 } },
   toolbar: { opacity: 100 }
 };

src/component/themePreset/dash/index.js

@@ -22,6 +22,6 @@ export const dash = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-  group: { openAll: { opacity: 100 } },
+  group: { toolbar: { opacity: 100 } },
   toolbar: { opacity: 100 }
 };

src/component/themePreset/deco/index.js

@@ -22,6 +22,6 @@ export const deco = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-  group: { openAll: { opacity: 100 } },
+  group: { toolbar: { opacity: 100 } },
   toolbar: { opacity: 100 }
 };

src/component/themePreset/earthquake/index.js

@@ -22,6 +22,6 @@ export const earthquake = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-  group: { openAll: { opacity: 100 } },
+  group: { toolbar: { opacity: 100 } },
   toolbar: { opacity: 100 }
 };

src/component/themePreset/funkadelic/index.js

@@ -22,6 +22,6 @@ export const funkadelic = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-  group: { openAll: { opacity: 100 } },
+  group: { toolbar: { opacity: 100 } },
   toolbar: { opacity: 100 }
 };

src/component/themePreset/grimm/index.js

@@ -22,6 +22,6 @@ export const grimm = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-  group: { openAll: { opacity: 100 } },
+  group: { toolbar: { opacity: 100 } },
   toolbar: { opacity: 100 }
 };

src/component/themePreset/hive/index.js

@@ -22,6 +22,6 @@ export const hive = {
   layout: { color: { by: 'custom', blur: 30, opacity: 20, hsl: { h: 35, s: 100, l: 61 }, rgb: { r: 255, g: 172, b: 56 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 1, opacity: 0 } },
-  group: { openAll: { opacity: 0 } },
+  group: { toolbar: { opacity: 0 } },
   toolbar: { opacity: 0 }
 };

src/component/themePreset/hypnos/index.js

@@ -22,6 +22,6 @@ export const hypnos = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 40 } },
-  group: { openAll: { opacity: 0 } },
+  group: { toolbar: { opacity: 0 } },
   toolbar: { opacity: 0 }
 };

src/component/themePreset/infrared/index.js

@@ -22,6 +22,6 @@ export const infrared = {
   layout: { color: { by: 'custom', blur: 80, opacity: 5, hsl: { h: 0, s: 0, l: 100 }, rgb: { r: 255, g: 255, b: 255 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 1, opacity: 0 } },
-  group: { openAll: { opacity: 0 } },
+  group: { toolbar: { opacity: 0 } },
   toolbar: { opacity: 0 }
 };

src/component/themePreset/kapow/index.js

@@ -22,6 +22,6 @@ export const kapow = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 1, opacity: 80 } },
-  group: { openAll: { opacity: 0 } },
+  group: { toolbar: { opacity: 0 } },
   toolbar: { opacity: 0 }
 };

src/component/themePreset/koto/index.js

@@ -22,6 +22,6 @@ export const koto = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-  group: { openAll: { opacity: 0 } },
+  group: { toolbar: { opacity: 0 } },
   toolbar: { opacity: 0 }
 };

src/component/themePreset/lex/index.js

@@ -22,6 +22,6 @@ export const lex = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 15 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 15 } },
-  group: { openAll: { opacity: 15 } },
+  group: { toolbar: { opacity: 15 } },
   toolbar: { opacity: 15 }
 };

src/component/themePreset/macaroon/index.js

@@ -22,6 +22,6 @@ export const macaroon = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-  group: { openAll: { opacity: 100 } },
+  group: { toolbar: { opacity: 100 } },
   toolbar: { opacity: 100 }
 };

src/component/themePreset/marker/index.js

@@ -22,6 +22,6 @@ export const marker = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 20 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 20 } },
-  group: { openAll: { opacity: 20 } },
+  group: { toolbar: { opacity: 20 } },
   toolbar: { opacity: 20 }
 };

src/component/themePreset/midnight/index.js

@@ -22,6 +22,6 @@ export const midnight = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-  group: { openAll: { opacity: 0 } },
+  group: { toolbar: { opacity: 0 } },
   toolbar: { opacity: 0 }
 };

src/component/themePreset/mint/index.js

@@ -22,6 +22,6 @@ export const mint = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-  group: { openAll: { opacity: 100 } },
+  group: { toolbar: { opacity: 100 } },
   toolbar: { opacity: 100 }
 };

src/component/themePreset/neon/index.js

@@ -22,6 +22,6 @@ export const neon = {
   layout: { color: { by: 'custom', blur: 75, opacity: 5, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 45 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 45 } },
-  group: { openAll: { opacity: 0 } },
+  group: { toolbar: { opacity: 0 } },
   toolbar: { opacity: 0 }
 };

src/component/themePreset/nord/index.js

@@ -22,6 +22,6 @@ export const nord = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-  group: { openAll: { opacity: 100 } },
+  group: { toolbar: { opacity: 100 } },
   toolbar: { opacity: 100 }
 };

src/component/themePreset/obsidian/index.js

@@ -22,6 +22,6 @@ export const obsidian = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-  group: { openAll: { opacity: 100 } },
+  group: { toolbar: { opacity: 100 } },
   toolbar: { opacity: 100 }
 };

src/component/themePreset/origin/index.js

@@ -22,6 +22,6 @@ export const origin = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 1, opacity: 0 } },
-  group: { openAll: { opacity: 0 } },
+  group: { toolbar: { opacity: 0 } },
   toolbar: { opacity: 0 }
 };

src/component/themePreset/outrun/index.js

@@ -22,6 +22,6 @@ export const outrun = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 1 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-  group: { openAll: { opacity: 100 } },
+  group: { toolbar: { opacity: 100 } },
   toolbar: { opacity: 0 }
 };

src/component/themePreset/pepper/index.js

@@ -22,6 +22,6 @@ export const pepper = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 1 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 25 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 25 } },
-  group: { openAll: { opacity: 25 } },
+  group: { toolbar: { opacity: 25 } },
   toolbar: { opacity: 25 }
 };

src/component/themePreset/point/index.js

@@ -22,6 +22,6 @@ export const point = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 45 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 45 } },
-  group: { openAll: { opacity: 45 } },
+  group: { toolbar: { opacity: 45 } },
   toolbar: { opacity: 45 }
 };

src/component/themePreset/pumpkin/index.js

@@ -22,6 +22,6 @@ export const pumpkin = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-  group: { openAll: { opacity: 100 } },
+  group: { toolbar: { opacity: 100 } },
   toolbar: { opacity: 100 }
 };

src/component/themePreset/replica/index.js

@@ -22,6 +22,6 @@ export const replica = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 1 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 0 } },
-  group: { openAll: { opacity: 0 } },
+  group: { toolbar: { opacity: 0 } },
   toolbar: { opacity: 0 }
 };

src/component/themePreset/rumble/index.js

@@ -22,6 +22,6 @@ export const rumble = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 1 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 50 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 50 } },
-  group: { openAll: { opacity: 0 } },
+  group: { toolbar: { opacity: 0 } },
   toolbar: { opacity: 0 }
 };

src/component/themePreset/savage/index.js

@@ -22,6 +22,6 @@ export const savage = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-  group: { openAll: { opacity: 100 } },
+  group: { toolbar: { opacity: 100 } },
   toolbar: { opacity: 100 }
 };

src/component/themePreset/scoria/index.js

@@ -22,6 +22,6 @@ export const scoria = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 80 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 80 } },
-  group: { openAll: { opacity: 80 } },
+  group: { toolbar: { opacity: 80 } },
   toolbar: { opacity: 80 }
 };

src/component/themePreset/snow/index.js

@@ -22,6 +22,6 @@ export const snow = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 80 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 2, opacity: 80 } },
-  group: { openAll: { opacity: 80 } },
+  group: { toolbar: { opacity: 80 } },
   toolbar: { opacity: 80 }
 };

src/component/themePreset/sol/index.js

@@ -22,6 +22,6 @@ export const sol = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 10 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-  group: { openAll: { opacity: 10 } },
+  group: { toolbar: { opacity: 10 } },
   toolbar: { opacity: 10 }
 };

src/component/themePreset/steel/index.js

@@ -22,6 +22,6 @@ export const steel = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-  group: { openAll: { opacity: 100 } },
+  group: { toolbar: { opacity: 100 } },
   toolbar: { opacity: 100 }
 };

src/component/themePreset/stria/index.js

@@ -22,6 +22,6 @@ export const stria = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 50 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 50 } },
-  group: { openAll: { opacity: 0 } },
+  group: { toolbar: { opacity: 0 } },
   toolbar: { opacity: 0 }
 };

src/component/themePreset/terra/index.js

@@ -22,6 +22,6 @@ export const terra = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-  group: { openAll: { opacity: 0 } },
+  group: { toolbar: { opacity: 0 } },
   toolbar: { opacity: 0 }
 };

src/component/themePreset/trine/index.js

@@ -22,6 +22,6 @@ export const trine = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 40 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
-  group: { openAll: { opacity: 40 } },
+  group: { toolbar: { opacity: 40 } },
   toolbar: { opacity: 0 }
 };

src/component/themePreset/umbra/index.js

@@ -22,6 +22,6 @@ export const umbra = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 70 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 70 } },
-  group: { openAll: { opacity: 0 } },
+  group: { toolbar: { opacity: 0 } },
   toolbar: { opacity: 0 }
 }

src/component/themePreset/vanadium/index.js

@@ -22,6 +22,6 @@ export const vanadium = {
   layout: { color: { by: 'custom', blur: 0, opacity: 20, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 40 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 40 } },
-  group: { openAll: { opacity: 0 } },
+  group: { toolbar: { opacity: 0 } },
   toolbar: { opacity: 0 }
 };

src/component/themePreset/viper/index.js

@@ -22,6 +22,6 @@ export const viper = {
   layout: { color: { by: 'theme', blur: 0, opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
   header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
   bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 0 } },
-  group: { openAll: { opacity: 0 } },
+  group: { toolbar: { opacity: 0 } },
   toolbar: { opacity: 0 }
 };

src/component/update/index.js

@@ -573,6 +573,38 @@ update.mod['7.0.0'] = function(data) {
   return data;
 };
 
+update.mod['7.1.0'] = function(data) {
+
+  data.state.group.toolbar = data.state.group.openAll;
+
+  delete data.state.group.openAll;
+
+  data.state.theme.group.toolbar = data.state.theme.group.openAll;
+
+  delete data.state.theme.group.openAll;
+
+  data.state.theme.custom.all.forEach((item, i) => {
+
+    item.group.toolbar = { opacity: item.group.openAll.opacity };
+
+    delete item.group.openAll;
+
+  });
+
+  data.bookmark.forEach((item, i) => {
+
+    item.toolbar = {
+      openAll: { show: item.openAll.show },
+      collapse: { show: true }
+    };
+
+    delete item.openAll;
+
+  });
+
+  return data;
+};
+
 update.run = (data) => {
 
   // loop over all updates in mod.all object

src/component/version/index.js

@@ -1,6 +1,6 @@
 export const version = {};
 
-version.number = '7.0.2';
+version.number = '7.1.0';
 
 version.name = 'Delightful Komodo Dragon';
 

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": "7.0.2",
+  "version": "7.1.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"