PDA

View Full Version : [CLOSED-EXTJSIV-1836][B3] Files referenced in default CSS not in package.



ligaard
25 Apr 2011, 11:04 PM
In ExtJS 4.0.0 the default CSS are referencing some resources that are not in the package. For instance, in the CSS there is a file reference to 'drop-ok.gif', but the file is not in the package.

Below are the filenames, that our build system reports missing, when it minifies, compresses, bundles etc. Base directory for the following paths are: resources/themes/images/default/

mask/mask-bg.gif
btn/btn-default-toolbar-small-disabled-bg.gif
btn/btn-default-toolbar-medium-disabled-bg.gif
btn/btn-default-toolbar-large-disabled-bg.gif
panel/panel-framed-corners.gif
tip/tip-bg.gif
form-invalid-tip/form-invalid-tip-default-bg.gif
form-invalid-tip-header/form-invalid-tip-header-default-bg.gif
form-invalid-tip-header/form-invalid-tip-header-default-corners.gif
form-invalid-tip-header/form-invalid-tip-header-default-sides.gif
window-header-default-top/window-header-default-top-corners.gif
window-header-default-top/window-header-default-top-sides.gif
window-header-default-right/window-header-default-right-corners.gif
window-header-default-right/window-header-default-right-sides.gif
window-header-default-bottom/window-header-default-bottom-corners.gif
window-header-default-bottom/window-header-default-bottom-sides.gif
window-header-default-left/window-header-default-left-corners.gif
window-header-default-left/window-header-default-left-sides.gif
dd/drop-ok.gif

ligaard
26 Apr 2011, 10:57 PM
This applies to both ExtJS 4.0.0 and Beta 3 (and probably earlier versions, too).

rdougan
6 May 2011, 10:52 AM
Thanks for this.

I'm went through the files and removed any references to the ones that are incorrect, but there are a few that stand out:


btn/btn-default-toolbar-small-disabled-bg.gif - should not exist, no background when disabled
btn/btn-default-toolbar-medium-disabled-bg.gif - should not exist, no background when disabled
btn/btn-default-toolbar-large-disabled-bg.gif - should not exist, no background when disabled
panel/panel-framed-corners.gif - should not exist, should have the ui in the file name ('default')
tip/tip-bg.gif - should not exist, no background gradient on tips.
form-invalid-tip/form-invalid-tip-default-bg.gif - fixed
form-invalid-tip-header/form-invalid-tip-header-default-bg.gif - fixed
form-invalid-tip-header/form-invalid-tip-header-default-corners.gif - fixed
form-invalid-tip-header/form-invalid-tip-header-default-sides.gif - fixed
dd/drop-ok.gif - fixed
mask/mask-bg.gif - removed

Have you anything special done that relate to those first few files? Definitely on 4.0.0?

ligaard
8 May 2011, 10:25 PM
If the remaining five gif-files should not exist, then the CSS files that reference them should be corrected, i.e. have the CSS url() reference removed.

It is our build system 'assetgraph' [1] which finds and reports that there are files referenced i the CSS files, that does not exist.

[1] https://github.com/One-com/assetgraph

rdougan
9 May 2011, 10:22 AM
@ligaard

That's what I mean.. they are no longer referenced anywhere. Can you send me your compiled CSS file so I can take a look please?

ligaard
16 May 2011, 12:55 AM
Grepping for e.g. btn-default-toolbal-small-disabled-bg.gif I get these files back:

http-pub/3rdparty/ext4/examples/panel/bubble-panel/resources/css/bubble-panel.css
http-pub/3rdparty/ext4/examples/app/nested-loading/resources/css/nested-loading.css
http-pub/3rdparty/ext4/resources/css/ext-all-access.css
http-pub/3rdparty/ext4/resources/css/ext-all-scoped.css
http-pub/3rdparty/ext4/resources/css/ext-all-debug.css
http-pub/3rdparty/ext4/resources/css/ext-ie-scoped.css
http-pub/3rdparty/ext4/resources/css/ext-ie.css
http-pub/3rdparty/ext4/resources/css/ext-sandbox.css
http-pub/3rdparty/ext4/resources/css/ext-all.css
http-pub/3rdparty/ext4/docs/docs.css

Looking into them, it seems they are all auto-generated, incl. the ones under the examples/ directory. So maybe the class-names are somehow generated by Sass/Compass, and that is why they do not show up until in the built CSS files?

I am no Sass/Compass master, but I would guess that the '@include x-btn( ...' in the file resources/themes/stylesheets/ext4/default/widgets/_button.scss would expand to the offending url..? At least the btn-mixin in resources/themes/stylesheets/ext4/default/mixins/_btn.scss has lines saying something like this: background-image: theme-image($theme-name, 'btn/btn-#{$ui}-disabled-bg.gif');

I hope you have a way of verifying whether my guesses above are in the right direction :-)

dgmelvin
26 May 2011, 2:21 PM
In 4.0.1 the following file is still being referenced.

form-invalid-tip/form-invalid-tip-default-bg.gif

ligaard
31 May 2011, 12:43 AM
The following gif's are still referenced from the CSS in 4.0.1, but not packaged with ExtJS 4.0.1. As I in my previous post, the problem is that the paths are auto-expanded by Compass, when it compiles the CSS (see that post for further info).

Base directory: http-pub/3rdparty/ext/resources/themes/images/default/
Files beneath that directory:
- btn/btn-default-toolbar-small-disabled-bg.gif
- btn/btn-default-toolbar-medium-disabled-bg.gif
- btn/btn-default-toolbar-large-disabled-bg.gif
- tip/tip-bg.gif
- form-invalid-tip/form-invalid-tip-default-bg.gif
- tab-bar/tab-bar-bg.gif

PS: I am glad to see this is verified by others :-)

jonathan.ingram
13 Jun 2011, 3:14 AM
ExtJs v4.0.2: in gray theme reference to "tab-bar-bg.gif". The file is _tabbar.scss. Note: image does not exist for default theme either.

rdougan
13 Jun 2011, 1:49 PM
Thanks for pointing this out. It seems not everything was moved over to check for missing images, this being one of them. You can fix it locally by renaming resources/themes/images/default/tab-bar/tab-bar-default-bg.gif to resources/themes/images/default/tab-bar/tab-bar-bg.gif