Commit 131ad350 authored by mathp's avatar mathp Committed by Commit bot

[Search] Add a header image to the promo flow.

Controlled with Variations parameter "hide_promo_header" which should be set to "enabled" for the image to be hidden

BUG=413337
TBR=jhawkins

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

Cr-Commit-Position: refs/heads/master@{#296190}
parent bca64776
......@@ -115,7 +115,8 @@
<include name="IDR_CHROME_APP_MANIFEST" file="resources\chrome_app\manifest.json" type="BINDATA" />
</if>
<if expr="is_android">
<include name="IDR_CONTEXTUAL_SEARCH_PROMO_JS" file="resources\contextual_search\promo.js" type="BINDATA" />
<include name="IDR_CONTEXTUAL_SEARCH_PROMO_JS" file="resources\contextual_search\promo.js" flattenhtml="true" type="BINDATA" />
<include name="IDR_CONTEXTUAL_SEARCH_PROMO_HEADER_SVG" file="resources\contextual_search\header.svg" type="BINDATA" />
</if>
<if expr="enable_printing">
<include name="IDR_CLOUDPRINT_MANIFEST" file="resources\cloud_print_app\manifest.json" type="BINDATA" />
......
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 355.5 352.5" enable-background="new 0 0 355.5 352.5" xml:space="preserve">
<g>
<circle fill="#4788F4" cx="182.8" cy="176" r="163.9"/>
<circle fill="#3F87FF" cx="182.8" cy="176" r="163.9"/>
<g opacity="0.5">
<defs>
<path id="SVGID_1_" opacity="0.5" d="M286.1,17.8l-252,357.7c-9.3,69.8,187.6,72.8,238.1,43.7c47-27.2,125.7-73.5,124-158.1
C394.5,176.4,348.5,15.2,286.1,17.8z"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="303.0323" y1="-12.4325" x2="116.4693" y2="279.9136">
<stop offset="0" style="stop-color:#4788F4"/>
<stop offset="1" style="stop-color:#3360AD"/>
</linearGradient>
<circle clip-path="url(#SVGID_2_)" fill="url(#SVGID_3_)" cx="182.8" cy="176" r="163.9"/>
</g>
<circle fill="#9DBEF2" stroke="#29508F" stroke-width="15.5552" stroke-miterlimit="10" cx="182.6" cy="173.6" r="54.9"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="225.0402" y1="213.4908" x2="309.5199" y2="286.2732">
<stop offset="0" style="stop-color:#1A1A1A"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
</linearGradient>
<polygon opacity="0.1" fill="url(#SVGID_4_)" points="460.4,342.1 296.8,350.5 144.1,223.3 186.5,230.3 219.1,214.8 236,185.1
238.4,145.5 "/>
<line fill="none" stroke="#214175" stroke-width="15.5552" stroke-linecap="round" stroke-miterlimit="10" x1="224.5" y1="211.6" x2="268.6" y2="251.6"/>
<circle fill="none" stroke="#29508F" stroke-width="15.5552" stroke-miterlimit="10" cx="182.6" cy="173.6" r="54.9"/>
<path fill="#214175" d="M150.1,185.4c1.5,14,15.2,25,31.8,25c16.6,0,30.2-11,31.8-25H150.1z"/>
<path fill="none" stroke="#222222" stroke-width="15.5552" stroke-linecap="round" stroke-miterlimit="10" d="M239.8,198.8"/>
<g>
<g>
<g>
<path fill="#214175" d="M157.3,152.5c-4.1,0-7.5,5.6-7.5,12.6c0,7,3.4,12.6,7.5,12.6c4.1,0,7.5-5.6,7.5-12.6
C164.8,158.2,161.5,152.5,157.3,152.5z M207.4,152.5c-4.1,0-7.5,5.6-7.5,12.6c0,7,3.4,12.6,7.5,12.6c4.1,0,7.5-5.6,7.5-12.6
C214.9,158.2,211.5,152.5,207.4,152.5z"/>
</g>
</g>
</g>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="97.7798" y1="99.6319" x2="182.315" y2="172.4622">
<stop offset="0" style="stop-color:#1A1A1A"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
</linearGradient>
<polygon opacity="0.1" fill="url(#SVGID_5_)" points="339.5,221.1 171.9,245.8 13.2,113.5 119.9,45.7 "/>
<g>
<path fill="#E8E8E8" d="M127.4,108.3c0,7.8-6.3,14.1-14.1,14.1H26.5c-7.8,0-14.1-6.3-14.1-14.1V60.5c0-7.8,6.3-14.1,14.1-14.1
h86.8c7.8,0,14.1,6.3,14.1,14.1V108.3z"/>
</g>
<path fill="#E8E8E8" d="M106.8,116.9c0,0-3.5,31.7,7.9,33.5c11.5,1.8-40.6,4.4-40.6-29.1s29.1-4.4,29.1-4.4"/>
<path opacity="0.2" fill="none" stroke="#F2F2F2" stroke-width="14.1051" stroke-linecap="round" d="M174.8,140.5
c0,0-19.4,3.1-22.7,19.2"/>
<path fill="#4788F4" d="M317.5,61"/>
<line opacity="0.4" fill="none" stroke="#4788F4" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="28.4" y1="67.4" x2="101.4" y2="67.4"/>
<line opacity="0.4" fill="none" stroke="#4788F4" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="28.4" y1="84.4" x2="91.4" y2="84.4"/>
<line opacity="0.4" fill="none" stroke="#4788F4" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="28.4" y1="101.4" x2="91.4" y2="101.4"/>
</g>
</svg>
......@@ -51,7 +51,7 @@ a {
#description {
font-size: 16px;
line-height: 1.4em;
margin: 32px 16px 4px 16px;
margin: 24px 16px 4px 16px;
}
#heading {
......@@ -60,3 +60,9 @@ a {
margin-top: 0;
text-align: center;
}
#header-image {
display: block;
height: 100px;
margin: 0 auto 24px auto;
}
......@@ -4,15 +4,16 @@
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<head>
<script src="../../../../ui/webui/resources/js/util.js"></script>
<script src="../../../../ui/webui/resources/js/load_time_data.js"></script>
<script src="promo.js"></script>
<link rel="stylesheet" href="promo.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Contextual Search First-Run</title>
<link rel="stylesheet" href="promo.css">
<script src="chrome://contextual-search-promo/config.js"></script>
<script src="chrome://contextual-search-promo/promo.js"></script>
</head>
<body>
<div id="container">
<img id="header-image" src="header.svg">
<p i18n-content="heading" id="heading"></p>
<p i18n-content="description" id="description"></p>
<div id="button-container">
......
......@@ -3,15 +3,22 @@
found in the LICENSE file.
*/
<include src="../../../../ui/webui/resources/js/util.js">
<include src="../../../../ui/webui/resources/js/load_time_data.js">
/**
* On load, registers the handler to add the 'hide' class to the container
* element in order to hide it.
* Once the DOM is loaded, determine if the header image is to be kept and
* register a handler to add the 'hide' class to the container element in order
* to hide it.
*/
window.onload = function() {
document.addEventListener('DOMContentLoaded', function(event) {
if (config['hideHeader']) {
$('container').removeChild($('header-image'));
}
$('optin-label').addEventListener('click', function() {
$('container').classList.add('hide');
});
};
});
/**
* Returns the height of the content. Method called from Chrome to properly size
......
......@@ -4,12 +4,16 @@
#include "chrome/browser/search/contextual_search_promo_source_android.h"
#include <string>
#include "base/json/json_string_value_serializer.h"
#include "base/memory/ref_counted_memory.h"
#include "base/strings/string_util.h"
#include "base/strings/stringprintf.h"
#include "base/values.h"
#include "chrome/common/url_constants.h"
#include "chrome/grit/chromium_strings.h"
#include "components/variations/variations_associated_data.h"
#include "grit/browser_resources.h"
#include "ui/base/l10n/l10n_util.h"
#include "ui/base/resource/resource_bundle.h"
......@@ -18,12 +22,43 @@
namespace {
const char kPromoConfigPath[] = "/config.js";
const char kPromoHTMLPath[] = "/promo.html";
const char kPromoCSSPath[] = "/promo.css";
const char kPromoJSPath[] = "/promo.js";
const char kRobotoWoffPath[] = "/roboto.woff";
const char kRobotoWoff2Path[] = "/roboto.woff2";
// Field trial related constants.
const char kContextualSearchFieldTrialName[] = "ContextualSearch";
const char kContextualSearchHidePromoHeaderParam[] = "hide_promo_header";
const char kContextualSearchEnabledValue[] = "enabled";
// Returns whether we should hide the first-run promo header.
bool ShouldHidePromoHeader() {
return variations::GetVariationParamValue(
kContextualSearchFieldTrialName, kContextualSearchHidePromoHeaderParam) ==
kContextualSearchEnabledValue;
}
// Returns a JS dictionary of configuration data for the Contextual Search
// promo.
std::string GetConfigData() {
base::DictionaryValue config_data;
config_data.SetBoolean("hideHeader", ShouldHidePromoHeader());
// Serialize the dictionary.
std::string js_text;
JSONStringValueSerializer serializer(&js_text);
serializer.Serialize(config_data);
std::string config_data_js;
config_data_js.append("var config = ");
config_data_js.append(js_text);
config_data_js.append(";");
return config_data_js;
}
} // namespace
ContextualSearchPromoSourceAndroid::ContextualSearchPromoSourceAndroid() {}
......@@ -43,6 +78,8 @@ void ContextualSearchPromoSourceAndroid::StartDataRequest(
SendResource(IDR_CONTEXTUAL_SEARCH_PROMO_CSS, callback);
} else if (path == kPromoJSPath) {
SendResource(IDR_CONTEXTUAL_SEARCH_PROMO_JS, callback);
} else if (path == kPromoConfigPath) {
SendConfigResource(callback);
} else if (path == kRobotoWoffPath) {
SendResource(IDR_ROBOTO_WOFF, callback);
} else if (path == kRobotoWoff2Path) {
......@@ -84,6 +121,12 @@ void ContextualSearchPromoSourceAndroid::SendResource(
callback.Run(response.get());
}
void ContextualSearchPromoSourceAndroid::SendConfigResource(
const content::URLDataSource::GotDataCallback& callback) {
std::string response = GetConfigData();
callback.Run(base::RefCountedString::TakeString(&response));
}
void ContextualSearchPromoSourceAndroid::SendHtmlWithStrings(
const content::URLDataSource::GotDataCallback& callback) {
base::DictionaryValue strings_data;
......
......@@ -33,6 +33,10 @@ class ContextualSearchPromoSourceAndroid : public content::URLDataSource {
int resource_id,
const content::URLDataSource::GotDataCallback& callback);
// Sends the config JS resource.
void SendConfigResource(
const content::URLDataSource::GotDataCallback& callback);
// Sends HTML with localized strings.
void SendHtmlWithStrings(
const content::URLDataSource::GotDataCallback& callback);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment