Bug 1068365 - Part 1: Make collapsed remote clients look grayed out. r=rnewman
authorNick Alexander <nalexander@mozilla.com>
Wed, 01 Oct 2014 11:45:03 -0700
changeset 231648 1d72157257643e90536687ff558375ea67c1857a
parent 231647 eacc36bb5d254cde7c4e947eec1cb764abc14f29
child 231649 d927c0ba44ad7cd6f8565aaa605df2f0a0b93cc0
push id4187
push userbhearsum@mozilla.com
push dateFri, 28 Nov 2014 15:29:12 +0000
treeherdermozilla-beta@f23cc6a30c11 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrnewman
bugs1068365
milestone35.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 1068365 - Part 1: Make collapsed remote clients look grayed out. r=rnewman There are two major ways to achieve this. One is to painstakingly update UI elements every time we fetch a group. I've done that. The other is to maintain expanded and collapsed layouts. I went quite far down that path; doing it is less pleasant than I expected for the following reasons: 1) we have to update the view graphics depending on the client device type anyway; 2) Android's view recycling does not track the expanded/collapsed state, so we either manage the expanded states and have multiple group types (see modern versions of SimpleExpandableListAdapter) or we duplicate the work we're doing here; 3) our expanded and collapsed layouts are so similar that duplicating them is worse than futzing with them in this manner.
mobile/android/base/RemoteTabsExpandableListAdapter.java
mobile/android/base/resources/layout/home_remote_tabs_group.xml
mobile/android/base/resources/values/colors.xml
mobile/android/base/resources/values/styles.xml
--- a/mobile/android/base/RemoteTabsExpandableListAdapter.java
+++ b/mobile/android/base/RemoteTabsExpandableListAdapter.java
@@ -96,44 +96,54 @@ public class RemoteTabsExpandableListAda
             view = convertView;
         } else {
             final LayoutInflater inflater = LayoutInflater.from(context);
             view = inflater.inflate(groupLayoutId, parent, false);
         }
 
         final RemoteClient client = clients.get(groupPosition);
 
+        // UI elements whose state depends on isExpanded, roughly from left to
+        // right: device type icon; client name text color; expanded state
+        // indicator.
+        final int deviceTypeResId;
+        final int textColorResId;
+        final int deviceExpandedResId;
+
+        if (isExpanded && !client.tabs.isEmpty()) {
+            deviceTypeResId = "desktop".equals(client.deviceType) ? R.drawable.sync_desktop : R.drawable.sync_mobile;
+            textColorResId = R.color.home_text_color;
+            deviceExpandedResId = R.drawable.home_group_expanded;
+        } else {
+            deviceTypeResId = "desktop".equals(client.deviceType) ? R.drawable.sync_desktop_inactive : R.drawable.sync_mobile_inactive;
+            textColorResId = R.color.home_text_color_disabled;
+            deviceExpandedResId = R.drawable.home_group_collapsed;
+        }
+
+        // Now update the UI.
         final TextView nameView = (TextView) view.findViewById(R.id.client);
         nameView.setText(client.name);
+        nameView.setTextColor(context.getResources().getColor(textColorResId));
 
         final TextView lastModifiedView = (TextView) view.findViewById(R.id.last_synced);
         final long now = System.currentTimeMillis();
         lastModifiedView.setText(TabsAccessor.getLastSyncedString(context, now, client.lastModified));
 
         // These views exists only in some of our group views: they are present
         // for the home panel groups and not for the tabs tray groups.
         // Therefore, we must handle null.
         final ImageView deviceTypeView = (ImageView) view.findViewById(R.id.device_type);
         if (deviceTypeView != null) {
-            if ("desktop".equals(client.deviceType)) {
-                deviceTypeView.setBackgroundResource(R.drawable.sync_desktop);
-            } else {
-                deviceTypeView.setBackgroundResource(R.drawable.sync_mobile);
-            }
+            deviceTypeView.setImageResource(deviceTypeResId);
         }
 
         final ImageView deviceExpandedView = (ImageView) view.findViewById(R.id.device_expanded);
         if (deviceExpandedView != null) {
             // If there are no tabs to display, don't show an indicator at all.
-            if (client.tabs.isEmpty()) {
-                deviceExpandedView.setBackgroundResource(0);
-            } else {
-                final int resourceId = isExpanded ? R.drawable.home_group_expanded : R.drawable.home_group_collapsed;
-                deviceExpandedView.setBackgroundResource(resourceId);
-            }
+            deviceExpandedView.setImageResource(client.tabs.isEmpty() ? 0 : deviceExpandedResId);
         }
 
         return view;
     }
 
     @Override
     public boolean isChildSelectable(int groupPosition, int childPosition) {
         return true;
--- a/mobile/android/base/resources/layout/home_remote_tabs_group.xml
+++ b/mobile/android/base/resources/layout/home_remote_tabs_group.xml
@@ -13,17 +13,18 @@
     android:gravity="center_vertical"
     android:minHeight="@dimen/page_row_height" >
 
     <ImageView
         android:id="@+id/device_type"
         android:layout_width="@dimen/favicon_bg"
         android:layout_height="@dimen/favicon_bg"
         android:layout_marginLeft="10dip"
-        android:layout_marginRight="10dip" />
+        android:layout_marginRight="10dip"
+        android:scaleType="center" />
 
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginRight="10dip"
         android:layout_weight="1"
         android:orientation="vertical" >
 
@@ -43,11 +44,12 @@
             android:maxLength="1024" />
     </LinearLayout>
 
     <ImageView
         android:id="@+id/device_expanded"
         android:layout_height="wrap_content"
         android:layout_width="wrap_content"
         android:layout_marginLeft="10dip"
-        android:layout_marginRight="10dip" />
+        android:layout_marginRight="10dip"
+        android:scaleType="center" />
 
 </LinearLayout>
--- a/mobile/android/base/resources/values/colors.xml
+++ b/mobile/android/base/resources/values/colors.xml
@@ -101,16 +101,20 @@
   <color name="url_bar_urltext">#A6A6A6</color>
   <color name="url_bar_domaintext">#000</color>
   <color name="url_bar_domaintext_private">#FFF</color>
   <color name="url_bar_blockedtext">#b14646</color>
   <color name="url_bar_shadow">#12000000</color>
 
   <color name="home_button_bar_bg">#FFF5F7F9</color>
 
+  <!-- Colour used for share overlay button labels -->
+  <color name="home_text_color">@color/text_color_primary</color>
+  <color name="home_text_color_disabled">#AFB1B3</color>
+
   <color name="panel_image_item_background">#D1D9E1</color>
 
   <!-- Swipe to refresh colors for dynamic panel -->
   <color name="swipe_refresh_orange">#FFFFC26C</color>
   <color name="swipe_refresh_white">#FFFFFFFF</color>
 
   <!-- Swipe to refresh colors for remote tabs -->
   <color name="swipe_refresh_orange1">#EE6700</color>
--- a/mobile/android/base/resources/values/styles.xml
+++ b/mobile/android/base/resources/values/styles.xml
@@ -592,16 +592,17 @@
     <style name="Widget.RemoteTabsItemView" parent="Widget.TwoLinePageRow"/>
 
     <style name="Widget.RemoteTabsClientView" parent="Widget.TwoLinePageRow">
         <item name="android:background">#fff5f7f9</item>
     </style>
 
     <style name="Widget.RemoteTabsListView" parent="Widget.HomeListView">
         <item name="android:childDivider">#E7ECF0</item>
+        <item name="android:drawSelectorOnTop">true</item>
     </style>
 
     <!-- TabsTray Row -->
     <style name="TabRowTextAppearance">
         <item name="android:textColor">#FFFFFFFF</item>
         <item name="android:singleLine">true</item>
         <item name="android:ellipsize">middle</item>
     </style>