Redesign downloads arrow

Add internal progress bar instead of filling the arrow.

Fixes: https://gitlab.gnome.org/GNOME/epiphany/issues/1005

8 files changed, 118 insertions, 7 deletions

diff --git a/src/resources/ephy-download-symbolic.svg b/src/resources/ephy-download-symbolic.svg
new file mode 100644
index 000000000..51f306025
--- /dev/null
+++ b/src/resources/ephy-download-symbolic.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   inkscape:version="1.0beta1 (fe3e306978, 2019-09-17)"
+   sodipodi:docname="ephy-download-symbolic.svg"
+   id="svg8"
+   version="1.1"
+   height="16"
+   width="16">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     inkscape:current-layer="svg8"
+     inkscape:window-maximized="1"
+     inkscape:window-y="27"
+     inkscape:window-x="0"
+     inkscape:cy="8"
+     inkscape:cx="8"
+     inkscape:zoom="43.6875"
+     showgrid="false"
+     id="namedview10"
+     inkscape:window-height="1016"
+     inkscape:window-width="1920"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0"
+     guidetolerance="10"
+     gridtolerance="10"
+     objecttolerance="10"
+     borderopacity="1"
+     inkscape:document-rotation="0"
+     bordercolor="#666666"
+     pagecolor="#ffffff" />
+  <g
+     id="g6"
+     fill="#2e3436"
+     color="#000">
+    <path
+       id="path2"
+       overflow="visible"
+       font-family="Bitstream Vera Sans"
+       font-weight="400"
+       style="line-height:normal;-inkscape-font-specification:'Bitstream Vera Sans';text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none"
+       d="M7 1v7.563L5.719 7.28A1.015 1.015 0 0 0 5 7H4v1c0 .265.093.53.281.719l3 3 .282.281h.875l.28-.281 3-3C11.908 8.53 12 8.265 12 8V7h-1c-.265 0-.53.093-.719.281L9 8.563V1z" />
+  </g>
+</svg>
diff --git a/src/resources/epiphany.gresource.xml b/src/resources/epiphany.gresource.xml
index 6bab92cd0..b0ead00fc 100644
--- a/src/resources/epiphany.gresource.xml
+++ b/src/resources/epiphany.gresource.xml
@@ -55,6 +55,7 @@
     <file compressed="true">fonts/SourceCodePro-BoldIt.otf</file>
   </gresource>
   <gresource prefix="/org/gnome/Epiphany/icons">
+    <file compressed="true" alias="scalable/actions/ephy-download-symbolic.svg" preprocess="xml-stripblanks">ephy-download-symbolic.svg</file>
     <file compressed="true" alias="scalable/actions/ephy-bookmarks-symbolic.svg">ephy-bookmarks-symbolic.svg</file>
     <file compressed="true" alias="scalable/actions/ephy-bookmark-tag-symbolic.svg">ephy-bookmark-tag-symbolic.svg</file>
     <file compressed="true" alias="scalable/actions/ephy-missing-favicon-symbolic.svg">ephy-missing-favicon-symbolic.svg</file>
diff --git a/src/resources/gtk/action-bar-end.ui b/src/resources/gtk/action-bar-end.ui
index 35f269a45..2667e7466 100644
--- a/src/resources/gtk/action-bar-end.ui
+++ b/src/resources/gtk/action-bar-end.ui
@@ -30,17 +30,38 @@
         <property name="transition-type">crossfade</property>
         <child>
           <object class="GtkMenuButton" id="downloads_button">
-            <property name="visible">True</property>
-            <property name="valign">center</property>
             <!-- Translators: tooltip for the downloads button -->
             <property name="tooltip_text" translatable="yes">View downloads</property>
-            <property name="image">downloads_image</property>
-            <style>
-              <class name="image-button"/>
-            </style>
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="valign">center</property>
             <child>
-              <object class="EphyDownloadsProgressIcon" id="downloads_image">
+              <object class="GtkOverlay">
                 <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="valign">center</property>
+                <child>
+                  <object class="GtkImage">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="icon_name">ephy-download-symbolic</property>
+                    <property name="margin_bottom">1</property>
+                  </object>
+                  <packing>
+                    <property name="index">-1</property>
+                  </packing>
+                </child>
+                <child type="overlay">
+                  <object class="GtkProgressBar" id="downloads_progress">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="valign">end</property>
+                    <style>
+                      <class name="download_progress"/>
+                    </style>
+                  </object>
+                </child>
               </object>
             </child>
           </object>
diff --git a/src/resources/themes/Adwaita-dark.css b/src/resources/themes/Adwaita-dark.css
index 3e3be6ad7..c40d717ea 100644
--- a/src/resources/themes/Adwaita-dark.css
+++ b/src/resources/themes/Adwaita-dark.css
@@ -60,6 +60,10 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid .title, dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid .subtitle { margin-left: 6px; }
 
+.download_progress progress { min-height: 2px; }
+
+.download_progress trough { min-width: 14px; }
+
 .incognito-mode headerbar { background: #141927 -gtk-icontheme("user-not-tracked-symbolic") 180px 0/64px 64px no-repeat, linear-gradient(to top, #1a2235, #1e263b); box-shadow: inset 0 1px rgba(238, 238, 236, 0.07); border-color: #0b0e16; color: rgba(238, 238, 236, 0.2); }
 
 .incognito-mode headerbar:backdrop { background-image: -gtk-icontheme("user-not-tracked-symbolic"), image(#252f49); box-shadow: inset 0 1px rgba(238, 238, 236, 0.07); color: rgba(137, 142, 155, 0.1); }
diff --git a/src/resources/themes/Adwaita.css b/src/resources/themes/Adwaita.css
index a5e61a70a..7adcaa33a 100644
--- a/src/resources/themes/Adwaita.css
+++ b/src/resources/themes/Adwaita.css
@@ -60,6 +60,10 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid .title, dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid .subtitle { margin-left: 6px; }
 
+.download_progress progress { min-height: 2px; }
+
+.download_progress trough { min-width: 14px; }
+
 .incognito-mode headerbar { background: #c4d6e9 -gtk-icontheme("user-not-tracked-symbolic") 180px 0/64px 64px no-repeat, linear-gradient(to top, #bdd1e6, #c8d9ea); box-shadow: inset 0 1px rgba(255, 255, 255, 0.8); border-color: #9cb9da; color: rgba(46, 52, 54, 0.2); }
 
 .incognito-mode headerbar:backdrop { background-image: -gtk-icontheme("user-not-tracked-symbolic"), image(#eaf0f7); box-shadow: inset 0 1px rgba(255, 255, 255, 0.8); color: rgba(140, 146, 150, 0.1); }
diff --git a/src/resources/themes/_shared-base.scss b/src/resources/themes/_shared-base.scss
index 77573bf9c..87c7a3be3 100644
--- a/src/resources/themes/_shared-base.scss
+++ b/src/resources/themes/_shared-base.scss
@@ -185,3 +185,13 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
     margin-left: 6px;
   }
 }
+
+.download_progress {
+  progress {
+    min-height: 2px;
+  }
+
+  trough {
+    min-width: 14px;
+  }
+}
diff --git a/src/resources/themes/elementary.css b/src/resources/themes/elementary.css
index b6a188cb7..1308186be 100644
--- a/src/resources/themes/elementary.css
+++ b/src/resources/themes/elementary.css
@@ -60,6 +60,10 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid .title, dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid .subtitle { margin-left: 6px; }
 
+.download_progress progress { min-height: 2px; }
+
+.download_progress trough { min-width: 14px; }
+
 .page-menu-contents { margin-left: 0px; margin-right: 0px; margin-bottom: 6px; }
 
 .page-menu-zoom-box { margin-bottom: 6px; }
diff --git a/src/resources/themes/shared.css b/src/resources/themes/shared.css
index d2ba214ad..db007fda3 100644
--- a/src/resources/themes/shared.css
+++ b/src/resources/themes/shared.css
@@ -59,3 +59,7 @@
 dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid { margin-left: 3px; }
 
 dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid .title, dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid .subtitle { margin-left: 6px; }
+
+.download_progress progress { min-height: 2px; }
+
+.download_progress trough { min-width: 14px; }