Bug 174838 – Web Inspector: Styles: Add pre-populated data to spreadsheet-style view

• Component: Web Inspector
• Status: RESOLVED FIXED

[Nikita Vasilyev]

Implement a spreadsheet-style view. Use a hardcoded data for now.

[Radar WebKit Bug Importer]

<rdar://problem/33523220>

[Nikita Vasilyev]

Created attachment 317270 [details]
Patch

Same as a static HTML page:
http://nv.github.io/webkit-inspector-bugs/styles-redesign/styles.html

[Matt Baker]

The style/layout of the static demo page looks good. What is the goal of this patch? What is the benefit of using temporary data, instead of hooking up the new UI to existing data in pieces?

[Nikita Vasilyev]

Hooking up the new UI to existing data, even in pieces, is more time consuming process. I wanted to make
sure there's nothing conceptually wrong in UI and we're on the same page, before I spend too much time working on it.

I'll precede hooking up the UI to existing data when this patch lands.

[Nikita Vasilyev]

> I'll precede hooking up the UI to existing data when this patch lands.

... in Bug 175343 - Web Inspector: Styles Redesign: hook up real data to spreadsheet style editor

[Matt Baker]

Comment on attachment 317270 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=317270&action=review

> Source/WebInspectorUI/ChangeLog:9
> +        Add a static HTML of three hard-coded CSS rules.

A brief description of what this patch is for would help. Maybe start with something like: "This patch adds static content to the experimental RulesStyleSpreadsheetDetailsPanel..."

> Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.css:38
> +    float: left;

Make sure this layout works in both LTR and RTL. I think this would be a good thing to do from the very beginning, during this prototyping phase.

> Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.css:74
> +    padding-left: 16px;

RTL support.

> Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.css:87
> +    float: right;

RTL support.

> Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.css:113
> +    clear: left;

RTL support.

> Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.css:121
> +    left: 0;

RTL support.

[Matt Baker]

Please add screenshots showing the new UI in the Inspector. A RTL screenshot would be great.

[Nikita Vasilyev]

Adding RTL support isn't straightforward. I think it should be a separate task.

CSS code is LTR. We don't align right anything in the current styles sidebar. See rdar://problem/31961976.

I think we can do a way better job with RTL using a spreadsheet model. We can flip name and value cells, for example. That being said, it isn't a trivial as replacing all "left" properties with right.

[Nikita Vasilyev]

Created attachment 317642 [details]
[Image] With patch applied

[Nikita Vasilyev]

Created attachment 317643 [details]
Patch

I only updated the changelog description.

[Nikita Vasilyev]

I (In reply to Nikita Vasilyev from comment #8)
> Adding RTL support isn't straightforward. I think it should be a separate
> task.

I just filed Bug 175357 - Web Inspector: Styles redesign: add RTL support

[Matt Baker]

Comment on attachment 317643 [details]
Patch

r=me

[WebKit Commit Bot]

Comment on attachment 317643 [details]
Patch

Clearing flags on attachment: 317643

Committed r220462: <http://trac.webkit.org/changeset/220462>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Nikita Vasilyev]

Created attachment 317759 [details]
Patch

[Nikita Vasilyev]

Comment on attachment 317759 [details]
Patch

I'm sorry, wrong browser tab.