Bug 1587602 - Source footer - the loading icon shown when pretty-printing a source is static and misaligned. r=fvsch
authorMarco Vega <marco@proweb.co>
Mon, 21 Oct 2019 11:29:25 +0000
changeset 498353 a25d757eaf2923f4774ad561600cd747519b3a9a
parent 498352 55743f55095ccd3851db6abb49ca36e8f1eebceb
child 498354 80bd01919ed4d7f244ca47dfb9c1b0879836381e
push id36717
push usernbeleuzu@mozilla.com
push dateMon, 21 Oct 2019 21:51:55 +0000
treeherdermozilla-central@563f437f24b9 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfvsch
bugs1587602
milestone71.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1587602 - Source footer - the loading icon shown when pretty-printing a source is static and misaligned. r=fvsch Differential Revision: https://phabricator.services.mozilla.com/D48939
devtools/client/debugger/src/components/Editor/Footer.css
devtools/client/debugger/src/components/Editor/Footer.js
devtools/client/debugger/src/components/shared/AccessibleImage.css
devtools/client/debugger/src/components/shared/SearchInput.css
devtools/client/debugger/src/components/shared/SearchInput.js
devtools/client/debugger/src/components/variables.css
--- a/devtools/client/debugger/src/components/Editor/Footer.css
+++ b/devtools/client/debugger/src/components/Editor/Footer.css
@@ -54,22 +54,16 @@
 :root.theme-dark .source-footer .commands .action {
   fill: var(--theme-body-color);
 }
 
 :root.theme-dark .source-footer .commands .action:hover {
   fill: var(--theme-selection-color);
 }
 
-.source-footer .commands div.loader {
-  vertical-align: top;
-  width: 20px;
-  margin: 0 4px;
-}
-
 .source-footer .blackboxed .img.blackBox {
   background-color: var(--theme-icon-checked-color);
 }
 
 .source-footer .mapped-source,
 .source-footer .cursor-position {
   color: var(--theme-body-color);
   padding-right: 2.5px;
--- a/devtools/client/debugger/src/components/Editor/Footer.js
+++ b/devtools/client/debugger/src/components/Editor/Footer.js
@@ -97,18 +97,18 @@ class SourceFooter extends PureComponent
     } = this.props;
 
     if (!selectedSource) {
       return;
     }
 
     if (!selectedSource.content && selectedSource.isPrettyPrinted) {
       return (
-        <div className="loader" key="pretty-loader">
-          <AccessibleImage className="loader" />
+        <div className="action" key="pretty-loader">
+          <AccessibleImage className="loader spin" />
         </div>
       );
     }
 
     if (!canPrettyPrint) {
       return;
     }
 
--- a/devtools/client/debugger/src/components/shared/AccessibleImage.css
+++ b/devtools/client/debugger/src/components/shared/AccessibleImage.css
@@ -166,16 +166,20 @@ html[dir="rtl"] .img.more-tabs {
 .img.search {
   mask-image: url(resource://devtools/client/debugger/images/search.svg);
 }
 
 .img.shortcuts {
   mask-image: url(resource://devtools/client/debugger/images/help.svg);
 }
 
+.img.spin {
+  animation: spin 0.5s linear infinite;
+}
+
 .img.stepIn {
   mask-image: url(resource://devtools/client/debugger/images/stepIn.svg);
 }
 
 .img.stepOut {
   mask-image: url(resource://devtools/client/debugger/images/stepOut.svg);
 }
 
--- a/devtools/client/debugger/src/components/shared/SearchInput.css
+++ b/devtools/client/debugger/src/components/shared/SearchInput.css
@@ -1,21 +1,12 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
-@keyframes search-loader-rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .search-outline {
   border: 1px solid var(--theme-toolbar-background);
   border-bottom: 1px solid var(--theme-splitter-color);
   transition: border-color 200ms ease-in-out;
 }
 
 .search-outline:focus-within {
   border-color: var(--blue-50);
@@ -54,17 +45,16 @@
 [dir="rtl"] .search-field .img.search {
   right: var(--icon-inset-inline-start);
 }
 
 .search-field .img.loader {
   width: 24px;
   height: 24px;
   margin-inline-end: 4px;
-  animation: search-loader-rotate 0.5s linear infinite;
 }
 
 .search-field input {
   align-self: stretch;
   flex-grow: 1;
   height: 24px;
   width: 40px;
   border: none;
--- a/devtools/client/debugger/src/components/shared/SearchInput.js
+++ b/devtools/client/debugger/src/components/shared/SearchInput.js
@@ -193,17 +193,17 @@ class SearchInput extends Component<Prop
     }
 
     return <div className="search-field-summary">{summaryMsg}</div>;
   }
 
   renderSpinner() {
     const { isLoading } = this.props;
     if (isLoading) {
-      return <AccessibleImage className="loader" />;
+      return <AccessibleImage className="loader spin" />;
     }
   }
 
   renderNav() {
     const { count, handleNext, handlePrev } = this.props;
     if ((!handleNext && !handlePrev) || (!count || count == 1)) {
       return;
     }
--- a/devtools/client/debugger/src/components/variables.css
+++ b/devtools/client/debugger/src/components/variables.css
@@ -31,8 +31,15 @@
 :root .theme-dark {
   --search-overlays-semitransparent: rgba(42, 46, 56, 0.66);
   --popup-shadow-color: #5c667b;
   --theme-inline-preview-background: rgba(192, 105, 255, 0.05);
   --theme-inline-preview-border-color: #47326c;
   --theme-inline-preview-label-color: #dfccff;
   --theme-inline-preview-label-background: #3f2e5f;
 }
+
+/* Animations */
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}