Font Size UI for Distilled Pages

Adds the ability for users to change the font size of distilled pages.
Adds SeekBar to layout and supporting observers.

BUG=383630

Review URL: https://codereview.chromium.org/465493002

Cr-Commit-Position: refs/heads/master@{#289481}
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@289481 0039d316-1c4b-4281-b951-d872f2087c98

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

@@ -9,22 +9,71 @@
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:orientation="horizontal"
+    android:orientation="vertical"
     android:background="@drawable/distilled_page_pref_background"
     android:padding="10dp" >
 
-    <RadioButton
-        android:id="@+id/light_mode"
-        android:text="@string/light_mode"
-        style="@style/DistilledPagePrefThemeButton" />
+    <RadioGroup
+        android:id="@+id/radio_button_group"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal" >
 
-    <RadioButton
-        android:id="@+id/dark_mode"
-        android:text="@string/dark_mode"
-        style="@style/DistilledPagePrefThemeButton" />
+        <RadioButton
+            android:id="@+id/light_mode"
+            android:text="@string/light_mode"
+            style="@style/DistilledPagePrefThemeButton" />
+
+        <RadioButton
+            android:id="@+id/dark_mode"
+            android:text="@string/dark_mode"
+            style="@style/DistilledPagePrefThemeButton" />
+        <RadioButton
+            android:id="@+id/sepia_mode"
+            android:text="@string/sepia_mode"
+            style="@style/DistilledPagePrefThemeButton" />
+
+    </RadioGroup>
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal"
+        android:layout_marginTop="3dp">
+
+        <TextView
+            android:id="@+id/font_size_percentage"
+            android:layout_width="wrap_content"
+            android:layout_height="match_parent"
+            android:layout_marginEnd="3dp"
+            android:layout_marginStart="3dp"
+            android:minWidth="50dp"
+            android:gravity="center"
+            android:textSize="17sp" />
+
+        <TextView
+            android:layout_width="wrap_content"
+            android:layout_height="match_parent"
+            android:gravity="center_vertical"
+            android:layout_marginStart="5dp"
+            android:textSize="13sp"
+            android:text="@string/text_size_signifier" />
+
+        <SeekBar
+            android:id="@+id/font_size"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_weight="1"
+            android:orientation="horizontal"
+            android:max="30" />
+
+        <TextView
+            android:layout_width="wrap_content"
+            android:layout_height="match_parent"
+            android:gravity="center_vertical"
+            android:layout_marginEnd="3dp"
+            android:textSize="20sp"
+            android:text="@string/text_size_signifier" />
+
+    </LinearLayout>
 
-    <RadioButton
-        android:id="@+id/sepia_mode"
-        android:text="@string/sepia_mode"
-        style="@style/DistilledPagePrefThemeButton" />
 </org.chromium.chrome.browser.dom_distiller.DistilledPagePrefsView>

chrome/android/java/src/org/chromium/chrome/browser/dom_distiller/DistilledPagePrefsView.java

@@ -10,30 +10,49 @@ import android.util.AttributeSet;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
+import android.widget.LinearLayout;
 import android.widget.RadioButton;
 import android.widget.RadioGroup;
+import android.widget.SeekBar;
+import android.widget.TextView;
 
 import org.chromium.chrome.R;
+import org.chromium.chrome.browser.accessibility.FontSizePrefs;
 import org.chromium.chrome.browser.profiles.Profile;
 import org.chromium.components.dom_distiller.core.DistilledPagePrefs;
 import org.chromium.components.dom_distiller.core.Theme;
 
+import java.text.NumberFormat;
 import java.util.EnumMap;
+import java.util.Locale;
 import java.util.Map;
 
 /**
  * A view which displays preferences for distilled pages.  This allows users
  * to change the theme, font size, etc. of distilled pages.
  */
-public class DistilledPagePrefsView extends RadioGroup
-        implements DistilledPagePrefs.Observer {
+public class DistilledPagePrefsView extends LinearLayout
+        implements DistilledPagePrefs.Observer, SeekBar.OnSeekBarChangeListener,
+        FontSizePrefs.Observer {
     // XML layout for View.
     private static final int VIEW_LAYOUT = R.layout.distilled_page_prefs_view;
 
+    // RadioGroup for color mode buttons.
+    private RadioGroup mRadioGroup;
+
     // Buttons for color mode.
     private final Map<Theme, RadioButton> mColorModeButtons;
 
     private final DistilledPagePrefs mDistilledPagePrefs;
+    private final FontSizePrefs mFontSizePrefs;
+
+    // Text field showing font scale percentage.
+    private TextView mFontScaleTextView;
+
+    // SeekBar for font scale. Has range of [0, 30].
+    private SeekBar mFontScaleSeekBar;
+
+    private NumberFormat mPercentageFormatter;
 
     /**
      * Creates a DistilledPagePrefsView.
@@ -45,7 +64,9 @@ public class DistilledPagePrefsView extends RadioGroup
         super(context, attrs);
         mDistilledPagePrefs = DomDistillerServiceFactory.getForProfile(
                 Profile.getLastUsedProfile()).getDistilledPagePrefs();
+        mFontSizePrefs = FontSizePrefs.getInstance(getContext());
         mColorModeButtons = new EnumMap<Theme, RadioButton>(Theme.class);
+        mPercentageFormatter = NumberFormat.getPercentInstance(Locale.getDefault());
     }
 
     public static DistilledPagePrefsView create(Context context) {
@@ -62,6 +83,7 @@ public class DistilledPagePrefsView extends RadioGroup
     @Override
     public void onFinishInflate() {
         super.onFinishInflate();
+        mRadioGroup = (RadioGroup) findViewById(R.id.radio_button_group);
         mColorModeButtons.put(Theme.LIGHT,
                 initializeAndGetButton(R.id.light_mode, Theme.LIGHT));
         mColorModeButtons.put(Theme.DARK,
@@ -69,11 +91,18 @@ public class DistilledPagePrefsView extends RadioGroup
         mColorModeButtons.put(Theme.SEPIA,
                 initializeAndGetButton(R.id.sepia_mode, Theme.SEPIA));
         mColorModeButtons.get(mDistilledPagePrefs.getTheme()).setChecked(true);
+
+        mFontScaleSeekBar = (SeekBar) findViewById(R.id.font_size);
+        mFontScaleTextView = (TextView) findViewById(R.id.font_size_percentage);
+
+        // Setting initial progress on font scale seekbar.
+        onChangeFontSize(mFontSizePrefs.getFontScaleFactor());
+        mFontScaleSeekBar.setOnSeekBarChangeListener(this);
     }
 
     @Override
     public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
-        setOrientation(HORIZONTAL);
+        mRadioGroup.setOrientation(HORIZONTAL);
 
         for (RadioButton button : mColorModeButtons.values()) {
             ViewGroup.LayoutParams layoutParams =
@@ -87,7 +116,7 @@ public class DistilledPagePrefsView extends RadioGroup
         // top of each other.
         for (RadioButton button : mColorModeButtons.values()) {
             if (button.getLineCount() > 1) {
-                setOrientation(VERTICAL);
+                mRadioGroup.setOrientation(VERTICAL);
                 for (RadioButton innerLoopButton : mColorModeButtons.values()) {
                     ViewGroup.LayoutParams layoutParams =
                             (ViewGroup.LayoutParams) innerLoopButton.getLayoutParams();
@@ -122,6 +151,37 @@ public class DistilledPagePrefsView extends RadioGroup
         mColorModeButtons.get(theme).setChecked(true);
     }
 
+    // SeekBar.OnSeekBarChangeListener
+
+    @Override
+    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
+        // progress = [0, 30]
+        // newValue = .50, .55, .60, ..., 1.95, 2.00 (supported font scales)
+        float newValue = (progress / 20f + .5f);
+        setFontScaleTextView(newValue);
+        mFontSizePrefs.setFontScaleFactor((float) newValue);
+    }
+
+    @Override
+    public void onStartTrackingTouch(SeekBar seekBar) {}
+
+    @Override
+    public void onStopTrackingTouch(SeekBar seekBar) {}
+
+    // FontSizePrefs.Observer
+
+    @Override
+    public void onChangeFontSize(float newFontSize) {
+        setFontScaleTextView(newFontSize);
+        setFontScaleProgress(newFontSize);
+    }
+
+    @Override
+    public void onChangeForceEnableZoom(boolean enabled) {}
+
+    @Override
+    public void onChangeUserSetForceEnableZoom(boolean enabled) {}
+
     /**
      * Initiatializes a Button and selects it if it corresponds to the current
      * theme.
@@ -136,4 +196,21 @@ public class DistilledPagePrefsView extends RadioGroup
         });
         return button;
     }
+
+    /**
+     * Sets the progress of mFontScaleSeekBar.
+     */
+    private void setFontScaleProgress(float newValue) {
+        // newValue = .50, .55, .60, ..., 1.95, 2.00 (supported font scales)
+        // progress = [0, 30]
+        int progress = (int) ((newValue - .5) * 20);
+        mFontScaleSeekBar.setProgress(progress);
+    }
+
+    /**
+     * Sets the text for the font scale text view.
+     */
+    private void setFontScaleTextView(float newValue) {
+        mFontScaleTextView.setText(mPercentageFormatter.format(newValue));
+    }
 }

chrome/android/java/strings/android_chrome_strings.grd

@@ -363,6 +363,9 @@ You are signing in with a managed account and giving its administrator control o
       <message name="IDS_SEPIA_MODE" desc="Title of button that will change theme of distilled pages to sepia mode.">
         Sepia
       </message>
+      <message name="IDS_TEXT_SIZE_SIGNIFIER" desc="A typical letter of the alphabet.  This is drawn on either end of a slider bar that allows the user to change the font size.  On one end, it is drawn smaller and on the other end larger.">
+        A
+      </message>
 
       <!-- TalkBack upgrade -->
       <message name="IDS_OLD_TALKBACK_TITLE" desc="Title of dialog notifying user that the version of TalkBack they're running is too old.">