1230583 - JSON Viewer: General UI polish / fixes

Status: RESOLVED WORKSFORME

(DevTools :: JSON Viewer, defect, P3)

Description

[Jan Honza Odvarko [:Honza] (always need-info? me)]

## General UI polish / fixes

- The Save buttons (in the JSON and Raw Data tabs) don’t seem to work.
- In the JSON tab, the Filter input box has square corners and italic text, vs. the filter/search input boxes in the DevTools which have rounded corners and regular text (at least on OSX).
- In the Headers tab, the headings have a [-] icon but can’t be collapsed (not that collapsing would be that useful here).
- Right-to-left support needs some tweaks. Main bug: in the JSON tab, the toolbar buttons disappear behind the search box.

See also: https://bugzilla.mozilla.org/show_bug.cgi?id=1223143#c7

Honza

Comment 1

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: bug1230583-1.patch

Comment 3

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Comment on attachment 8697269 [details] [diff] [review]
bug1230583-1.patch

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

JSON view filter box still does not match rest of DevTools:

* Needs rounded corners
* Needs monospace font

While testing this, I noticed also that in the headers view, the name and value are not vertically aligned (the value is higher).  Will attach screenshot.

::: devtools/client/jsonview/components/reps/rep-utils.js
@@ +23,5 @@
>    }
>    return result;
>  }
>  
> +function cancelEvent(event) {

What is the purpose of this file?  These two methods seems unrelated, so is it just a dumping ground of random functions?

::: devtools/client/jsonview/css/dom-tree.css
@@ +133,5 @@
>  }
>  
> +/* RTL */
> +
> +[dir='rtl'] .memberRow.hasChildren > .memberLabelCell > .memberLabel,

All existing usages of this RTL selector in Gecko use either

  [dir=rtl]

or

  [dir="rtl"]

Either seems fine, but let's avoid introducing the single quote version here.

@@ +141,5 @@
> +}
> +
> +[dir='rtl'] .memberRow.hasChildren.opened > .memberLabelCell > .memberLabel,
> +[dir='rtl'] .memberRow.cropped.opened > .memberLabelCell > .memberLabel {
> +  background-image: url('twisty-open.svg');

Isn't this the same as the LTR case above?  Remove if so.

Comment 4

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Attachment: Header name / value misalignment

Comment 5

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: bug1230583-2.patch

Patch still in progress, not ready for the review yet (but close).

Honza

Comment 6

[Jan Honza Odvarko [:Honza] (always need-info? me)]

I am closing this one since:

* Save buttons are already fixed as part of another bug report
* Design of the filter box has been unified with DevTools
* Toggle buttons (in Headers tab) are removed
* RTL has much better support now.

Honza