Add a user agent stylesheet for extension options pages

extensions/renderer/dispatcher.cc

Index: extensions/renderer/dispatcher.cc
diff --git a/extensions/renderer/dispatcher.cc b/extensions/renderer/dispatcher.cc
index db2f0e8cf6345feb1dda1d7be8757c4b980b4ccf..119791d357cd3db94334449392b646f342c9d49b 100644
--- a/extensions/renderer/dispatcher.cc
+++ b/extensions/renderer/dispatcher.cc
@@ -4,6 +4,7 @@
 
 #include "extensions/renderer/dispatcher.h"
 
+#include "base/base64.h"
 #include "base/bind.h"
 #include "base/callback.h"
 #include "base/command_line.h"
@@ -32,6 +33,7 @@
 #include "extensions/common/manifest_constants.h"
 #include "extensions/common/manifest_handlers/background_info.h"
 #include "extensions/common/manifest_handlers/externally_connectable.h"
+#include "extensions/common/manifest_handlers/options_page_info.h"
 #include "extensions/common/manifest_handlers/sandboxed_page_info.h"
 #include "extensions/common/message_bundle.h"
 #include "extensions/common/permissions/permission_set.h"
@@ -92,6 +94,7 @@
 #include "third_party/WebKit/public/web/WebView.h"
 #include "ui/base/layout.h"
 #include "ui/base/resource/resource_bundle.h"
+#include "ui/resources/grit/webui_resources.h"
 #include "v8/include/v8.h"
 
 using base::UserMetricsAction;
@@ -176,6 +179,18 @@ class ChromeNativeHandler : public ObjectBackedNativeHandler {
   }
 };
 
+// Converts the PNG image with the given resource_id into a Data URI. This is a
+// workaround for including WebUI widget images in the user-agent stylesheet for
+// extension options pages.
+std::string GetPNGAsDataURI(int resource_id) {

[Marijn Kruisselbrink, 2014/09/10 20:46:30]

Is this the same as webui::GetBitmapDataUrlFromResource (from
ui/base/webui/web_ui_util.h)? If so, can you use that other method instead?

[ericzeng, 2014/09/10 21:29:30]

Yes, done.

+  std::string str64;
+  base::Base64Encode(
+      ResourceBundle::GetSharedInstance().GetRawDataResource(resource_id),
+      &str64);
+  str64.insert(0, "data:image/png;base64,");
+  return str64;
+}
+
 }  // namespace
 
 Dispatcher::Dispatcher(DispatcherDelegate* delegate)
@@ -349,13 +364,14 @@ void Dispatcher::DidCreateDocumentElement(blink::WebFrame* frame) {
   // are hosted in the extension process.
   GURL effective_document_url = ScriptContext::GetEffectiveDocumentURL(
       frame, frame->document().url(), true /* match_about_blank */);
+
   const Extension* extension =
       extensions_.GetExtensionOrAppByURL(effective_document_url);
 
   if (extension &&
       (extension->is_extension() || extension->is_platform_app())) {
-    int resource_id =
-        extension->is_platform_app() ? IDR_PLATFORM_APP_CSS : IDR_EXTENSION_CSS;
+    int resource_id = extension->is_platform_app() ? IDR_PLATFORM_APP_CSS
+                                                   : IDR_EXTENSION_FONTS_CSS;
     std::string stylesheet = ResourceBundle::GetSharedInstance()
                                  .GetRawDataResource(resource_id)
                                  .as_string();
@@ -369,6 +385,30 @@ void Dispatcher::DidCreateDocumentElement(blink::WebFrame* frame) {
     // documents that are loaded in each app or extension.
     frame->document().insertStyleSheet(WebString::fromUTF8(stylesheet));
   }
+
+  // If this is an extension options page, and the extension has opted into
+  // using Chrome styles, then insert the Chrome extension stylesheet.
+  if (extension && extension->is_extension() &&
+      OptionsPageInfo::ShouldUseChromeStyle(extension) &&
+      effective_document_url == OptionsPageInfo::GetOptionsPage(extension)) {
+    std::string stylesheet = ResourceBundle::GetSharedInstance()
+                                 .GetRawDataResource(IDR_EXTENSION_CSS)
+                                 .as_string();
+    // Checkboxes and drop down menus use the background-image declaration.
+    // Since extensions will not be able to load the image resource from the
+    // WebUI directory, load the images here and convert them to a data URI.
+    ReplaceSubstringsAfterOffset(
+        &stylesheet, 0, "$CHECK", GetPNGAsDataURI(IDR_WEBUI_IMAGES_CHECK));
+    ReplaceSubstringsAfterOffset(
+        &stylesheet,
+        0,
+        "$DISABLED_SELECT",
+        GetPNGAsDataURI(IDR_WEBUI_IMAGES_DISABLED_SELECT));
+    ReplaceSubstringsAfterOffset(
+        &stylesheet, 0, "$SELECT", GetPNGAsDataURI(IDR_WEBUI_IMAGES_SELECT));
+
+    frame->document().insertStyleSheet(WebString::fromUTF8(stylesheet));

[Marijn Kruisselbrink, 2014/09/10 20:46:30]

Would it make sense to cache the preprocessed stylesheet somehow? It's not like
the css can ever change while running, but then the few string replacements are
probably not very expensive and option pages aren't opened very frequently so
just always doing this on demand is probably fine.

[ericzeng, 2014/09/10 21:29:30]

Yeah, I don't think options pages are going to be used frequently enough to
require caching.

+  }
   content_watcher_->DidCreateDocumentElement(frame);
 }