Change browser/page action default icon defined in manifest to support hidpi.

chrome/common/extensions/docs/server2/templates/intros/browserAction.html

 <p>Use browser actions to put icons
   in the main Google Chrome toolbar,
   to the right of the address bar.
   In addition to its <a href="#icon">icon</a>,
   a browser action can also have
   a <a href="#tooltip">tooltip</a>,
   a <a href="#badge">badge</a>,
   and a <a href="#popups">popup</a>.
   </p>
 
@@ skipping 26 matching lines @@
 <p>
 Register your browser action in the
 <a href="manifest.html">extension manifest</a>
 like this:
 </p>
 
 <pre>{
   "name": "My extension",
   ...
   <b>"browser_action": {
-    "default_icon": "images/icon19.png", <em>// optional</em>
+    "default_icon": {                    <em>// optional</em>
+      "19": "images/icon19.png",           <em>// optional</em>
+      "38": "images/icon38.png"            <em>// optional</em>
+    },
     "default_title": "Google Mail",      <em>// optional; shown in tooltip</em>
     "default_popup": "popup.html"        <em>// optional</em>
   }</b>,
   ...
 }</pre>
 
+<p>
+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 might overrule me on this, but
I'd say something like:

"If you only provide one of the 19px or 38px icon size, the extension system
will scale the icon you provide to the pixel density of the user's display,
which can lose detail or make it look fuzzy. The old syntax of
<code>"default_icon": "images/icon19.png"</code> is still supported as a
shorthand for <code>"default_icon": { "19": "images/icon19.png" }</code>.

[mkearney1, 2012/09/17 21:17:45]

I like Jeffrey's suggestion. But I think I would still put the old syntax in a
code snippet.

So, "If you only provide.... The old syntax for registering the default icon is
still supported:"

With code snippet.

On 2012/09/17 20:18:39, Jeffrey Yasskin wrote:

[tbarzic, 2012/09/17 22:06:10]

Done.

+pixel (dip) size is different from its physical pixel size, you can register
+the default icon like this:
+</p>
+
+<pre>{
+  "name": "My extension",
+  ...
+  <b>"browser_action": {
+    ...
+    "default_icon": "images/icon19.png"  <em>// optional</em>
+    <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.

+  }</b>,
+  ...
+}</pre>
+
 <h2 id="ui">Parts of the UI</h2>
 
 <p>
 A browser action can have an <a href="#icon">icon</a>,
 a <a href="#tooltip">tooltip</a>,
 a <a href="#badge">badge</a>,
 and a <a href="#popups">popup</a>.
 </p>
 
 <h3 id="icon">Icon</h3>
 
-<p>Browser action icons can be up to 19 pixels wide and high.
+<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 page. So "dips
(device-independent pixels)" here.

[tbarzic, 2012/09/17 22:06:10]

Done.

[tbarzic, 2012/09/17 22:06:10]

Done.

   Larger icons are resized to fit, but for best results,
-  use a 19-pixel square icon.</p>
+  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 "pixel" was used.

[tbarzic, 2012/09/17 22:06:10]

Done.

 
 <p>You can set the icon in two ways:
   using a static image or using the
   HTML5 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">canvas element</a>.
   Using static images is easier for simple applications,
   but you can create more dynamic UIs &mdash;
   such as smooth animation &mdash;
   using the canvas element.
   </p>
 
 <p>Static images can be in any format WebKit can display,
   including BMP, GIF, ICO, JPEG, or PNG.
   </p>
 
 <p>To set the icon,
-use the <b>default_icon</b> field of <b>browser_action</b>
-in the <a href="#manifest">manifest</a>,
-or call the <a href="#method-setIcon">setIcon()</a> method.
+  use the <b>default_icon</b> field of <b>browser_action</b>
+  in the <a href="#manifest">manifest</a>,
+  or call the <a href="#method-setIcon">setIcon()</a> method.
+  </p>
 
+<p>To properly display icon when screen pixel density (ratio
+  <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_dips</code>", right? Since then
you get "2" for mac-style hidpi displays?

[tbarzic, 2012/09/17 22:06:10]

Done.

+  the icon can be defined as set of images with different sizes.
+  The actual image to display will be selected from the set to
+  best fit the pixel size of 19 dip icon.
+  At the moment, the icon set can contain images with pixel sizes 19 and 38.
+  </p>
 
 <h3 id="tooltip">Tooltip</h3>
 
 <p>
 To set the tooltip,
 use the <b>default_title</b> field of <b>browser_action</b>
 in the <a href="#manifest">manifest</a>,
 or call the <a href="#method-setTitle">setTitle()</a> method.
 You can specify locale-specific strings for the <b>default_title</b> field;
 see <a href="i18n.html">Internationalization</a> for details.
@@ skipping 65 matching lines @@
 </ul>
 
 <h2 id="examples"> Examples </h2>
 
 <p>
 You can find simple examples of using browser actions in the
 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/browserAction/">examples/api/browserAction</a>
 directory.
 For other examples and for help in viewing the source code, see
 <a href="samples.html">Samples</a>.
-</p>
+</p>