DevTools: More code reduce via using document.createElementWithClass and document.createChild.

Source/devtools/front_end/ui/SoftContextMenu.js

 /*
  * Copyright (C) 2011 Google Inc. All Rights Reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
  *    notice, this list of conditions and the following disclaimer in the
@@ skipping 39 matching lines @@
         var targetElement = event.target;
         while (targetElement && window !== targetElement.ownerDocument.defaultView) {
             var frameElement = targetElement.ownerDocument.defaultView.frameElement;
             absoluteY += frameElement.totalOffsetTop();
             absoluteX += frameElement.totalOffsetLeft();
             targetElement = frameElement;
         }
 
         // Create context menu.
         var targetRect;
-        this._contextMenuElement = document.createElement("div");
-        this._contextMenuElement.className = "soft-context-menu";
+        this._contextMenuElement = document.createElementWithClass("div", "soft-context-menu");
         this._contextMenuElement.tabIndex = 0;
         this._contextMenuElement.style.top = absoluteY + "px";
         this._contextMenuElement.style.left = absoluteX + "px";
 
         this._contextMenuElement.addEventListener("mouseup", consumeEvent, false);
         this._contextMenuElement.addEventListener("keydown", this._menuKeyDown.bind(this), false);
 
         for (var i = 0; i < this._items.length; ++i)
             this._contextMenuElement.appendChild(this._createMenuItem(this._items[i]));
 
         // Install glass pane capturing events.
         if (!this._parentMenu) {
-            this._glassPaneElement = document.createElement("div");
-            this._glassPaneElement.className = "soft-context-menu-glass-pane";
+            this._glassPaneElement = document.createElementWithClass("div", "soft-context-menu-glass-pane");
             this._glassPaneElement.tabIndex = 0;
             this._glassPaneElement.addEventListener("mouseup", this._glassPaneMouseUp.bind(this), false);
             this._glassPaneElement.appendChild(this._contextMenuElement);
             document.body.appendChild(this._glassPaneElement);
             this._focus();
-        } else
+        } else {
             this._parentMenu._parentGlassPaneElement().appendChild(this._contextMenuElement);
+        }
 
         // Re-position menu in case it does not fit.
         if (document.body.offsetWidth <  this._contextMenuElement.offsetLeft + this._contextMenuElement.offsetWidth)
             this._contextMenuElement.style.left = (absoluteX - this._contextMenuElement.offsetWidth) + "px";
         if (document.body.offsetHeight < this._contextMenuElement.offsetTop + this._contextMenuElement.offsetHeight)
             this._contextMenuElement.style.top = (document.body.offsetHeight - this._contextMenuElement.offsetHeight) + "px";
 
         event.consume(true);
     },
 
     _parentGlassPaneElement: function()
     {
         if (this._glassPaneElement)
             return this._glassPaneElement;
         if (this._parentMenu)
             return this._parentMenu._parentGlassPaneElement();
         return null;
     },
 
     _createMenuItem: function(item)
     {
         if (item.type === "separator")
             return this._createSeparator();
 
         if (item.type === "subMenu")
             return this._createSubMenu(item);
 
-        var menuItemElement = document.createElement("div");
-        menuItemElement.className = "soft-context-menu-item";
-
-        var checkMarkElement = document.createElement("span");
+        var menuItemElement = document.createElementWithClass("div", "soft-context-menu-item");
+        var checkMarkElement = menuItemElement.createChild("span", "soft-context-menu-item-checkmark");
         checkMarkElement.textContent = "\u2713 "; // Checkmark Unicode symbol
-        checkMarkElement.className = "soft-context-menu-item-checkmark";
         if (!item.checked)
             checkMarkElement.style.opacity = "0";
 
-        menuItemElement.appendChild(checkMarkElement);
-        menuItemElement.appendChild(document.createTextNode(item.label));
+        menuItemElement.createTextChild(item.label);
 
         menuItemElement.addEventListener("mousedown", this._menuItemMouseDown.bind(this), false);
         menuItemElement.addEventListener("mouseup", this._menuItemMouseUp.bind(this), false);
 
         // Manually manage hover highlight since :hover does not work in case of click-and-hold menu invocation.
         menuItemElement.addEventListener("mouseover", this._menuItemMouseOver.bind(this), false);
         menuItemElement.addEventListener("mouseout", this._menuItemMouseOut.bind(this), false);
 
         menuItemElement._actionId = item.id;
         return menuItemElement;
     },
 
     _createSubMenu: function(item)
     {
-        var menuItemElement = document.createElement("div");
-        menuItemElement.className = "soft-context-menu-item";
+        var menuItemElement = document.createElementWithClass("div", "soft-context-menu-item");
         menuItemElement._subItems = item.subItems;
 
         // Occupy the same space on the left in all items.
-        var checkMarkElement = document.createElement("span");
+        var checkMarkElement = menuItemElement.createChild("span", "soft-context-menu-item-checkmark");
         checkMarkElement.textContent = "\u2713 "; // Checkmark Unicode symbol
-        checkMarkElement.className = "soft-context-menu-item-checkmark";
         checkMarkElement.style.opacity = "0";
-        menuItemElement.appendChild(checkMarkElement);
 
-        var subMenuArrowElement = document.createElement("span");
+        menuItemElement.createTextChild(item.label);
+
+        var subMenuArrowElement = menuItemElement.createChild("span", "soft-context-menu-item-submenu-arrow");
         subMenuArrowElement.textContent = "\u25B6"; // BLACK RIGHT-POINTING TRIANGLE
-        subMenuArrowElement.className = "soft-context-menu-item-submenu-arrow";
-
-        menuItemElement.appendChild(document.createTextNode(item.label));
-        menuItemElement.appendChild(subMenuArrowElement);
 
         menuItemElement.addEventListener("mousedown", this._menuItemMouseDown.bind(this), false);
         menuItemElement.addEventListener("mouseup", this._menuItemMouseUp.bind(this), false);
 
         // Manually manage hover highlight since :hover does not work in case of click-and-hold menu invocation.
         menuItemElement.addEventListener("mouseover", this._menuItemMouseOver.bind(this), false);
         menuItemElement.addEventListener("mouseout", this._menuItemMouseOut.bind(this), false);
 
         return menuItemElement;
     },
 
     _createSeparator: function()
     {
-        var separatorElement = document.createElement("div");
-        separatorElement.className = "soft-context-menu-separator";
+        var separatorElement = document.createElementWithClass("div", "soft-context-menu-separator");
         separatorElement._isSeparator = true;
         separatorElement.addEventListener("mouseover", this._hideSubMenu.bind(this), false);
         separatorElement.createChild("div", "separator-line");
         return separatorElement;
     },
 
     _menuItemMouseDown: function(event)
     {
         // Do not let separator's mouse down hit menu's handler - we need to receive mouse up!
         event.consume(true);
@@ skipping 200 matching lines @@
 }
 
 if (!InspectorFrontendHost.showContextMenu) {
 
 InspectorFrontendHost.showContextMenu = function(event, items)
 {
     new WebInspector.SoftContextMenu(items).show(event);
 }
 
 }