Added browser loading for glance and animations!

src/browser/base/content/zen-components

@@ -1 +1 @@
-Subproject commit 416369c981695af637ba640d11f49047473e276c
+Subproject commit 8cfb95a3ac9d98afb056af0b175ee321cc0298f8

src/browser/base/content/zen-glance.inc.xhtml

@@ -1,6 +1,12 @@
-<hbox id="zen-glance-overlay" hidden="true" onclick="gZenGlanceManager.closeGlance()">
+<hbox id="zen-glance-overlay" hidden="true" onclick="gZenGlanceManager.onOverlayClick(event)">
   <hbox id="zen-glance-content">
-    <vbox id="zen-glance-browser-container"></vbox>
+    <vbox id="zen-glance-browser-container">
-    <vbox id="zen-glance-sidebar-container"></vbox>
+      <vbox id="zen-glance-browser">
+        <hbox id="zen-glance-loading"></hbox>
+      </vbox>
+      <vbox id="zen-glance-sidebar-container">
+        <toolbarbutton id="zen-glance-sidebar-close" class="toolbarbutton-1" oncommand="gZenGlanceManager.closeGlance()"/>
+      </vbox>
+    </vbox>
   </hbox>
 </hbox>

src/browser/base/content/zen-styles/zen-animations.css

@@ -227,32 +227,105 @@
   }
 }
 
+@keyframes zen-glance-overlay-animation-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
 @keyframes zen-glance-content-animation {
   /* make the box appear from initial width/height and x/y coordinates */
   0% {
-  }
-
-  25% {
     opacity: 1;
   }
 
-  75% {
+  30% {
+    top: -5px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  70% {
     /* make the box grow to full width/height */
     opacity: 1;
-    transform: translate(-50%, -50%);
+    transform: translateX(-50%);
-    top: 50%;
+    top: -5px;
     left: 50%;
-    width: 92%;
+    width: 78%;
-    height: 92%;
+    height: 103%;
   }
 
   100% {
     /* make the box shrink to final width/height and x/y coordinates */
-    transform: translate(-50%, -50%);
+    transform: translateX(-50%);
     opacity: 1;
-    width: 90%;
+    width: 75%;
-    height: 90%;
+    height: 100%;
-    top: 50%;
+    top: -5px;
     left: 50%;
   }
 }
+
+@keyframes zen-glance-content-animation-out {
+  0% {
+    opacity: 0;
+  }
+
+  5% {
+    opacity: 1;
+  }
+
+  96% {
+    opacity: 1;
+  }
+
+  98% {
+    /* make the box grow to full width/height */
+    opacity: 1;
+    transform: translateX(-50%);
+    top: -5px;
+    left: 50%;
+    width: 77%;
+    height: 102%;
+  }
+
+  100% {
+    transform: translateX(-50%);
+    opacity: 1;
+    width: 75%;
+    height: 100%;
+    top: -5px;
+    left: 50%;
+  }
+}
+
+@keyframes zen-glance-loading-animation {
+  0% {
+    opacity: 1;
+    width: 80%;
+  }
+
+  90% {
+    width: 100%; 
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes zen-glance-buttons-animation {
+  from {
+    right: 0;
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(105%);
+  }
+}

src/browser/base/content/zen-styles/zen-browser-container.css

@@ -5,13 +5,15 @@
     position: relative;
 
     box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), var(--zen-colors-border));
-    & .browserContainer {
+    & .browserContainer,
+    #zen-glance-browser-container browser {
       overflow: hidden;
       border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
     }
 
     @media (-moz-bool-pref: 'zen.view.experimental-rounded-view') {
-      &.deck-selected .browserContainer {
+      &.deck-selected .browserContainer,
+      #zen-glance-browser-container {
         mix-blend-mode: multiply;
       }
     }

src/browser/base/content/zen-styles/zen-glance.css

@@ -7,9 +7,9 @@
   top: 0;
   left: 0;
   z-index: 3;
-  background: color-mix(in srgb, var(--zen-colors-tertiary) 5%, transparent 95%);
+  background: color-mix(in srgb, var(--zen-colors-tertiary) 10%, transparent 90%);
   backdrop-filter: blur(2px);
-  animation: zen-glance-overlay-animation 0.2s ease-in-out forwards;
+  animation: zen-glance-overlay-animation 0.1s ease-in-out forwards;
   border-radius: var(--zen-border-radius);
 
   &[hidden='true'] {
@@ -17,15 +17,29 @@
   }
 
   &[fade-out='true'] {
+    background: transparent;
+    opacity: 1;
+
     & #zen-glance-content {
       & #zen-glance-browser-container {
-        transform: translate(var(--initial-x), var(--initial-y));
+        animation: zen-glance-content-animation-out .3s ease-in-out forwards !important;
-        width: var(--initial-width);
+        animation-direction: reverse !important;
-        height: var(--initial-height);
+
-        top: 0;
+        & browser {
-        left: 0;
+          opacity: 0;
-        opacity: 0;
+          transition: opacity .1s ease-in-out;
-        transition: all .8s ease-in-out;
+        }
+
+        & #zen-glance-sidebar-container {
+          opacity: 0;
+          transition: opacity .1s ease-in-out;
+        }
+
+        & #zen-glance-loading {
+          width: 0 !important;
+          opacity: 0 !important;
+          transition: none !important;
+        }
       }
     }
   }
@@ -36,17 +50,89 @@
     display: flex;
 
     & #zen-glance-browser-container {
-      opacity: .5;
+      box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
-      background: var(--zen-dialog-background);
-      border-radius: var(--zen-border-radius);
-      box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
       transform: translate(var(--initial-x), var(--initial-y));
       width: var(--initial-width);
       height: var(--initial-height);
-      animation: zen-glance-content-animation .8s ease-in-out forwards;
       position: absolute;
+      opacity: 0;
       top: 0;
       left: 0;
+
+      & #zen-glance-browser {
+        border-radius: var(--zen-border-radius);
+        background: var(--zen-dialog-background);
+        overflow: hidden;
+        width: 100%;
+        position: relative;
+        height: 100%;
+      }
+
+      & #zen-glance-sidebar-container {
+        position: fixed;
+        top: 1%;
+        right: 0;
+        opacity: 0;
+        border-radius: var(--zen-border-radius);
+        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
+        background: var(--zen-dialog-background);
+
+        padding: 3px;
+        gap: 2px;
+
+        animation: zen-glance-buttons-animation 0.2s ease-in-out forwards;
+        animation-delay: 0.3s;
+      }
+
+      & #zen-glance-loading {
+        height: 2px;
+        background: var(--zen-primary-color);
+
+        pointer-events: none;
+        position: absolute;
+        left: 0;
+        top: 0;
+
+        &[not-loading='true'] {
+          width: 0;
+        }
+
+        &[loading='true'] {
+          width: 80%;
+          transition: width 8s ease-in-out;
+        }
+
+        &:not([loading='true']):not([not-loading='true']) {
+          animation: zen-glance-loading-animation .8s ease-in-out forwards;
+        }
+      }
+
+      & browser {
+        width: 100%;
+        height: 100%;
+        opacity: 1;
+        transition: opacity 0.3s ease-in-out;
+        transition-delay: 0.2s;
+      }
+
+      &[animate='true'] {
+        animation: zen-glance-content-animation .4s ease-in-out forwards;
+        animation-delay: 0.1s;
+
+        &:not([animate-end='true']) {
+          pointer-events: none;
+
+          & browser {
+            opacity: 0;
+          }
+
+          & #zen-glance-sidebar-container {
+            opacity: 0;
+            animation: none;
+            pointer-events: none;
+          }
+        }
+      }
     }
   }
 }

src/browser/themes/shared/zen-icons/icons.css

@@ -44,6 +44,7 @@
 #stop-button,
 .close-icon,
 #zen-sidebar-web-panel-close,
+#zen-glance-sidebar-close,
 .zen-theme-picker-custom-list-item-remove {
   list-style-image: url('close.svg') !important;
 }