Shelf: start new UI with centered items

* Add flag for the shelf new UI
* When it's on, center some shelf items (apps, pinned apps)
* Minor dimension and opacity tweaks when the flag is on
* Fix some minor typos here and there

Change-Id: I87b7fa819bac0fff77f5007c4a0cee760a630239
Bug: 805612
Reviewed-on: https://chromium-review.googlesource.com/1116540Reviewed-by: Michael Wasserman <msw@chromium.org>
Reviewed-by: Alex Newcomer <newcomer@chromium.org>
Commit-Queue: Manu Cornet <manucornet@chromium.org>
Cr-Commit-Position: refs/heads/master@{#572397}

ash/shelf/shelf.h

@@ -74,7 +74,7 @@ class ASH_EXPORT Shelf : public ShelfLayoutManagerObserver {
   // Returns a value based on shelf alignment.
   int SelectValueForShelfAlignment(int bottom, int left, int right) const;
 
-  // Returns |horizontal| is shelf is horizontal, otherwise |vertical|.
+  // Returns |horizontal| if shelf is horizontal, otherwise |vertical|.
   int PrimaryAxisValue(int horizontal, int vertical) const;
 
   ShelfAutoHideBehavior auto_hide_behavior() const {

ash/shelf/shelf_background_animator.cc

@@ -61,12 +61,22 @@ std::pair<int, int> GetTargetColorAlphaValues(
 
   switch (background_type) {
     case SHELF_BACKGROUND_DEFAULT:
+      if (chromeos::switches::ShouldUseShelfNewUi()) {
+        target_shelf_color_alpha = kShelfTranslucentAlpha;
+        target_item_color_alpha = 0;
+      } else {
         target_shelf_color_alpha = 0;
         target_item_color_alpha = kShelfTranslucentAlpha;
+      }
       break;
     case SHELF_BACKGROUND_OVERLAP:
+      if (chromeos::switches::ShouldUseShelfNewUi()) {
+        target_shelf_color_alpha = kShelfTranslucentWithOverlapAlphaNewUi;
+        target_item_color_alpha = 0;
+      } else {
         target_shelf_color_alpha = kShelfTranslucentAlpha;
         target_item_color_alpha = 0;
+      }
       break;
     case SHELF_BACKGROUND_MAXIMIZED:
       target_shelf_color_alpha = ShelfBackgroundAnimator::kMaxAlpha;

ash/shelf/shelf_constants.h

@@ -37,6 +37,7 @@ ASH_EXPORT constexpr int kShelfButtonSize = 48;
 
 // Size of the space between buttons on the shelf.
 ASH_EXPORT constexpr int kShelfButtonSpacing = 16;
+ASH_EXPORT constexpr int kShelfButtonSpacingNewUi = 8;
 
 // Highlight color used for shelf button activated states.
 // TODO(bruthig|mohsen): Use of this color is temporary. Draw the active state
@@ -56,12 +57,13 @@ ASH_EXPORT constexpr SkColor kShelfIconColor = SK_ColorWHITE;
 
 // The alpha value for the shelf background when a window is overlapping.
 ASH_EXPORT constexpr int kShelfTranslucentAlpha = 153;
+ASH_EXPORT constexpr int kShelfTranslucentWithOverlapAlphaNewUi = 190;
 
 // The alpha value used to darken a colorized shelf when the shelf is
 // translucent.
 constexpr int kShelfTranslucentColorDarkenAlpha = 178;
 
-// The alpha vlaue usesd to darken a colorized shelf when the shelf is opaque.
+// The alpha value used to darken a colorized shelf when the shelf is opaque.
 constexpr int kShelfOpaqueColorDarkenAlpha = 178;
 
 // The width and height of the material design overflow button.

ash/shelf/shelf_view.cc

@@ -842,6 +842,20 @@ void ShelfView::LayoutToIdealBounds() {
   UpdateBackButton();
 }
 
+int ShelfView::GetDimensionOfCenteredShelfItemsInNewUi() const {
+  int size = 0;
+  int added_items = 0;
+  for (ShelfItem item : model_->items()) {
+    if (item.type == TYPE_PINNED_APP || item.type == TYPE_APP ||
+        item.type == TYPE_BROWSER_SHORTCUT) {
+      size += kShelfButtonSize;
+      added_items++;
+    }
+  }
+  size += (added_items - 1) * kShelfButtonSpacingNewUi;
+  return size;
+}
+
 void ShelfView::UpdateShelfItemBackground(SkColor color) {
   shelf_item_background_color_ = color;
   overflow_button_->UpdateShelfItemBackground(color);
@@ -866,9 +880,13 @@ void ShelfView::UpdateAllButtonsVisibilityInOverflowMode() {
 void ShelfView::CalculateIdealBounds(gfx::Rect* overflow_bounds) const {
   DCHECK(model_->item_count() == view_model_->view_size());
 
-  int available_size = shelf_->PrimaryAxisValue(width(), height());
-  int first_panel_index = model_->FirstPanelIndex();
-  int last_button_index = first_panel_index - 1;
+  const int button_spacing = chromeos::switches::ShouldUseShelfNewUi()
+                                 ? kShelfButtonSpacingNewUi
+                                 : kShelfButtonSpacing;
+
+  const int available_size = shelf_->PrimaryAxisValue(width(), height());
+  const int first_panel_index = model_->FirstPanelIndex();
+  const int last_button_index = first_panel_index - 1;
 
   int x = 0;
   int y = 0;
@@ -881,6 +899,14 @@ void ShelfView::CalculateIdealBounds(gfx::Rect* overflow_bounds) const {
       view_model_->set_ideal_bounds(i, gfx::Rect(x, y, 0, 0));
       continue;
     }
+    if (i == 2 && chromeos::switches::ShouldUseShelfNewUi()) {
+      // Start centering after we've laid out the launcher button.
+      int centered_shelf_items_size = GetDimensionOfCenteredShelfItemsInNewUi();
+      int padding_for_centering =
+          (available_size - centered_shelf_items_size) / 2;
+      x = shelf_->PrimaryAxisValue(padding_for_centering, 0);
+      y = shelf_->PrimaryAxisValue(0, padding_for_centering);
+    }
 
     view_model_->set_ideal_bounds(i, gfx::Rect(x, y, w, h));
     // If not in tablet mode do not increase |x| or |y|. Instead just let the
@@ -892,8 +918,8 @@ void ShelfView::CalculateIdealBounds(gfx::Rect* overflow_bounds) const {
     // There is no spacing between the first two elements. Do not worry about y
     // since the back button only appears in tablet mode, which forces the shelf
     // to be bottom aligned.
-    x = shelf_->PrimaryAxisValue(x + w + (i == 0 ? 0 : kShelfButtonSpacing), x);
-    y = shelf_->PrimaryAxisValue(y, y + h + kShelfButtonSpacing);
+    x = shelf_->PrimaryAxisValue(x + w + (i == 0 ? 0 : button_spacing), x);
+    y = shelf_->PrimaryAxisValue(y, y + h + button_spacing);
   }
 
   if (is_overflow_mode()) {
@@ -906,8 +932,8 @@ void ShelfView::CalculateIdealBounds(gfx::Rect* overflow_bounds) const {
   x = shelf_->PrimaryAxisValue(end_position, 0);
   y = shelf_->PrimaryAxisValue(0, end_position);
   for (int i = view_model_->view_size() - 1; i >= first_panel_index; --i) {
-    x = shelf_->PrimaryAxisValue(x - w - kShelfButtonSpacing, x);
-    y = shelf_->PrimaryAxisValue(y, y - h - kShelfButtonSpacing);
+    x = shelf_->PrimaryAxisValue(x - w - button_spacing, x);
+    y = shelf_->PrimaryAxisValue(y, y - h - button_spacing);
     view_model_->set_ideal_bounds(i, gfx::Rect(x, y, w, h));
     end_position = shelf_->PrimaryAxisValue(x, y);
   }
@@ -918,7 +944,7 @@ void ShelfView::CalculateIdealBounds(gfx::Rect* overflow_bounds) const {
       shelf_->PrimaryAxisValue(
           view_model_->ideal_bounds(last_button_index).right(),
           view_model_->ideal_bounds(last_button_index).bottom()) +
-      kShelfButtonSpacing;
+      button_spacing;
   int reserved_icon_space = available_size * kReservedNonPanelIconProportion;
   if (last_icon_position < reserved_icon_space)
     end_position = last_icon_position;
@@ -929,7 +955,7 @@ void ShelfView::CalculateIdealBounds(gfx::Rect* overflow_bounds) const {
                                       shelf_->PrimaryAxisValue(height(), h)));
 
   last_visible_index_ =
-      DetermineLastVisibleIndex(end_position - kShelfButtonSpacing);
+      DetermineLastVisibleIndex(end_position - button_spacing);
   last_hidden_index_ = DetermineFirstVisiblePanelIndex(end_position) - 1;
   bool show_overflow = last_visible_index_ < last_button_index ||
                        last_hidden_index_ >= first_panel_index;
@@ -985,8 +1011,8 @@ void ShelfView::CalculateIdealBounds(gfx::Rect* overflow_bounds) const {
     if (last_visible_index_ >= 0) {
       // Add more space between last visible item and overflow button.
       // Without this, two buttons look too close compared with other items.
-      x = shelf_->PrimaryAxisValue(x + kShelfButtonSpacing, x);
-      y = shelf_->PrimaryAxisValue(y, y + kShelfButtonSpacing);
+      x = shelf_->PrimaryAxisValue(x + button_spacing, x);
+      y = shelf_->PrimaryAxisValue(y, y + button_spacing);
     }
 
     // Set all hidden panel icon positions to be on the overflow button.

ash/shelf/shelf_view.h

@@ -174,6 +174,10 @@ class ASH_EXPORT ShelfView : public views::View,
                                Pointer pointer,
                                bool canceled);
 
+  // Enumerates the shelf items that are centered in the new UI and returns
+  // the total size they occupy.
+  int GetDimensionOfCenteredShelfItemsInNewUi() const;
+
   // Updates the background for the shelf items.
   void UpdateShelfItemBackground(SkColor color);
 

chromeos/chromeos_switches.cc

@@ -545,6 +545,9 @@ const char kRlzPingDelay[] = "rlz-ping-delay";
 // App window previews when hovering over the shelf.
 const char kShelfHoverPreviews[] = "shelf-hover-previews";
 
+// Resdesigned shelf UI.
+const char kShelfNewUi[] = "shelf-new-ui";
+
 // Overrides network stub behavior. By default, ethernet, wifi and vpn are
 // enabled, and transitions occur instantaneously. Multiple options can be
 // comma separated (no spaces). Note: all options are in the format 'foo=x'.
@@ -751,6 +754,10 @@ bool ShouldShowShelfHoverPreviews() {
   return base::CommandLine::ForCurrentProcess()->HasSwitch(kShelfHoverPreviews);
 }
 
+bool ShouldUseShelfNewUi() {
+  return base::CommandLine::ForCurrentProcess()->HasSwitch(kShelfNewUi);
+}
+
 bool IsInstantTetheringBackgroundAdvertisingSupported() {
   return base::FeatureList::IsEnabled(
       kInstantTetheringBackgroundAdvertisementSupport);

chromeos/chromeos_switches.h

@@ -152,6 +152,7 @@ CHROMEOS_EXPORT extern const char kOobeTimerInterval[];
 CHROMEOS_EXPORT extern const char kProfileRequiresPolicy[];
 CHROMEOS_EXPORT extern const char kRlzPingDelay[];
 CHROMEOS_EXPORT extern const char kShelfHoverPreviews[];
+CHROMEOS_EXPORT extern const char kShelfNewUi[];
 CHROMEOS_EXPORT extern const char kShillStub[];
 CHROMEOS_EXPORT extern const char kShowAndroidFilesInFilesApp[];
 CHROMEOS_EXPORT extern const char kFilesAppNewStyleNavigation[];
@@ -230,6 +231,9 @@ CHROMEOS_EXPORT bool ShouldHideActiveAppsFromShelf();
 // on the shelf.
 CHROMEOS_EXPORT bool ShouldShowShelfHoverPreviews();
 
+// Returns true if the shelf should adopt the new UI from summer 2018.
+CHROMEOS_EXPORT bool ShouldUseShelfNewUi();
+
 // Returns true if Instant Tethering should support hosts which use the
 // background advertisement model
 CHROMEOS_EXPORT bool IsInstantTetheringBackgroundAdvertisingSupported();