It seems to me that the pseudo-classes -moz-focus-inner and -moz-focusring have the same task.
Although I often see the property -moz-focus-inner in examples, it does not seem to have any effect on the formatting of form elements, unlike -moz-focusring (at least under Firefox 66 / Win).
Can someone explain to me what the difference between the two properties is and if and when I need -moz-focus-inner?
-moz-focusring is a Mozilla only, non-standard pseudo-class extension that should not be used in production because it's not on a standards track. Mozilla suggests that some developers have used it to differeniate between users focusing via mouse click versus focusing via keyboard tabbing. focusring hasn't been defined in any specification yet. It only matches if the element already has focus and the dev determines that a focus ring should be drawn around it.
-moz-focus-inner is an active layer (their implmentation of focus-inner) that adds a border to focused buttons, not in replacement of the default focus outline but in addition to it (in the form of a inner dotted black border). This appears to be typically unwanted behavior that can be eliminated by using normalize.css for example, or just writing your own custom rule:
button::-moz-focus-inner {
border: 0;
}
As to why Mozilla has implemented -moz-focus-inner in a way that annoys lots of developers? I guess that's down to its being a project with a long history of contributions and experiments. But the main difference, from a development perspective, is that you typically will need to "deal" with -moz-focus-inner in some way, probably by eliminating it via custom CSS rule (unless you want the additional FF version of this visual focus indicator), whereas -moz-focusring is representative of a non-standard psuedo-class being discussed by the Working Group that may become part of the specification at some future point (Selectors 4 or 5).
Sources