Analysis of chromium CSS (i) The formation logic of the default htmlcss (CHROMIUM39)

After the browser has loaded the resource, it begins to parse and render the resource. For chromium, it has a default CSSfor the Web page, or a default CSS.

I. Formation of the default style sheet

How many of these css are there? Let's take a look at the files 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;

From a name, we can also generally know what the scene or function is.

Here, let's look at M_defaultstylesheet, a style sheet that is related to the display style of the entire Web page.

1. Let's look at the initialization of this variable.

In the constructor for class Cssdefaultstylesheets , there is a code snippet:

    String defaultrules = string (htmlcss, sizeof (HTMLCSS)) + Rendertheme::theme (). Extradefaultstylesheet ();    M_defaultstylesheet = Parseuasheet (defaultrules);    M_defaultstyle->addrulesfromsheet (Defaultstylesheet (), Screeneval ());

2. Let's analyze the composition of the Defaultrules in the code snippet above.

It is composed 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))
Here is a variable that is HTMLCSS, which is defined in the file: UserAgentStyleSheets.h

This file is formed during the compilation process in the Out directory.

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

First look at the file: Core_generated.gyp

There are code snippets:

 {' 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/themechromium Android.css ', ' css/themechromiumlinux.css ', ' css/themechromiumskia.css ', ' Css/theme Inputmultiplefields.css ', ' css/thememac.css ', ' css/themewin.css ', ' Css/themewinquir              Ks.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 ': [' &L t;@ (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)/use RAgentStyleSheets.h ', '--out-cpp=< (blink_core_output_dir)/useragentstylesheetsdata.cpp ', ' <@ (s Tylesheets) ',],},

Through this Python code we know that the UserAgentStyleSheetsData.cpp and its header files are formed by the script that compiles the section. The htmlcss we are looking for is related to the document in this area: Html.css. Other CSS is related to other style sheets.

Interested students can look at the html.css content.

4. Let's take a look at Part two: Rendertheme::theme (). Extradefaultstylesheet ()

This method is in the file RenderTheme.cpp:

String Rendertheme::extradefaultstylesheet () {    StringBuilder runtimecss;    if (runtimeenabledfeatures::d ialogelementenabled ()) {        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 sheet is initialized only once. Here is a description of its composition, interested students can continue to study under. By changing the default style sheet, you can do a lot of things.

Let's take a look at the creation logic for this default style sheet.

Two. Creation logic for default style sheets

We look at the Documentloader::finishedloading method.

Method Documentloader::finishedloading, the method in the same file is called: 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::p reparetostopparsing ()

The invocation logic starting from the Preparetostopparsing method is as follows:

W/webkit (8157): Htmldocumentparser::p reparetostopparsing () 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 (815 7): 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 ()

Analysis of chromium CSS (i) The formation logic of the default htmlcss (CHROMIUM39)