chromium CSS の簡単な解析 (1) デフォルト htmlCss (chromium39)_html/css_WEB-ITnose の生成ロジック

リソースをロードした後、ブラウザはリソースの解析とレンダリングを開始します。クロムの場合、Web ページ用のデフォルト CSS、またはデフォルト CSS があります。

1. デフォルトのスタイルシートの形成

これらの CSS とは何ですか?ファイルを簡単に見てみましょう: CSSDefaultStyleSheets.h

このファイルにはいくつかのメンバー変数が定義されています:

    OwnPtrWillBeMember<RuleSet> m_defaultStyle;    OwnPtrWillBeMember<RuleSet> m_defaultViewportStyle;    OwnPtrWillBeMember<RuleSet> m_defaultQuirksStyle;    OwnPtrWillBeMember<RuleSet> m_defaultPrintStyle;    OwnPtrWillBeMember<RuleSet> m_defaultViewSourceStyle;    OwnPtrWillBeMember<RuleSet> m_defaultXHTMLMobileProfileStyle;    OwnPtrWillBeMember<RuleSet> m_defaultTransitionStyle;    RefPtrWillBeMember<StyleSheetContents> m_defaultStyleSheet;    RefPtrWillBeMember<StyleSheetContents> m_viewportStyleSheet;    RefPtrWillBeMember<StyleSheetContents> m_quirksStyleSheet;    RefPtrWillBeMember<StyleSheetContents> m_svgStyleSheet;    RefPtrWillBeMember<StyleSheetContents> m_mathmlStyleSheet;    RefPtrWillBeMember<StyleSheetContents> m_mediaControlsStyleSheet;    RefPtrWillBeMember<StyleSheetContents> m_fullscreenStyleSheet;

名前から、それがどのようなシーンまたは関数に作用するのかを一般的に知ることもできます。

ここでは、Webページ全体の表示スタイルに関わるm_defaultStyleSheetを見てみましょう。

1. この変数の初期化を見てみましょう。

クラス CSSDefaultStyleSheets のコンストラクターには、コード セグメント

    String defaultRules = String(htmlCss, sizeof(htmlCss)) + RenderTheme::theme().extraDefaultStyleSheet();    m_defaultStyleSheet = parseUASheet(defaultRules);    m_defaultStyle->addRulesFromSheet(defaultStyleSheet(), screenEval());

2 があります。上記のコード セグメント内のdefaultRules の構成を分析してみましょう。

これは 2 つの部分で構成されています: String(htmlCss, sizeof(htmlCss)) と RenderTheme::theme().extraDefaultStyleSheet()
3. まず最初の部分を見てみましょう: String(htmlCss, sizeof(htmlCss) )
ここには htmlCss という変数があります。この変数は次のファイルで定義されています: UserAgentStyleSheets.h

このファイルは out ディレクトリにあり、コンパイル プロセス中に形成されます。

このファイルの構成を見てみましょう。

まずファイルを見てみましょう: core_generated.gyp

その中にはコード セグメントがあります:

 {          'action_name': 'UserAgentStyleSheets',          'variables': {            'scripts': [              '../build/scripts/make-file-arrays.py',            ],            'stylesheets': [              'css/html.css',              'css/quirks.css',              'css/view-source.css',              'css/themeChromium.css',              'css/themeChromiumAndroid.css',              'css/themeChromiumLinux.css',              'css/themeChromiumSkia.css',              'css/themeInputMultipleFields.css',              'css/themeMac.css',              'css/themeWin.css',              'css/themeWinQuirks.css',              'css/svg.css',              'css/navigationTransitions.css',              'css/mathml.css',              'css/mediaControls.css',              'css/mediaControlsAndroid.css',              'css/fullscreen.css',              'css/xhtmlmp.css',              'css/viewportAndroid.css',             ],          },          'inputs': [            '<@(scripts)',            '<@(stylesheets)'          ],          'outputs': [            '<(blink_core_output_dir)/UserAgentStyleSheets.h',            '<(blink_core_output_dir)/UserAgentStyleSheetsData.cpp',          ],          'action': [            'python',            '<@(scripts)',            '--namespace',            'blink',            '--out-h=<(blink_core_output_dir)/UserAgentStyleSheets.h',            '--out-cpp=<(blink_core_output_dir)/UserAgentStyleSheetsData.cpp',            '<@(stylesheets)',          ],        },

この Python コードを通じて、UserAgentStyleSheetsData.cpp とそのヘッダー ファイルがこのコンパイルされたスクリプトを通じて形成されることがわかります。 。私たちが探している htmlCSS は、html.css 内のファイルに関連しています。他の CSS は他のスタイルシートに関連しています。

興味のある学生は、html.css のコンテンツをご覧ください。

4. 2 番目の部分を見てみましょう: RenderTheme::theme().extraDefaultStyleSheet()

このメソッドはファイル RenderTheme.cpp にあります:

String RenderTheme::extraDefaultStyleSheet(){    StringBuilder runtimeCSS;    if (RuntimeEnabledFeatures::dialogElementEnabled()) {        runtimeCSS.appendLiteral("dialog:not([open]) { display: none; }");        runtimeCSS.appendLiteral("dialog { position: absolute; left: 0; right: 0; width: -webkit-fit-content; height: -webkit-fit-content; margin: auto; border: solid; padding: 1em; background: white; color: black;}");        runtimeCSS.appendLiteral("dialog::backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.1); }");    }    if (RuntimeEnabledFeatures::contextMenuEnabled()) {        runtimeCSS.appendLiteral("menu[type=\"popup\" i] { display: none; }");    }    return runtimeCSS.toString();}

このデフォルトのスタイルシートは初期化されるだけです一度 。ここではその構成を紹介しますので、興味のある方は引き続き学習してください。デフォルトのスタイルシートを変更することで、多くのことが可能になります。

次に、このデフォルトのスタイルシートの作成ロジックを見てみましょう。

2. デフォルトのスタイルシートの作成ロジック

DocumentLoader::finishedLoading メソッドから始めましょう。

メソッド DocumentLoader::finishedLoading は、同じファイル内のメソッドを呼び出します: DocumentLoader::endWriting

このメソッドから始まる呼び出しスタックは次のとおりです:

W/WebKit  ( 8157): DocumentLoader::endWritingW/WebKit  ( 8157): DocumentWriter::end() W/WebKit  ( 8157): HTMLDocumentParser::finish()W/WebKit  ( 8157): HTMLDocumentParser::attemptToEnd()W/WebKit  ( 8157): HTMLDocumentParser::prepareToStopParsing()

prepareToStopParsing メソッドから始まる呼び出しロジックは次のとおりです:

れーい