Bug 1520957 - [release 119] Restore search's loader, previous, and next icons (#7739). r=dwalsh
☠☠ backed out by 5b1c54cbac38 ☠ ☠
authorDavid Walsh <davidwalsh83@gmail.com>
Fri, 18 Jan 2019 12:21:45 -0500
changeset 514571 1b068291a658d1d7e8d4dbb2f2ee30922b1b8e97
parent 514570 83af92e6dcf5d00f95d4e5124e8e6ade0ea6022b
child 514572 d3e2f8a52ea72b4c1b807c61849fcd8569abab44
push id1953
push userffxbld-merge
push dateMon, 11 Mar 2019 12:10:20 +0000
treeherdermozilla-release@9c35dcbaa899 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdwalsh
bugs1520957
milestone66.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 1520957 - [release 119] Restore search's loader, previous, and next icons (#7739). r=dwalsh
devtools/client/debugger/new/dist/debugger.css
devtools/client/debugger/new/images/arrow-down.svg
devtools/client/debugger/new/images/arrow-up.svg
devtools/client/debugger/new/images/loader.svg
devtools/client/debugger/new/images/moz.build
devtools/client/debugger/new/src/components/shared/SearchInput.css
--- a/devtools/client/debugger/new/dist/debugger.css
+++ b/devtools/client/debugger/new/dist/debugger.css
@@ -1627,19 +1627,24 @@ html[dir="rtl"] .arrow,
 .search-field i svg {
   width: 16px;
 }
 
 .search-field.big i svg {
   width: 22px;
 }
 
-.search-field i.loader {
+.search-field .img.loader {
   padding-top: 4px;
   margin-right: 8px;
+  mask-image: url("resource://devtools/client/debugger/new/images/loader.svg");
+  mask-size: 100%;
+  width: 20px;
+  height: 20px;
+  margin-top: 6px;
 }
 
 .search-field input {
   border: none;
   line-height: 30px;
   background-color: var(--theme-toolbar-background);
   color: var(--theme-body-color-active);
   flex-grow: 1;
@@ -1717,16 +1722,24 @@ html[dir="rtl"] .arrow,
   background: transparent;
   transition: all 0.25s ease-in-out;
   justify-content: center;
   padding-top: 4px;
   padding-left: 5px;
   padding-right: 5px;
 }
 
+.search-field .search-nav-buttons .img.arrow-up {
+  mask: url("resource://devtools/client/debugger/new/images/arrow-up.svg") no-repeat;
+}
+
+.search-field .search-nav-buttons .img.arrow-down {
+  mask: url("resource://devtools/client/debugger/new/images/arrow-down.svg") no-repeat;
+}
+
 .search-field .search-nav-buttons .nav-btn:hover {
   background: var(--theme-toolbar-background-hover);
 }
 
 .search-field .search-nav-buttons .nav-btn:active path {
   fill: var(--theme-comment-alt);
 }
 
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/images/arrow-down.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1792 1792">
+  <path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z" fill="#696969"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/images/arrow-up.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1792 1792">
+  <path d="M1395 1184q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23z" fill="#696969"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/images/loader.svg
@@ -0,0 +1,13 @@
+<!-- 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/. -->
+<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+  width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+  <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
+    s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
+    c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
+  <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
+    C22.32,8.481,24.301,9.057,26.013,10.047z">
+  </path>
+</svg>
+
--- a/devtools/client/debugger/new/images/moz.build
+++ b/devtools/client/debugger/new/images/moz.build
@@ -3,16 +3,18 @@
 # vim: set filetype=python:
 # 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/.
 
 DevToolsModules(
     'aframe.svg',
     'angular.svg',
+    'arrow-down.svg',
+    'arrow-up.svg',
     'arrow.svg',
     'babel.svg',
     'backbone.svg',
     'blackBox.svg',
     'breadcrumbs-divider.svg',
     'breakpoint.svg',
     'case-match.svg',
     'choo.svg',
@@ -26,16 +28,17 @@ DevToolsModules(
     'extension.svg',
     'file.svg',
     'folder.svg',
     'help.svg',
     'home.svg',
     'immutable.svg',
     'javascript.svg',
     'jquery.svg',
+    'loader.svg',
     'lodash.svg',
     'magnifying-glass.svg',
     'marko.svg',
     'mobx.svg',
     'next-circle.svg',
     'next.svg',
     'nextjs.svg',
     'nuxtjs.svg',
--- a/devtools/client/debugger/new/src/components/shared/SearchInput.css
+++ b/devtools/client/debugger/new/src/components/shared/SearchInput.css
@@ -37,19 +37,24 @@
 .search-field i svg {
   width: 16px;
 }
 
 .search-field.big i svg {
   width: 22px;
 }
 
-.search-field i.loader {
+.search-field .img.loader {
   padding-top: 4px;
   margin-right: 8px;
+  mask-image: url(/images/loader.svg);
+  mask-size: 100%;
+  width: 20px;
+  height: 20px;
+  margin-top: 6px;
 }
 
 .search-field input {
   border: none;
   line-height: 30px;
   background-color: var(--theme-toolbar-background);
   color: var(--theme-body-color-active);
   flex-grow: 1;
@@ -127,16 +132,24 @@
   background: transparent;
   transition: all 0.25s ease-in-out;
   justify-content: center;
   padding-top: 4px;
   padding-left: 5px;
   padding-right: 5px;
 }
 
+.search-field .search-nav-buttons .img.arrow-up {
+  mask: url(/images/arrow-up.svg) no-repeat;
+}
+
+.search-field .search-nav-buttons .img.arrow-down {
+  mask: url(/images/arrow-down.svg) no-repeat;
+}
+
 .search-field .search-nav-buttons .nav-btn:hover {
   background: var(--theme-toolbar-background-hover);
 }
 
 .search-field .search-nav-buttons .nav-btn:active path {
   fill: var(--theme-comment-alt);
 }