В какой-то момент во всеми любимом Web Developer'е перестали показываться фоновые картинки в разделе Графика → Информация об изображениях. Если, к примеру, взглянуть на информацию об изображениях сайта webo.in, мы не увидим там ничего, кроме иконки. Куда же делись иконки меню, логотип, баннер и Ивашка из Дворца Пионеров? На офсайте есть запись об этом баге и несколько тем на форуме, одна аж 2006 года.
Попробуем это поправить.
Заходим в папку профиля, далее extensions/{c45c406e-ab73-11d8-be73-000a95be3b12}. Это папка расширения. Интересующий нас функционал в виде скриптов упакован в chrome/webdeveloper.jar, распаковываем его (в chrome должны появится папки content, locale и skin). Теперь нужно сделать так, чтобы браузер использовал именно распакованный контент, для этого подкорректируем chrome.manifest в корневой папке, заменив там все упоминания jar:chrome/webdeveloper.jar! на просто chrome. Для верности удаляем или переименовываем .jar-файл, перезапускаем браузер и проверяем работу расширения. Пока все работает.
Теперь обратим внимание на папку content, которую мы извлекли из .jar-архива, точнее, на содержимое вложенной в нее папки webdeveloper. Можно залезть в файл webdeveloper.xul, который мы видели в манифесте в строке overlay, найти в нем нужный пункт меню и посмотреть, что у него прописано в oncommand. А можно заметить среди прочего файл images.js (скорее всего, именно он отвечает за операции с графикой) и поискать в нем information. И тот, и другой путь быстро приводят нас к функции webdeveloper_viewImageInformation(), в которой мы видим следующую строку:
Находим эту функцию в файле content/webdeveloper/common/dom.js и смотрим на код, отвечающий за выборку фоновых картинок:
Очевидно, загвоздка где-то в этом месте. Я не умею отлаживать расширения, поэтому просто добавил пару алертов и выяснил, что проверяемое свойство primitiveType всегда undefined. Посмотрим на документацию: у объекта CSSValue имеется свойство cssValueType, и, по логике вещей и автора расширения, у background-image оно должно быть равно CSS_PRIMITIVE_VALUE (1). Однако на практике оно оказывается равно CSS_VALUE_LIST (2), почему — непонятно. Но бог с ним, посмотрим на интерфейс CSSValueList, который реализует наш объект в этом случае. У него имеется метод item(), возвращающий объект CSSValue, им и воспользуемся:
Теперь при обнаружении CSSValueList мы заменяем объект backgroundImage на его же первый элемент и работаем с ним как раньше. Перезапустим браузер и проверим — вуаля! 14 картинок, включая data:URI. Теперь можно упаковать содержимое папки расширения в zip-архив, дать ему расширение .xpi и использовать для установки в будущем.
Update: FF 3.6–4.0b12, Web Developer 1.1.9, Windows 7.
Попробуем это поправить.
Заходим в папку профиля, далее extensions/{c45c406e-ab73-11d8-be73-000a95be3b12}. Это папка расширения. Интересующий нас функционал в виде скриптов упакован в chrome/webdeveloper.jar, распаковываем его (в chrome должны появится папки content, locale и skin). Теперь нужно сделать так, чтобы браузер использовал именно распакованный контент, для этого подкорректируем chrome.manifest в корневой папке, заменив там все упоминания jar:chrome/webdeveloper.jar! на просто chrome. Для верности удаляем или переименовываем .jar-файл, перезапускаем браузер и проверяем работу расширения. Пока все работает.
Теперь обратим внимание на папку content, которую мы извлекли из .jar-архива, точнее, на содержимое вложенной в нее папки webdeveloper. Можно залезть в файл webdeveloper.xul, который мы видели в манифесте в строке overlay, найти в нем нужный пункт меню и посмотреть, что у него прописано в oncommand. А можно заметить среди прочего файл images.js (скорее всего, именно он отвечает за операции с графикой) и поискать в нем information. И тот, и другой путь быстро приводят нас к функции webdeveloper_viewImageInformation(), в которой мы видим следующую строку:
imageList = webdeveloper_getImagesForDocument(pageDocument, true, true);
Находим эту функцию в файле content/webdeveloper/common/dom.js и смотрим на код, отвечающий за выборку фоновых картинок:
else if(includeBackgroundImages)
{
computedStyle = element.ownerDocument.defaultView.getComputedStyle(element, null);
// If the computed style is set
if(computedStyle)
{
backgroundImage = computedStyle.getPropertyCSSValue("background-image");
// If this element has a background image and it is a URI
if(backgroundImage && backgroundImage.primitiveType == cssURI)
{
image = new Image();
image.src = backgroundImage.getStringValue();
// If this is not a chrome image
if(image.src.indexOf("chrome://") != 0)
{
images.push(image);
}
}
}
}
Очевидно, загвоздка где-то в этом месте. Я не умею отлаживать расширения, поэтому просто добавил пару алертов и выяснил, что проверяемое свойство primitiveType всегда undefined. Посмотрим на документацию: у объекта CSSValue имеется свойство cssValueType, и, по логике вещей и автора расширения, у background-image оно должно быть равно CSS_PRIMITIVE_VALUE (1). Однако на практике оно оказывается равно CSS_VALUE_LIST (2), почему — непонятно. Но бог с ним, посмотрим на интерфейс CSSValueList, который реализует наш объект в этом случае. У него имеется метод item(), возвращающий объект CSSValue, им и воспользуемся:
else if(includeBackgroundImages)
{
computedStyle = element.ownerDocument.defaultView.getComputedStyle(element, null);
// If the computed style is set
if(computedStyle)
{
backgroundImage = computedStyle.getPropertyCSSValue("background-image");
// If this element has a background image
if(backgroundImage)
{
// If property is CSSValueList (WTF?)
if (backgroundImage.cssValueType == backgroundImage.CSS_VALUE_LIST)
{
backgroundImage = backgroundImage.item(0);
}
// If background image is a URI
if (backgroundImage.primitiveType == cssURI)
{
image = new Image();
image.src = backgroundImage.getStringValue();
}
// If this is an image and not a chrome image
if(image && image.src && image.src.indexOf("chrome://") != 0)
{
images.push(image);
}
}
}
}
Теперь при обнаружении CSSValueList мы заменяем объект backgroundImage на его же первый элемент и работаем с ним как раньше. Перезапустим браузер и проверим — вуаля! 14 картинок, включая data:URI. Теперь можно упаковать содержимое папки расширения в zip-архив, дать ему расширение .xpi и использовать для установки в будущем.
Update: FF 3.6–4.0b12, Web Developer 1.1.9, Windows 7.