2009-06-24

Gecko で JavaScript が無効なときに <canvas> の代替コンテントを表示するためのプチハック

ポスト @ 16:44:22 | mozilla

<canvas> 要素はスクリプトによってグラフィックスを描くための要素ですが、それゆえに、スクリプトと視覚メディアが利用できなければ、直接情報を提供することができません。そのため HTML 5 仕様では <canvas> はその要素のコンテンツとして代替コンテントを持てるとしています。この代替コンテントは (インタラクティヴな視覚的メディアで) スクリプトが無効な場合や視覚的でないメディアに対して提供されることになっています。

とはいえ、今のところ Gecko はそのどちらの場合にも代替コンテントを提供していません。この記事では JavaScript が無効なときに <canvas> の代替コンテントを表示するハックを紹介します。

手順

  1. mozilla-central レポジトリからソースコードをとってくる
  2. 以下のパッチをあてる
  3. ビルドする

スクリーンショット

スクリーンショット

パッチ

diff -r 1aa35fa65790 layout/base/nsCSSFrameConstructor.cpp
--- a/layout/base/nsCSSFrameConstructor.cpp Tue Jun 23 22:11:43 2009 -0400
+++ b/layout/base/nsCSSFrameConstructor.cpp Wed Jun 24 16:50:56 2009 +0900
@@ -3739,7 +3739,7 @@ nsCSSFrameConstructor::FindHTMLData(nsIC
     SIMPLE_TAG_CREATE(iframe, NS_NewSubDocumentFrame),
     SIMPLE_TAG_CREATE(spacer, NS_NewSpacerFrame),
     COMPLEX_TAG_CREATE(button, &nsCSSFrameConstructor::ConstructButtonFrame),
-    SIMPLE_TAG_CREATE(canvas, NS_NewHTMLCanvasFrame),
+    SIMPLE_TAG_CHAIN(canvas, nsCSSFrameConstructor::FindCanvasData),
 #if defined(MOZ_MEDIA)
     SIMPLE_TAG_CREATE(video, NS_NewHTMLVideoFrame),
     SIMPLE_TAG_CREATE(audio, NS_NewHTMLVideoFrame),
@@ -3846,6 +3846,18 @@ nsCSSFrameConstructor::FindObjectData(ns
                        sObjectData, NS_ARRAY_LENGTH(sObjectData));
 }
 
+/* static */
+const nsCSSFrameConstructor::FrameConstructionData*
+nsCSSFrameConstructor::FindCanvasData(nsIContent *aContent,
+                                      nsStyleContext *aStyleContext) {
+  if (!aContent->GetOwnerDoc()->IsScriptEnabled())
+    return nsnull;
+
+  static const FrameConstructionData sCanvasData =
+    SIMPLE_FCDATA(NS_NewHTMLCanvasFrame);
+  return &sCanvasData;
+}
+
 nsresult
 nsCSSFrameConstructor::ConstructFrameFromItemInternal(FrameConstructionItem& aItem,
                                                       nsFrameConstructorState& aState,
diff -r 1aa35fa65790 layout/base/nsCSSFrameConstructor.h
--- a/layout/base/nsCSSFrameConstructor.h   Tue Jun 23 22:11:43 2009 -0400
+++ b/layout/base/nsCSSFrameConstructor.h   Wed Jun 24 16:50:56 2009 +0900
@@ -1057,6 +1057,8 @@ private:
     FindInputData(nsIContent* aContent, nsStyleContext* aStyleContext);
   static const FrameConstructionData*
     FindObjectData(nsIContent* aContent, nsStyleContext* aStyleContext);
+  static const FrameConstructionData*
+    FindCanvasData(nsIContent *aContent, nsStyleContext* aStyleContext);
 
   /* Construct a frame from the given FrameConstructionItem.  This function
      will handle adding the frame to frame lists, processing children, adding

参考