DevTools: Re-land r169860 with UI fixed (empty boxes and missing Styles toolbar buttons)

TBR=pfeldman

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

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

third_party/WebKit/Source/devtools/front_end/ElementsPanel.js

@@ -88,6 +88,13 @@ WebInspector.ElementsPanel = function()
     this.sidebarPanes.platformFonts = new WebInspector.PlatformFontsSidebarPane();
     this.sidebarPanes.computedStyle = new WebInspector.ComputedStyleSidebarPane();
     this.sidebarPanes.styles = new WebInspector.StylesSidebarPane(this.sidebarPanes.computedStyle, this._setPseudoClassForNodeId.bind(this));
+
+    this._matchedStylesFilterBoxContainer = document.createElement("div");
+    this._matchedStylesFilterBoxContainer.className = "filter-box-container inspector-footer status-bar";
+    this._computedStylesFilterBoxContainer = document.createElement("div");
+    this._computedStylesFilterBoxContainer.className = "filter-box-container inspector-footer status-bar";
+    this.sidebarPanes.styles.setFilterBoxContainers(this._matchedStylesFilterBoxContainer, this._computedStylesFilterBoxContainer);
+
     this.sidebarPanes.metrics = new WebInspector.MetricsSidebarPane();
     this.sidebarPanes.properties = new WebInspector.PropertiesSidebarPane();
     this.sidebarPanes.domBreakpoints = WebInspector.domBreakpointsSidebarPane.createProxy(this);
@@ -1203,21 +1210,24 @@ WebInspector.ElementsPanel.prototype = {
         computedPane.element.classList.add("fill");
         var expandComputed = computedPane.expand.bind(computedPane);
 
-        computedPane.bodyElement.appendChild(this.sidebarPanes.computedStyle.titleElement);
         computedPane.bodyElement.classList.add("metrics-and-computed");
-        this.sidebarPanes.computedStyle.show(computedPane.bodyElement);
         this.sidebarPanes.computedStyle.setExpandCallback(expandComputed);
 
-        this.sidebarPanes.platformFonts.show(computedPane.bodyElement);
+        var matchedStylePanesWrapper = document.createElement("div");
+        matchedStylePanesWrapper.className = "style-panes-wrapper";
+        var computedStylePanesWrapper = document.createElement("div");
+        computedStylePanesWrapper.className = "style-panes-wrapper";
 
         /**
-         * @param {!WebInspector.SidebarPane} pane
-         * @param {!Element=} beforeElement
+         * @param {boolean} inComputedStyle
          * @this {WebInspector.ElementsPanel}
          */
-        function showMetrics(pane, beforeElement)
+        function showMetrics(inComputedStyle)
         {
-            this.sidebarPanes.metrics.show(pane.bodyElement, beforeElement);
+            if (inComputedStyle)
+                this.sidebarPanes.metrics.show(computedStylePanesWrapper, this.sidebarPanes.computedStyle.element);
+            else
+                this.sidebarPanes.metrics.show(matchedStylePanesWrapper);
         }
 
         /**
@@ -1228,16 +1238,15 @@ WebInspector.ElementsPanel.prototype = {
         {
             var tabId = /** @type {string} */ (event.data.tabId);
             if (tabId === computedPane.title())
-                showMetrics.call(this, computedPane, this.sidebarPanes.computedStyle.element);
-            if (tabId === stylesPane.title())
-                showMetrics.call(this, stylesPane);
+                showMetrics.call(this, true);
+            else if (tabId === stylesPane.title())
+                showMetrics.call(this, false);
         }
 
         this.sidebarPaneView = new WebInspector.SidebarTabbedPane();
 
         if (vertically) {
             this._splitView.installResizer(this.sidebarPaneView.headerElement());
-            this.sidebarPanes.metrics.show(computedPane.bodyElement, this.sidebarPanes.computedStyle.element);
             this.sidebarPanes.metrics.setExpandCallback(expandComputed);
 
             var compositePane = new WebInspector.SidebarPane(this.sidebarPanes.styles.title());
@@ -1248,13 +1257,19 @@ WebInspector.ElementsPanel.prototype = {
             var splitView = new WebInspector.SplitView(true, true, "stylesPaneSplitViewState", 0.5);
             splitView.show(compositePane.bodyElement);
 
-            this.sidebarPanes.styles.show(splitView.mainElement());
-            splitView.mainElement().appendChild(this.sidebarPanes.styles.titleElement);
+            splitView.mainElement().appendChild(matchedStylePanesWrapper);
+            splitView.sidebarElement().appendChild(computedStylePanesWrapper);
+
             this.sidebarPanes.styles.setExpandCallback(expandComposite);
 
-            computedPane.show(splitView.sidebarElement());
+            computedPane.show(computedStylePanesWrapper);
             computedPane.setExpandCallback(expandComposite);
 
+            if (WebInspector.experimentsSettings.cssStyleSearch.isEnabled()) {
+                splitView.mainElement().appendChild(this._matchedStylesFilterBoxContainer);
+                splitView.sidebarElement().appendChild(this._computedStylesFilterBoxContainer);
+            }
+
             this.sidebarPaneView.addPane(compositePane);
         } else {
             var stylesPane = new WebInspector.SidebarPane(this.sidebarPanes.styles.title());
@@ -1262,18 +1277,30 @@ WebInspector.ElementsPanel.prototype = {
             stylesPane.element.classList.add("fill");
             var expandStyles = stylesPane.expand.bind(stylesPane);
             stylesPane.bodyElement.classList.add("metrics-and-styles");
-            this.sidebarPanes.styles.show(stylesPane.bodyElement);
+
+            stylesPane.bodyElement.appendChild(matchedStylePanesWrapper);
+            computedPane.bodyElement.appendChild(computedStylePanesWrapper);
+
             this.sidebarPanes.styles.setExpandCallback(expandStyles);
             this.sidebarPanes.metrics.setExpandCallback(expandStyles);
-            stylesPane.bodyElement.appendChild(this.sidebarPanes.styles.titleElement);
 
             this.sidebarPaneView.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, tabSelected, this);
 
-            showMetrics.call(this, stylesPane);
+            if (WebInspector.experimentsSettings.cssStyleSearch.isEnabled()) {
+                stylesPane.bodyElement.appendChild(this._matchedStylesFilterBoxContainer);
+                computedPane.bodyElement.appendChild(this._computedStylesFilterBoxContainer);
+            }
+
             this.sidebarPaneView.addPane(stylesPane);
             this.sidebarPaneView.addPane(computedPane);
         }
 
+        this.sidebarPanes.styles.show(matchedStylePanesWrapper);
+        this.sidebarPanes.computedStyle.show(computedStylePanesWrapper);
+        matchedStylePanesWrapper.appendChild(this.sidebarPanes.styles.titleElement);
+        showMetrics.call(this, vertically);
+        this.sidebarPanes.platformFonts.show(computedStylePanesWrapper);
+
         this.sidebarPaneView.addPane(this.sidebarPanes.eventListeners);
         this.sidebarPaneView.addPane(this.sidebarPanes.domBreakpoints);
         this.sidebarPaneView.addPane(this.sidebarPanes.properties);

third_party/WebKit/Source/devtools/front_end/Settings.js

@@ -288,6 +288,7 @@ WebInspector.ExperimentsSettings = function(experimentsEnabled)
     this.timelineFlameChart = this._createExperiment("timelineFlameChart", "Enable FlameChart mode in Timeline");
     this.heapSnapshotStatistics = this._createExperiment("heapSnapshotStatistics", "Show memory breakdown statistics in heap snapshots");
     this.timelineNoLiveUpdate = this._createExperiment("timelineNoLiveUpdate", "Timeline w/o live update");
+    this.cssStyleSearch = this._createExperiment("cssStyleSearch", "Enable Styles search and Computed style filtering");
 
     this._cleanUpSetting();
 }

third_party/WebKit/Source/devtools/front_end/StylesSidebarPane.js

@@ -51,7 +51,7 @@ WebInspector.StylesSidebarPane = function(computedStylePane, setPseudoClassCallb
     this.titleElement.appendChild(addButton);
 
     this._computedStylePane = computedStylePane;
-    computedStylePane._stylesSidebarPane = this;
+    computedStylePane.setHostingPane(this);
     this._setPseudoClassCallback = setPseudoClassCallback;
     this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
     WebInspector.settings.colorFormat.addChangeListener(this._colorFormatSettingChanged.bind(this));
@@ -180,6 +180,55 @@ WebInspector.StylesSidebarPane.prototype = {
         contextMenu.show();
     },
 
+    /**
+     * @param {!Element} matchedStylesElement
+     * @param {!Element} computedStylesElement
+     */
+    setFilterBoxContainers: function(matchedStylesElement, computedStylesElement)
+    {
+        if (!WebInspector.experimentsSettings.cssStyleSearch.isEnabled())
+            return;
+
+        matchedStylesElement.appendChild(this._createCSSFilterControl());
+        this._computedStylePane.setFilterBoxContainer(computedStylesElement);
+    },
+
+    /**
+     * @return {!Element}
+     */
+    _createCSSFilterControl: function()
+    {
+        var filterInput = this._createPropertyFilterElement(false, searchHandler.bind(this));
+
+        /**
+         * @param {?RegExp} regex
+         * @this {WebInspector.StylesSidebarPane}
+         */
+        function searchHandler(regex)
+        {
+            this._filterRegex = regex;
+        }
+
+        filterInput.addEventListener("keydown", tabHandler.bind(this), false);
+
+        /**
+         * @param {?Event} event
+         * @this {WebInspector.StylesSidebarPane}
+         */
+        function tabHandler(event)
+        {
+            if (event.keyIdentifier !== "U+0009")
+                return;
+
+            event.consume(true);
+            var firstSection = this.sections[0][1];
+            if (!firstSection)
+                return;
+            firstSection._moveEditorFromSelector(event.shiftKey ? "backward" : "forward");
+        }
+        return filterInput;
+    },
+
     get _forcedPseudoClasses()
     {
         return this.node ? (this.node.getUserProperty("pseudoState") || undefined) : undefined;
@@ -246,6 +295,14 @@ WebInspector.StylesSidebarPane.prototype = {
      */
     _refreshUpdate: function(editedSection, forceFetchComputedStyle, userCallback)
     {
+        var callbackWrapper = function()
+        {
+            if (this._filterRegex)
+                this._updateFilter(false);
+            if (userCallback)
+                userCallback();
+        }.bind(this);
+
         if (this._refreshUpdateInProgress) {
             this._lastNodeForInnerRefresh = this.node;
             return;
@@ -265,15 +322,14 @@ WebInspector.StylesSidebarPane.prototype = {
 
             if (this._lastNodeForInnerRefresh) {
                 delete this._lastNodeForInnerRefresh;
-                this._refreshUpdate(editedSection, forceFetchComputedStyle, userCallback);
+                this._refreshUpdate(editedSection, forceFetchComputedStyle, callbackWrapper);
                 return;
             }
 
             if (this.node === node && computedStyle)
                 this._innerRefreshUpdate(node, computedStyle, editedSection);
 
-            if (userCallback)
-                userCallback();
+            callbackWrapper();
         }
 
         if (this._computedStylePane.isShowing() || forceFetchComputedStyle) {
@@ -281,8 +337,7 @@ WebInspector.StylesSidebarPane.prototype = {
             WebInspector.cssModel.getComputedStyleAsync(node.id, computedStyleCallback.bind(this));
         } else {
             this._innerRefreshUpdate(node, null, editedSection);
-            if (userCallback)
-                userCallback();
+            callbackWrapper();
         }
     },
 
@@ -463,6 +518,8 @@ WebInspector.StylesSidebarPane.prototype = {
             this.sections[pseudoId] = this._rebuildSectionsForStyleRules(styleRules, usedProperties, anchorElement);
         }
 
+        if (this._filterRegex)
+            this._updateFilter(false);
         this._nodeStylesUpdatedForTest(node, true);
     },
 
@@ -806,19 +863,82 @@ WebInspector.StylesSidebarPane.prototype = {
             return td;
         }
 
-        var tr = document.createElement("tr");
+        var tr = table.createChild("tr");
         tr.appendChild(createCheckbox.call(this, "active"));
         tr.appendChild(createCheckbox.call(this, "hover"));
-        table.appendChild(tr);
 
-        tr = document.createElement("tr");
+        tr = table.createChild("tr");
         tr.appendChild(createCheckbox.call(this, "focus"));
         tr.appendChild(createCheckbox.call(this, "visited"));
-        table.appendChild(tr);
 
         this._elementStatePane.appendChild(table);
     },
 
+    /**
+     * @return {?RegExp}
+     */
+    filterRegex: function()
+    {
+        return this._filterRegex;
+    },
+
+    /**
+     * @param {boolean} isComputedStyleFilter
+     * @return {!Element}
+     * @param {function(?RegExp)} filterCallback
+     */
+    _createPropertyFilterElement: function(isComputedStyleFilter, filterCallback)
+    {
+        var input = document.createElement("input");
+        input.type = "text";
+        input.placeholder = isComputedStyleFilter ? WebInspector.UIString("Filter") : WebInspector.UIString("Find in Styles");
+        input.className = "filter-box toolbar-search-control search-replace";
+        var boundSearchHandler = searchHandler.bind(this);
+
+        /**
+         * @this {WebInspector.StylesSidebarPane}
+         */
+        function searchHandler()
+        {
+            var regex = input.value ? new RegExp(input.value.escapeForRegExp(), "i") : null;
+            filterCallback(regex);
+            this._updateFilter(isComputedStyleFilter);
+        }
+        input.addEventListener("input", boundSearchHandler, false);
+
+        /**
+         * @param {?Event} event
+         */
+        function keydownHandler(event)
+        {
+            var Esc = "U+001B";
+            if (event.keyIdentifier !== Esc || !input.value)
+                return;
+            event.consume(true);
+            input.value = "";
+            boundSearchHandler();
+        }
+        input.addEventListener("keydown", keydownHandler, false);
+
+        return input;
+    },
+
+    /**
+     * @param {boolean} isComputedStyleFilter
+     */
+    _updateFilter: function(isComputedStyleFilter)
+    {
+        for (var pseudoId in this.sections) {
+            var sections = this.sections[pseudoId];
+            for (var i = 0; i < sections.length; ++i) {
+                var section = sections[i];
+                if (isComputedStyleFilter !== !!section.computedStyle)
+                    continue;
+                section.updateFilter();
+            }
+        }
+    },
+
     /**
      * @param {!WebInspector.Event} event
      */
@@ -880,6 +1000,28 @@ WebInspector.ComputedStyleSidebarPane = function()
 }
 
 WebInspector.ComputedStyleSidebarPane.prototype = {
+    /**
+     * @param {!WebInspector.StylesSidebarPane} pane
+     */
+    setHostingPane: function(pane)
+    {
+        this._stylesSidebarPane = pane;
+    },
+
+    setFilterBoxContainer: function(element)
+    {
+        element.appendChild(this._stylesSidebarPane._createPropertyFilterElement(true, filterCallback.bind(this)));
+
+        /**
+         * @param {?RegExp} regex
+         * @this {WebInspector.ComputedStyleSidebarPane}
+         */
+        function filterCallback(regex)
+        {
+            this._filterRegex = regex;
+        }
+    },
+
     wasShown: function()
     {
         WebInspector.SidebarPane.prototype.wasShown.call(this);
@@ -904,6 +1046,14 @@ WebInspector.ComputedStyleSidebarPane.prototype = {
         this._stylesSidebarPane._refreshUpdate(null, true, wrappedCallback.bind(this));
     },
 
+    /**
+     * @return {?RegExp}
+     */
+    filterRegex: function()
+    {
+        return this._filterRegex;
+    },
+
     __proto__: WebInspector.SidebarPane.prototype
 }
 
@@ -1221,6 +1371,16 @@ WebInspector.StylePropertiesSection.prototype = {
         }
     },
 
+    updateFilter: function()
+    {
+        var children = this.propertiesTreeOutline.children;
+        for (var i = 0; i < children.length; ++i)
+            children[i].updateFilter();
+
+        if (this.styleRule.rule)
+            this._markSelectorHighlights();
+    },
+
     _markSelectorMatches: function()
     {
         var rule = this.styleRule.rule;
@@ -1256,6 +1416,17 @@ WebInspector.StylePropertiesSection.prototype = {
 
         this._selectorElement.removeChildren();
         this._selectorElement.appendChild(fragment);
+        this._markSelectorHighlights();
+    },
+
+    _markSelectorHighlights: function()
+    {
+        var selectors = this._selectorElement.getElementsByClassName("simple-selector");
+        var regex = this.pane.filterRegex();
+        for (var i = 0; i < selectors.length; ++i) {
+            var selectorMatchesFilter = regex && regex.test(selectors[i].textContent);
+            selectors[i].classList.toggle("filter-match", selectorMatchesFilter);
+        }
     },
 
     _checkWillCancelEditing: function()
@@ -1505,8 +1676,10 @@ WebInspector.ComputedStylePropertiesSection = function(stylesPane, styleRule, us
 {
     WebInspector.PropertiesSection.call(this, "");
 
-    var showInheritedCheckbox = new WebInspector.Checkbox(WebInspector.UIString("Show inherited properties"), "sidebar-pane-subtitle");
-    this.headerElement.appendChild(showInheritedCheckbox.element);
+    var subtitle = this.headerElement.createChild("div", "sidebar-pane-subtitle vbox");
+    var showInheritedCheckbox = new WebInspector.Checkbox(WebInspector.UIString("Show inherited properties"), "hbox");
+    subtitle.appendChild(showInheritedCheckbox.element);
+
     this._hasFreshContent = false;
 
     /**
@@ -1563,6 +1736,13 @@ WebInspector.ComputedStylePropertiesSection.prototype = {
         this.populated = false;
     },
 
+    updateFilter: function()
+    {
+        var children = this.propertiesTreeOutline.children;
+        for (var i = 0; i < children.length; ++i)
+            children[i].updateFilter();
+    },
+
     onpopulate: function()
     {
         function sorter(a, b)
@@ -1780,6 +1960,14 @@ WebInspector.StylePropertyTreeElementBase.prototype = {
         return null;  // Overridden by ancestors.
     },
 
+    /**
+     * @return {!WebInspector.StylesSidebarPane|!WebInspector.ComputedStyleSidebarPane}
+     */
+    parentPane: function()
+    {
+        throw "Not implemented";
+    },
+
     get inherited()
     {
         return this._inherited;
@@ -1962,6 +2150,13 @@ WebInspector.StylePropertyTreeElementBase.prototype = {
         }
         if (this.property.inactive)
             this.listItemElement.classList.add("inactive");
+        this.updateFilter();
+    },
+
+    updateFilter: function()
+    {
+        var regEx = this.parentPane().filterRegex();
+        this.listItemElement.classList.toggle("filter-match", !!regEx && (regEx.test(this.property.name) || regEx.test(this.property.value)));
     },
 
     /**
@@ -2193,6 +2388,20 @@ WebInspector.ComputedStylePropertyTreeElement.prototype = {
         return null;
     },
 
+    /**
+     * @return {!WebInspector.ComputedStyleSidebarPane}
+     */
+    parentPane: function()
+    {
+        return this._stylesPane._computedStylePane;
+    },
+
+    updateFilter: function()
+    {
+        var regEx = this.parentPane().filterRegex();
+        this.listItemElement.classList.toggle("hidden", !!regEx && (!regEx.test(this.property.name) && !regEx.test(this.property.value)));
+    },
+
     __proto__: WebInspector.StylePropertyTreeElementBase.prototype
 }
 
@@ -2231,6 +2440,14 @@ WebInspector.StylePropertyTreeElement.prototype = {
         return this._parentPane;
     },
 
+    /**
+     * @return {!WebInspector.StylesSidebarPane}
+     */
+    parentPane: function()
+    {
+        return this._parentPane;
+    },
+
     /**
      * @return {?WebInspector.StylePropertiesSection}
      */

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

@@ -219,6 +219,15 @@
     margin-left: -6px;
 }
 
+.styles-section .properties li.filter-match,
+.styles-section .simple-selector.filter-match {
+    background-color: rgba(255, 255, 0, 0.5);
+}
+
+.styles-section .properties li.overloaded.filter-match {
+    background-color: rgba(255, 255, 0, 0.25);
+}
+
 .styles-section .properties li.not-parsed-ok .exclamation-mark {
     display: inline-block;
     position: relative;
@@ -430,10 +439,6 @@
     color: inherit;
 }
 
-.styles-section.computed-style .properties {
-    margin-top: 18px;
-}
-
 .styles-section.computed-style .properties .disabled {
     text-decoration: none;
     opacity: 0.5;
@@ -449,7 +454,6 @@
 }
 
 .styles-element-state-pane {
-    background-color: rgb(240, 240, 240);
     overflow: hidden;
     margin-top: -56px;
     padding-top: 18px;
@@ -579,12 +583,38 @@
 .sidebar-pane.composite .metrics {
     border-bottom: 1px solid rgb(64%, 64%, 64%);
     height: 206px;
-    display: -webkit-flex;
-    -webkit-flex-direction: column;
+    display: flex;
+    flex-direction: column;
     -webkit-align-items: center;
     -webkit-justify-content: center;
 }
 
+.sidebar-pane .metrics-and-styles,
+.sidebar-pane .metrics-and-computed {
+    display: flex !important;
+    flex-direction: column !important;
+    position: relative;
+}
+
+.sidebar-pane .style-panes-wrapper {
+    flex: 1;
+    overflow-y: auto;
+    position: relative;
+}
+
+.sidebar-pane.composite .metrics-and-computed .sidebar-pane-toolbar,
+.sidebar-pane.composite .metrics-and-styles .sidebar-pane-toolbar {
+    position: absolute;
+}
+
+input.filter-box {
+    outline: none !important;
+}
+
+.sidebar-pane .filter-box-container > .filter-box {
+    margin: 1px 1px 1px 2px;
+}
+
 .sidebar-pane.composite .metrics-and-computed .sidebar-pane-toolbar {
     margin-top: 4px;
     margin-bottom: -4px;
@@ -621,8 +651,8 @@
 }
 
 .styles-section.computed-style > .header > .sidebar-pane-subtitle {
-    top: 4px;
-    left: 8px;
+    line-height: 17px;
+    margin: 2px;
     -webkit-user-select: none;
 }
 

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

@@ -182,7 +182,6 @@ body.platform-windows .sidebar-pane-subtitle {
     padding-top: 1px;
 }
 
-.sidebar-pane-subtitle input,
 .section > .header input[type=checkbox] {
     height: 1em;
     width: 1em;

third_party/WebKit/Source/devtools/front_end/utilities.js

@@ -134,7 +134,7 @@ String.prototype.escapeCharacters = function(chars)
  */
 String.regexSpecialCharacters = function()
 {
-    return "^[]{}()\\.$*+?|-,";
+    return "^[]{}()\\.^$*+?|-,";
 }
 
 /**