Fullscreen bubble: Draw a white box around "ESC" in "Press ESC to exit".

chrome/browser/ui/views/exclusive_access_bubble_views.cc

 // Copyright (c) 2012 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.
 
 #include "chrome/browser/ui/views/exclusive_access_bubble_views.h"
 
+#include "base/i18n/case_conversion.h"
 #include "base/message_loop/message_loop.h"
+#include "base/strings/string_split.h"
 #include "base/strings/utf_string_conversions.h"
 #include "chrome/app/chrome_command_ids.h"
 #include "chrome/browser/chrome_notification_types.h"
 #include "chrome/browser/ui/exclusive_access/exclusive_access_manager.h"
 #include "chrome/browser/ui/exclusive_access/fullscreen_controller.h"
 #include "chrome/browser/ui/views/exclusive_access_bubble_views_context.h"
 #include "chrome/browser/ui/views/frame/immersive_mode_controller.h"
 #include "chrome/browser/ui/views/frame/top_container_view.h"
 #include "chrome/grit/generated_resources.h"
 #include "content/public/browser/notification_service.h"
@@ skipping 56 matching lines @@
   deny_button_->SetFocusable(false);
   AddChildView(deny_button_);
 
   SetLayoutManager(new views::BoxLayout(views::BoxLayout::kHorizontal, 0, 0,
                                         between_button_spacing));
 }
 
 ButtonView::~ButtonView() {
 }
 
+// Class containing the exit instruction text. Contains fancy styling on the
+// keyboard key (not just a simple label).
+class InstructionView : public views::View {
+ public:
+  // Creates an InstructionView with specific text. |text| may contain a single
+  // segment delimited by a pair of pipes ('|'); this segment will be displayed
+  // as a keyboard key. e.g., "Press |Esc| to exit" will have "Esc" rendered as
+  // a key.
+  InstructionView(const base::string16& text,
+                  const gfx::FontList& font_list,
+                  SkColor foreground_color,
+                  SkColor background_color);
+
+ private:
+  DISALLOW_COPY_AND_ASSIGN(InstructionView);
+};
+
+InstructionView::InstructionView(const base::string16& text,
+                                 const gfx::FontList& font_list,
+                                 SkColor foreground_color,
+                                 SkColor background_color) {
+  // Spacing around the escape key name.
+  const int kKeyNameMarginHorizPx = 7;
+  const int kKeyNameBorderPx = 2;
+  const int kKeyNameCornerRadius = 2;
+  const int kKeyNamePaddingPx = 7;

[Evan Stade, 2015/11/12 01:27:37]

imo these are c-style variable declarations (everything at the top of the
function) and should be avoided in favor of declaring closer to where they're
actually used.

[Matt Giuca, 2015/11/12 03:22:10]

Done.

(Personally, I prefer having it at the top of the function, or preferably at the
top of the file -- not for C style reasons but because then it gives future
editors a nice convenient location to tweak the layout values without having to
read or understand code. But whatever, let's land this.)

+
+  // Parse |text|, looking for pipe-delimited segment.
+  std::vector<base::string16> segments =
+      base::SplitString(text, base::ASCIIToUTF16("|"), base::TRIM_WHITESPACE,
+                        base::SPLIT_WANT_ALL);
+  // Expect 1 or 3 pieces (either no pipe-delimited segments, or one).
+  DCHECK(segments.size() == 1 || segments.size() == 3);
+
+  bool has_key = segments.size() == 3;

[msw, 2015/11/12 01:19:49]

nit: inline in the if statement below, or move down there.

[Matt Giuca, 2015/11/12 03:22:10]

Done.

+  // The |between_child_spacing| is the horizontal margin of the key name.
+  views::BoxLayout* layout = new views::BoxLayout(views::BoxLayout::kHorizontal,
+                                                  0, 0, kKeyNameMarginHorizPx);
+  SetLayoutManager(layout);
+
+  views::Label* before_key = new views::Label(segments[0], font_list);
+  before_key->SetEnabledColor(foreground_color);
+  before_key->SetBackgroundColor(background_color);
+  AddChildView(before_key);
+
+  if (has_key) {
+    base::string16 key = base::i18n::ToUpper(segments[1]);
+    views::Label* key_name_label = new views::Label(key, font_list);
+    key_name_label->SetEnabledColor(foreground_color);
+    key_name_label->SetBackgroundColor(background_color);
+
+    views::View* key_name = new views::View;
+    views::BoxLayout* key_name_layout = new views::BoxLayout(
+        views::BoxLayout::kHorizontal, kKeyNamePaddingPx, kKeyNamePaddingPx, 0);
+    key_name->SetLayoutManager(key_name_layout);
+    key_name->AddChildView(key_name_label);
+    // The key name has a border around it.
+    scoped_ptr<views::Border> border(views::Border::CreateRoundedRectBorder(
+        kKeyNameBorderPx, kKeyNameCornerRadius, foreground_color));
+    key_name->SetBorder(border.Pass());
+    AddChildView(key_name);
+
+    views::Label* after_key = new views::Label(segments[2], font_list);
+    after_key->SetEnabledColor(foreground_color);
+    after_key->SetBackgroundColor(background_color);
+    AddChildView(after_key);
+  }
+}
+
 }  // namespace
 
 class ExclusiveAccessBubbleViews::ExclusiveAccessView
     : public views::View,
       public views::ButtonListener,
       public views::LinkListener {
  public:
   ExclusiveAccessView(ExclusiveAccessBubbleViews* bubble,
                       const base::string16& accelerator,
                       const GURL& url,
@@ skipping 14 matching lines @@
   // Clickable hint text for exiting fullscreen mode. (Non-simplified mode
   // only.)
   views::Link* link_;
   // Informational label: 'www.foo.com has gone fullscreen'. (Non-simplified
   // mode only.)
   views::Label* message_label_;
   // Clickable buttons to exit fullscreen. (Non-simplified mode only.)
   ButtonView* button_view_;
   // Instruction for exiting fullscreen / mouse lock. Only present if there is
   // no link or button (always present in simplified mode).
-  views::Label* exit_instruction_;
+  InstructionView* exit_instruction_;
   const base::string16 browser_fullscreen_exit_accelerator_;
 
   DISALLOW_COPY_AND_ASSIGN(ExclusiveAccessView);
 };
 
 ExclusiveAccessBubbleViews::ExclusiveAccessView::ExclusiveAccessView(
     ExclusiveAccessBubbleViews* bubble,
     const base::string16& accelerator,
     const GURL& url,
     ExclusiveAccessBubbleType bubble_type)
@@ skipping 33 matching lines @@
   const gfx::FontList& medium_font_list =
       rb.GetFontList(ui::ResourceBundle::MediumFont);
 
   if (!ExclusiveAccessManager::IsSimplifiedFullscreenUIEnabled()) {
     message_label_ = new views::Label(base::string16(), medium_font_list);
     message_label_->SetEnabledColor(foreground_color);
     message_label_->SetBackgroundColor(background_color);
   }
 
   exit_instruction_ =
-      new views::Label(bubble_->GetInstructionText(), medium_font_list);
-  exit_instruction_->SetEnabledColor(foreground_color);
-  exit_instruction_->SetBackgroundColor(background_color);
+      new InstructionView(bubble_->GetInstructionText(), medium_font_list,
+                          foreground_color, background_color);
 
   link_ = new views::Link();
   link_->SetFocusable(false);
 #if defined(OS_CHROMEOS)
   // On CrOS, the link text doesn't change, since it doesn't show the shortcut.
   link_->SetText(l10n_util::GetStringUTF16(IDS_EXIT_FULLSCREEN_MODE));
 #endif
   link_->set_listener(this);
   link_->SetFontList(medium_font_list);
   link_->SetPressedColor(foreground_color);
@@ skipping 361 matching lines @@
     const content::NotificationDetails& details) {
   DCHECK_EQ(chrome::NOTIFICATION_FULLSCREEN_CHANGED, type);
   UpdateForImmersiveState();
 }
 
 void ExclusiveAccessBubbleViews::OnWidgetVisibilityChanged(
     views::Widget* widget,
     bool visible) {
   UpdateMouseWatcher();
 }