Merge pull request #48 from akshat46/dev

next

.github/workflows/release.yml.bk

@@ -1,31 +1,30 @@
 on:
     # Triggers the workflow on push or pull request events but only for the master branch
     push:
-        branches: [master]
+        branches: [main]
 
     # Allows you to run this workflow manually from the Actions tab
     workflow_dispatch:
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
     # zipping
-    zip:
+    zip-release:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@master
             - uses: montudor/action-zip@v0.1.1
             - name: Zip Folder
-              run: zip -r release.zip zip -r flyingfox-0.1.${{github.run_number}}.zip chrome treestyletab other_configs
-
-    release:
-        # release zipped file
-        runs-on: ubuntu-latest
-        steps:
-            - uses: "marvinpinto/action-automatic-releases@latest"
+              run: zip -r flyingfox.zip chrome other_configs treestyletab user.js
+            - name: Tar Folder
+              run: tar -czf flyingfox.tar.gz chrome other_configs treestyletab user.js
+            - name: Release
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              uses: ridedott/release-me-action@master
               with:
-                  repo_token: "${{ secrets.GITHUB_TOKEN }}"
-                  automatic_release_tag: "v0.1.${{github.run_number}}"
-                  prerelease: false
-                  draft: true
-                  files: |
-                      flyingfox-0.1.${{github.run_number}}.zip
+                  disable-changelog: true
+                  release-branches: '["master"]'
+                  release-assets: |
+                      flyingfox.zip
+                      flyingfox.tar.gz

README.md

@@ -8,7 +8,7 @@
 
 <p align="center"><img width="720" src="https://github.com/akshat46/FlyingFox/blob/master/img/demo-hover.gif"></p>
 
-<p align="center"><a href="https://github.com/akshat46/FlyingFox/wiki">See wiki for more details</a></p>
+<h2 align="center"><a href="https://github.com/akshat46/FlyingFox/wiki">See wiki for more details</a></h2>
 
 ## Acknowledgments 
 

chrome/config.css

@@ -38,12 +38,12 @@
     /* uncomment and add gradient value for selected tab gradient*/
 
     /******WINDOW CONTROL PLACEMENT VARS******/
-    --wc-vertical-shift: 15px;
+    --wc-vertical-shift: 18px;
     /* larger value moves window controls down,*/
     /* can be negative(moves controls up) */
     /* Experiemntal: 55px if tabline visible, -25px if tabline hidden */
-    --wc-left-space: 10px; /* add space to the left of window controls*/
-    --wc-right-space: 15px; /* add space to the right of window controls*/
+    --wc-left-space: 15px; /* add space to the left of window controls*/
+    --wc-right-space: 18px; /* add space to the right of window controls*/
     /* left-space shifts window-controls */
     /* if you want to shift window controls to the left: positive value */
     /* if you want to shift them to the right: smaller or negative value */

chrome/userChrome-static.css

@@ -15,7 +15,7 @@
 }
 
 #sidebar {
-    border-right: solid 1px black !important;
+    border-right: solid var(--dividers) var(--sidebar-shadow-color) !important;
 }
 
 toolbar {

chrome/userChrome-tabline.css

@@ -1,5 +1,5 @@
 #tabbrowser-arrowscrollbox {
-    margin-top: 7px;
+    margin: 7px 14px 7px 14px;
 }
 
 .tabbrowser-tab::after {
@@ -43,8 +43,61 @@ tab:not([pinned="true"]) .tab-stack:hover .tab-icon-image {
     transform: translateX(-23px) !important;
 }
 
+/* containers */
+tab:not([selected="true"]).identity-color-blue > .tab-stack,
+tab:not([selected="true"]).identity-color-orange > .tab-stack,
+tab:not([selected="true"]).identity-color-green > .tab-stack,
+tab:not([selected="true"]).identity-color-pink > .tab-stack{
+    border-radius: 0 0 7px 7px !important;
+}
+
+tab[selected="true"].identity-color-blue > .tab-stack .tab-label-container,
+tab[selected="true"].identity-color-orange > .tab-stack .tab-label-container,
+tab[selected="true"].identity-color-green > .tab-stack .tab-label-container,
+tab[selected="true"].identity-color-pink > .tab-stack .tab-label-container{
+   color: #000 !important;
+}
+
+/* blue */
+tab[selected="true"].identity-color-blue > .tab-stack > .tab-background{
+   background: linear-gradient(to right, #3182CE , #0BC5EA) !important;
+}
+
+tab:not([selected="true"]).identity-color-blue > .tab-stack > .tab-background{
+    border-top: solid 4px #63B3ED !important;
+}
+
+/* orange */
+tab[selected="true"].identity-color-orange > .tab-stack > .tab-background{
+   background: linear-gradient(to right, #DD6B20 , #F56565) !important;
+}
+
+tab:not([selected="true"]).identity-color-orange > .tab-stack > .tab-background{
+    border-top: solid 4px #F6AD55 !important;
+}
+
+/* green */
+tab[selected="true"].identity-color-green > .tab-stack > .tab-background{
+   background: linear-gradient(to right, #38A169 , #38B2AC) !important;
+}
+
+tab:not([selected="true"]).identity-color-green > .tab-stack > .tab-background{
+    border-top: solid 4px #68D391 !important;
+}
+
+/* pink */
+tab[selected="true"].identity-color-pink > .tab-stack > .tab-background{
+   background: linear-gradient(to right, #D53F8C , #9F7AEA) !important;
+}
+
+tab:not([selected="true"]).identity-color-pink > .tab-stack > .tab-background{
+    border-top: solid 4px #F687B3 !important;
+}
+
+
 .tab-stack .tab-close-button {
     border-radius: 50%;
+    margin-left: -20px !important;
     background: var(--lwt-text-color);
     fill: var(--lwt-accent-color) !important;
     transform: translateX(30px) !important;
@@ -54,3 +107,8 @@ tab:not([pinned="true"]) .tab-stack:hover .tab-icon-image {
 .tab-stack:hover .tab-close-button {
     transform: translateX(0px) !important;
 }
+
+#tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > 
+.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button:not([selected="true"]){
+    display: block !important;
+}

chrome/variables.css

@@ -209,6 +209,28 @@
     --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, hsla(0, 0%, 100%, 0.17)) !important;
 }
 
+/* Container identity colors */
+
+.identity-color-pink {
+    --identity-tab-color: #ED64A6 !important;
+    --identity-icon-color: #ED64A6 !important;
+}
+
+.identity-color-blue {
+    --identity-tab-color: #4299E1 !important;
+    --identity-icon-color: #4299E1 !important;
+}
+
+.identity-color-green {
+    --identity-tab-color: #48BB78 !important;
+    --identity-icon-color: #48BB78 !important;
+}
+
+.identity-color-orange {
+    --identity-tab-color: #ED8936 !important;
+    --identity-icon-color: #ED8936 !important;
+}
+
 /* /1* special case for urlbar buttons *1/ */
 /* :-moz-any(#urlbar, #searchbar) { */
 /*     --toolbarbutton-hover-background: var(--dark-4) !important; */

chrome/window-controls/wc-with-tabline.css

@@ -1,8 +1,6 @@
 @import "window-controls.css";
 
-#TabsToolbar .titlebar-buttonbox-container {
-    display: inline-block !important;
-    position: absolute;
-    top: var(--wc-vertical-shift) !important;
-    left: var(--wc-horizontal-shift) !important;
+#TabsToolbar.browser-toolbar {
+    margin-left: var(--wc-left-space);
+    margin-right: var(--wc-right-space);
 }

chrome/window-controls/wc-without-tabline-r.css

@@ -0,0 +1,16 @@
+@import "window-controls.css";
+@import "wc-without-tabline.css";
+
+#TabsToolbar.browser-toolbar {
+    left: auto !important;
+    right: var(--wc-right-space) !important;
+}
+
+:root:not([inFullscreen]) toolbar#nav-bar {
+    margin-left: 0 !important;
+    margin-right: calc(var(--wc-left-space) * 2 + 60px) !important;
+}
+
+.titlebar-buttonbox {
+    flex-direction: row !important;
+}

chrome/window-controls/wc-without-tabline.css

@@ -1,5 +1,21 @@
 @import "window-controls.css";
 
+:root:not([inFullscreen]) toolbar#nav-bar {
+    z-index: 1 !important;
+    position: relative !important;
+    margin-left: calc(
+        var(--wc-right-space) * 2 + 60px
+    ) !important; /* shift toolbar to the right based on initial width */
+}
+
+#TabsToolbar .toolbar-items {
+    display: none !important;
+}
+
+.titlebar-buttonbox {
+    flex-direction: row-reverse;
+}
+
 #TabsToolbar.browser-toolbar {
     display: inline-block !important;
     position: absolute;

chrome/window-controls/window-controls.css

@@ -1,11 +1,3 @@
-:root:not([inFullscreen]) toolbar#nav-bar {
-    z-index: 1 !important;
-    position: relative !important;
-    margin-left: calc(
-        var(--wc-right-space) * 2 + 60px
-    ) !important; /* shift toolbar to the right based on initial width */
-}
-
 /*-min max close size*/
 .titlebar-button > .toolbarbutton-icon {
     height: 14px !important;
@@ -14,29 +6,25 @@
     min-width: 14px !important;
 }
 
-#TabsToolbar .toolbar-items{
-    display: none !important;
-}
-
-#titlebar{
+#titlebar {
     -moz-appearance: none !important;
 }
 
 .titlebar-button {
-	transition: all 0.3s ease !important;
-	padding: 0px 8px !important;
-	background: none !important;
+    transition: all 0.3s ease !important;
+    padding: 0px 8px !important;
+    background: none !important;
     -moz-context-properties: fill, fill-opacity !important;
 }
 
 .titlebar-buttonbox {
     display: flex;
-    flex-direction: row-reverse;
     -moz-context-properties: fill, fill-opacity !important;
 }
 
 /* close button */
 .titlebar-close {
+    -moz-appearance: none !important;
     fill: var(--red) !important;
     opacity: 0.7 !important;
     list-style-image: url(circle.svg) !important;
@@ -48,6 +36,7 @@
 
 /* minimize button */
 .titlebar-min {
+    -moz-appearance: none !important;
     fill: var(--yellow) !important;
     opacity: 0.7 !important;
     list-style-image: url(circle.svg) !important;
@@ -59,6 +48,7 @@
 
 /* maximize button */
 .titlebar-max {
+    -moz-appearance: none !important;
     fill: var(--green) !important;
     opacity: 0.7 !important;
     list-style-image: url(circle.svg) !important;
@@ -70,6 +60,7 @@
 
 /* restore button */
 .titlebar-restore {
+    -moz-appearance: none !important;
     fill: var(--green) !important;
     opacity: 0.7 !important;
     list-style-image: url(circle.svg) !important;

treestyletab/custom-hover.css

@@ -53,6 +53,11 @@
     --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
 
     --collapsed-width: 60px;
+
+    --contextual-identity-color-blue: #63B3ED;
+    --contextual-identity-color-orange: #F6AD55;
+    --contextual-identity-color-green: #68D391;
+    --contextual-identity-color-pink: #F687B3;
 }
 
 /************UNCUSTOMIZED CSS************/
@@ -104,7 +109,6 @@ tab-item .label {
     padding-bottom: 2px;
 }
 
-
 tab-item .twisty:before{
    background: var(--light-3) !important;
 }
@@ -188,10 +192,6 @@ tab-item:not(pinned) tab-closebox {
     transform: scale(120%) translateX(-20px) !important;
 }
 
-:root.left tab-item[data-child-ids]:not(.pinned):hover tab-favicon {
-    transform: scale(120%) translateX(-15px);
-}
-
 :root.left tab-item:not([data-child-ids]):hover .label {
     transform: translateX(-15px);
 }
@@ -255,6 +255,43 @@ tab-item.pinned {
     transition   : all 0.1s var(--ease-out);
 }
 
+/**********CONTAINERS***************/
+
+.contextual-identity-marker{
+    position: absolute !important;
+    left: 0 !important;
+    top: 0 !important;
+    bottom: 0 !important;
+}
+
+tab-item.active .contextual-identity-marker {
+    display: none !important;
+}
+
+.contextual-identity-firefox-container-1:not(.active),
+.contextual-identity-firefox-container-2:not(.active),
+.contextual-identity-firefox-container-3:not(.active),
+.contextual-identity-firefox-container-4:not(.active){
+   border-top-left-radius: 0px !important;
+  border-bottom-left-radius: 0px !important;
+}
+
+tab-item.active.contextual-identity-firefox-container-1 {
+    background: linear-gradient(to right, #3182CE , #0BC5EA) !important;
+}
+
+tab-item.active.contextual-identity-firefox-container-2 {
+    background: linear-gradient(to right, #DD6B20 , #F56565) !important;
+}
+
+tab-item.active.contextual-identity-firefox-container-3 {
+   background: linear-gradient(to right, #38A169 , #38B2AC) !important;
+}
+
+tab-item.active.contextual-identity-firefox-container-4 {
+   background: linear-gradient(to right, #D53F8C , #9F7AEA) !important;
+}
+
 /***********************************/
 
 #all-tabs {