Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Some style nits #142

Closed
Janpot opened this issue Feb 8, 2017 · 10 comments
Closed

Some style nits #142

Janpot opened this issue Feb 8, 2017 · 10 comments
Labels

Comments

@Janpot
Copy link

Janpot commented Feb 8, 2017

Some suggestions I've been collecting over the few weeks I've been using this library (really loving it so far):

  1. Use a nicer icon for close button like: ✕ (U+2715).
    screen shot 2017-02-07 at 17 17 28

  2. Use pointer cursor for the rows to indicate they're clickable
    cursor
    Also, the tabs "General", "Request",... don't have a pointer cursor.

  3. make the <h3> in the details view an anchor tag, so it's easier to navigate to it directly and easier to copy with "Copy Link Address"

  4. Sometimes the contrast between text color and background color make tab titles hard to read
    screen shot 2017-02-08 at 16 39 27

@micmro micmro added the ui/ux label Feb 9, 2017
micmro pushed a commit that referenced this issue Feb 14, 2017
@Janpot
Copy link
Author

Janpot commented Feb 17, 2017

@micmro adding another one here about the 'Raw Data' tab.

screen shot 2017-02-17 at 09 53 08

It would look better with a width: 100%
also, the white margins would look better if they had the same color as the <pre>:

screen shot 2017-02-17 at 09 57 44

micmro pushed a commit that referenced this issue Feb 17, 2017
- move `output` style out of mundle css
- add explicit button pointer cursor (do not rely on outside styles)
micmro pushed a commit that referenced this issue Feb 17, 2017
also added some type comments
@micmro
Copy link
Owner

micmro commented Feb 17, 2017

Thanks for the feedback. Some really good ideas.

Only 4. looks like an issue with your local CSS. It seems you give your buttons a colour in a very specific CSS selector. I've given it a higher specificity as part of the link anyway so perhaps it'll be fix this way.

micmro pushed a commit that referenced this issue Feb 17, 2017
also added some type comments
@micmro micmro mentioned this issue Feb 17, 2017
Merged
@soulgalore
Copy link
Collaborator

Wow great changes! One thing about the raw tab: The HAR file can contain HTML in the text element (I can add a link to an example later today) and that HTML will run in the raw tab as it is now and if it is inline CSS, it can change the look and feel of the page.

@soulgalore
Copy link
Collaborator

Let me create a separate issue for that :)

@Janpot
Copy link
Author

Janpot commented Feb 17, 2017

@micmro Strange, my page only has a handful other style rules. Could it be that on the demo page there's a css reset that sets button color to inherit and cursor to pointer?

screen shot 2017-02-17 at 14 26 25

@micmro
Copy link
Owner

micmro commented Feb 17, 2017

Right, I use CSS normalizer in both the preview and the demo page - was not aware that buttons do not inherit the colour by default (learn something new every day :)). Should be fixed with this PR then.

@Janpot
Copy link
Author

Janpot commented Feb 17, 2017

Not sure you want to go that route, but it should be possible with a preprocessor to scope normalize.css to .water-fall-chart and add the result to perf-cascade.css. seems like they do a similar thing here: https://github.com/dperrymorrow/markdown-css/blob/master/src/scoped-normalize.less

@micmro
Copy link
Owner

micmro commented Feb 17, 2017

I had thought about this in the beginning of the project, but decided that most project use some reset anyway - I also wanted to keep the styles as simple and easily over-writable as possible.
So I don't fancy adding a scoped reset too much. However I tried the current PR without the normalizer in chrome and FF and it looks fine - I might remove it for the dev-version to ensure we stay (relatively) reset-safe.

@Janpot
Copy link
Author

Janpot commented Feb 17, 2017

👍 totally reasonable

micmro added a commit that referenced this issue Feb 18, 2017
- make raw view fill the whole holder
- move `output` style out of bundle css
- add explicit button pointer cursor (do not rely on outside styles)
- add header link and row pointer
- added some more type comments
- remove normalize from dev-bundle.
- replace WaterfallEntry's name with url
@micmro
Copy link
Owner

micmro commented Feb 18, 2017

released with v0.5.0

@micmro micmro closed this as completed Feb 18, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants