5 марта 2011

Web Developer — как починить View Image Information

Разработка веб-сайтов
В какой-то момент во всеми любимом 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(), в которой мы видим следующую строку:

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.
Теги:firefoxрасширения firefoxweb developerview image informationинформация об изображениях
Хабы: Разработка веб-сайтов
+2
1,1k 2
Комментарии 6
Похожие публикации
Лучшие публикации за сутки