[Extensions Docs] Update browser/page action documentation

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

 <p>
 In the following figure,
 the multicolored square
 to the right of the address bar
 is the icon for a browser action.
 A popup is below the icon.
 </p>
 
 <img src="{{static}}/images/browser-action.png"
   width="363" height="226" />
@@ skipping 11 matching lines @@
 <a href="manifest">extension manifest</a>
 like this:
 </p>
 
 <pre data-filename="manifest.json">
 {
   "name": "My extension",
   ...
   <b>"browser_action": {
     "default_icon": {                    <em>// optional</em>
-      "19": "images/icon19.png",           <em>// optional</em>
-      "38": "images/icon38.png"            <em>// optional</em>
+      "16": "images/icon16.png",           <em>// optional</em>
+      "24": "images/icon24.png",           <em>// optional</em>
+      "32": "images/icon32.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 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 for registering the
-default icon is still supported:
+You can provide any size icon to be used in Chrome, and Chrome will select the
+closest one and scale it to the appropriate size to fill the 16-dip space.
+However, if the exact size isn't provided, this scaling can cause the icon to
+lose detail or look fuzzy.
+</p>
+
+<p>
+Since devices with less-common scale factors like 1.5x or 1.2x are becoming more
+common, you are encouraged to provide multiple sizes for your icons. This also
+ensures that if the icon display size is ever changed, you don't need to do any
+more work to provide different icons!
+</p>
+
+<p>
+The old syntax for registering the default icon is still supported:
 </p>
 
 <pre data-filename="manifest.json">
 {
   "name": "My extension",
   ...
   <b>"browser_action": {
     ...
-    "default_icon": "images/icon38.png"  <em>// optional</em>
-    <em>// equivalent to "default_icon": { "38": "images/icon38.png" }</em>
+    "default_icon": "images/icon32.png"  <em>// optional</em>
+    <em>// equivalent to "default_icon": { "32": "images/icon32.png" }</em>
   }</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 dips (device-independent pixels)
+<p>The browser action icons in Chrome are 16 dips (device-independent pixels)
   wide and high. Larger icons are resized to fit, but for best results,
-  use a 19-dip square icon.</p>
+  use a 16-dip square icon.</p>
 
 <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.
   For unpacked extensions, images must be in the PNG format.
   </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 $(ref:browserAction.setIcon) method.
   </p>
 
 <p>To properly display icon when screen pixel density (ratio
   <code>size_in_pixel / size_in_dip</code>) is different than 1,
   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>
+  best fit the pixel size of 16 dip.
+  The icon set can contain any size icon specification, and Chrome will
+  select the most appropriate one.
+</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 $(ref:browserAction.setTitle) method.
 You can specify locale-specific strings for the <b>default_title</b> field;
 see <a href="i18n">Internationalization</a> for details.
@@ skipping 41 matching lines @@
 <p>For the best visual impact,
   follow these guidelines:</p>
 
 <ul>
   <li><b>Do</b> use browser actions for features
     that make sense on most pages.
   <li><b>Don't</b> use browser actions for features
     that make sense for only a few pages.
     Use <a href="pageAction">page actions</a> instead.
   <li><b>Do</b> use big, colorful icons that make the most of
-    the 38x38-pixel space.
+    the 16x16-dip space.
     Browser action icons should seem a little bigger
     and heavier than page action icons.
   <li><b>Don't</b> attempt to mimic
     Google Chrome's monochrome menu icon.
     That doesn't work well with themes, and anyway,
     extensions should stand out a little.
   <li><b>Do</b> use alpha transparency
     to add soft edges to your icon.
     Because many people use themes,
     your icon should look nice
     on a variety of background colors.
   <li><b>Don't</b> constantly animate your icon.
     That's just annoying.
 </ul>
 
 <h2 id="examples"> Examples </h2>
 
 <p>
 You can find simple examples of using browser actions in the
 <a href="https://chromium.googlesource.com/chromium/src/+/master/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">Samples</a>.
 </p>