From f69c87efdbcaf5337c484f38bacb97869ac30c0b Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Fri, 26 Feb 2016 14:09:00 +0000 Subject: [PATCH 01/57] Bug 1205371 - Multi-state pseudo-class lock indicator. r=gl --- devtools/client/inspector/markup/markup.js | 26 +++++- devtools/client/inspector/markup/markup.xhtml | 1 + devtools/client/themes/markup.css | 84 +++++++++++++++++-- 3 files changed, 103 insertions(+), 8 deletions(-) diff --git a/devtools/client/inspector/markup/markup.js b/devtools/client/inspector/markup/markup.js index 289c7c208f34..19d32be70bcf 100644 --- a/devtools/client/inspector/markup/markup.js +++ b/devtools/client/inspector/markup/markup.js @@ -2502,10 +2502,30 @@ MarkupContainer.prototype = { * viewed node. */ update: function () { - if (this.node.pseudoClassLocks.length) { - this.elt.classList.add("pseudoclass-locked"); + this.elt.classList.remove("pseudoclass-hover"); + this.elt.classList.remove("pseudoclass-active"); + this.elt.classList.remove("pseudoclass-focus"); + this.elt.removeAttribute("pseudoclass-count"); + + let {pseudoClassLocks} = this.node; + + if (pseudoClassLocks.length) { + for (let state of pseudoClassLocks) { + switch (state) { + case ":hover": + this.elt.classList.add("pseudoclass-hover"); + break; + case ":active": + this.elt.classList.add("pseudoclass-active"); + break; + case ":focus": + this.elt.classList.add("pseudoclass-focus"); + break; + } + } + this.elt.setAttribute("pseudoclass-count", pseudoClassLocks.length); } else { - this.elt.classList.remove("pseudoclass-locked"); + this.elt.removeAttribute("pseudoclass-count"); } if (this.editor.update) { diff --git a/devtools/client/inspector/markup/markup.xhtml b/devtools/client/inspector/markup/markup.xhtml index 47943631f6a1..cefed3928346 100644 --- a/devtools/client/inspector/markup/markup.xhtml +++ b/devtools/client/inspector/markup/markup.xhtml @@ -25,6 +25,7 @@