Analysis of chromium CSS (1) formation logic of htmlCss by default (chromium39)
After the browser loads the resource, it starts to parse and render the resource. For chromium, it has a default CSS for the webpage, or a default CSS.
I. Creation of default Style Sheets
Which of the following types of CSS are available? Let's take a look at the blink file: cssdefastystylesheets. h
Several member variables are defined in this file:
OwnPtrWillBeMember
m_defaultStyle; OwnPtrWillBeMember
m_defaultViewportStyle; OwnPtrWillBeMember
m_defaultQuirksStyle; OwnPtrWillBeMember
m_defaultPrintStyle; OwnPtrWillBeMember
m_defaultViewSourceStyle; OwnPtrWillBeMember
m_defaultXHTMLMobileProfileStyle; OwnPtrWillBeMember
m_defaultTransitionStyle; RefPtrWillBeMember
m_defaultStyleSheet; RefPtrWillBeMember
m_viewportStyleSheet; RefPtrWillBeMember
m_quirksStyleSheet; RefPtrWillBeMember
m_svgStyleSheet; RefPtrWillBeMember
m_mathmlStyleSheet; RefPtrWillBeMember
m_mediaControlsStyleSheet; RefPtrWillBeMember
m_fullscreenStyleSheet;
From the name, we can also know what scenarios or functions it is used.
Here, let's take a look at m_defastystylesheet, which 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 CSSDefaultStyleSheets constructor, there is a code segment:
String defaultRules = String(htmlCss, sizeof(htmlCss)) + RenderTheme::theme().extraDefaultStyleSheet(); m_defaultStyleSheet = parseUASheet(defaultRules); m_defaultStyle->addRulesFromSheet(defaultStyleSheet(), screenEval());
2. Let's analyze the structure 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: String (htmlCss, sizeof (htmlCss ))
The variable htmlCss is defined in the file: UserAgentStyleSheets. h.
This file is generated during compilation in the out directory.
Let's take a look at the formation of this file.
First look at the file: core_generated.gyp
Code segment:
{ '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)', ], },
Through this python code, we know that UserAgentStyleSheetsData. cpp and its header files are formed through this section of the compilation script. The htmlCSS we are looking for is related to the following file: html.css. Other css types are related to other style sheets.
For more information, see html.css.
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();}
This default style table is initialized only once. This section describes its composition. If you are interested, you can continue to study it. By changing the default style sheet, you can do many things.
Next, let's take a look at the creation logic of this default style table.
Ii. Creation logic of the default style sheet
Let's start with the DocumentLoader: finishedLoading method.
The method DocumentLoader: finishedLoading will call the method in the same file: DocumentLoader: endWriting
The call stack starting with 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()
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()