Skip to content

GitLab

T
tangled
Commit a7827314 authored by pfeldman@chromium.org's avatar pfeldman@chromium.org
Browse files
Options

DevTools: move search in styles out of experimental. It proved to be stable. 

R=apavlov@chromium.org

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

git-svn-id: svn://svn.chromium.org/blink/trunk@169959 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent 3483ee6b
Hide whitespace changes
Inline Side-by-side
Showing with 36 additions and 43 deletions
third_party/WebKit/Source/devtools/front_end/ElementsPanel.js
View file @ a7827314
......@@ -90,9 +90,9 @@ WebInspector.ElementsPanel = function()
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._matchedStylesFilterBoxContainer.className = "sidebar-pane-filter-box";
this._computedStylesFilterBoxContainer = document.createElement("div");
this._computedStylesFilterBoxContainer.className = "filter-box-container inspector-footer status-bar";
this._computedStylesFilterBoxContainer.className = "sidebar-pane-filter-box";
this.sidebarPanes.styles.setFilterBoxContainers(this._matchedStylesFilterBoxContainer, this._computedStylesFilterBoxContainer);
this.sidebarPanes.metrics = new WebInspector.MetricsSidebarPane();
......@@ -1268,10 +1268,8 @@ WebInspector.ElementsPanel.prototype = {
computedPane.show(computedStylePanesWrapper);
computedPane.setExpandCallback(expandComposite);
if (WebInspector.experimentsSettings.cssStyleSearch.isEnabled()) {
splitView.mainElement().appendChild(this._matchedStylesFilterBoxContainer);
splitView.sidebarElement().appendChild(this._computedStylesFilterBoxContainer);
}
splitView.mainElement().appendChild(this._matchedStylesFilterBoxContainer);
splitView.sidebarElement().appendChild(this._computedStylesFilterBoxContainer);
this.sidebarPaneView.addPane(compositePane);
} else {
......@@ -1289,10 +1287,8 @@ WebInspector.ElementsPanel.prototype = {
this.sidebarPaneView.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, tabSelected, this);
if (WebInspector.experimentsSettings.cssStyleSearch.isEnabled()) {
stylesPane.bodyElement.appendChild(this._matchedStylesFilterBoxContainer);
computedPane.bodyElement.appendChild(this._computedStylesFilterBoxContainer);
}
stylesPane.bodyElement.appendChild(this._matchedStylesFilterBoxContainer);
computedPane.bodyElement.appendChild(this._computedStylesFilterBoxContainer);
this.sidebarPaneView.addPane(stylesPane);
this.sidebarPaneView.addPane(computedPane);
......
third_party/WebKit/Source/devtools/front_end/Settings.js
View file @ a7827314
......@@ -289,7 +289,6 @@ 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.powerProfiler = this._createExperiment("powerProfiler", "Enable power mode in Timeline");
this._cleanUpSetting();
......
third_party/WebKit/Source/devtools/front_end/StylesSidebarPane.js
View file @ a7827314
......@@ -186,9 +186,6 @@ WebInspector.StylesSidebarPane.prototype = {
*/
setFilterBoxContainers: function(matchedStylesElement, computedStylesElement)
{
if (!WebInspector.experimentsSettings.cssStyleSearch.isEnabled())
return;
matchedStylesElement.appendChild(this._createCSSFilterControl());
this._computedStylePane.setFilterBoxContainer(computedStylesElement);
},
......@@ -209,23 +206,6 @@ WebInspector.StylesSidebarPane.prototype = {
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;
},
......@@ -892,7 +872,6 @@ WebInspector.StylesSidebarPane.prototype = {
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);
/**
......@@ -902,6 +881,7 @@ WebInspector.StylesSidebarPane.prototype = {
{
var regex = input.value ? new RegExp(input.value.escapeForRegExp(), "i") : null;
filterCallback(regex);
input.parentNode.classList.toggle("styles-filter-engaged", !!input.value);
this._updateFilter(isComputedStyleFilter);
}
input.addEventListener("input", boundSearchHandler, false);
......@@ -934,7 +914,7 @@ WebInspector.StylesSidebarPane.prototype = {
var section = sections[i];
if (isComputedStyleFilter !== !!section.computedStyle)
continue;
section.updateFilter();
section._updateFilter();
}
}
},
......@@ -1371,11 +1351,19 @@ WebInspector.StylePropertiesSection.prototype = {
}
},
updateFilter: function()
_updateFilter: function()
{
if (this.styleRule.isAttribute)
return;
var regex = this._parentPane.filterRegex();
var hideRule = regex && !regex.test(this.element.textContent);
this.element.classList.toggle("hidden", hideRule);
if (hideRule)
return;
var children = this.propertiesTreeOutline.children;
for (var i = 0; i < children.length; ++i)
children[i].updateFilter();
children[i]._updateFilter();
if (this.styleRule.rule)
this._markSelectorHighlights();
......@@ -1736,11 +1724,11 @@ WebInspector.ComputedStylePropertiesSection.prototype = {
this.populated = false;
},
updateFilter: function()
_updateFilter: function()
{
var children = this.propertiesTreeOutline.children;
for (var i = 0; i < children.length; ++i)
children[i].updateFilter();
children[i]._updateFilter();
},
onpopulate: function()
......@@ -2150,10 +2138,10 @@ WebInspector.StylePropertyTreeElementBase.prototype = {
}
if (this.property.inactive)
this.listItemElement.classList.add("inactive");
this.updateFilter();
this._updateFilter();
},
updateFilter: function()
_updateFilter: function()
{
var regEx = this.parentPane().filterRegex();
this.listItemElement.classList.toggle("filter-match", !!regEx && (regEx.test(this.property.name) || regEx.test(this.property.value)));
......@@ -2396,7 +2384,7 @@ WebInspector.ComputedStylePropertyTreeElement.prototype = {
return this._stylesPane._computedStylePane;
},
updateFilter: function()
_updateFilter: function()
{
var regEx = this.parentPane().filterRegex();
this.listItemElement.classList.toggle("hidden", !!regEx && (!regEx.test(this.property.name) && !regEx.test(this.property.value)));
......
third_party/WebKit/Source/devtools/front_end/elementsPanel.css
View file @ a7827314
......@@ -609,12 +609,22 @@
position: absolute;
}
input.filter-box {
.sidebar-pane-filter-box {
display: flex;
border-top: 1px solid rgb(191, 191, 191);
flex-basis: 19px;
}
.sidebar-pane-filter-box > input {
outline: none !important;
border: none;
width: 100%;
margin: 0 4px;
background: transparent;
}
.sidebar-pane .filter-box-container > .filter-box {
margin: 1px 1px 1px 2px;
.styles-filter-engaged {
background-color: rgba(255, 255, 0, 0.5);
}
.sidebar-pane.composite .metrics-and-computed .sidebar-pane-toolbar {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment