Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(633)

Unified Diff: third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js

Issue 2146233003: DevTools: [SSP] render selectors effectively (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rename method Created 4 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-add-new-rule-tab-expected.txt ('k') | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js b/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
index a2f9a351584786e5a17aacf3c2a3b950061aaa08..f8dcc43ee7a18798baeacd82c50822abbfe1f09f 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
@@ -566,8 +566,13 @@ WebInspector.StylesSidebarPane.prototype = {
if (this._elementUnderMouse && event.target !== this._elementUnderMouse)
this._discardElementUnderMouse();
this._elementUnderMouse = event.target;
- if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */(event)))
+ if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */(event))) {
this._elementUnderMouse.classList.add("styles-panel-hovered");
+ var selectorElement = this._elementUnderMouse.enclosingNodeOrSelfWithClass("selector");
+ var sectionElement = selectorElement ? selectorElement.enclosingNodeOrSelfWithClass("styles-section") : null;
+ if (sectionElement)
+ sectionElement._section.makeHoverableSelectorsMode();
+ }
},
/**
@@ -1185,6 +1190,14 @@ WebInspector.StylePropertiesSection.prototype = {
return !hideRule;
},
+ makeHoverableSelectorsMode: function()
+ {
+ if (this._hoverableSelectorsMode)
+ return;
+ this._hoverableSelectorsMode = true;
+ this._markSelectorMatches();
+ },
+
_markSelectorMatches: function()
{
var rule = this._style.parentRule;
@@ -1196,29 +1209,72 @@ WebInspector.StylePropertiesSection.prototype = {
if (!this._matchedStyles.hasMatchingSelectors(/** @type {!WebInspector.CSSStyleRule} */(rule)))
return;
- var selectors = rule.selectors;
+ var selectorTexts = rule.selectors.map(selector => selector.text);
+
+ var matchingSelectorIndexes = this._matchedStyles.matchingSelectors(/** @type {!WebInspector.CSSStyleRule} */(rule));
+ var matchingSelectors = new Array(selectorTexts.length).fill(false);
+ for (var matchingIndex of matchingSelectorIndexes)
+ matchingSelectors[matchingIndex] = true;
+
+ var fragment = this._hoverableSelectorsMode ? this._renderHoverableSelectors(selectorTexts, matchingSelectors) : this._renderSimplifiedSelectors(selectorTexts, matchingSelectors);
+ this._selectorElement.removeChildren();
+ this._selectorElement.appendChild(fragment);
+ this._markSelectorHighlights();
+ },
+
+ /**
+ * @param {!Array<string>} selectors
+ * @param {!Array<boolean>} matchingSelectors
+ * @return {!DocumentFragment}
+ */
+ _renderHoverableSelectors: function(selectors, matchingSelectors)
+ {
var fragment = createDocumentFragment();
- var currentMatch = 0;
- var matchingSelectors = this._matchedStyles.matchingSelectors(/** @type {!WebInspector.CSSStyleRule} */(rule));
for (var i = 0; i < selectors.length ; ++i) {
if (i)
fragment.createTextChild(", ");
- var isSelectorMatching = matchingSelectors[currentMatch] === i;
- if (isSelectorMatching)
- ++currentMatch;
- var matchingSelectorClass = isSelectorMatching ? " selector-matches" : "";
- var selectorElement = createElement("span");
- selectorElement.className = "simple-selector" + matchingSelectorClass;
- if (rule.styleSheetId)
- selectorElement._selectorIndex = i;
- selectorElement.textContent = selectors[i].text;
-
- fragment.appendChild(selectorElement);
+ fragment.appendChild(this._createSelectorElement(selectors[i], matchingSelectors[i], i));
}
+ return fragment;
+ },
- this._selectorElement.removeChildren();
- this._selectorElement.appendChild(fragment);
- this._markSelectorHighlights();
+ /**
+ * @param {string} text
+ * @param {boolean} isMatching
+ * @param {number=} navigationIndex
+ * @return {!Element}
+ */
+ _createSelectorElement: function(text, isMatching, navigationIndex)
+ {
+ var element = createElementWithClass("span", "simple-selector");
+ element.classList.toggle("selector-matches", isMatching);
+ if (typeof navigationIndex === "number")
+ element._selectorIndex = navigationIndex;
+ element.textContent = text;
+ return element;
+ },
+
+ /**
+ * @param {!Array<string>} selectors
+ * @param {!Array<boolean>} matchingSelectors
+ * @return {!DocumentFragment}
+ */
+ _renderSimplifiedSelectors: function(selectors, matchingSelectors)
+ {
+ var fragment = createDocumentFragment();
+ var currentMatching = false;
+ var text = "";
+ for (var i = 0; i < selectors.length; ++i) {
+ if (currentMatching !== matchingSelectors[i] && text) {
+ fragment.appendChild(this._createSelectorElement(text, currentMatching));
+ text = "";
+ }
+ currentMatching = matchingSelectors[i];
+ text += selectors[i] + (i === selectors.length - 1 ? "" : ", ");
+ }
+ if (text)
+ fragment.appendChild(this._createSelectorElement(text, currentMatching));
+ return fragment;
},
_markSelectorHighlights: function()
« no previous file with comments | « third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-add-new-rule-tab-expected.txt ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698