Rename <menu><menuitem> to <cr-menu><cr-menu-item> to avoid conflicts with native features.

Native <menu> and <menuitem> tags are being implemented, and their behavior can conflict with existing <menu> and <menuitem> which are decorated by cr.ui.Menu.
This CL renames their tag name to cr-menu and cr-menu-item.

BUG=410655
TEST=run browser_tests

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

Cr-Commit-Position: refs/heads/master@{#309143}

3 files changed, 19 insertions, 19 deletions

diff --git a/ui/webui/resources/css/menu.css b/ui/webui/resources/css/menu.css
index 5478ea6..986fd86 100644
--- a/ui/webui/resources/css/menu.css
+++ b/ui/webui/resources/css/menu.css
@@ -2,7 +2,7 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-menu {
+cr-menu {
   -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .50);
   background: white;
   border-radius: 2px;
@@ -17,11 +17,11 @@ menu {
   z-index: 3;
 }
 
-menu:not(.decorated) {
+cr-menu:not(.decorated) {
   display: none;
 }
 
-menu > * {
+cr-menu > * {
   box-sizing: border-box;
   display: block;
   margin: 0;
@@ -29,7 +29,7 @@ menu > * {
   width: 100%;
 }
 
-menu > :not(hr) {
+cr-menu > :not(hr) {
   -webkit-appearance: none;
   background: transparent;
   border: 0;
@@ -42,7 +42,7 @@ menu > :not(hr) {
   text-overflow: ellipsis;
 }
 
-menu > hr {
+cr-menu > hr {
   background: -webkit-linear-gradient(left,
                                       rgba(0, 0, 0, .10),
                                       rgba(0, 0, 0, .02) 96%);
@@ -51,19 +51,19 @@ menu > hr {
   margin: 8px 0;
 }
 
-menu > [disabled] {
+cr-menu > [disabled] {
   color: rgba(0, 0, 0, .3);
 }
 
-menu > [hidden] {
+cr-menu > [hidden] {
   display: none;
 }
 
-menu > :not(hr):-webkit-any([selected], :active) {
+cr-menu > :not(hr):-webkit-any([selected], :active) {
   background-color: rgba(0, 0, 0, .06);
 }
 
-menu > [checked]::before {
+cr-menu > [checked]::before {
   content: url(../images/checkbox_black.png);
   display: inline-block;
   height: 9px;
@@ -71,18 +71,18 @@ menu > [checked]::before {
   width: 9px;
 }
 
-menu > [checked] {
+cr-menu > [checked] {
   -webkit-padding-start: 0;
 }
 
-menu > [selected][checked]:active::before {
+cr-menu > [selected][checked]:active::before {
   content: url(../images/checkbox_white.png);
 }
 
 /* TODO(zvorygin) menu > [shortcutText]::after - this selector is much better,
  * but it's buggy in current webkit revision, so I have to use [showShortcuts].
  */
-menu[showShortcuts] > ::after {
+cr-menu[showShortcuts] > ::after {
   -webkit-padding-start: 30px;
   color: #999;
   content: attr(shortcutText);
diff --git a/ui/webui/resources/js/cr/ui/menu.js b/ui/webui/resources/js/cr/ui/menu.js
index 6f5a825..81a57ae 100644
--- a/ui/webui/resources/js/cr/ui/menu.js
+++ b/ui/webui/resources/js/cr/ui/menu.js
@@ -12,12 +12,12 @@ cr.define('cr.ui', function() {
    *
    * @param {Object=} opt_propertyBag Optional properties.
    * @constructor
-   * @extends {HTMLMenuElement}
+   * @extends {HTMLElement}
    */
-  var Menu = cr.ui.define('menu');
+  var Menu = cr.ui.define('cr-menu');
 
   Menu.prototype = {
-    __proto__: HTMLMenuElement.prototype,
+    __proto__: HTMLElement.prototype,
 
     selectedIndex_: -1,
 
@@ -55,7 +55,7 @@ cr.define('cr.ui', function() {
      * @return {cr.ui.MenuItem} The created menu item.
      */
     addMenuItem: function(item) {
-      var menuItem = this.ownerDocument.createElement('menuitem');
+      var menuItem = this.ownerDocument.createElement('cr-menu-item');
       this.appendChild(menuItem);
 
       cr.ui.decorate(menuItem, MenuItem);
diff --git a/ui/webui/resources/js/cr/ui/menu_item.js b/ui/webui/resources/js/cr/ui/menu_item.js
index ca5b7d9..52ed57d 100644
--- a/ui/webui/resources/js/cr/ui/menu_item.js
+++ b/ui/webui/resources/js/cr/ui/menu_item.js
@@ -9,10 +9,10 @@ cr.define('cr.ui', function() {
    * Creates a new menu item element.
    * @param {Object=} opt_propertyBag Optional properties.
    * @constructor
-   * @extends {HTMLButtonElement}
+   * @extends {HTMLElement}
    * @implements {EventListener}
    */
-  var MenuItem = cr.ui.define('div');
+  var MenuItem = cr.ui.define('cr-menu-item');
 
   /**
    * Creates a new menu separator element.
@@ -25,7 +25,7 @@ cr.define('cr.ui', function() {
   };
 
   MenuItem.prototype = {
-    __proto__: HTMLButtonElement.prototype,
+    __proto__: HTMLElement.prototype,
 
     /**
      * Initializes the menu item.