DevTools: get rid of Element.prototype.removeMatchingStyleClasses

This method encourages className crafting and runs unexpectedly long.

BUG=316092

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

git-svn-id: svn://svn.chromium.org/blink/trunk@180163 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/LayoutTests/inspector/profiler/heap-snapshot-test.js

@@ -491,16 +491,18 @@ InspectorTest.checkArrayIsSorted = function(contents, sortType, sortOrder)
         name: function (data) { return data; },
         id: function (data) { return parseInt(data, 10); }
     }[sortType];
-    var acceptableComparisonResult = {
-        ascending: -1,
-        descending: 1
-    }[sortOrder];
 
     if (!extractor) {
         InspectorTest.addResult("Invalid sort type: " + sortType);
         return;
     }
-    if (!acceptableComparisonResult) {
+
+    var acceptableComparisonResult;
+    if (sortOrder === WebInspector.DataGrid.Order.Ascending) {
+        acceptableComparisonResult = -1;
+    } else if (sortOrder === WebInspector.DataGrid.Order.Descending) {
+        acceptableComparisonResult = 1;
+    } else {
         InspectorTest.addResult("Invalid sort order: " + sortOrder);
         return;
     }

third_party/WebKit/Source/devtools/front_end/network/NetworkPanel.js

@@ -2519,15 +2519,7 @@ WebInspector.NetworkDataGridNode.prototype = {
         this._nameCell = null;
         this._timelineCell = null;
 
-        var element = this._element;
-        element.classList.toggle("network-error-row", this._isFailed());
-        element.classList.toggle("resource-cached", this._request.cached);
-        var typeClassName = "network-type-" + this._request.type.name();
-        if (!element.classList.contains(typeClassName)) {
-            element.removeMatchingStyleClasses("network-type-\\w+");
-            element.classList.add(typeClassName);
-        }
-
+        this._element.classList.toggle("network-error-row", this._isFailed());
         WebInspector.SortableDataGridNode.prototype.createCells.call(this);
 
         this.refreshGraph(this._parentView.calculator());
@@ -2630,28 +2622,24 @@ WebInspector.NetworkDataGridNode.prototype = {
 
         cell.className = "network-graph-side";
 
-        this._barAreaElement = document.createElement("div");
-        //    this._barAreaElement.className = "network-graph-bar-area hidden";
-        this._barAreaElement.className = "network-graph-bar-area";
+        this._barAreaElement = cell.createChild("div", "network-graph-bar-area");
         this._barAreaElement.request = this._request;
-        cell.appendChild(this._barAreaElement);
 
-        this._barLeftElement = document.createElement("div");
-        this._barLeftElement.className = "network-graph-bar waiting";
-        this._barAreaElement.appendChild(this._barLeftElement);
+        var type = this._request.type.name();
+        var cached = this._request.cached;
 
-        this._barRightElement = document.createElement("div");
-        this._barRightElement.className = "network-graph-bar";
-        this._barAreaElement.appendChild(this._barRightElement);
+        this._barLeftElement = this._barAreaElement.createChild("div", "network-graph-bar");
+        this._barLeftElement.classList.add(type, "waiting");
+        this._barLeftElement.classList.toggle("cached", cached);
 
+        this._barRightElement = this._barAreaElement.createChild("div", "network-graph-bar");
+        this._barRightElement.classList.add(type);
+        this._barRightElement.classList.toggle("cached", cached);
 
-        this._labelLeftElement = document.createElement("div");
-        this._labelLeftElement.className = "network-graph-label waiting";
-        this._barAreaElement.appendChild(this._labelLeftElement);
+        this._labelLeftElement = this._barAreaElement.createChild("div", "network-graph-label");
+        this._labelLeftElement.classList.add("waiting");
 
-        this._labelRightElement = document.createElement("div");
-        this._labelRightElement.className = "network-graph-label";
-        this._barAreaElement.appendChild(this._labelRightElement);
+        this._labelRightElement = this._barAreaElement.createChild("div", "network-graph-label");
 
         cell.addEventListener("mouseover", this._refreshLabelPositions.bind(this), false);
     },
@@ -2672,19 +2660,18 @@ WebInspector.NetworkDataGridNode.prototype = {
         this._nameCell = cell;
         cell.addEventListener("click", this._onClick.bind(this), false);
         cell.addEventListener("dblclick", this._openInNewTab.bind(this), false);
-
+        var iconElement;
         if (this._request.type === WebInspector.resourceTypes.Image) {
-            var previewImage = document.createElement("img");
-            previewImage.className = "image-network-icon-preview";
+            var previewImage = document.createElementWithClass("img", "image-network-icon-preview");
             this._request.populateImageSource(previewImage);
 
-            var iconElement = document.createElement("div");
-            iconElement.className = "icon";
+            iconElement = document.createElementWithClass("div", "icon");
             iconElement.appendChild(previewImage);
         } else {
-            var iconElement = document.createElement("img");
-            iconElement.className = "icon";
+            iconElement = document.createElementWithClass("img", "icon");
         }
+        iconElement.classList.add(this._request.type.name());
+
         cell.appendChild(iconElement);
         cell.appendChild(document.createTextNode(this._request.name()));
         this._appendSubtitle(cell, this._request.path());

third_party/WebKit/Source/devtools/front_end/networkLogView.css

@@ -164,53 +164,53 @@
     content: url(Images/resourcePlainIconSmall.png);
 }
 
-.network-log-grid.data-grid .network-type-script .icon {
+.network-log-grid.data-grid .icon.script {
     content: url(Images/resourceJSIcon.png);
 }
 
-.network-log-grid.data-grid.small .network-type-script .icon {
+.network-log-grid.data-grid.small .icon.script {
     content: url(Images/resourceDocumentIconSmall.png);
 }
 
-.network-log-grid.data-grid .network-type-document .icon {
+.network-log-grid.data-grid .icon.document {
     content: url(Images/resourceDocumentIcon.png);
 }
 
-.network-log-grid.data-grid.small .network-type-document .icon {
+.network-log-grid.data-grid.small .icon.document {
     content: url(Images/resourceDocumentIconSmall.png);
 }
 
-.network-log-grid.data-grid .network-type-stylesheet .icon {
+.network-log-grid.data-grid .icon.stylesheet {
     content: url(Images/resourceCSSIcon.png);
 }
 
-.network-log-grid.data-grid.small .network-type-stylesheet .icon {
+.network-log-grid.data-grid.small .icon.stylesheet {
     content: url(Images/resourceDocumentIconSmall.png);
 }
 
-.network-log-grid.data-grid .network-type-media .icon {
+.network-log-grid.data-grid .icon.media {
     content: url(Images/resourcePlainIcon.png); /* FIXME: media icon */
 }
 
-.network-log-grid.data-grid.small .network-type-media .icon {
+.network-log-grid.data-grid.small .icon.media {
     content: url(Images/resourcePlainIconSmall.png); /* FIXME: media icon */
 }
-.network-log-grid.data-grid .network-type-texttrack .icon {
+.network-log-grid.data-grid .icon.texttrack {
     content: url(Images/resourcePlainIcon.png); /* FIXME: vtt icon */
 }
 
-.network-log-grid.data-grid.small .network-type-texttrack .icon {
+.network-log-grid.data-grid.small .icon.texttrack {
     content: url(Images/resourcePlainIconSmall.png); /* FIXME: vtt icon */
 }
 
-.network-log-grid.data-grid .network-type-image .icon {
+.network-log-grid.data-grid .icon.image {
     position: relative;
     background-image: url(Images/resourcePlainIcon.png);
     background-repeat: no-repeat;
     content: "";
 }
 
-.network-log-grid.data-grid.small .network-type-image .icon {
+.network-log-grid.data-grid.small .icon.image {
     background-image: url(Images/resourcePlainIconSmall.png);
     content: "";
 }
@@ -370,108 +370,108 @@
                 inset 0 1px 0 2px hsla(0, 0%, 76%, 0.85);
 }
 
-.network-type-document .network-graph-bar {
+.network-graph-bar.document {
     border-color: hsl(215, 49%, 52%);
     background: linear-gradient(0deg, hsl(215, 72%, 61%), hsl(215, 100%, 69%));
 }
 
-.network-type-document.resource-cached .network-graph-bar {
+.network-graph-bar.cached.document {
     background: hsl(215, 99%, 86%);
     box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8),
                 inset 0 0 0 2px hsl(215, 71%, 61%),
                 inset 0 1px 0 2px hsla(215, 58%, 65%, 0.85);
 }
 
-.network-type-stylesheet .network-graph-bar {
+.network-graph-bar.stylesheet {
     border-color: hsl(99, 34%, 52%);
     background: linear-gradient(0deg, hsl(100, 50%, 61%), hsl(90, 50%, 64%));
 }
 
-.network-type-stylesheet.resource-cached .network-graph-bar {
+.network-graph-bar.cached.stylesheet {
     background: hsl(99, 100%, 86%);
     box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8),
                 inset 0 0 0 2px hsl(99, 72%, 61%),
                 inset 0 1px 0 2px hsla(99, 59%, 65%, 0.85);
 }
 
-.network-type-image .network-graph-bar {
+.network-graph-bar.image {
     border-color: hsl(272, 31%, 52%);
     background: linear-gradient(0deg, hsl(272, 46%, 61%), hsl(272, 64%, 69%));
 }
 
-.network-type-image.resource-cached .network-graph-bar {
+.network-graph-bar.cached.image {
     background: hsl(272, 65%, 86%);
     box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8),
                 inset 0 0 0 2px hsl(272, 47%, 61%),
                 inset 0 1px 0 2px hsla(273, 38%, 65%, 0.85);
 }
 
-.network-type-media .network-graph-bar {
+.network-graph-bar.media {
     border-color: hsl(272, 31%, 52%);
     background: linear-gradient(0deg, hsl(272, 46%, 61%), hsl(272, 64%, 69%));
 }
 
-.network-type-media.resource-cached .network-graph-bar {
+.network-graph-bar.cached.media {
     background: hsl(272, 65%, 86%);
     box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8),
                 inset 0 0 0 2px hsl(272, 47%, 61%),
                 inset 0 1px 0 2px hsla(273, 38%, 65%, 0.85);
 }
 
-.network-type-font .network-graph-bar {
+.network-graph-bar.font {
     border-color: hsl(8, 49%, 52%);
     background: linear-gradient(0deg, hsl(8, 72%, 61%), hsl(8, 100%, 69%));
 }
 
-.network-type-font.resource-cached .network-graph-bar {
+.network-graph-bar.cached.font {
     background: hsl(8, 100%, 86%);
     box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8),
                 inset 0 0 0 2px hsl(8, 72%, 61%),
                 inset 0 1px 0 2px hsla(8, 59%, 65%, 0.85);
 }
 
-.network-type-texttrack .network-graph-bar {
+.network-graph-bar.texttrack {
     border-color: hsl(8, 49%, 52%);
     background: linear-gradient(0deg, hsl(8, 72%, 61%), hsl(8, 100%, 69%));
 }
 
-.network-type-texttrack.resource-cached .network-graph-bar {
+.network-graph-bar.cached.texttrack {
     background: hsl(8, 100%, 86%);
     box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8),
                 inset 0 0 0 2px hsl(8, 72%, 61%),
                 inset 0 1px 0 2px hsla(8, 59%, 65%, 0.85);
 }
 
-.network-type-script .network-graph-bar {
+.network-graph-bar.script {
     border-color: hsl(31, 49%, 52%);
     background: linear-gradient(0deg, hsl(31, 72%, 61%), hsl(31, 100%, 69%));
 }
 
-.network-type-script.resource-cached .network-graph-bar {
+.network-graph-bar.cached.script {
     background: hsl(31, 100%, 86%);
     box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8),
                 inset 0 0 0 2px hsl(31, 78%, 61%),
                 inset 0 1px 0 2px hsla(31, 64%, 65%, 0.85);
 }
 
-.network-type-xhr .network-graph-bar {
+.network-graph-bar.xhr {
     border-color: hsl(53, 49%, 52%);
     background: linear-gradient(0deg, hsl(53, 72%, 61%), hsl(53, 100%, 69%));
 }
 
-.network-type-xhr.resource-cached .network-graph-bar {
+.network-graph-bar.cached.xhr {
     background: hsl(53, 100%, 86%);
     box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8),
                 inset 0 0 0 2px hsl(53, 72%, 61%),
                 inset 0 1px 0 2px hsla(54, 59%, 65%, 0.85);
 }
 
-.network-type-websocket .network-graph-bar {
+.network-graph-bar.websocket {
     border-color: hsl(0, 0%, 65%);
     background: linear-gradient(0deg, hsl(0, 0%, 73%), hsl(0, 0%, 78%));
 }
 
-.network-type-websocket.resource-cached .network-graph-bar {
+.network-graph-bar.cached.websocket {
     background: hsl(0, 0%, 90%);
     box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8),
                 inset 0 0 0 2px hsl(0, 0%, 73%),

third_party/WebKit/Source/devtools/front_end/ui/DOMExtension.js

@@ -156,13 +156,6 @@ Node.prototype.rangeBoundaryForOffset = function(offset)
     return { container: node, offset: offset };
 }
 
-Element.prototype.removeMatchingStyleClasses = function(classNameRegex)
-{
-    var regex = new RegExp("(^|\\s+)" + classNameRegex + "($|\\s+)");
-    if (regex.test(this.className))
-        this.className = this.className.replace(regex, " ");
-}
-
 /**
  * @param {number|undefined} x
  * @param {number|undefined} y

third_party/WebKit/Source/devtools/front_end/ui/DataGrid.js

@@ -116,7 +116,7 @@ WebInspector.DataGrid = function(columnsArray, editCallback, deleteCallback, ref
         cell.appendChild(div);
 
         if (column.sort) {
-            cell.classList.add("sort-" + column.sort);
+            cell.classList.add(column.sort);
             this._sortColumnCell = cell;
         }
 
@@ -169,8 +169,8 @@ WebInspector.DataGrid.Events = {
 
 /** @enum {string} */
 WebInspector.DataGrid.Order = {
-    Ascending: "ascending",
-    Descending: "descending"
+    Ascending: "sort-ascending",
+    Descending: "sort-descending"
 }
 
 /** @enum {string} */
@@ -430,9 +430,9 @@ WebInspector.DataGrid.prototype = {
      */
     sortOrder: function()
     {
-        if (!this._sortColumnCell || this._sortColumnCell.classList.contains("sort-ascending"))
+        if (!this._sortColumnCell || this._sortColumnCell.classList.contains(WebInspector.DataGrid.Order.Ascending))
             return WebInspector.DataGrid.Order.Ascending;
-        if (this._sortColumnCell.classList.contains("sort-descending"))
+        if (this._sortColumnCell.classList.contains(WebInspector.DataGrid.Order.Descending))
             return WebInspector.DataGrid.Order.Descending;
         return null;
     },
@@ -442,7 +442,7 @@ WebInspector.DataGrid.prototype = {
      */
     isSortOrderAscending: function()
     {
-        return !this._sortColumnCell || this._sortColumnCell.classList.contains("sort-ascending");
+        return !this._sortColumnCell || this._sortColumnCell.classList.contains(WebInspector.DataGrid.Order.Ascending);
     },
 
     get headerTableBody()
@@ -875,10 +875,10 @@ WebInspector.DataGrid.prototype = {
             sortOrder = WebInspector.DataGrid.Order.Descending;
 
         if (this._sortColumnCell)
-            this._sortColumnCell.removeMatchingStyleClasses("sort-\\w+");
+            this._sortColumnCell.classList.remove(WebInspector.DataGrid.Order.Ascending, WebInspector.DataGrid.Order.Descending);
         this._sortColumnCell = cell;
 
-        cell.classList.add("sort-" + sortOrder);
+        cell.classList.add(sortOrder);
 
         this.dispatchEventToListeners(WebInspector.DataGrid.Events.SortingChanged);
     },
@@ -890,9 +890,9 @@ WebInspector.DataGrid.prototype = {
     markColumnAsSortedBy: function(columnIdentifier, sortOrder)
     {
         if (this._sortColumnCell)
-            this._sortColumnCell.removeMatchingStyleClasses("sort-\\w+");
+            this._sortColumnCell.classList.remove(WebInspector.DataGrid.Order.Ascending, WebInspector.DataGrid.Order.Descending);
         this._sortColumnCell = this._headerTableHeaders[columnIdentifier];
-        this._sortColumnCell.classList.add("sort-" + sortOrder);
+        this._sortColumnCell.classList.add(sortOrder);
     },
 
     /**