Bug 1379099 - Replace the Style Editor spinner with a top down animation draft
authorTim Nguyen <ntim.bugs@gmail.com>
Thu, 17 Aug 2017 23:28:39 +0200
changeset 648519 f2f83b5492c1705faf6de6b374ebf7772d2e42c6
parent 648053 a2b09cf8f6c524abde02b255e856234f23e4a999
child 726843 006504db175d8f94cad1d2e58f565bff343103a8
push id74776
push userbmo:ntim.bugs@gmail.com
push dateThu, 17 Aug 2017 21:29:49 +0000
bugs1379099
milestone57.0a1
Bug 1379099 - Replace the Style Editor spinner with a top down animation MozReview-Commit-ID: Bssr6AWdkiU
devtools/client/styleeditor/styleeditor.xul
devtools/client/themes/splitview.css
devtools/client/themes/variables.css
--- a/devtools/client/styleeditor/styleeditor.xul
+++ b/devtools/client/styleeditor/styleeditor.xul
@@ -105,17 +105,16 @@
             <xul:toolbarbutton id="style-editor-options"
                         class="devtools-toolbarbutton devtools-option-toolbarbutton"
                         tooltiptext="&optionsButton.tooltip;"
                         popup="style-editor-options-popup"/>
           </xul:toolbar>
         </xul:box>
         <xul:box id="splitview-resizer-target" class="theme-sidebar splitview-nav-container"
                 persist="height">
-          <div class="devtools-throbber"></div>
           <ol class="splitview-nav" tabindex="0"></ol>
           <div class="splitview-nav placeholder empty">
             <p><strong>&noStyleSheet.label;</strong></p>
             <p>&noStyleSheet-tip-start.label;
               <a href="#"
                 class="style-editor-newButton">&noStyleSheet-tip-action.label;</a>
               &noStyleSheet-tip-end.label;</p>
           </div>
--- a/devtools/client/themes/splitview.css
+++ b/devtools/client/themes/splitview.css
@@ -7,38 +7,41 @@
   --sidemenu-selected-arrow: url(images/item-arrow-dark-ltr.svg);
   --sidemenu-selected-arrow-rtl: url(images/item-arrow-dark-rtl.svg);
 }
 .theme-light {
   --sidemenu-selected-arrow: url(images/item-arrow-ltr.svg);
   --sidemenu-selected-arrow-rtl: url(images/item-arrow-rtl.svg);
 }
 
-.splitview-nav-container .devtools-throbber {
-  display: none;
-  text-align: center;
-}
-
-.loading .splitview-nav-container .devtools-throbber {
-  display: block;
+/* Loading animation */
+@keyframes item-load {
+  0% {
+    transform: scaleY(0) translateY(-100%);
+  }
+  100% {
+    transform: none;
+  }
 }
 
 .splitview-nav {
   list-style: none;
   padding: 0;
   margin: 0;
   background-color: var(--theme-sidebar-background);
 }
 
 .splitview-nav > li {
+  animation: item-load .5s var(--animation-curve); 
   padding-inline-end: 8px;
   -moz-box-align: center;
   outline: 0;
   vertical-align: bottom;
   border-bottom: 1px solid rgba(128,128,128,0.15);
+  background: inherit;
 }
 
 .placeholder {
   -moz-box-flex: 1;
   text-align: center;
 }
 
 .splitview-nav > li.splitview-active {
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -237,9 +237,12 @@
 
   --toolbarbutton-background: rgba(110,120,130,0.1);
   --toolbarbutton-border-color: transparent;
   --toolbarbutton-hover-background: rgba(110,120,130,0.2);
   --toolbarbutton-hover-border-color: var(--toolbarbutton-border-color);
   --toolbarbutton-checked-background: var(--theme-selection-background);
   --toolbarbutton-checked-color: var(--theme-selection-color);
   --toolbarbutton-checked-border-color: var(--toolbarbutton-border-color);
+
+  /* The photon animation curve */
+  --animation-curve: cubic-bezier(.07,.95,0,1);
 }