987365 - Add pseudo-class lock options to rule view

Status: VERIFIED FIXED

(DevTools :: Inspector, defect)

Description

[Heather Arthur [:harth]]

I'm getting many reports that people don't know you can lock :hover, etc. on elements in the inspector, and also can't find it after looking for a bit.

Right now we only expose this functionality if you right click on a node in the HTML view or breadcrumbs. I think most people look for it near the rule view, as they want to test :hover for the effect that it has on style.

One option is bug 938202, showing buttons for each along the top of the rule view (or computed view, as webkit does). Another is a settings-type button with the pseudo-classes in a drop-down menu.

Comment 1

[Brian Grinstead [:bgrins]]

Attachment: obvious-ui-for-pseudo-locks-WIP.patch

WIP, just adds a background color to the nodes that have a pseudo class applied in the markup view

Comment 2

[Sebastian Zartner [:sebo]]

(In reply to Brian Grinstead [:bgrins] from comment #1)
> Created attachment 8524834 [details] [diff] [review]
> obvious-ui-for-pseudo-locks-WIP.patch
> 
> WIP, just adds a background color to the nodes that have a pseudo class
> applied in the markup view

As I understand this bug it is rather about updating the UI of the lock options. For the visualization within the markup view I created bug 1120406.

Sebastian

Comment 3

[Brian Grinstead [:bgrins]]

(In reply to Sebastian Zartner [:sebo] from comment #2)
> (In reply to Brian Grinstead [:bgrins] from comment #1)
> > Created attachment 8524834 [details] [diff] [review]
> > obvious-ui-for-pseudo-locks-WIP.patch
> > 
> > WIP, just adds a background color to the nodes that have a pseudo class
> > applied in the markup view
> 
> As I understand this bug it is rather about updating the UI of the lock
> options. For the visualization within the markup view I created bug 1120406.
> 
> Sebastian

Right, I'll attach the patch to bug 1120406 instead

Comment 4

[Brian Grinstead [:bgrins]]

Comment on attachment 8524834 [details] [diff] [review]
obvious-ui-for-pseudo-locks-WIP.patch

Attached this to bug 1120406 instead

Comment 5

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: ruleview-part-2-pseudo-classes-ui.patch

This patch depends on the patch in Bug 1120616

Comment 6

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: ruleview-part-2-pseudo-classes-ui.patch

Comment 7

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: DevEdition-2015-i01-(OSX)-PsuedoClassLock-01.png

Comment 8

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 987365.patch [WIP]

Comment 9

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: Old Mockup

Comment 11

[Tim Nguyen :ntim]

Comment on attachment 8593478 [details] [diff] [review]
987365.patch [WIP]

Review of attachment 8593478 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/devtools/styleinspector/rule-view.js
@@ +2145,5 @@
> +    let isOpen = panel.getAttribute("open");
> +
> +    if (isOpen) {
> +      panel.removeAttribute("open");
> +      panel.style.display = "none";

You can just do panel.hidden = isOpen;

Comment 12

[Gabriel Luong [:gl] (ΦωΦ)]

(In reply to Tim Nguyen [:ntim] from comment #11)
> Comment on attachment 8593478 [details] [diff] [review]
> 987365.patch [WIP]
> 
> Review of attachment 8593478 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> ::: browser/devtools/styleinspector/rule-view.js
> @@ +2145,5 @@
> > +    let isOpen = panel.getAttribute("open");
> > +
> > +    if (isOpen) {
> > +      panel.removeAttribute("open");
> > +      panel.style.display = "none";
> 
> You can just do panel.hidden = isOpen;

I did that initially, but it didn't work.

Comment 13

[Gabriel Luong [:gl] (ΦωΦ)]

I will try again tho

Comment 14

[Brian Grinstead [:bgrins]]

Comment on attachment 8593478 [details] [diff] [review]
987365.patch [WIP]

Review of attachment 8593478 [details] [diff] [review]:
-----------------------------------------------------------------

Looks ready for an icon and tests.  I also think it'd look a little nicer if the bottom border of the search area disappeared when this panel was visible, but we can wait for a proper UX review for that

::: browser/devtools/styleinspector/cssruleview.xhtml
@@ +44,5 @@
>                   class="devtools-searchinput devtools-rule-searchbox"
>                   type="search" placeholder="&userStylesSearch;"/>
>            <button id="ruleview-searchinput-clear" class="devtools-searchinput-clear"></button>
>          </div>
> +        <xul:toolbarbutton id="pseudo-class-panel-toggle"

Can you use the html equivalents for toolbarbutton and checkboxes here?

<button class="devtools-button"></button>

<label><input type="check" /> Text</label>

@@ +48,5 @@
> +        <xul:toolbarbutton id="pseudo-class-panel-toggle"
> +                           class="devtools-toolbarbutton command-button command-button-invertable"/>
> +      </div>
> +      <div id="pseudo-class-panel" class="devtools-toolbar">
> +        <xul:checkbox id="pseudo-hover-toggle" checked="false" label=":hover"/>

I was thinking at first we'd need to have strings in the dtd for this, but :hover/:active/:focus are part of the CSS selectors, so probably don't need to be internationalized.

::: browser/devtools/styleinspector/rule-view.js
@@ +1794,5 @@
>      });
>    },
>  
> +  refreshPseudoClassPanel: function() {
> +    this.hoverCheckbox.checked = false;

When a non element node (like a text node or doctype) is selected, the panel will need to be hidden *or* the controls inside of it disabled.  Basically on the equivalent case of (!inspector.selection.isElementNode()).

I'm thinking keeping track of the state of disabled/enabled on the inputs will be easier.  Otherwise we'd then need to remember if we should re-show the panel when an element is selected again.

Comment 15

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 987365.patch [1.0]

Comment 16

[Gabriel Luong [:gl] (ΦωΦ)]

I should note that the hidden attribute does not work for flexbox containers, but I decided to use the hidden attribute to manage whether or not the panel is displaying instead of creating a new attribute.

Comment 17

[Tim Nguyen :ntim]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=74fa35bf4765

Comment 18

[Tim Nguyen :ntim]

Comment on attachment 8595612 [details] [diff] [review]
987365.patch [1.0]

Review of attachment 8595612 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/devtools/styleinspector/cssruleview.xhtml
@@ +47,5 @@
>          </div>
> +        <button id="pseudo-class-panel-toggle" class="devtools-button"></button>
> +      </div>
> +      <div id="pseudo-class-panel" class="devtools-toolbar">
> +        <label><input id="pseudo-hover-toggle" type="checkbox" value=":hover" />:hover</label>

I don't know if that's any better, but to avoid duplication, you could use ::after to generate the label text.

label::after {
  content: attr(value)
}

::: browser/devtools/styleinspector/rule-view.js
@@ +2156,5 @@
> +  _onTogglePseudoClassPanel: function() {
> +    if (this.pseudoClassPanel.hidden) {
> +      this.pseudoClassPanel.style.display = "-moz-box";
> +    } else {
> +      this.pseudoClassPanel.style.display = "none";

You could also specify this in the CSS instead (with !important if needed).
#pseudo-class-panel[hidden] {
  display: none;
}

This would also be better if we want to add an slide transition to the toolbar later.

Comment 19

[Sebastian Zartner [:sebo]]

(In reply to Tim Nguyen [:ntim] from comment #18)
> Comment on attachment 8595612 [details] [diff] [review]
> 987365.patch [1.0]
> 
> Review of attachment 8595612 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> ::: browser/devtools/styleinspector/cssruleview.xhtml
> @@ +47,5 @@
> >          </div>
> > +        <button id="pseudo-class-panel-toggle" class="devtools-button"></button>
> > +      </div>
> > +      <div id="pseudo-class-panel" class="devtools-toolbar">
> > +        <label><input id="pseudo-hover-toggle" type="checkbox" value=":hover" />:hover</label>
> 
> I don't know if that's any better, but to avoid duplication, you could use
> ::after to generate the label text.
> 
> label::after {
>   content: attr(value)
> }

That's currently not possible, see bug 1157575.

Sebastian

Comment 20

[Tim Nguyen :ntim]

(In reply to Sebastian Zartner [:sebo] from comment #19)
> (In reply to Tim Nguyen [:ntim] from comment #18)
> > Comment on attachment 8595612 [details] [diff] [review]
> > 987365.patch [1.0]
> > 
> > Review of attachment 8595612 [details] [diff] [review]:
> > -----------------------------------------------------------------
> > 
> > ::: browser/devtools/styleinspector/cssruleview.xhtml
> > @@ +47,5 @@
> > >          </div>
> > > +        <button id="pseudo-class-panel-toggle" class="devtools-button"></button>
> > > +      </div>
> > > +      <div id="pseudo-class-panel" class="devtools-toolbar">
> > > +        <label><input id="pseudo-hover-toggle" type="checkbox" value=":hover" />:hover</label>
> > 
> > I don't know if that's any better, but to avoid duplication, you could use
> > ::after to generate the label text.
> > 
> > label::after {
> >   content: attr(value)
> > }
> 
> That's currently not possible, see bug 1157575.
> 
> Sebastian
Oh, I didn't notice the value was on input.

Comment 21

[Sebastian Zartner [:sebo]]

(In reply to Tim Nguyen [:ntim] from comment #20)
> (In reply to Sebastian Zartner [:sebo] from comment #19)
> > (In reply to Tim Nguyen [:ntim] from comment #18)
> > > Comment on attachment 8595612 [details] [diff] [review]
> > > 987365.patch [1.0]
> > > 
> > > Review of attachment 8595612 [details] [diff] [review]:
> > > -----------------------------------------------------------------
> > > 
> > > ::: browser/devtools/styleinspector/cssruleview.xhtml
> > > @@ +47,5 @@
> > > >          </div>
> > > > +        <button id="pseudo-class-panel-toggle" class="devtools-button"></button>
> > > > +      </div>
> > > > +      <div id="pseudo-class-panel" class="devtools-toolbar">
> > > > +        <label><input id="pseudo-hover-toggle" type="checkbox" value=":hover" />:hover</label>
> > > 
> > > I don't know if that's any better, but to avoid duplication, you could use
> > > ::after to generate the label text.
> > > 
> > > label::after {
> > >   content: attr(value)
> > > }
> > 
> > That's currently not possible, see bug 1157575.
> > 
> > Sebastian
> Oh, I didn't notice the value was on input.

And I didn't notice that pseudo-elements are invalid on <input>s. Learned something. Thanks!

Sebastian

Comment 22

[Brian Grinstead [:bgrins]]

Comment on attachment 8595612 [details] [diff] [review]
987365.patch [1.0]

Review of attachment 8595612 [details] [diff] [review]:
-----------------------------------------------------------------

Looking good.  Needs a simple rebase, and of course an icon and a pass through on UX.

::: browser/devtools/styleinspector/rule-view.js
@@ +1797,5 @@
>      });
>    },
>  
> +  refreshPseudoClassPanel: function() {
> +    this.hoverCheckbox.checked = false;

Nit:

this.hoverCheckbox.checked = this.hoverCheckbox.disabled = false;
this.activeCheckbox.checked = this.activeCheckbox.disabled = false;
this.focusCheckbox.checked = this.focusCheckbox.disabled = false;

@@ +2156,5 @@
> +  _onTogglePseudoClassPanel: function() {
> +    if (this.pseudoClassPanel.hidden) {
> +      this.pseudoClassPanel.style.display = "-moz-box";
> +    } else {
> +      this.pseudoClassPanel.style.display = "none";

I agree - if possible please move the display toggling into CSS.

::: browser/devtools/styleinspector/ruleview.css
@@ +28,5 @@
>    width: 100%;
>    display: -moz-box;
>  }
>  
> +#pseudo-class-panel {

I'd say set -moz-user-select: none on the labels - I'm getting their text highlighted when clicking on and off the checkbox.

::: browser/devtools/styleinspector/style-inspector.js
@@ +73,5 @@
>  
>      if (!this.inspector.selection.isConnected() ||
>          !this.inspector.selection.isElementNode()) {
>        this.view.selectElement(null);
> +      this.view.refreshPseudoClassPanel();

Regarding the three calls here, I'd prefer to see this handled in `selectElement` / `refresh` directly within the rule view if possible so the callers don't need to remember to do this whenever calling either of those functions.

::: browser/devtools/styleinspector/test/browser_ruleview_pseudo_lock_options.js
@@ +46,5 @@
> +  yield togglePseudoClass(inspector, view, view.focusCheckbox);
> +  yield assertPseudoAdded(inspector, view, ":focus");
> +  yield togglePseudoClass(inspector, view, view.focusCheckbox);
> +  yield assertPseudoRemoved(inspector, view);
> +

Probably should add one more test case that enables all three at once (to make sure setting one doesn't cancel the others).

Comment 23

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 987365.patch [2.0]

Comment 24

[Tim Nguyen :ntim]

Comment on attachment 8597019 [details] [diff] [review]
987365.patch [2.0]

Review of attachment 8597019 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/devtools/styleinspector/rule-view.js
@@ +1151,5 @@
>    this.searchClearButton.addEventListener("click", this._onClearSearch);
> +  this.pseudoClassToggle.addEventListener("click", this._onTogglePseudoClassPanel);
> +  this.hoverCheckbox.addEventListener("click", this._onTogglePseudoClass);
> +  this.activeCheckbox.addEventListener("click", this._onTogglePseudoClass);
> +  this.focusCheckbox.addEventListener("click", this._onTogglePseudoClass);

It would be better to watch for the change event here, as it also handles the case where you use the keyboard to check the box.

Comment 25

[Gabriel Luong [:gl] (ΦωΦ)]

(In reply to Tim Nguyen [:ntim] from comment #24)
> Comment on attachment 8597019 [details] [diff] [review]
> 987365.patch [2.0]
> 
> Review of attachment 8597019 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> ::: browser/devtools/styleinspector/rule-view.js
> @@ +1151,5 @@
> >    this.searchClearButton.addEventListener("click", this._onClearSearch);
> > +  this.pseudoClassToggle.addEventListener("click", this._onTogglePseudoClassPanel);
> > +  this.hoverCheckbox.addEventListener("click", this._onTogglePseudoClass);
> > +  this.activeCheckbox.addEventListener("click", this._onTogglePseudoClass);
> > +  this.focusCheckbox.addEventListener("click", this._onTogglePseudoClass);
> 
> It would be better to watch for the change event here, as it also handles
> the case where you use the keyboard to check the box.

Hmm.. it was my understanding the click events also handles keyboard actions. http://www.w3.org/TR/WCAG20-TECHS/SCR35

Comment 26

[Gabriel Luong [:gl] (ΦωΦ)]

(In reply to Gabriel Luong [:gl] from comment #25)
> (In reply to Tim Nguyen [:ntim] from comment #24)
> > Comment on attachment 8597019 [details] [diff] [review]
> > 987365.patch [2.0]
> > 
> > Review of attachment 8597019 [details] [diff] [review]:
> > -----------------------------------------------------------------
> > 
> > ::: browser/devtools/styleinspector/rule-view.js
> > @@ +1151,5 @@
> > >    this.searchClearButton.addEventListener("click", this._onClearSearch);
> > > +  this.pseudoClassToggle.addEventListener("click", this._onTogglePseudoClassPanel);
> > > +  this.hoverCheckbox.addEventListener("click", this._onTogglePseudoClass);
> > > +  this.activeCheckbox.addEventListener("click", this._onTogglePseudoClass);
> > > +  this.focusCheckbox.addEventListener("click", this._onTogglePseudoClass);
> > 
> > It would be better to watch for the change event here, as it also handles
> > the case where you use the keyboard to check the box.
> 
> Hmm.. it was my understanding the click events also handles keyboard
> actions. http://www.w3.org/TR/WCAG20-TECHS/SCR35

Just tested to confirm that click events also works when hitting the space bar on the selected checkbox.

Comment 27

[Tim Nguyen :ntim]

Attachment: pseudo-class.svg

Official icon from shorlander :)

Use #pseudo-class as location hash for the normal state and #pseudo-class-checked for the checked state.

Comment 28

[Gabriel Luong [:gl] (ΦωΦ)]

(In reply to Tim Nguyen [:ntim] (limited availability) from comment #27)
> Created attachment 8605952 [details]
> pseudo-class.svg
> 
> Official icon from shorlander :)
> 
> Use #pseudo-class as location hash for the normal state and
> #pseudo-class-checked for the checked state.

Thanks!

Comment 29

[Tim Nguyen :ntim]

Attachment: pseudo-class.svg

The previous SVG had a small issue, fixed it.

Comment 30

[Tim Nguyen :ntim]

Attachment: v3

Rebased and included the asset

Comment 31

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 987365.patch [4.0]

Added the transition and justify text alignment. In addition, I needed to change the usage of -moz-box to flexbox, which was needed to justify the text. I discussed with shorlander yesterday and we agreed that justifying the text would be best.

Comment 32

[Gabriel Luong [:gl] (ΦωΦ)]

Comment on attachment 8613942 [details] [diff] [review]
987365.patch [4.0]

Most of the code except the button toggle icon and panel checkbox and label css alignments were already reviewed by bgrins. I think we should get +ui-review and finalize the css changes before proceeding with the final review.

Comment 33

[Gabriel Luong [:gl] (ΦωΦ)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=aeaf6b2fc2c1

Comment 34

[Stephen Horlander [:shorlander]]

Comment on attachment 8613942 [details] [diff] [review]
987365.patch [4.0]

Review of attachment 8613942 [details] [diff] [review]:
-----------------------------------------------------------------

This looks great! Love the transition and the spacing for the toggles looks good.

Comment 35

[Brian Grinstead [:bgrins]]

Comment on attachment 8613942 [details] [diff] [review]
987365.patch [4.0]

Review of attachment 8613942 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/devtools/styleinspector/test/browser_ruleview_pseudo_lock_options.js
@@ +28,5 @@
> +  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
> +  let {toolbox, inspector, view} = yield openRuleView();
> +  yield selectNode("div", inspector);
> +
> +  info("Toggle the pseudo class panel open");

We could assert before clicking that's it's hidden to start

::: browser/themes/shared/devtools/toolbars.inc.css
@@ +367,5 @@
>  }
>  
>  /* Searchbox is a div container element for a search input element */
>  .devtools-searchbox {
> +  display: flex;

This breaks the font preview search box -  #preview-text-input and .preview-input-toolbar both need to be switched to display: flex.

Unfortunately with these changes we now have to support both display: flex and display: -moz-box on the .devtools-toolbar class.  However, converting them all to display: flex will possibly break the other (xul based) tools.

Maybe we could do something fancy with CSS namespaces to automatically convert the HTML versions to do `width: 100%; display: flex`, or have an additional class for devtools-toolbar-flex or something that does this when opting in (which we could do for rule-view, computed-view, and font-inspector)

Comment 36

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 987365.patch [5.0]

- Added the extra assertion
- the .devtools-toolbar display: flex changes should only affect the rule view and computed view. There would be issues only if someone started using xul in the rule view and computed view or if the ruleview.css / computedview.css got imported into a xul document, but that is unlikely to happen hopefully.

Comment 37

[Brian Grinstead [:bgrins]]

Attachment: font-inspector-textbox.png

Screenshot of the font inspector with the patch applied

Comment 38

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 987365.patch [6.0]

Fixed a css bug where the rule view .devtools-toolbar was no longer aligned with computed view and font inspector because of removing the border-bottom-width

Comment 39

[Brian Grinstead [:bgrins]]

Comment on attachment 8615011 [details] [diff] [review]
987365.patch [6.0]

Review of attachment 8615011 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/devtools/styleinspector/rule-view.js
@@ +1915,5 @@
>        return this._populate(true);
>      });
>    },
>  
> +  refreshPseudoClassPanel: function() {

I think this function isn't being called in some cases for non-element nodes.

As an example, go to http://bgrins.github.io/devtools-demos/inspector/pseudo.html and select the <h1> and set :hover from the checkbox.  Then select the <!-- testing pseudo elements --> comment below.  Notice that the hover box is still checked (and enabled).

Can you reproduce this?  If so, can you take a look at fixing this (and adding a test case for it).  Everything else in the patch looks good to go

Comment 40

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 987365.patch [7.0]

Comment 41

[Gabriel Luong [:gl] (ΦωΦ)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=8df4b0f10735

Comment 42

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 987365.patch [8.0]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=a1a0f93dc6cd

Comment 43

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 987365.patch [9.0]

Comment 44

[Tim Nguyen :ntim]

Comment on attachment 8616146 [details] [diff] [review]
987365.patch [9.0]

Review of attachment 8616146 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/themes/shared/devtools/images/pseudo-class.svg
@@ +1,1 @@
> +<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

nit : This needs a license header :
<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

Comment 45

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 987365.patch [10.0]

Added license. Thanks ntim

Comment 46

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 987365.patch [11.0]

Added check for elementStyle in refreshPseudoClassPanel

Comment 47

[Gabriel Luong [:gl] (ΦωΦ)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=968918b18609

Comment 48

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/28828f076fca

Comment 49

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/28828f076fca

Comment 50

[Alfred Kayser]

Two comments:
1. <label><input id="pseudo-hover-toggle" type="checkbox" value=":hover" />:hover</label>
should be:
<div><input id="pseudo-hover-toggle" type="checkbox" value=":hover" /><label>:hover</label></div>
(instead of div, span could also be used)

In order to be able to style the label in case of hover, checked, etc of the input, the label needs to be after the input.

2. The <label>..</label> doesn't span the whole available space, and it doesn't have any hover/active styling, so it is unclear when it is hittable..

Comment 51

[Will Bamberg [:wbamberg]]

I've updated https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Setting_hover_active_focus.

Let me know if this is all right!

Comment 52

[Gabriel Luong [:gl] (ΦωΦ)]

(In reply to Will Bamberg [:wbamberg] from comment #51)
> I've updated
> https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/
> Examine_and_edit_CSS#Setting_hover_active_focus.
> 
> Let me know if this is all right!

Hi Will,

That looks right. I think the screenshots should be updated since the add rule button was also added and the styling of the button was changed.

Thanks!

Comment 53

[Gabriel Luong [:gl] (ΦωΦ)]

Release Note Request (optional, but appreciated)
[Why is this notable]: New toolbar panel
[Suggested wording]: Easily set pseudoclasses through the new pseudoclass panel in the Inspector
[Links (documentation, blog post, etc)]: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Setting_hover_active_focus

Comment 54

[Will Bamberg [:wbamberg]]

(In reply to Gabriel Luong [:gl] from comment #52)
> (In reply to Will Bamberg [:wbamberg] from comment #51)
> > I've updated
> > https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/
> > Examine_and_edit_CSS#Setting_hover_active_focus.
> > 
> > Let me know if this is all right!
> 
> Hi Will,
> 
> That looks right. I think the screenshots should be updated since the add
> rule button was also added and the styling of the button was changed.
> 
> Thanks!

Thanks Gabriel. I've replaced all the screenshots in that page as part of general Firefox 41 updates.

Comment 55

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

Added to FF41 release notes in Nucleus.

Comment 56

[Saheda Reza [:Antora]]

I reproduced this bug on Firefox Nightly Version 31.0a1


It's verified and fixed on Latest Beta
 Build ID 	20150907144446
 User Agent 	Mozilla/5.0 (Windows NT 6.1; rv:41.0) Gecko/20100101 Firefox/41.0

Tested OS-- windows7 32bit

Comment 57

[Brian Grinstead [:bgrins]]

(In reply to Saheda Reza [:Antora] from comment #56)
> I reproduced this bug on Firefox Nightly Version 31.0a1
> 
> 
> It's verified and fixed on Latest Beta
>  Build ID 	20150907144446
>  User Agent 	Mozilla/5.0 (Windows NT 6.1; rv:41.0) Gecko/20100101
> Firefox/41.0
> 
> Tested OS-- windows7 32bit

Thanks!