firebug / pixel-perfect Goto Github PK

When an SVG image is added and scaled, it is displayed pixelated. As it is a vector format, it should be displayed as such allowing to be Pixel Perfect. :-)

Tested with Firefox 39.0a1 + Pixel Perfect 2.0b1 on Win8.1.

Sebastian

Pixel perfect should follow the developer's theme preference.

Instead of having a Lock checkbox within the layer options there should be a lock symbol besides the image in the layer list below the option for toggling the visibility.

A bigger version of the lock symbol used within Firebug's DOM panel would fit well here: (Good, that I created it as SVG! :-) )

Sebastian

It should be possible to add layers by dragging an image (e.g. from the file explorer) and dropping it over the Pixel Perfect dialog.

Sebastian

running jpm run -b nightly the following is returned:

console.warn: pixel-perfect: Warning: Unsupported style property text-align. Did you mean textAlign?

Currently all layers have fixed positioning. This makes it impossible to style layouts, which don't completely fit into the viewport.

So there should be an option to switch between absolute and fixed positioning. This should probably be a global option, i.e. affect all layers.

Positioning should be absolute by default. (issue #18)

Sebastian

When you click on a layer within the page a dashed border is displayed. This border changes the position of the image by one pixel horizontally and vertically.

I suggest to use outline instead of border.

Sebastian

See https://bugzilla.mozilla.org/show_bug.cgi?id=1139186
We should utilize new API if possible.

Honza

The user should have control over the order of the layers to solve overlaying problems.

This could be achieved via allowing to drag & drop within the list of layers or displaying buttons to move the selected layer up or down.

Sebastian

As far as I saw there is no description so far on how to configure a development environment for Pixel Perfect. There are only vague hints by the links provided within the Further Resources section of the README.md.

Like for Firebug.next there should be the detailed steps described how to configure your system to be able to hack on Pixel Perfect.

Sebastian

When the user clicks on the layer within the list of layers the related layer within the page should also be highlighted to make it easier to spot its location.

This highlighting should be temporary, either as long as the mouse button is pressed or for a short timespan.

Sebastian

It should be possible to create list of layers for specific domains.

Honza

Currently there is only an option to Add a layer using a local file.

1. 
   The first start overlay button needs to change so that when you click on it a submenu appears and then choose which method to pull the file in. If you choice URL you should be able to paste a URL into it
2. 

The same functionality needs to added to the "Add Layer" under the existing layer.

Instead of having a text input for the size of the layer, it would make more sense to have an <input type="number"> or a slider like for the opacity, so it's easier to adjust the value.

Also it is not possible to choose a float value, so you can't size the layer to e.g. half of its original size or to 150%.

Sebastian

Once layers are positioned absolute (issue #18) it should be possible to scroll the page to display a specific layer in case it is out of view.

The option for this could be within a context menu for each layer, below the other options for the layer or besides the layer within the layer list.

Sebastian

We need tests to cover Pixel Perfect functionality:

1. Add/Remove new layer
2. Changing opacity/position/scale/lock
3. Drag and drop

(should be implemented as three separate tests)

Honza

The UI of Pixel Perfect should be integrated into the DevTools like earlier versions of it were integrated in Firebug as a separate panel.

Sebastian

We should remove the update URL from the package.json file.AMO doesn't allow it and want updates be server from AMO.

Honza

DOMContentLoaded listener in popup-frame-script.js needs to check that the window has the expected URL, or at least to unregister itself after the first response, so that it doesn't wind up injecting a privileged function into a remote document if the window somehow navigates somewhere unexpected.

(from AMO review)

Honza

Running jpm run -b nightly throws this warning in the terminal

console.warn: pixel-perfect: Passing a DOM node to Panel.show() method is an unsupported feature that will be soon replaced. See: https://bugzilla.mozilla.org/show_bug.cgi?id=878877

Already reference here: https://github.com/firebug/pixel-perfect/blob/master/lib/first-run.js#L62-68

The text in the notification shown when you run Pixel Perfect for the first time is currently hardcoded into the related JavaScript file. It should be changed, so it can be localized into other languages.

Sebastian

Maybe hide the Pixel Perfect window when the user switches tabs, then show it back if the tab has Pixel Perfect on.

As soon as we have tests (issue #34) we want to integrate with Travis https://travis-ci.org/

Honza

1. Create a layer
2. Navigate to another page
3. Go back, the layer is duplicated in the page -> BUG

Honza

When Pixel Perfect is installed while the DevTools are opened, the Start Pixel Perfect button in the popup doesn't do anything. Also the toolbar button doesn't work when DevTools are already opened

Tested with Firefox 39.0a1 + Pixel Perfect 2.0b1 on Win8.1.

Sebastian

I'm not sure how do-able this would be but perhaps overlaying a grid over the page to help positioning. Just thinking in terms of when you design in applications like GIMP/Photoshop.

Could even go down the router of "snap to grid" so you do not need to be so precise.

Any thoughts?

I have just opened up nightly( using JPM run -b nightly) and do not have a homepage set after a little while this message pops up at the bottom.

A layer should allow to be resized within the page using handles on its borders/corners like graphics programs do it.

Sebastian

In the layers properties there should be a button to "Clone" that layer. Should be as simple as just duplicating that layer and appending it to the layers list

Sometimes 'Pixel Perfect' is written with space between both words, sometimes not. See the about dialog:

It should be changed, so it is 'Pixel Perfect' (with space) everywhere.

Tested with Firefox 39.0a1 + Pixel Perfect 2.0b1 on Win8.1.

Sebastian

overlay image displayed on browser window does not moves fluently when image is drag around. Its like flickering of image at end of drag. It kind a moves back and forth for while. Previously in earlier version of pixel perfect image moves easily in all direction.

i have no button in firebug and the layis not scrolling with broser scrolling.
and if i deactivate the mozilla developer toolbar the layer is also close

In the nightly build, if you open up the Browser Toolbox Pixel Perfect panel hides itself but when you go back to the nightly window the panel reappears. however then I can inspect the panel but the Browser toolbox has to be minimised. I cannot get both of them to be visible on the screen at the same time.

We are using small amount of styles from bootstrap.css (perhaps only img-thumbnail rule)
The entire data/bootstrap directory should be removed.

Honza

The checkbox besides each layer is enough. The second Visible checkbox within the options is unnecessary and should be removed.

Sebastian

The notification panel displayed just after installation needs a bit more vertical space on OS X. The 'Start Pixel Perfect' button isn't fully visible

Honza

The positioning of layers should be absolute by default, not fixed as it is currently the case.
Having fixed positioning for layers causes problems when you have layouts, which don't completely fit into the viewport.

Sebastian

Every popup panel has currently its own instance of the Store object (PixelPerfectStore). This is wrong since adding/removing a layer in another tab (and another Pixel Perfect popup window) doesn't update other popup windows. All popup windows (from the same domain as soon as issue #40 is fixed) should be properly updated.

The store is currently initialized in PixelPerfectPopup ctor, it should be probably done in PixelPerfectToolboxOverlay.togglePixelPerfectPopup when the first PPP (pixel perfect popup) is opened for the first time.

Honza

there should be some options buttons to align overlay image in browser window.
something like

It will help to adjust overlay image in browser window by align to left, center, right also top, middle, bottom. It will be a big help for developer.

viplab

The subject pretty mush says it all. Clicking the 'Start Pixel Perfect" button doesn't open the Pixel Perfect popup panel on OSX.

Honza

The Pixel Perfect window should be resizable, so the user doesn't have to scroll the list of layers when it contains multiple layers.

This issue will be obsolete in case the UI will be integrated into the DevTools (issue #2).

Sebastian

Clicking on a label should focus the input field it relates to.

Sebastian

The Add Layer button should be fixed at the bottom of the layer list, so it's always visible and the user doesn't have to scroll the list to add a new layer.

Sebastian

When a layer is scaled its position does not correspond to the values within the X and Y field anymore. This is, because the layer is scaled around its center without adjusting its x and y values.

So either the x and y values need to be changed accordingly when scaling the layer or the layer needs to be scaled only to the right and bottom. The latter probably makes more sense as people normally move the layer to a specific position.

Tested with Firefox 39.0a1 + Pixel Perfect 2.0b1 on Win8.1.

Sebastian

When switching from another theme to the Firebug theme misses to add the Pixel Perfect button to the toolbar of the Style Editor panel.

Tested with Firefox 39.0a1 + Firebug 3.0a9 + Pixel Perfect 2.0b1 on Win8.1.

Sebastian

Instead of having a checkbox for toggling the visibility of a layer an eye symbol should be used like within graphics programs, the DevTools (used for black boxing) or within old versions of Pixel Perfect.

The black box icon of the DevTools would fit very well here, I think:

Or the related Firebug 3.0 icon:

That will also make it easier to hit, because checkboxes are relatively small.

Sebastian

The text in the notification shown when you run Pixel Perfect for the first time says:

Pixel Perfect extension has been originally introduced for Firebug. This new version is built on top of native Firefox developer tools with improved user experience and features. Among other things, remote devices such as mobile phones also supported. Enjoy!

It should say:

Pixel Perfect has been originally introduced as an extension for Firebug. This new version is built on top of the native Firefox developer tools with improved user experience and features. Among other things, remote devices such as mobile phones are also supported. Enjoy!

Tested with Firefox 39.0a1 + Pixel Perfect 2.0b1 on Win8.1.

Sebastian

The About Pixel Perfect dialog is a bit to small, so it's showing a scrollbar.

It should be made a bit higher, so everything is visible.

Sebastian