Web Inspector: Editing a nested @media rule's media type from style details panel errs

[Qianlang Chen]

Created attachment 470631 [details]
Demo test case

If you have a nested @media rule like this:
    body {
        @media (min-width: 800px) {
            color: navy;
        }
    }

Then from the inspector's style details panel, editing the `(min-width: 800px)` part is allowed, but (in local build) the inspector throws an error when you press Enter or change input focus:
    TypeError:​ undefined is not an object (evaluating 'this._selectorTextField.startEditing')​ (at SpreadsheetCSSStyleDeclarationSection.js:​832:​36)​
        _handleSpreadsheetGroupingFieldWillNavigate @ SpreadsheetCSSStyleDeclarationSection.js:​832:​36
        spreadsheetRuleHeaderFieldWillNavigate @ SpreadsheetCSSStyleDeclarationSection.js:​243:​61
        _handleBlur @ SpreadsheetRuleHeaderField.js:​120:​69
        blur @ [native code]​
        _handleKeyDown @ SpreadsheetRuleHeaderField.js:​141:​31

Notably, nesting the @media rule the opposite way like this works just fine:
    @media (min-width: 800px) {
        body {
            color: navy;
        }
    }

No issues while editing any part of that style.

See attached for a test case.

[Radar WebKit Bug Importer]

<rdar://problem/125523969>