Add icon to the Data Saver main menu footer and update to spec

Add icon to the Data Saver footer, update the strings to the new spec,
and add a divider.

BUG=702799

Review-Url: https://codereview.chromium.org/2795653006
Cr-Commit-Position: refs/heads/master@{#463350}

chrome/android/java/res/drawable/data_reduction_main_menu_icon.xml

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright 2017 The Chromium Authors. All rights reserved.
+     Use of this source code is governed by a BSD-style license that can be
+     found in the LICENSE file. -->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:id="@+id/main_menu_chart">
+        <bitmap
+            android:src="@drawable/data_reduction_main_menu_chart"
+            android:gravity="bottom" />
+    </item>
+    <item android:drawable="@drawable/data_reduction_main_menu_chart_base" />
+</layer-list>
\ No newline at end of file

chrome/android/java/res/layout/data_reduction_main_menu_footer.xml

@@ -9,24 +9,51 @@
     android:id="@+id/data_reduction_footer"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:layout_gravity="start"
-    android:paddingTop="12dp"
-    android:paddingBottom="12dp"
     android:orientation="vertical"
-    style="@style/AppMenuItem" >
+    android:background="#EDFAFAFA" >
 
-    <TextView
-        android:id="@+id/menu_item_text"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:text="@string/data_reduction_title"
-        android:textAppearance="?android:attr/textAppearanceLargePopupMenu" />
+    <View style="@style/Divider" />
 
-    <TextView
-        android:id="@+id/menu_item_summary"
-        android:layout_width="wrap_content"
+    <FrameLayout
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:textSize="14sp"
-        android:textColor="@color/descriptive_text_color" />
+        android:layout_gravity="start"
+        android:layout_marginTop="@dimen/divider_height"
+        android:paddingTop="12dp"
+        android:paddingBottom="12dp"
+        android:orientation="horizontal"
+        style="@style/AppMenuItem" >
+
+        <ImageView
+            android:id="@+id/chart_icon"
+            android:src="@+drawable/data_reduction_main_menu_icon"
+            android:layout_width="@dimen/data_reduction_main_menu_icon_width"
+            android:layout_height="match_parent"
+            android:layout_gravity="center_vertical"
+            android:contentDescription="@null" />
+
+        <LinearLayout
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/data_reduction_main_menu_icon_width"
+            android:orientation="vertical"
+            android:paddingStart="16dp" >
+
+            <TextView
+                android:id="@+id/menu_item_text"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:textSize="14sp"
+                android:textAppearance="@style/RobotoMediumStyle" />
+
+            <TextView
+                android:id="@+id/menu_item_summary"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:textSize="14sp"
+                android:textColor="@color/descriptive_text_color" />
+        </LinearLayout>
+
+    </FrameLayout>
 
 </org.chromium.chrome.browser.preferences.datareduction.DataReductionMainMenuFooter>

chrome/android/java/res/values-v17/styles.xml

@@ -176,7 +176,7 @@
     </style>
     <style name="Divider">
         <item name="android:layout_width">match_parent</item>
-        <item name="android:layout_height">1dp</item>
+        <item name="android:layout_height">@dimen/divider_height</item>
         <item name="android:background">@color/google_grey_300</item>
     </style>
 

chrome/android/java/res/values/dimens.xml

@@ -148,6 +148,7 @@
 
     <!-- Data Saver -->
     <dimen name="data_usage_chart_height">252dp</dimen>
+    <dimen name="data_reduction_main_menu_icon_width">32dp</dimen>
 
     <!-- The size of the text for tab titles. -->
     <dimen name="compositor_tab_title_text_size">13sp</dimen>
@@ -459,4 +460,7 @@
     <!-- Context Menu Dimensions -->
     <dimen name="context_menu_header_image_min_size">56dp</dimen>
     <dimen name="context_menu_header_image_max_size">56dp</dimen>
+    
+    <!-- Divider Dimensions -->
+    <dimen name="divider_height">1dp</dimen>
 </resources>

chrome/android/java/src/org/chromium/chrome/browser/preferences/datareduction/DataReductionMainMenuFooter.java

@@ -6,13 +6,20 @@ package org.chromium.chrome.browser.preferences.datareduction;
 
 import android.content.Context;
 import android.content.Intent;
+import android.graphics.ColorMatrix;
+import android.graphics.ColorMatrixColorFilter;
+import android.graphics.drawable.Drawable;
+import android.graphics.drawable.LayerDrawable;
 import android.text.format.DateUtils;
 import android.text.format.Formatter;
 import android.util.AttributeSet;
 import android.view.View;
+import android.widget.FrameLayout;
+import android.widget.ImageView;
 import android.widget.LinearLayout;
 import android.widget.TextView;
 
+import org.chromium.base.ApiCompatibilityUtils;
 import org.chromium.base.metrics.RecordUserAction;
 import org.chromium.chrome.R;
 import org.chromium.chrome.browser.net.spdyproxy.DataReductionProxySettings;
@@ -23,7 +30,7 @@ import org.chromium.third_party.android.datausagechart.ChartDataUsageView;
  * Specific {@link LinearLayout} that is displays the data savings of Data Saver in the main menu
  * footer.
  */
-public class DataReductionMainMenuFooter extends LinearLayout implements View.OnClickListener {
+public class DataReductionMainMenuFooter extends FrameLayout implements View.OnClickListener {
     /**
      * Constructs a new {@link DataReductionMainMenuFooter} with the appropriate context.
      */
@@ -35,7 +42,8 @@ public class DataReductionMainMenuFooter extends LinearLayout implements View.On
     protected void onFinishInflate() {
         super.onFinishInflate();
 
-        TextView textSummary = (TextView) findViewById(R.id.menu_item_summary);
+        TextView itemText = (TextView) findViewById(R.id.menu_item_text);
+        TextView itemSummary = (TextView) findViewById(R.id.menu_item_summary);
 
         if (DataReductionProxySettings.getInstance().isDataReductionProxyEnabled()) {
             String dataSaved = Formatter.formatShortFileSize(getContext(),
@@ -44,14 +52,28 @@ public class DataReductionMainMenuFooter extends LinearLayout implements View.On
             long millisSinceEpoch =
                     DataReductionProxySettings.getInstance().getDataReductionLastUpdateTime()
                     - DateUtils.DAY_IN_MILLIS * ChartDataUsageView.DAYS_IN_CHART;
-            final int flags = DateUtils.FORMAT_NUMERIC_DATE | DateUtils.FORMAT_NO_YEAR;
+            final int flags = DateUtils.FORMAT_ABBREV_MONTH | DateUtils.FORMAT_NO_YEAR;
             String date =
                     DateUtils.formatDateTime(getContext(), millisSinceEpoch, flags).toString();
 
-            textSummary.setText(
-                    getContext().getString(R.string.data_reduction_saved_label, dataSaved, date));
+            itemText.setText(
+                    getContext().getString(R.string.data_reduction_saved_label, dataSaved));
+            itemSummary.setText(getContext().getString(R.string.data_reduction_date_label, date));
+
+            int lightActiveColor = ApiCompatibilityUtils.getColor(
+                    getContext().getResources(), R.color.light_active_color);
+            itemText.setTextColor(lightActiveColor);
         } else {
-            textSummary.setText(R.string.text_off);
+            itemText.setText(R.string.data_reduction_title);
+            itemSummary.setText(R.string.text_off);
+
+            // Make the icon grey.
+            ImageView icon = (ImageView) findViewById(R.id.chart_icon);
+            LayerDrawable layers = (LayerDrawable) icon.getDrawable();
+            Drawable chart = layers.findDrawableByLayerId(R.id.main_menu_chart);
+            ColorMatrix matrix = new ColorMatrix();
+            matrix.setSaturation(0);
+            chart.setColorFilter(new ColorMatrixColorFilter(matrix));
         }
 
         setOnClickListener(this);

chrome/android/java/strings/android_chrome_strings.grd

@@ -941,7 +941,10 @@ To obtain new licenses, connect to the internet and play your downloaded content
         Data Saver
       </message>
       <message name="IDS_DATA_REDUCTION_SAVED_LABEL" desc="Summary text for the menu item that states the amount of mobile data that was saved by Data Saver (i.e. XX MB saved). Data Saver allows users to to reduce their mobile data usage by compressing network traffic.">
-        <ph name="data">%1$s<ex>1.0 GB</ex></ph> saved since <ph name="date">%2$s<ex>3/15</ex></ph>
+        <ph name="data">%1$s<ex>1.0 GB</ex></ph> saved
+      </message>
+      <message name="IDS_DATA_REDUCTION_DATE_LABEL" desc="Summary text for the menu item that states the beginning date when the displayed mobile data was saved (i.e. XX MB saved 'since Feb 28')">
+        since <ph name="date">%1$s<ex>Feb 28</ex></ph>
       </message>
       <message name="IDS_DATA_REDUCTION_DESCRIPTION" desc="Description text for the Data Saver feature.">
         When this feature is turned on, Chrome will use Google servers to compress pages you visit before downloading them. Pages accessed using private connections (HTTPS) or in Incognito tabs will not be optimized or seen by Google.