Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(172)

Side by Side Diff: chrome/common/extensions/docs/server2/templates/intros/browserAction.html

Issue 10905005: Change browser/page action default icon defined in manifest to support hidpi. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: forgot to update tests Created 8 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
1 <p>Use browser actions to put icons 1 <p>Use browser actions to put icons
2 in the main Google Chrome toolbar, 2 in the main Google Chrome toolbar,
3 to the right of the address bar. 3 to the right of the address bar.
4 In addition to its <a href="#icon">icon</a>, 4 In addition to its <a href="#icon">icon</a>,
5 a browser action can also have 5 a browser action can also have
6 a <a href="#tooltip">tooltip</a>, 6 a <a href="#tooltip">tooltip</a>,
7 a <a href="#badge">badge</a>, 7 a <a href="#badge">badge</a>,
8 and a <a href="#popups">popup</a>. 8 and a <a href="#popups">popup</a>.
9 </p> 9 </p>
10 10
(...skipping 26 matching lines...) Expand all
37 <p> 37 <p>
38 Register your browser action in the 38 Register your browser action in the
39 <a href="manifest.html">extension manifest</a> 39 <a href="manifest.html">extension manifest</a>
40 like this: 40 like this:
41 </p> 41 </p>
42 42
43 <pre>{ 43 <pre>{
44 "name": "My extension", 44 "name": "My extension",
45 ... 45 ...
46 <b>"browser_action": { 46 <b>"browser_action": {
47 "default_icon": "images/icon19.png", <em>// optional</em> 47 "default_icon": { <em>// optional</em>
48 "19": "images/icon19.png", <em>// optional</em>
49 "38": "images/icon38.png" <em>// optional</em>
50 },
48 "default_title": "Google Mail", <em>// optional; shown in tooltip</em> 51 "default_title": "Google Mail", <em>// optional; shown in tooltip</em>
49 "default_popup": "popup.html" <em>// optional</em> 52 "default_popup": "popup.html" <em>// optional</em>
50 }</b>, 53 }</b>,
51 ... 54 ...
52 }</pre> 55 }</pre>
53 56
57 <p>
58 If you don't care about icon appearance when screens's device-independent
Jeffrey Yasskin 2012/09/17 20:18:39 "don't care" is a little strong. The tech writers
mkearney1 2012/09/17 21:17:45 I like Jeffrey's suggestion. But I think I would s
tbarzic 2012/09/17 22:06:10 Done.
59 pixel (dip) size is different from its physical pixel size, you can register
60 the default icon like this:
61 </p>
62
63 <pre>{
64 "name": "My extension",
65 ...
66 <b>"browser_action": {
67 ...
68 "default_icon": "images/icon19.png" <em>// optional</em>
69 <em>// equal to "default_icon": { "19": "images/icon19.png" }</em>
Jeffrey Yasskin 2012/09/17 20:18:39 s/equal/equivalent/
tbarzic 2012/09/17 22:06:10 Done.
70 }</b>,
71 ...
72 }</pre>
73
54 <h2 id="ui">Parts of the UI</h2> 74 <h2 id="ui">Parts of the UI</h2>
55 75
56 <p> 76 <p>
57 A browser action can have an <a href="#icon">icon</a>, 77 A browser action can have an <a href="#icon">icon</a>,
58 a <a href="#tooltip">tooltip</a>, 78 a <a href="#tooltip">tooltip</a>,
59 a <a href="#badge">badge</a>, 79 a <a href="#badge">badge</a>,
60 and a <a href="#popups">popup</a>. 80 and a <a href="#popups">popup</a>.
61 </p> 81 </p>
62 82
63 <h3 id="icon">Icon</h3> 83 <h3 id="icon">Icon</h3>
64 84
65 <p>Browser action icons can be up to 19 pixels wide and high. 85 <p>Browser action icons can be up to 19 dips wide and high.
Jeffrey Yasskin 2012/09/17 20:18:39 Explain the acronym the first time you use it in a
tbarzic 2012/09/17 22:06:10 Done.
tbarzic 2012/09/17 22:06:10 Done.
66 Larger icons are resized to fit, but for best results, 86 Larger icons are resized to fit, but for best results,
67 use a 19-pixel square icon.</p> 87 use a 19-dip size square icon.</p>
Jeffrey Yasskin 2012/09/17 20:18:39 No need for "size" since it wasn't there when "pix
tbarzic 2012/09/17 22:06:10 Done.
68 88
69 <p>You can set the icon in two ways: 89 <p>You can set the icon in two ways:
70 using a static image or using the 90 using a static image or using the
71 HTML5 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the -canvas-element.html">canvas element</a>. 91 HTML5 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the -canvas-element.html">canvas element</a>.
72 Using static images is easier for simple applications, 92 Using static images is easier for simple applications,
73 but you can create more dynamic UIs &mdash; 93 but you can create more dynamic UIs &mdash;
74 such as smooth animation &mdash; 94 such as smooth animation &mdash;
75 using the canvas element. 95 using the canvas element.
76 </p> 96 </p>
77 97
78 <p>Static images can be in any format WebKit can display, 98 <p>Static images can be in any format WebKit can display,
79 including BMP, GIF, ICO, JPEG, or PNG. 99 including BMP, GIF, ICO, JPEG, or PNG.
80 </p> 100 </p>
81 101
82 <p>To set the icon, 102 <p>To set the icon,
83 use the <b>default_icon</b> field of <b>browser_action</b> 103 use the <b>default_icon</b> field of <b>browser_action</b>
84 in the <a href="#manifest">manifest</a>, 104 in the <a href="#manifest">manifest</a>,
85 or call the <a href="#method-setIcon">setIcon()</a> method. 105 or call the <a href="#method-setIcon">setIcon()</a> method.
106 </p>
86 107
108 <p>To properly display icon when screen pixel density (ratio
109 <code>size_in_dip / size_in_pixel</code>) is different than 1,
Jeffrey Yasskin 2012/09/17 20:18:39 This should be "<code>size_in_pixels / size_in_dip
tbarzic 2012/09/17 22:06:10 Done.
110 the icon can be defined as set of images with different sizes.
111 The actual image to display will be selected from the set to
112 best fit the pixel size of 19 dip icon.
113 At the moment, the icon set can contain images with pixel sizes 19 and 38.
114 </p>
87 115
88 <h3 id="tooltip">Tooltip</h3> 116 <h3 id="tooltip">Tooltip</h3>
89 117
90 <p> 118 <p>
91 To set the tooltip, 119 To set the tooltip,
92 use the <b>default_title</b> field of <b>browser_action</b> 120 use the <b>default_title</b> field of <b>browser_action</b>
93 in the <a href="#manifest">manifest</a>, 121 in the <a href="#manifest">manifest</a>,
94 or call the <a href="#method-setTitle">setTitle()</a> method. 122 or call the <a href="#method-setTitle">setTitle()</a> method.
95 You can specify locale-specific strings for the <b>default_title</b> field; 123 You can specify locale-specific strings for the <b>default_title</b> field;
96 see <a href="i18n.html">Internationalization</a> for details. 124 see <a href="i18n.html">Internationalization</a> for details.
(...skipping 65 matching lines...) Expand 10 before | Expand all | Expand 10 after
162 </ul> 190 </ul>
163 191
164 <h2 id="examples"> Examples </h2> 192 <h2 id="examples"> Examples </h2>
165 193
166 <p> 194 <p>
167 You can find simple examples of using browser actions in the 195 You can find simple examples of using browser actions in the
168 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension s/docs/examples/api/browserAction/">examples/api/browserAction</a> 196 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension s/docs/examples/api/browserAction/">examples/api/browserAction</a>
169 directory. 197 directory.
170 For other examples and for help in viewing the source code, see 198 For other examples and for help in viewing the source code, see
171 <a href="samples.html">Samples</a>. 199 <a href="samples.html">Samples</a>.
172 </p> 200 </p>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698