Brief analysis of chromium CSS (1) The formation logic of default htmlCss (chromium39)_html/css

Brief analysis of chromium CSS (1) The formation logic of default htmlCss (chromium39)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:48:43

Original

1431 people have browsed it

After loading the resource, the browser begins to parse and render the resource. For chromium, it has a default CSS for web pages, or default CSS.

1. The formation of the default style sheet

What are these CSSs? Let’s take a look at the file in blink: CSSDefaultStyleSheets.h

Several member variables are defined in this file:

    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;

Copy after login

From the name, We can also generally know what scene or function it is used for.

Here, let’s take a look at m_defaultStyleSheet. This style sheet is related to the display style of the entire web page.

1. Let’s take a look at the initialization of this variable.

In the constructor of class CSSDefaultStyleSheets, there is a code segment:

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

Copy after login

2. Let’s analyze the composition of defaultRules in the above code segment.

It consists of two parts: String(htmlCss, sizeof(htmlCss)) and RenderTheme::theme().extraDefaultStyleSheet()
3. Let’s take a look at the first part first: String( htmlCss, sizeof(htmlCss))
There is a variable here called htmlCss. This variable is defined in the file: UserAgentStyleSheets.h

This file is in the out directory and is formed during the compilation process.

Let’s take a look at the formation of this file.

First look at the file: core_generated.gyp

There is a code segment in it:

 {          '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)',          ],        },

Copy after login

Through this python code we know that UserAgentStyleSheetsData. cpp and its header files are formed through this compilation script. The htmlCSS we are looking for is related to the file inside: html.css. Other css are related to other style sheets.

Interested students can take a look at the html.css content.

4. Let’s take a look at the second part: RenderTheme::theme().extraDefaultStyleSheet()

This method is in the file 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();}

Copy after login

This default style sheet will only be initialized once. Its composition is introduced here, and interested students can continue to study it. A lot can be done by changing the default style sheet.

Next, let’s take a look at the creation logic of this default style sheet.

2. The creation logic of the default style sheet

Let’s start from the DocumentLoader::finishedLoading method.

Method DocumentLoader::finishedLoading will call the method in the same file: DocumentLoader::endWriting

The call stack starting from this method is as follows:

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

Copy after login

The calling logic starting from the prepareToStopParsing method is as follows:

W/WebKit  ( 8157): HTMLDocumentParser::prepareToStopParsing()  W/WebKit  ( 8157): HTMLDocumentParser::attemptToRunDeferredScriptsAndEnd()W/WebKit  ( 8157): HTMLDocumentParser::end()W/WebKit  ( 8157): HTMLTreeBuilder::finished()W/WebKit  ( 8157): HTMLConstructionSite::finishedParsing()W/WebKit  ( 8157): Document::finishedParsing()W/WebKit  ( 8157): FrameLoader::finishedParsing() W/WebKit  ( 8157): Document::explicitClose()W/WebKit  ( 8157): FrameLoader::checkCompleted()W/WebKit  ( 8157): FrameLoader::completed()W/WebKit  ( 8157): FrameView::maintainScrollPositionAtAnchor W/WebKit  ( 8157): FrameLoader::checkLoadComplete()W/WebKit  ( 8157): FrameLoader::checkLoadCompleteForThisFrame()W/WebKit  ( 8157): updateRenderTreeIfNeeded() W/WebKit  ( 8157): Document::updateRenderTreeW/WebKit  ( 8157): Document::updateStyleW/WebKit  ( 8157): Document::ensureStyleResolver()W/WebKit  ( 8157): StyleResolver& ensureResolver()W/WebKit  ( 8157): StyleEngine::createResolver()W/WebKit  ( 8157): StyleEngine::appendActiveAuthorStyleSheets()W/WebKit  ( 8157): StyleResolver::finishAppendAuthorStyleSheets()W/WebKit  ( 8157): StyleResolver::collectFeatures()W/WebKit  ( 8157): CSSDefaultStyleSheets::instance()W/WebKit  ( 8157): CSSDefaultStyleSheets::CSSDefaultStyleSheets()

Copy after login